@salutejs/core-components-mobile
Advanced tools
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
405584
412
4633