Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@salutejs/core-components-mobile

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@salutejs/core-components-mobile - npm Package Compare versions

Comparing version 0.4.0-alpha-b34d17e.0 to 0.4.0

@@ -31,16 +31,27 @@ "use strict";

var ThemeProvider_1 = require("../ThemeProvider");
var FocusableWrapper_1 = require("../FocusableWrapper");
var FocusableWrapper_1 = require("../FocusableWrapper/FocusableWrapper");
var Button_styles_1 = require("./Button.styles");
var Spinner = (0, Spinner_1.spinnerComponent)();
var buttonCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, _c = props.pin, pin = _c === void 0 ? 'square-square' : _c, _d = props.stretching, stretching = _d === void 0 ? 'auto' : _d, _e = props.spacing, spacing = _e === void 0 ? 'packed' : _e, children = props.children, value = props.value, text = props.text, contentLeft = props.contentLeft, contentRight = props.contentRight, isLoading = props.isLoading, loader = props.loader, disabled = props.disabled, externalStyle = props.style, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["view", "size", "pin", "stretching", "spacing", "children", "value", "text", "contentLeft", "contentRight", "isLoading", "loader", "disabled", "style", "onBlur", "onFocus"]);
var _f = (0, react_1.useState)(false), focused = _f[0], setFocused = _f[1];
var _g = (0, react_1.useState)(false), pressed = _g[0], setPressed = _g[1];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, _c = props.pin, pin = _c === void 0 ? 'square-square' : _c, _d = props.stretching, stretching = _d === void 0 ? 'auto' : _d, children = props.children, text = props.text, contentLeft = props.contentLeft, contentRight = props.contentRight, isLoading = props.isLoading, loader = props.loader, disabled = props.disabled, externalStyle = props.style, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "pin", "stretching", "children", "text", "contentLeft", "contentRight", "isLoading", "loader", "disabled", "style", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _e = (0, react_1.useState)(false), focused = _e[0], setFocused = _e[1];
var _f = (0, react_1.useState)(false), pressed = _f[0], setPressed = _f[1];
var txt = typeof children === 'string' ? children : text;
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];
var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;
var style = (0, react_1.useMemo)(function () {
return (0, Button_styles_1.getStyle)(theme, disabledOpacity, viewStyle, sizeStyle, pressed, spacing, stretching, pin, isLoading, externalStyle);
}, [view, size, pressed, disabled, focused, spacing, stretching, isLoading, pin, theme === null || theme === void 0 ? void 0 : theme.mode]);
return (0, Button_styles_1.getStyle)(theme, disabledOpacity, viewStyle, sizeStyle, pressed, stretching, pin, isLoading, externalStyle);
}, [view, size, pressed, disabled, stretching, pin, theme === null || theme === void 0 ? void 0 : theme.mode]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperFocus = function (event) {

@@ -64,3 +75,10 @@ if (onFocus) {

};
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, __assign({ disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPressIn: onPressIn, onPressOut: onPressOut }, rest, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.root, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.background }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.contentWrapper, children: [contentLeft && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.contentLeft, children: (0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentLeftIconColor, children: contentLeft }) })), txt ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.text, children: txt }) : children] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.contentWrapper, children: [!contentRight && value && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.value, children: value }), contentRight && !value && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.contentRight, children: (0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentRightIconColor, children: contentRight }) }))] })] }), isLoading && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.loader, children: loader || ((0, jsx_runtime_1.jsx)(Spinner, { color: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.color, height: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize, width: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize })) }))] }) })));
return ((0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.radius,
borderWidth: 2,
},
}, hasFocus: react_native_1.Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPressIn: onPressIn, onPressOut: onPressOut }, navigationProps, rest, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [contentLeft, txt ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.text, children: txt }) : children, contentRight] }), isLoading && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.loader, children: loader || ((0, jsx_runtime_1.jsx)(Spinner, { color: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.color, height: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize, width: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize })) }))] }) })));
}; };

@@ -67,0 +85,0 @@ exports.buttonCore = buttonCore;

import { TextStyle, ViewStyle } from 'react-native';
import { Theme } from '../ThemeProvider';
import { Stretching } from '../../utils';
import { ButtonConfig, Spacing } from './Button.types';
import { ButtonConfig, Stretching } from './Button.types';
import { Pin } from './utils';
export interface Style {
root?: ViewStyle;
background?: ViewStyle;
container?: ViewStyle;
wrapper?: ViewStyle;
loader?: ViewStyle;
contentWrapper?: ViewStyle;
contentLeft?: ViewStyle;
contentRight?: ViewStyle;
text?: TextStyle;
value?: TextStyle;
}
export declare const getStyle: (theme?: Theme, disabledOpacity?: number, viewStyle?: ButtonConfig['variations']['view'][string], sizeStyle?: ButtonConfig['variations']['size'][string], pressed?: boolean, spacing?: Spacing, stretching?: Stretching, pin?: Pin, isLoading?: boolean, externalStyle?: Style) => Style;
export declare const getStyle: (theme?: Theme, disabledOpacity?: number, viewStyle?: ButtonConfig['variations']['view'][string], sizeStyle?: ButtonConfig['variations']['size'][string], pressed?: boolean, stretching?: Stretching, pin?: Pin, isLoading?: boolean, externalStyle?: Style) => Style;

@@ -18,40 +18,21 @@ "use strict";

var utils_2 = require("./utils");
var getStyle = function (theme, disabledOpacity, viewStyle, sizeStyle, pressed, spacing, stretching, pin, isLoading, externalStyle) {
var _a;
if (!viewStyle || !sizeStyle || !pin || !spacing || !theme) {
var getStyle = function (theme, disabledOpacity, viewStyle, sizeStyle, pressed, stretching, pin, isLoading, externalStyle) {
if (!viewStyle || !sizeStyle || !pin || !theme) {
return {
root: {},
background: {},
container: {},
wrapper: {},
loader: {},
contentWrapper: {},
contentLeft: {},
contentRight: {},
text: {},
value: {},
};
}
var widthSize = (0, utils_1.getWidthSize)(stretching, sizeStyle.width);
var widthSize = (0, utils_2.getWidthSize)(stretching, sizeStyle.width);
var buttonBorderRadius = (0, utils_2.getRoundnessMatrix)(pin, sizeStyle.radius, sizeStyle.height);
var fontFace = (0, utils_1.getFontFace)(sizeStyle.fontFamilyRef, sizeStyle.fontStyle, sizeStyle.fontWeight, theme);
var spacingMap = {
packed: 'center',
'space-between': 'space-between',
};
return react_native_1.StyleSheet.create({
root: __assign(__assign({ opacity: disabledOpacity, position: 'relative', alignItems: 'center', justifyContent: 'center', paddingLeft: sizeStyle.padding, paddingRight: sizeStyle.padding, height: sizeStyle.height }, widthSize), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.root),
background: __assign(__assign({ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
// TODO: Подумать как обработать кейс, когда кнопка выделена и на неё происходит нажатие
backgroundColor: pressed ? viewStyle.backgroundColorActive : viewStyle.backgroundColor, transform: [
{
scale: (_a = viewStyle.scale) !== null && _a !== void 0 ? _a : 1,
},
] }, buttonBorderRadius), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.background),
wrapper: __assign({ width: '100%', opacity: isLoading ? 0 : 1, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: stretching === 'auto' ? undefined : spacingMap[spacing] }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.wrapper),
root: __assign({ opacity: disabledOpacity }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.root),
container: __assign(__assign(__assign({ alignItems: 'center', justifyContent: 'center', borderRadius: sizeStyle.radius, paddingLeft: sizeStyle.padding, paddingRight: sizeStyle.padding, backgroundColor: pressed ? viewStyle.backgroundColorActive : viewStyle.backgroundColor, height: sizeStyle.height }, widthSize), buttonBorderRadius), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.container),
wrapper: __assign({ width: '100%', gap: sizeStyle.contentGap, opacity: isLoading ? 0 : 1, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: stretching === 'auto' ? undefined : 'center' }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.wrapper),
loader: __assign({ position: 'absolute' }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.loader),
contentWrapper: __assign({ display: 'flex', flexDirection: 'row' }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.contentWrapper),
contentLeft: __assign({ paddingRight: sizeStyle.contentGap }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.contentLeft),
contentRight: __assign({ paddingLeft: sizeStyle.contentGap }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.contentRight),
text: __assign(__assign(__assign({ color: viewStyle.color }, fontFace), { fontSize: sizeStyle.fontSize, letterSpacing: sizeStyle.letterSpacing, lineHeight: sizeStyle.lineHeight }), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.text),
value: __assign(__assign(__assign({ opacity: 0.56, paddingLeft: sizeStyle.valueGap, color: viewStyle.color }, fontFace), { fontSize: sizeStyle.fontSize, letterSpacing: sizeStyle.letterSpacing, lineHeight: sizeStyle.lineHeight }), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.value),
});

@@ -58,0 +39,0 @@ };

@@ -1,8 +0,8 @@

import { PressableProps } from 'react-native';
import { ButtonProps as ButtonPropsNative } from 'react-native';
import { ReactNode } from 'react';
import { Stretching } from '../../utils/getWidthSize';
import { Focusable } from '../FocusableWrapper';
import { Pin } from './utils';
import { Style } from './Button.styles';
export type Spacing = 'packed' | 'space-between';
interface CustomButtonProps extends Omit<PressableProps, 'style'> {
export type Stretching = 'fixed' | 'filled' | 'auto';
interface CustomButtonProps extends Omit<ButtonPropsNative, 'onPress' | 'title'>, Focusable {
/**

@@ -13,10 +13,2 @@ * Объект для стилизации компонента

/**
* Расположение контента внутри кнопки
*/
spacing?: Spacing;
/**
* Значение кнопки
*/
value?: string;
/**
* Контент кнопки

@@ -86,5 +78,2 @@ */

spinnerColor: string;
contentLeftIconColor: string;
contentRightIconColor: string;
scale?: number;
};

@@ -99,3 +88,2 @@ };

contentGap: number;
valueGap: number;
fontFamilyRef: string;

@@ -115,16 +103,4 @@ fontWeight: string;

};
focused: {
true: {
color: string;
backgroundColor: string;
colorActive: string;
backgroundColorActive: string;
spinnerColor: string;
contentLeftIconColor: string;
contentRightIconColor: string;
scale: number;
};
};
};
}
export {};
export { getRoundnessMatrix } from './getRoundnessMatrix';
export type { Pin } from './getRoundnessMatrix';
export { getWidthSize } from './getWidthSize';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getRoundnessMatrix = void 0;
exports.getWidthSize = exports.getRoundnessMatrix = void 0;
var getRoundnessMatrix_1 = require("./getRoundnessMatrix");
Object.defineProperty(exports, "getRoundnessMatrix", { enumerable: true, get: function () { return getRoundnessMatrix_1.getRoundnessMatrix; } });
var getWidthSize_1 = require("./getWidthSize");
Object.defineProperty(exports, "getWidthSize", { enumerable: true, get: function () { return getWidthSize_1.getWidthSize; } });
//# sourceMappingURL=index.js.map

@@ -30,7 +30,11 @@ "use strict";

var ThemeProvider_1 = require("../ThemeProvider");
var FocusableWrapper_1 = require("../FocusableWrapper");
var Checkbox_styles_1 = require("./Checkbox.styles");
var IconsSvg_1 = require("./IconsSvg");
var checkboxCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, indeterminate = props.indeterminate, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, focused = props.focused, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, rest = __rest(props, ["view", "size", "label", "description", "indeterminate", "singleLine", "disabled", "checked", "focused", "style", "onValueChange", "onPress"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, indeterminate = props.indeterminate, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "label", "description", "indeterminate", "singleLine", "disabled", "checked", "style", "onValueChange", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _e = (0, react_1.useState)(false), focused = _e[0], setFocused = _e[1];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];

@@ -44,3 +48,12 @@ var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;

return (0, Checkbox_styles_1.getStyle)(theme, disabledOpacity, onlyDescription, checked || indeterminate, viewStyle, sizeStyle, externalStyle);
}, [view, size, label, checked, indeterminate, description, disabled, focused, theme === null || theme === void 0 ? void 0 : theme.mode]);
}, [view, size, label, checked, indeterminate, description, disabled, theme === null || theme === void 0 ? void 0 : theme.mode]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperPress = function (event) {

@@ -54,3 +67,22 @@ if (onValueChange) {

};
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, __assign({ style: style.root, disabled: disabled, ref: externalRef, onPress: onWrapperPress }, rest, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.trigger, children: indeterminate ? ((0, jsx_runtime_1.jsx)(IconsSvg_1.Indeterminate, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) : ((0, jsx_runtime_1.jsx)(IconsSvg_1.Done, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) }), hasContent && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.content, children: [label && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
var onWrapperFocus = function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
};
var onWrapperBlur = function (event) {
if (onBlur) {
onBlur(event);
}
setFocused(false);
};
return ((0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerBorderRadius,
borderWidth: 2,
},
}, hasFocus: react_native_1.Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPress: onWrapperPress }, navigationProps, rest, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.trigger, children: indeterminate ? ((0, jsx_runtime_1.jsx)(IconsSvg_1.Indeterminate, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) : ((0, jsx_runtime_1.jsx)(IconsSvg_1.Done, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) }), hasContent && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.content, children: [label && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
}; };

@@ -57,0 +89,0 @@ exports.checkboxCore = checkboxCore;

@@ -1,5 +0,6 @@

import { PressableProps } from 'react-native';
import { ReactNode } from 'react';
/// <reference types="react" />
import { ViewProps } from 'react-native';
import { Focusable } from '../FocusableWrapper';
import { Style } from './Checkbox.styles';
interface CustomCheckboxProps extends Omit<PressableProps, 'style'> {
interface CustomCheckboxProps extends Omit<ViewProps, 'style'>, Focusable {
/**

@@ -28,7 +29,7 @@ * Объект для стилизации компонента

*/
label?: ReactNode;
label?: React.ReactNode;
/**
* Описание элемента
*/
description?: ReactNode;
description?: React.ReactNode;
/**

@@ -47,6 +48,2 @@ * Label и description в одну строку или с переносом строк

/**
* Компонент находится в фокусе
*/
focused?: boolean;
/**
* Вид чекбокса

@@ -111,13 +108,4 @@ */

};
focused: {
true: {
fillColor: string;
iconColor: string;
labelColor: string;
descriptionColor: string;
triggerBorderColor: string;
};
};
};
}
export {};

@@ -1,3 +0,4 @@

import { ReactElement } from 'react';
/// <reference types="react" />
import { View } from 'react-native';
import { FocusableWrapperProps } from './FocusableWrapper.types';
export declare const FocusableWrapper: ({ children, iconColor, style, focused }: FocusableWrapperProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
export declare const FocusableWrapper: import("react").ForwardRefExoticComponent<FocusableWrapperProps & import("react").RefAttributes<View>>;
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusableWrapper = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var FocusableWrapper = function (_a) {
var _b;
var children = _a.children, iconColor = _a.iconColor, style = _a.style, focused = _a.focused;
if (!children) {
return null;
}
return (0, react_1.cloneElement)(children, {
focused: focused,
style: [(_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.style, style],
color: iconColor,
});
};
exports.FocusableWrapper = FocusableWrapper;
var react_native_1 = require("react-native");
var FocusableWrapper_style_1 = require("./FocusableWrapper.style");
exports.FocusableWrapper = (0, react_1.forwardRef)(function (props, ref) {
var children = props.children, focused = props.focused, externalStyle = props.style, _a = props.hasFocus, hasFocus = _a === void 0 ? true : _a;
var style = (0, react_1.useMemo)(function () { return (0, FocusableWrapper_style_1.getStyle)(externalStyle, focused); }, [externalStyle, focused]);
return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, __assign({}, props, { style: style.root, ref: ref, children: [children, hasFocus && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.focus })] })));
});
//# sourceMappingURL=FocusableWrapper.js.map
import { ReactNode } from 'react';
export interface FocusableWrapperProps {
children: ReactNode;
import { PressableProps } from 'react-native';
export interface Focusable {
focusable?: PressableProps['focusable'];
hasTVPreferredFocus?: PressableProps['hasTVPreferredFocus'];
/**
* Установить цвет для children иконки
* Данное свойство работает только на TV
*/
iconColor?: string;
nextFocusUp?: number;
/**
* Установить`focused=true` для поддерживающего это свойство children компонента
* Данное свойство работает только на TV
*/
focused?: boolean;
nextFocusDown?: number;
/**
* Применить любой стиль children компоненту
* Данное свойство работает только на TV
*/
style?: any;
nextFocusRight?: number;
/**
* Данное свойство работает только на TV
*/
nextFocusLeft?: number;
/**
* Данное свойство работает только на TV
*/
nextFocusForward?: number;
onFocus?: PressableProps['onFocus'];
onBlur?: PressableProps['onBlur'];
onPress?: PressableProps['onPress'];
onLongPress?: PressableProps['onLongPress'];
}
export interface FocusStyle {
borderRadius?: number;
borderWidth?: number;
borderColor?: string;
}
export interface FocusableWrapperProps extends Omit<PressableProps, 'style'>, Focusable {
style?: {
root?: PressableProps['style'];
focus?: FocusStyle;
};
focused?: boolean;
hasFocus?: boolean;
children?: ReactNode;
}
export { FocusableWrapper } from './FocusableWrapper';
export type { Focusable } from './FocusableWrapper.types';

@@ -30,6 +30,10 @@ "use strict";

var ThemeProvider_1 = require("../ThemeProvider");
var FocusableWrapper_1 = require("../FocusableWrapper");
var Radiobox_styles_1 = require("./Radiobox.styles");
var radioboxCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, focused = props.focused, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, rest = __rest(props, ["view", "size", "label", "description", "singleLine", "disabled", "checked", "focused", "style", "onValueChange", "onPress"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "label", "description", "singleLine", "disabled", "checked", "style", "onValueChange", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _e = (0, react_1.useState)(false), focused = _e[0], setFocused = _e[1];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];

@@ -40,3 +44,12 @@ var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;

var numberOfLines = singleLine ? 1 : undefined;
var style = (0, react_1.useMemo)(function () { return (0, Radiobox_styles_1.getStyle)(theme, disabledOpacity, onlyDescription, checked, viewStyle, sizeStyle, externalStyle); }, [view, size, label, checked, description, focused, disabled, theme === null || theme === void 0 ? void 0 : theme.mode]);
var style = (0, react_1.useMemo)(function () { return (0, Radiobox_styles_1.getStyle)(theme, disabledOpacity, onlyDescription, checked, viewStyle, sizeStyle, externalStyle); }, [view, size, label, checked, description, disabled, theme === null || theme === void 0 ? void 0 : theme.mode]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperPress = function (event) {

@@ -50,3 +63,22 @@ if (onValueChange) {

};
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, __assign({ style: style.root, disabled: disabled, ref: externalRef, onPress: onWrapperPress }, rest, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.trigger }), hasContent && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.content, children: [label && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
var onWrapperFocus = function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
};
var onWrapperBlur = function (event) {
if (onBlur) {
onBlur(event);
}
setFocused(false);
};
return ((0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: ((sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerBorderRadius) || 0) - 4,
borderWidth: 2,
},
}, hasFocus: react_native_1.Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPress: onWrapperPress }, navigationProps, rest, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.trigger }), hasContent && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.content, children: [label && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
}; };

@@ -53,0 +85,0 @@ exports.radioboxCore = radioboxCore;

@@ -5,2 +5,2 @@ import { Animated, ViewStyle } from 'react-native';

backgroundColor: Animated.AnimatedInterpolation<string | number>;
}, ViewStyle, () => void, () => void];
}, ViewStyle, () => void, () => void, () => void];

@@ -34,11 +34,11 @@ "use strict";

};
(0, react_1.useEffect)(function () {
var onShortPress = function () {
react_native_1.Animated.parallel([
react_native_1.Animated.timing(backgroundColorValue, __assign({ toValue: checked ? 1 : 0 }, animatedSetting)),
react_native_1.Animated.timing(positionValue, __assign({ toValue: checked ? 1 : 0 }, animatedSetting)),
react_native_1.Animated.timing(backgroundColorValue, __assign({ toValue: checked ? 0 : 1 }, animatedSetting)),
react_native_1.Animated.timing(positionValue, __assign({ toValue: checked ? 0 : 1 }, animatedSetting)),
]).start(function () {
setRightPosition(checked ? 0 : 'auto');
setLeftPosition(checked ? 'auto' : 0);
setRightPosition(checked ? 'auto' : 0);
setLeftPosition(checked ? 0 : 'auto');
});
}, [checked]);
};
var trackBackgroundColorOn = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.trackBackgroundColorOn) || '';

@@ -75,5 +75,5 @@ var trackBackgroundColorOff = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.trackBackgroundColorOff) || '';

};
return [trackStyleAnimate, triggerStyleAnimate, onPressIn, onPressOut];
return [trackStyleAnimate, triggerStyleAnimate, onPressIn, onPressOut, onShortPress];
};
exports.useToggleAnimation = useToggleAnimation;
//# sourceMappingURL=useToggleAnimation.js.map

@@ -30,10 +30,14 @@ "use strict";

var ThemeProvider_1 = require("../ThemeProvider");
var FocusableWrapper_1 = require("../FocusableWrapper");
var Switch_styles_1 = require("./Switch.styles");
var hooks_1 = require("./hooks");
var switchCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, disabled = props.disabled, _c = props.checked, checked = _c === void 0 ? false : _c, externalStyle = props.style, focused = props.focused, onPress = props.onPress, onValueChange = props.onValueChange, rest = __rest(props, ["view", "size", "label", "description", "disabled", "checked", "style", "focused", "onPress", "onValueChange"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, disabled = props.disabled, _c = props.checked, checked = _c === void 0 ? false : _c, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "label", "description", "disabled", "checked", "style", "onValueChange", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _d = (0, react_1.useState)(false), focused = _d[0], setFocused = _d[1];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];
var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;
var _d = (0, hooks_1.useToggleAnimation)(checked, viewStyle, sizeStyle), trackStyleAnimate = _d[0], triggerStyleAnimate = _d[1], onPressIn = _d[2], onPressOut = _d[3];
var _e = (0, hooks_1.useToggleAnimation)(checked, viewStyle, sizeStyle), trackStyleAnimate = _e[0], triggerStyleAnimate = _e[1], onPressIn = _e[2], onPressOut = _e[3], onShortPress = _e[4];
var style = (0, react_1.useMemo)(function () { return (0, Switch_styles_1.getStyle)(theme, disabledOpacity, viewStyle, sizeStyle, externalStyle); }, [

@@ -43,15 +47,43 @@ view,

label,
focused,
disabled,
theme === null || theme === void 0 ? void 0 : theme.mode,
]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperPress = function (event) {
if (onValueChange) {
onValueChange(checked);
}
if (onPress) {
onPress(event);
}
if (onValueChange) {
onValueChange(checked);
onShortPress();
};
var onWrapperFocus = function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
};
return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, __assign({ style: style.root, disabled: disabled, ref: externalRef, onPress: onWrapperPress, onPressIn: onPressIn, onPressOut: onPressOut }, rest, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [label && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.label, numberOfLines: 1, children: label })), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style.track, trackStyleAnimate], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style.thumb, triggerStyleAnimate] }) })] }), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.description, numberOfLines: 1, children: description }))] })));
var onWrapperBlur = function (event) {
if (onBlur) {
onBlur(event);
}
setFocused(false);
};
return ((0, jsx_runtime_1.jsxs)(FocusableWrapper_1.FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.trackBorderRadius,
borderWidth: 2,
},
}, hasFocus: react_native_1.Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPress: onWrapperPress, onPressIn: onPressIn, onPressOut: onPressOut }, navigationProps, rest, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.wrapper, children: [label && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.label, numberOfLines: 1, children: label })), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style.track, trackStyleAnimate], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style.thumb, triggerStyleAnimate] }) })] }), description && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.description, numberOfLines: 1, children: description }))] })));
}; };

@@ -58,0 +90,0 @@ exports.switchCore = switchCore;

@@ -1,6 +0,7 @@

import { PressableProps } from 'react-native';
import { ReactNode } from 'react';
/// <reference types="react" />
import { ViewProps } from 'react-native';
import { Shadow } from '../ThemeProvider';
import { Focusable } from '../FocusableWrapper';
import { Style } from './Switch.styles';
interface CustomSwitchProps extends Omit<PressableProps, 'style'> {
interface CustomSwitchProps extends Omit<ViewProps, 'style'>, Focusable {
/**

@@ -29,3 +30,3 @@ * Объект для стилизации компонента

*/
description?: ReactNode;
description?: React.ReactNode;
/**

@@ -36,6 +37,2 @@ * Свитч неактивен

/**
* Компонент находится в фокусе
*/
focused?: boolean;
/**
* Вид свитча

@@ -101,14 +98,4 @@ */

};
focused: {
true: {
thumbBackgroundColor: string;
thumbShadow: Shadow[string][string];
trackBackgroundColorOn: string;
trackBackgroundColorOff: string;
labelColor: string;
descriptionColor: string;
};
};
};
}
export {};

@@ -36,5 +36,5 @@ "use strict";

react_native_1.Animated.timing(fontSizeValue, __assign({ toValue: 1 }, animatedSetting)),
react_native_1.Animated.timing(backgroundColorValue, __assign({ toValue: 1 }, animatedSetting)),
]).start();
}
react_native_1.Animated.timing(backgroundColorValue, __assign({ toValue: 1 }, animatedSetting)).start();
setIsFocused(true);

@@ -51,7 +51,9 @@ };

}
react_native_1.Animated.timing(backgroundColorValue, __assign({ toValue: 0 }, animatedSetting)).start();
if (labelPlacement === 'inner') {
react_native_1.Animated.timing(backgroundColorValue, __assign({ toValue: 0 }, animatedSetting)).start();
}
setIsFocused(false);
};
var backgroundColor = readOnly ? (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColorReadOnly) || '' : (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor) || '';
var backgroundColorFocused = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColorActive) || '';
var backgroundColorFocused = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColorFocus) || '';
var labelFontSize = (sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.labelFontSize) || 0;

@@ -58,0 +60,0 @@ var labelInnerFontSize = (sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.labelInnerFontSize) || 0;

@@ -1,7 +0,7 @@

import { TextStyle } from 'react-native';
import { TextStyle, ViewStyle } from 'react-native';
import { LabelPlacement, TextFieldConfig } from '../../TextField.types';
import { Theme } from '../../../ThemeProvider';
export declare const getStyleForDynamicLabel: (theme: Theme, viewStyle: TextFieldConfig['variations']['view'][string], sizeStyle: TextFieldConfig['variations']['size'][string], labelPlacement?: LabelPlacement, readOnly?: boolean, value?: string) => {
label: TextStyle;
label: ViewStyle;
text: TextStyle;
};

@@ -23,3 +23,2 @@ "use strict";

text: {
color: viewStyle.color,
paddingTop: sizeStyle.contentLabelInnerPaddingTop,

@@ -26,0 +25,0 @@ paddingRight: sizeStyle.contentLabelInnerPaddingRight,

@@ -0,3 +1,3 @@

/// <reference types="react" />
import { View } from 'react-native';
import React from 'react';
import { Theme } from '../ThemeProvider';

@@ -7,2 +7,2 @@ import { PropsType } from '../../types';

export declare const textFieldCore: <T extends TextFieldConfig>(config?: T, theme?: Theme) => (props: TextFieldProps & PropsType<T['variations']>, externalRef: React.ForwardedRef<View>) => import("react/jsx-runtime").JSX.Element;
export declare const textFieldComponent: <T extends TextFieldConfig>(getConfig?: ((theme: Theme<any>) => T) | undefined) => React.ForwardRefExoticComponent<React.PropsWithoutRef<TextFieldProps & PropsType<T["variations"]>> & React.RefAttributes<any>>;
export declare const textFieldComponent: <T extends TextFieldConfig>(getConfig?: ((theme: Theme<any>) => T) | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TextFieldProps & PropsType<T["variations"]>> & import("react").RefAttributes<any>>;

@@ -30,3 +30,3 @@ "use strict";

var ThemeProvider_1 = require("../ThemeProvider");
var FocusableWrapper_1 = require("../FocusableWrapper");
var FocusableWrapper_1 = require("../FocusableWrapper/FocusableWrapper");
var TextField_styles_1 = require("./TextField.styles");

@@ -36,22 +36,14 @@ var hooks_1 = require("./hooks");

var textFieldCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, contentLeft = props.contentLeft, contentRight = props.contentRight, value = props.value, label = props.label, labelPlacement = props.labelPlacement, captionLeft = props.captionLeft, textBefore = props.textBefore, textAfter = props.textAfter, placeholder = props.placeholder, _c = props.readOnly, readOnly = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, maxLength = props.maxLength, externalStyle = props.style, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus, onValueChange = props.onValueChange, onChangeText = props.onChangeText, focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "contentLeft", "contentRight", "value", "label", "labelPlacement", "captionLeft", "textBefore", "textAfter", "placeholder", "readOnly", "disabled", "maxLength", "style", "onPress", "onBlur", "onFocus", "onValueChange", "onChangeText", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, contentLeft = props.contentLeft, contentRight = props.contentRight, value = props.value, label = props.label, labelPlacement = props.labelPlacement, captionLeft = props.captionLeft, textBefore = props.textBefore, textAfter = props.textAfter, placeholder = props.placeholder, _c = props.readOnly, readOnly = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, maxLength = props.maxLength, externalStyle = props.style, onValueChange = props.onValueChange, onChangeText = props.onChangeText, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "contentLeft", "contentRight", "value", "label", "labelPlacement", "captionLeft", "textBefore", "textAfter", "placeholder", "readOnly", "disabled", "maxLength", "style", "onValueChange", "onChangeText", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var ref = (0, react_1.useRef)(null);
var _e = (0, react_1.useState)(false), focused = _e[0], setFocused = _e[1];
// TODO: Можно ли обойтись одним состоянием
var _f = (0, react_1.useState)(hasTVPreferredFocus), focusedAfterInput = _f[0], setFocusedAfterInput = _f[1];
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];
var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;
var navigationProps = {
focusable: focusable,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var _g = (0, hooks_1.useInnerLabelAnimation)(value, labelPlacement, readOnly, viewStyle, sizeStyle, theme), isFocused = _g[0], inputWrapperStyleAnimate = _g[1], labelStyleAnimate = _g[2], onFocusInput = _g[3], onBlurInput = _g[4];
var _f = (0, hooks_1.useInnerLabelAnimation)(value, labelPlacement, readOnly, viewStyle, sizeStyle, theme), isFocused = _f[0], inputWrapperStyleAnimate = _f[1], labelStyleAnimate = _f[2], onFocusInput = _f[3], onBlurInput = _f[4];
var style = (0, react_1.useMemo)(function () {
return (0, TextField_styles_1.getStyle)(theme, size, disabledOpacity, readOnly, labelPlacement, value, viewStyle, sizeStyle, externalStyle);
}, [value, view, focused, size, disabled, focused, readOnly, labelPlacement, theme === null || theme === void 0 ? void 0 : theme.mode]);
}, [value, view, size, disabled, readOnly, labelPlacement, theme === null || theme === void 0 ? void 0 : theme.mode]);
var hideLabel = size === 'xs' && labelPlacement === 'inner';

@@ -83,4 +75,2 @@ var labelInside = size !== 'xs' && labelPlacement === 'inner';

onFocusInput();
setFocused(false);
setFocusedAfterInput(false);
};

@@ -90,4 +80,2 @@ var handleBlur = function (event) {

onBlurInput();
setFocused(true);
setFocusedAfterInput(true);
};

@@ -101,10 +89,15 @@ var onWrapperPress = function (event) {

};
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperFocus = function (event) {
var _a;
if (onFocus) {
onFocus(event);
}
if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isFocused()) {
return;
}
setFocused(true);

@@ -118,3 +111,9 @@ };

};
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.root, children: [labelInside || (innerLabelValue && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.label, children: innerLabelValue })), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, __assign({ ref: externalRef, onPress: onWrapperPress, onFocus: onWrapperFocus, onBlur: onWrapperBlur, hasTVPreferredFocus: focusedAfterInput }, navigationProps, { children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [style.inputWrapper, inputWrapperStyleAnimate], children: [contentLeft && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.contentLeft, children: (0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentLeftIconColor, children: contentLeft }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.inputLabelWrapper, children: [textBefore && additionalTextVisible && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.textBefore, children: textBefore }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, __assign({}, rest, { style: [style.textInput, tvStyles], placeholder: innerPlaceholderValue, selectionColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.caretColor, placeholderTextColor: placeholderColor, numberOfLines: 1, ref: ref, value: value, readOnly: readOnly || disabled, onChangeText: onChange, onFocus: handleFocus, onBlur: handleBlur })), react_native_1.Platform.isTV && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.textInput, children: value || (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: placeholderColor }, children: innerPlaceholderValue }) })), labelInside && ((0, jsx_runtime_1.jsx)(react_native_1.Animated.Text, { style: [style.label, labelStyleAnimate], children: innerLabelValue })), textAfter && additionalTextVisible && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.textAfter, children: textAfter })] }), contentRight && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.contentRight, children: (0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentRightIconColor, children: contentRight }) }))] }) })), captionLeft && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.captionLeft, children: captionLeft })] }));
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.root, children: [labelInside || (innerLabelValue && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.label, children: innerLabelValue })), (0, jsx_runtime_1.jsx)(FocusableWrapper_1.FocusableWrapper, __assign({ style: {
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.borderRadius,
borderWidth: 2,
},
}, hasFocus: react_native_1.Platform.isTV, focused: focused, ref: externalRef, onPress: onWrapperPress, onFocus: onWrapperFocus, onBlur: onWrapperBlur }, navigationProps, { children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: [style.inputWrapper, inputWrapperStyleAnimate], children: [contentLeft && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.contentLeft, children: contentLeft }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: style.inputLabelWrapper, children: [textBefore && additionalTextVisible && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.textBefore, children: textBefore }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, __assign({}, rest, { style: [style.textInput, tvStyles], placeholder: innerPlaceholderValue, selectionColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.caretColor, placeholderTextColor: placeholderColor, numberOfLines: 1, ref: ref, value: value, readOnly: readOnly || disabled, onChangeText: onChange, onFocus: handleFocus, onBlur: handleBlur })), react_native_1.Platform.isTV && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.textInput, children: value || (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: placeholderColor }, children: innerPlaceholderValue }) })), labelInside && ((0, jsx_runtime_1.jsx)(react_native_1.Animated.Text, { style: [style.label, labelStyleAnimate], children: innerLabelValue })), textAfter && additionalTextVisible && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.textAfter, children: textAfter })] }), contentRight && (0, jsx_runtime_1.jsx)(react_native_1.View, { style: style.contentRight, children: contentRight })] }) })), captionLeft && (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: style.captionLeft, children: captionLeft })] }));
}; };

@@ -121,0 +120,0 @@ exports.textFieldCore = textFieldCore;

import { ReactNode } from 'react';
import { PressableProps, TextInputProps } from 'react-native';
import { TextInputProps } from 'react-native';
import { Focusable } from '../FocusableWrapper';
import { Style } from './TextField.styles';
export type LabelPlacement = 'inner' | 'outer';
export interface Focusable {
focusable?: PressableProps['focusable'];
hasTVPreferredFocus?: PressableProps['hasTVPreferredFocus'];
nextFocusUp?: number;
nextFocusDown?: number;
nextFocusRight?: number;
nextFocusLeft?: number;
nextFocusForward?: number;
onFocus?: PressableProps['onFocus'];
onBlur?: PressableProps['onBlur'];
onPress?: PressableProps['onPress'];
onLongPress?: PressableProps['onLongPress'];
}
interface CustomTextFieldProps extends Omit<TextInputProps, 'style' | 'onBlur' | 'onFocus' | 'onPress'>, Focusable {

@@ -84,5 +72,5 @@ /**

backgroundColor?: string;
backgroundColorActive?: string;
backgroundColorFocus?: string;
borderColor?: string;
borderColorActive?: string;
borderColorFocus?: string;
colorReadOnly: string;

@@ -100,4 +88,2 @@ backgroundColorReadOnly?: string;

textAfterColor: string;
contentLeftIconColor: string;
contentRightIconColor: string;
};

@@ -160,27 +146,4 @@ };

};
focused: {
true: {
color: string;
backgroundColor?: string;
backgroundColorActive?: string;
borderColor?: string;
borderColorActive?: string;
colorReadOnly: string;
backgroundColorReadOnly?: string;
borderColorReadOnly?: string;
placeholderColorReadOnly: string;
caretColor: string;
placeholderColor: string;
labelColor: string;
labelColorReadOnly: string;
captionLeftColor: string;
captionLeftColorReadOnly: string;
textBeforeColor: string;
textAfterColor: string;
contentLeftIconColor: string;
contentRightIconColor: string;
};
};
};
}
export {};

@@ -32,4 +32,4 @@ "use strict";

var typographyCore = function (config, theme) { return function (props) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, children = props.children, _c = props.bold, bold = _c === void 0 ? false : _c, focused = props.focused, externalStyle = props.style, rest = __rest(props, ["view", "size", "children", "bold", "focused", "style"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, children = props.children, _c = props.bold, bold = _c === void 0 ? false : _c, externalStyle = props.style, rest = __rest(props, ["view", "size", "children", "bold", "style"]);
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];

@@ -40,3 +40,2 @@ var style = (0, react_1.useMemo)(function () { return (0, Typography_styles_1.getStyle)(theme, bold, viewStyle, sizeStyle, externalStyle); }, [

bold,
focused,
theme === null || theme === void 0 ? void 0 : theme.mode,

@@ -43,0 +42,0 @@ ]);

@@ -18,6 +18,2 @@ import { TextProps } from 'react-native';

/**
* Компонент находится в фокусе
*/
focused?: boolean;
/**
* Вид компонента

@@ -53,8 +49,3 @@ */

};
focused: {
true: {
color: string;
};
};
};
}
export { getFontFace } from './getFontFace';
export { getLinearVectorPoints } from './getLinearVectorPoints';
export { getWidthSize } from './getWidthSize';
export type { Stretching } from './getWidthSize';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getWidthSize = exports.getLinearVectorPoints = exports.getFontFace = void 0;
exports.getLinearVectorPoints = exports.getFontFace = void 0;
var getFontFace_1 = require("./getFontFace");

@@ -8,4 +8,2 @@ Object.defineProperty(exports, "getFontFace", { enumerable: true, get: function () { return getFontFace_1.getFontFace; } });

Object.defineProperty(exports, "getLinearVectorPoints", { enumerable: true, get: function () { return getLinearVectorPoints_1.getLinearVectorPoints; } });
var getWidthSize_1 = require("./getWidthSize");
Object.defineProperty(exports, "getWidthSize", { enumerable: true, get: function () { return getWidthSize_1.getWidthSize; } });
//# sourceMappingURL=index.js.map

@@ -24,20 +24,31 @@ var __assign = (this && this.__assign) || function () {

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Pressable, Text, View } from 'react-native';
import { Platform, Text, View } from 'react-native';
import { useMemo, useState } from 'react';
import { spinnerComponent } from '../Spinner';
import { withTheme } from '../ThemeProvider';
import { FocusableWrapper } from '../FocusableWrapper';
import { FocusableWrapper } from '../FocusableWrapper/FocusableWrapper';
import { getStyle } from './Button.styles';
var Spinner = spinnerComponent();
export var buttonCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, _c = props.pin, pin = _c === void 0 ? 'square-square' : _c, _d = props.stretching, stretching = _d === void 0 ? 'auto' : _d, _e = props.spacing, spacing = _e === void 0 ? 'packed' : _e, children = props.children, value = props.value, text = props.text, contentLeft = props.contentLeft, contentRight = props.contentRight, isLoading = props.isLoading, loader = props.loader, disabled = props.disabled, externalStyle = props.style, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["view", "size", "pin", "stretching", "spacing", "children", "value", "text", "contentLeft", "contentRight", "isLoading", "loader", "disabled", "style", "onBlur", "onFocus"]);
var _f = useState(false), focused = _f[0], setFocused = _f[1];
var _g = useState(false), pressed = _g[0], setPressed = _g[1];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, _c = props.pin, pin = _c === void 0 ? 'square-square' : _c, _d = props.stretching, stretching = _d === void 0 ? 'auto' : _d, children = props.children, text = props.text, contentLeft = props.contentLeft, contentRight = props.contentRight, isLoading = props.isLoading, loader = props.loader, disabled = props.disabled, externalStyle = props.style, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "pin", "stretching", "children", "text", "contentLeft", "contentRight", "isLoading", "loader", "disabled", "style", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _e = useState(false), focused = _e[0], setFocused = _e[1];
var _f = useState(false), pressed = _f[0], setPressed = _f[1];
var txt = typeof children === 'string' ? children : text;
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];
var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;
var style = useMemo(function () {
return getStyle(theme, disabledOpacity, viewStyle, sizeStyle, pressed, spacing, stretching, pin, isLoading, externalStyle);
}, [view, size, pressed, disabled, focused, spacing, stretching, isLoading, pin, theme === null || theme === void 0 ? void 0 : theme.mode]);
return getStyle(theme, disabledOpacity, viewStyle, sizeStyle, pressed, stretching, pin, isLoading, externalStyle);
}, [view, size, pressed, disabled, stretching, pin, theme === null || theme === void 0 ? void 0 : theme.mode]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperFocus = function (event) {

@@ -61,5 +72,12 @@ if (onFocus) {

};
return (_jsx(Pressable, __assign({ disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPressIn: onPressIn, onPressOut: onPressOut }, rest, { children: _jsxs(View, { style: style.root, children: [_jsx(View, { style: style.background }), _jsxs(View, { style: style.wrapper, children: [_jsxs(View, { style: style.contentWrapper, children: [contentLeft && (_jsx(View, { style: style.contentLeft, children: _jsx(FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentLeftIconColor, children: contentLeft }) })), txt ? _jsx(Text, { style: style.text, children: txt }) : children] }), _jsxs(View, { style: style.contentWrapper, children: [!contentRight && value && _jsx(Text, { style: style.value, children: value }), contentRight && !value && (_jsx(View, { style: style.contentRight, children: _jsx(FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentRightIconColor, children: contentRight }) }))] })] }), isLoading && (_jsx(View, { style: style.loader, children: loader || (_jsx(Spinner, { color: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.color, height: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize, width: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize })) }))] }) })));
return (_jsx(FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.radius,
borderWidth: 2,
},
}, hasFocus: Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPressIn: onPressIn, onPressOut: onPressOut }, navigationProps, rest, { children: _jsxs(View, { style: style.container, children: [_jsxs(View, { style: style.wrapper, children: [contentLeft, txt ? _jsx(Text, { style: style.text, children: txt }) : children, contentRight] }), isLoading && (_jsx(View, { style: style.loader, children: loader || (_jsx(Spinner, { color: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.color, height: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize, width: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.spinnerSize })) }))] }) })));
}; };
export var buttonComponent = withTheme(buttonCore);
//# sourceMappingURL=Button.js.map

@@ -13,17 +13,12 @@ var __assign = (this && this.__assign) || function () {

import { StyleSheet } from 'react-native';
import { getFontFace, getWidthSize } from '../../utils';
import { getRoundnessMatrix } from './utils';
export var getStyle = function (theme, disabledOpacity, viewStyle, sizeStyle, pressed, spacing, stretching, pin, isLoading, externalStyle) {
var _a;
if (!viewStyle || !sizeStyle || !pin || !spacing || !theme) {
import { getFontFace } from '../../utils';
import { getWidthSize, getRoundnessMatrix } from './utils';
export var getStyle = function (theme, disabledOpacity, viewStyle, sizeStyle, pressed, stretching, pin, isLoading, externalStyle) {
if (!viewStyle || !sizeStyle || !pin || !theme) {
return {
root: {},
background: {},
container: {},
wrapper: {},
loader: {},
contentWrapper: {},
contentLeft: {},
contentRight: {},
text: {},
value: {},
};

@@ -34,24 +29,10 @@ }

var fontFace = getFontFace(sizeStyle.fontFamilyRef, sizeStyle.fontStyle, sizeStyle.fontWeight, theme);
var spacingMap = {
packed: 'center',
'space-between': 'space-between',
};
return StyleSheet.create({
root: __assign(__assign({ opacity: disabledOpacity, position: 'relative', alignItems: 'center', justifyContent: 'center', paddingLeft: sizeStyle.padding, paddingRight: sizeStyle.padding, height: sizeStyle.height }, widthSize), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.root),
background: __assign(__assign({ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
// TODO: Подумать как обработать кейс, когда кнопка выделена и на неё происходит нажатие
backgroundColor: pressed ? viewStyle.backgroundColorActive : viewStyle.backgroundColor, transform: [
{
scale: (_a = viewStyle.scale) !== null && _a !== void 0 ? _a : 1,
},
] }, buttonBorderRadius), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.background),
wrapper: __assign({ width: '100%', opacity: isLoading ? 0 : 1, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: stretching === 'auto' ? undefined : spacingMap[spacing] }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.wrapper),
root: __assign({ opacity: disabledOpacity }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.root),
container: __assign(__assign(__assign({ alignItems: 'center', justifyContent: 'center', borderRadius: sizeStyle.radius, paddingLeft: sizeStyle.padding, paddingRight: sizeStyle.padding, backgroundColor: pressed ? viewStyle.backgroundColorActive : viewStyle.backgroundColor, height: sizeStyle.height }, widthSize), buttonBorderRadius), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.container),
wrapper: __assign({ width: '100%', gap: sizeStyle.contentGap, opacity: isLoading ? 0 : 1, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: stretching === 'auto' ? undefined : 'center' }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.wrapper),
loader: __assign({ position: 'absolute' }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.loader),
contentWrapper: __assign({ display: 'flex', flexDirection: 'row' }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.contentWrapper),
contentLeft: __assign({ paddingRight: sizeStyle.contentGap }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.contentLeft),
contentRight: __assign({ paddingLeft: sizeStyle.contentGap }, externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.contentRight),
text: __assign(__assign(__assign({ color: viewStyle.color }, fontFace), { fontSize: sizeStyle.fontSize, letterSpacing: sizeStyle.letterSpacing, lineHeight: sizeStyle.lineHeight }), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.text),
value: __assign(__assign(__assign({ opacity: 0.56, paddingLeft: sizeStyle.valueGap, color: viewStyle.color }, fontFace), { fontSize: sizeStyle.fontSize, letterSpacing: sizeStyle.letterSpacing, lineHeight: sizeStyle.lineHeight }), externalStyle === null || externalStyle === void 0 ? void 0 : externalStyle.value),
});
};
//# sourceMappingURL=Button.styles.js.map
export { getRoundnessMatrix } from './getRoundnessMatrix';
export { getWidthSize } from './getWidthSize';
//# sourceMappingURL=index.js.map

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Pressable, Text, View } from 'react-native';
import { useMemo } from 'react';
import { Platform, Text, View } from 'react-native';
import { useMemo, useState } from 'react';
import { withTheme } from '../ThemeProvider';
import { FocusableWrapper } from '../FocusableWrapper';
import { getStyle } from './Checkbox.styles';
import { Done, Indeterminate } from './IconsSvg';
export var checkboxCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, indeterminate = props.indeterminate, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, focused = props.focused, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, rest = __rest(props, ["view", "size", "label", "description", "indeterminate", "singleLine", "disabled", "checked", "focused", "style", "onValueChange", "onPress"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, indeterminate = props.indeterminate, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "label", "description", "indeterminate", "singleLine", "disabled", "checked", "style", "onValueChange", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _e = useState(false), focused = _e[0], setFocused = _e[1];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];

@@ -41,3 +45,12 @@ var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;

return getStyle(theme, disabledOpacity, onlyDescription, checked || indeterminate, viewStyle, sizeStyle, externalStyle);
}, [view, size, label, checked, indeterminate, description, disabled, focused, theme === null || theme === void 0 ? void 0 : theme.mode]);
}, [view, size, label, checked, indeterminate, description, disabled, theme === null || theme === void 0 ? void 0 : theme.mode]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperPress = function (event) {

@@ -51,5 +64,24 @@ if (onValueChange) {

};
return (_jsx(Pressable, __assign({ style: style.root, disabled: disabled, ref: externalRef, onPress: onWrapperPress }, rest, { children: _jsxs(View, { style: style.wrapper, children: [_jsx(View, { style: style.trigger, children: indeterminate ? (_jsx(Indeterminate, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) : (_jsx(Done, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) }), hasContent && (_jsxs(View, { style: style.content, children: [label && (_jsx(Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && (_jsx(Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
var onWrapperFocus = function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
};
var onWrapperBlur = function (event) {
if (onBlur) {
onBlur(event);
}
setFocused(false);
};
return (_jsx(FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerBorderRadius,
borderWidth: 2,
},
}, hasFocus: Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPress: onWrapperPress }, navigationProps, rest, { children: _jsxs(View, { style: style.wrapper, children: [_jsx(View, { style: style.trigger, children: indeterminate ? (_jsx(Indeterminate, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) : (_jsx(Done, { color: iconColor, size: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerSize })) }), hasContent && (_jsxs(View, { style: style.content, children: [label && (_jsx(Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && (_jsx(Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
}; };
export var checkboxComponent = withTheme(checkboxCore);
//# sourceMappingURL=Checkbox.js.map

@@ -1,14 +0,21 @@

import { cloneElement } from 'react';
export var FocusableWrapper = function (_a) {
var _b;
var children = _a.children, iconColor = _a.iconColor, style = _a.style, focused = _a.focused;
if (!children) {
return null;
}
return cloneElement(children, {
focused: focused,
style: [(_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.style, style],
color: iconColor,
});
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import { Pressable, View } from 'react-native';
import { getStyle } from './FocusableWrapper.style';
export var FocusableWrapper = forwardRef(function (props, ref) {
var children = props.children, focused = props.focused, externalStyle = props.style, _a = props.hasFocus, hasFocus = _a === void 0 ? true : _a;
var style = useMemo(function () { return getStyle(externalStyle, focused); }, [externalStyle, focused]);
return (_jsxs(Pressable, __assign({}, props, { style: style.root, ref: ref, children: [children, hasFocus && _jsx(View, { style: style.focus })] })));
});
//# sourceMappingURL=FocusableWrapper.js.map

@@ -24,9 +24,13 @@ var __assign = (this && this.__assign) || function () {

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Pressable, Text, View } from 'react-native';
import { useMemo } from 'react';
import { Platform, Text, View } from 'react-native';
import { useMemo, useState } from 'react';
import { withTheme } from '../ThemeProvider';
import { FocusableWrapper } from '../FocusableWrapper';
import { getStyle } from './Radiobox.styles';
export var radioboxCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, focused = props.focused, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, rest = __rest(props, ["view", "size", "label", "description", "singleLine", "disabled", "checked", "focused", "style", "onValueChange", "onPress"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, _c = props.singleLine, singleLine = _c === void 0 ? false : _c, disabled = props.disabled, _d = props.checked, checked = _d === void 0 ? false : _d, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "label", "description", "singleLine", "disabled", "checked", "style", "onValueChange", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _e = useState(false), focused = _e[0], setFocused = _e[1];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];

@@ -37,3 +41,12 @@ var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;

var numberOfLines = singleLine ? 1 : undefined;
var style = useMemo(function () { return getStyle(theme, disabledOpacity, onlyDescription, checked, viewStyle, sizeStyle, externalStyle); }, [view, size, label, checked, description, focused, disabled, theme === null || theme === void 0 ? void 0 : theme.mode]);
var style = useMemo(function () { return getStyle(theme, disabledOpacity, onlyDescription, checked, viewStyle, sizeStyle, externalStyle); }, [view, size, label, checked, description, disabled, theme === null || theme === void 0 ? void 0 : theme.mode]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperPress = function (event) {

@@ -47,5 +60,24 @@ if (onValueChange) {

};
return (_jsx(Pressable, __assign({ style: style.root, disabled: disabled, ref: externalRef, onPress: onWrapperPress }, rest, { children: _jsxs(View, { style: style.wrapper, children: [_jsx(View, { style: style.trigger }), hasContent && (_jsxs(View, { style: style.content, children: [label && (_jsx(Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && (_jsx(Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
var onWrapperFocus = function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
};
var onWrapperBlur = function (event) {
if (onBlur) {
onBlur(event);
}
setFocused(false);
};
return (_jsx(FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: ((sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.triggerBorderRadius) || 0) - 4,
borderWidth: 2,
},
}, hasFocus: Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPress: onWrapperPress }, navigationProps, rest, { children: _jsxs(View, { style: style.wrapper, children: [_jsx(View, { style: style.trigger }), hasContent && (_jsxs(View, { style: style.content, children: [label && (_jsx(Text, { numberOfLines: numberOfLines, style: style.label, children: label })), description && (_jsx(Text, { numberOfLines: numberOfLines, style: style.description, children: description }))] }))] }) })));
}; };
export var radioboxComponent = withTheme(radioboxCore);
//# sourceMappingURL=Radiobox.js.map

@@ -13,3 +13,3 @@ var __assign = (this && this.__assign) || function () {

import { Platform, Animated, Easing } from 'react-native';
import { useEffect, useRef, useState } from 'react';
import { useRef, useState } from 'react';
export var useToggleAnimation = function (checked, viewStyle, sizeStyle) {

@@ -32,11 +32,11 @@ var _a = useState(checked ? 0 : 'auto'), rightPosition = _a[0], setRightPosition = _a[1];

};
useEffect(function () {
var onShortPress = function () {
Animated.parallel([
Animated.timing(backgroundColorValue, __assign({ toValue: checked ? 1 : 0 }, animatedSetting)),
Animated.timing(positionValue, __assign({ toValue: checked ? 1 : 0 }, animatedSetting)),
Animated.timing(backgroundColorValue, __assign({ toValue: checked ? 0 : 1 }, animatedSetting)),
Animated.timing(positionValue, __assign({ toValue: checked ? 0 : 1 }, animatedSetting)),
]).start(function () {
setRightPosition(checked ? 0 : 'auto');
setLeftPosition(checked ? 'auto' : 0);
setRightPosition(checked ? 'auto' : 0);
setLeftPosition(checked ? 0 : 'auto');
});
}, [checked]);
};
var trackBackgroundColorOn = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.trackBackgroundColorOn) || '';

@@ -73,4 +73,4 @@ var trackBackgroundColorOff = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.trackBackgroundColorOff) || '';

};
return [trackStyleAnimate, triggerStyleAnimate, onPressIn, onPressOut];
return [trackStyleAnimate, triggerStyleAnimate, onPressIn, onPressOut, onShortPress];
};
//# sourceMappingURL=useToggleAnimation.js.map

@@ -24,13 +24,17 @@ var __assign = (this && this.__assign) || function () {

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Animated, Pressable, Text, View } from 'react-native';
import { useMemo } from 'react';
import { Animated, Platform, Text, View, } from 'react-native';
import { useMemo, useState } from 'react';
import { withTheme } from '../ThemeProvider';
import { FocusableWrapper } from '../FocusableWrapper';
import { getStyle } from './Switch.styles';
import { useToggleAnimation } from './hooks';
export var switchCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, disabled = props.disabled, _c = props.checked, checked = _c === void 0 ? false : _c, externalStyle = props.style, focused = props.focused, onPress = props.onPress, onValueChange = props.onValueChange, rest = __rest(props, ["view", "size", "label", "description", "disabled", "checked", "style", "focused", "onPress", "onValueChange"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, label = props.label, description = props.description, disabled = props.disabled, _c = props.checked, checked = _c === void 0 ? false : _c, externalStyle = props.style, onValueChange = props.onValueChange, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "label", "description", "disabled", "checked", "style", "onValueChange", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _d = useState(false), focused = _d[0], setFocused = _d[1];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];
var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;
var _d = useToggleAnimation(checked, viewStyle, sizeStyle), trackStyleAnimate = _d[0], triggerStyleAnimate = _d[1], onPressIn = _d[2], onPressOut = _d[3];
var _e = useToggleAnimation(checked, viewStyle, sizeStyle), trackStyleAnimate = _e[0], triggerStyleAnimate = _e[1], onPressIn = _e[2], onPressOut = _e[3], onShortPress = _e[4];
var style = useMemo(function () { return getStyle(theme, disabledOpacity, viewStyle, sizeStyle, externalStyle); }, [

@@ -40,17 +44,45 @@ view,

label,
focused,
disabled,
theme === null || theme === void 0 ? void 0 : theme.mode,
]);
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperPress = function (event) {
if (onValueChange) {
onValueChange(checked);
}
if (onPress) {
onPress(event);
}
if (onValueChange) {
onValueChange(checked);
onShortPress();
};
var onWrapperFocus = function (event) {
if (onFocus) {
onFocus(event);
}
setFocused(true);
};
return (_jsxs(Pressable, __assign({ style: style.root, disabled: disabled, ref: externalRef, onPress: onWrapperPress, onPressIn: onPressIn, onPressOut: onPressOut }, rest, { children: [_jsxs(View, { style: style.wrapper, children: [label && (_jsx(Text, { style: style.label, numberOfLines: 1, children: label })), _jsx(Animated.View, { style: [style.track, trackStyleAnimate], children: _jsx(Animated.View, { style: [style.thumb, triggerStyleAnimate] }) })] }), description && (_jsx(Text, { style: style.description, numberOfLines: 1, children: description }))] })));
var onWrapperBlur = function (event) {
if (onBlur) {
onBlur(event);
}
setFocused(false);
};
return (_jsxs(FocusableWrapper, __assign({ style: {
root: style.root,
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.trackBorderRadius,
borderWidth: 2,
},
}, hasFocus: Platform.isTV, focused: focused, disabled: disabled, ref: externalRef, onFocus: onWrapperFocus, onBlur: onWrapperBlur, onPress: onWrapperPress, onPressIn: onPressIn, onPressOut: onPressOut }, navigationProps, rest, { children: [_jsxs(View, { style: style.wrapper, children: [label && (_jsx(Text, { style: style.label, numberOfLines: 1, children: label })), _jsx(Animated.View, { style: [style.track, trackStyleAnimate], children: _jsx(Animated.View, { style: [style.thumb, triggerStyleAnimate] }) })] }), description && (_jsx(Text, { style: style.description, numberOfLines: 1, children: description }))] })));
}; };
export var switchComponent = withTheme(switchCore);
//# sourceMappingURL=Switch.js.map

@@ -33,5 +33,5 @@ var __assign = (this && this.__assign) || function () {

Animated.timing(fontSizeValue, __assign({ toValue: 1 }, animatedSetting)),
Animated.timing(backgroundColorValue, __assign({ toValue: 1 }, animatedSetting)),
]).start();
}
Animated.timing(backgroundColorValue, __assign({ toValue: 1 }, animatedSetting)).start();
setIsFocused(true);

@@ -48,7 +48,9 @@ };

}
Animated.timing(backgroundColorValue, __assign({ toValue: 0 }, animatedSetting)).start();
if (labelPlacement === 'inner') {
Animated.timing(backgroundColorValue, __assign({ toValue: 0 }, animatedSetting)).start();
}
setIsFocused(false);
};
var backgroundColor = readOnly ? (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColorReadOnly) || '' : (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor) || '';
var backgroundColorFocused = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColorActive) || '';
var backgroundColorFocused = (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColorFocus) || '';
var labelFontSize = (sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.labelFontSize) || 0;

@@ -55,0 +57,0 @@ var labelInnerFontSize = (sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.labelInnerFontSize) || 0;

@@ -20,3 +20,2 @@ var __assign = (this && this.__assign) || function () {

text: {
color: viewStyle.color,
paddingTop: sizeStyle.contentLabelInnerPaddingTop,

@@ -23,0 +22,0 @@ paddingRight: sizeStyle.contentLabelInnerPaddingRight,

@@ -24,6 +24,6 @@ var __assign = (this && this.__assign) || function () {

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Animated, Platform, Pressable, Text, TextInput, View, } from 'react-native';
import { Animated, Platform, Text, TextInput, View, } from 'react-native';
import { useMemo, useRef, useState } from 'react';
import { withTheme } from '../ThemeProvider';
import { FocusableWrapper } from '../FocusableWrapper';
import { FocusableWrapper } from '../FocusableWrapper/FocusableWrapper';
import { getStyle } from './TextField.styles';

@@ -33,22 +33,14 @@ import { useInnerLabelAnimation } from './hooks';

export var textFieldCore = function (config, theme) { return function (props, externalRef) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, contentLeft = props.contentLeft, contentRight = props.contentRight, value = props.value, label = props.label, labelPlacement = props.labelPlacement, captionLeft = props.captionLeft, textBefore = props.textBefore, textAfter = props.textAfter, placeholder = props.placeholder, _c = props.readOnly, readOnly = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, maxLength = props.maxLength, externalStyle = props.style, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus, onValueChange = props.onValueChange, onChangeText = props.onChangeText, focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "contentLeft", "contentRight", "value", "label", "labelPlacement", "captionLeft", "textBefore", "textAfter", "placeholder", "readOnly", "disabled", "maxLength", "style", "onPress", "onBlur", "onFocus", "onValueChange", "onChangeText", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, contentLeft = props.contentLeft, contentRight = props.contentRight, value = props.value, label = props.label, labelPlacement = props.labelPlacement, captionLeft = props.captionLeft, textBefore = props.textBefore, textAfter = props.textAfter, placeholder = props.placeholder, _c = props.readOnly, readOnly = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, maxLength = props.maxLength, externalStyle = props.style, onValueChange = props.onValueChange, onChangeText = props.onChangeText, onPress = props.onPress, onBlur = props.onBlur, onFocus = props.onFocus,
//
focusable = props.focusable, hasTVPreferredFocus = props.hasTVPreferredFocus, nextFocusDown = props.nextFocusDown, nextFocusForward = props.nextFocusForward, nextFocusLeft = props.nextFocusLeft, nextFocusRight = props.nextFocusRight, nextFocusUp = props.nextFocusUp, rest = __rest(props, ["view", "size", "contentLeft", "contentRight", "value", "label", "labelPlacement", "captionLeft", "textBefore", "textAfter", "placeholder", "readOnly", "disabled", "maxLength", "style", "onValueChange", "onChangeText", "onPress", "onBlur", "onFocus", "focusable", "hasTVPreferredFocus", "nextFocusDown", "nextFocusForward", "nextFocusLeft", "nextFocusRight", "nextFocusUp"]);
var ref = useRef(null);
var _e = useState(false), focused = _e[0], setFocused = _e[1];
// TODO: Можно ли обойтись одним состоянием
var _f = useState(hasTVPreferredFocus), focusedAfterInput = _f[0], setFocusedAfterInput = _f[1];
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];
var disabledOpacity = disabled ? config === null || config === void 0 ? void 0 : config.variations.disabled.true.disabledOpacity : 1;
var navigationProps = {
focusable: focusable,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var _g = useInnerLabelAnimation(value, labelPlacement, readOnly, viewStyle, sizeStyle, theme), isFocused = _g[0], inputWrapperStyleAnimate = _g[1], labelStyleAnimate = _g[2], onFocusInput = _g[3], onBlurInput = _g[4];
var _f = useInnerLabelAnimation(value, labelPlacement, readOnly, viewStyle, sizeStyle, theme), isFocused = _f[0], inputWrapperStyleAnimate = _f[1], labelStyleAnimate = _f[2], onFocusInput = _f[3], onBlurInput = _f[4];
var style = useMemo(function () {
return getStyle(theme, size, disabledOpacity, readOnly, labelPlacement, value, viewStyle, sizeStyle, externalStyle);
}, [value, view, focused, size, disabled, focused, readOnly, labelPlacement, theme === null || theme === void 0 ? void 0 : theme.mode]);
}, [value, view, size, disabled, readOnly, labelPlacement, theme === null || theme === void 0 ? void 0 : theme.mode]);
var hideLabel = size === 'xs' && labelPlacement === 'inner';

@@ -80,4 +72,2 @@ var labelInside = size !== 'xs' && labelPlacement === 'inner';

onFocusInput();
setFocused(false);
setFocusedAfterInput(false);
};

@@ -87,4 +77,2 @@ var handleBlur = function (event) {

onBlurInput();
setFocused(true);
setFocusedAfterInput(true);
};

@@ -98,10 +86,15 @@ var onWrapperPress = function (event) {

};
var navigationProps = {
focusable: focusable,
hasTVPreferredFocus: hasTVPreferredFocus,
nextFocusDown: nextFocusDown,
nextFocusForward: nextFocusForward,
nextFocusLeft: nextFocusLeft,
nextFocusRight: nextFocusRight,
nextFocusUp: nextFocusUp,
};
var onWrapperFocus = function (event) {
var _a;
if (onFocus) {
onFocus(event);
}
if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isFocused()) {
return;
}
setFocused(true);

@@ -115,5 +108,11 @@ };

};
return (_jsxs(View, { style: style.root, children: [labelInside || (innerLabelValue && _jsx(Text, { style: style.label, children: innerLabelValue })), _jsx(Pressable, __assign({ ref: externalRef, onPress: onWrapperPress, onFocus: onWrapperFocus, onBlur: onWrapperBlur, hasTVPreferredFocus: focusedAfterInput }, navigationProps, { children: _jsxs(Animated.View, { style: [style.inputWrapper, inputWrapperStyleAnimate], children: [contentLeft && (_jsx(View, { style: style.contentLeft, children: _jsx(FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentLeftIconColor, children: contentLeft }) })), _jsxs(View, { style: style.inputLabelWrapper, children: [textBefore && additionalTextVisible && _jsx(Text, { style: style.textBefore, children: textBefore }), _jsx(TextInput, __assign({}, rest, { style: [style.textInput, tvStyles], placeholder: innerPlaceholderValue, selectionColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.caretColor, placeholderTextColor: placeholderColor, numberOfLines: 1, ref: ref, value: value, readOnly: readOnly || disabled, onChangeText: onChange, onFocus: handleFocus, onBlur: handleBlur })), Platform.isTV && (_jsx(Text, { style: style.textInput, children: value || _jsx(Text, { style: { color: placeholderColor }, children: innerPlaceholderValue }) })), labelInside && (_jsx(Animated.Text, { style: [style.label, labelStyleAnimate], children: innerLabelValue })), textAfter && additionalTextVisible && _jsx(Text, { style: style.textAfter, children: textAfter })] }), contentRight && (_jsx(View, { style: style.contentRight, children: _jsx(FocusableWrapper, { iconColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.contentRightIconColor, children: contentRight }) }))] }) })), captionLeft && _jsx(Text, { style: style.captionLeft, children: captionLeft })] }));
return (_jsxs(View, { style: style.root, children: [labelInside || (innerLabelValue && _jsx(Text, { style: style.label, children: innerLabelValue })), _jsx(FocusableWrapper, __assign({ style: {
focus: {
borderColor: theme === null || theme === void 0 ? void 0 : theme.data.color[theme === null || theme === void 0 ? void 0 : theme.mode].textPrimary,
borderRadius: sizeStyle === null || sizeStyle === void 0 ? void 0 : sizeStyle.borderRadius,
borderWidth: 2,
},
}, hasFocus: Platform.isTV, focused: focused, ref: externalRef, onPress: onWrapperPress, onFocus: onWrapperFocus, onBlur: onWrapperBlur }, navigationProps, { children: _jsxs(Animated.View, { style: [style.inputWrapper, inputWrapperStyleAnimate], children: [contentLeft && _jsx(View, { style: style.contentLeft, children: contentLeft }), _jsxs(View, { style: style.inputLabelWrapper, children: [textBefore && additionalTextVisible && _jsx(Text, { style: style.textBefore, children: textBefore }), _jsx(TextInput, __assign({}, rest, { style: [style.textInput, tvStyles], placeholder: innerPlaceholderValue, selectionColor: viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.caretColor, placeholderTextColor: placeholderColor, numberOfLines: 1, ref: ref, value: value, readOnly: readOnly || disabled, onChangeText: onChange, onFocus: handleFocus, onBlur: handleBlur })), Platform.isTV && (_jsx(Text, { style: style.textInput, children: value || _jsx(Text, { style: { color: placeholderColor }, children: innerPlaceholderValue }) })), labelInside && (_jsx(Animated.Text, { style: [style.label, labelStyleAnimate], children: innerLabelValue })), textAfter && additionalTextVisible && _jsx(Text, { style: style.textAfter, children: textAfter })] }), contentRight && _jsx(View, { style: style.contentRight, children: contentRight })] }) })), captionLeft && _jsx(Text, { style: style.captionLeft, children: captionLeft })] }));
}; };
export var textFieldComponent = withTheme(textFieldCore);
//# sourceMappingURL=TextField.js.map

@@ -29,4 +29,4 @@ var __assign = (this && this.__assign) || function () {

export var typographyCore = function (config, theme) { return function (props) {
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, children = props.children, _c = props.bold, bold = _c === void 0 ? false : _c, focused = props.focused, externalStyle = props.style, rest = __rest(props, ["view", "size", "children", "bold", "focused", "style"]);
var viewStyle = focused ? config === null || config === void 0 ? void 0 : config.variations.focused.true : config === null || config === void 0 ? void 0 : config.variations.view[view];
var _a = props.view, view = _a === void 0 ? '' : _a, _b = props.size, size = _b === void 0 ? '' : _b, children = props.children, _c = props.bold, bold = _c === void 0 ? false : _c, externalStyle = props.style, rest = __rest(props, ["view", "size", "children", "bold", "style"]);
var viewStyle = config === null || config === void 0 ? void 0 : config.variations.view[view];
var sizeStyle = config === null || config === void 0 ? void 0 : config.variations.size[size];

@@ -37,3 +37,2 @@ var style = useMemo(function () { return getStyle(theme, bold, viewStyle, sizeStyle, externalStyle); }, [

bold,
focused,
theme === null || theme === void 0 ? void 0 : theme.mode,

@@ -40,0 +39,0 @@ ]);

export { getFontFace } from './getFontFace';
export { getLinearVectorPoints } from './getLinearVectorPoints';
export { getWidthSize } from './getWidthSize';
//# sourceMappingURL=index.js.map
{
"version": "0.4.0-alpha-b34d17e.0",
"version": "0.4.0",
"name": "@salutejs/core-components-mobile",

@@ -4,0 +4,0 @@ "description": "Core-components package for native platform on mobile.",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet