@cdek-it/react-native-ui-kit 0.6.8 → 1.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/components/Accordion/Accordion.js +9 -10
- package/dist/components/Avatar/Avatar.js +7 -9
- package/dist/components/Badge/Badge.js +28 -20
- package/dist/components/Button/BaseButton.d.ts +3 -3
- package/dist/components/Button/BaseButton.js +12 -41
- package/dist/components/Button/Button.js +6 -4
- package/dist/components/Button/ButtonBadge.js +13 -12
- package/dist/components/Button/ButtonSeverity.js +6 -4
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/types.d.ts +2 -25
- package/dist/components/Button/utils/ButtonActivityIndicator.d.ts +3 -3
- package/dist/components/Button/utils/ButtonActivityIndicator.js +16 -12
- package/dist/components/Button/utils/ButtonContainer.d.ts +15 -6
- package/dist/components/Button/utils/ButtonContainer.js +424 -4
- package/dist/components/Button/utils/ButtonIcon.d.ts +8 -4
- package/dist/components/Button/utils/ButtonIcon.js +147 -4
- package/dist/components/Button/utils/ButtonLabel.d.ts +9 -4
- package/dist/components/Button/utils/ButtonLabel.js +139 -4
- package/dist/components/Button/utils/ButtonLeftArea.d.ts +9 -4
- package/dist/components/Button/utils/ButtonLeftArea.js +3 -3
- package/dist/components/Button/utils/ButtonPressedContext.d.ts +1 -0
- package/dist/components/Button/utils/ButtonPressedContext.js +2 -0
- package/dist/components/Button/utils/ButtonRightArea.d.ts +9 -3
- package/dist/components/Button/utils/ButtonRightArea.js +3 -3
- package/dist/components/Button/utils/ButtonVariantContext.d.ts +6 -0
- package/dist/components/Button/utils/ButtonVariantContext.js +4 -0
- package/dist/components/Checkbox/Checkbox.d.ts +6 -7
- package/dist/components/Checkbox/Checkbox.js +74 -22
- package/dist/components/Chip/Chip.js +13 -7
- package/dist/components/Dialog/DialogComponent.js +2 -3
- package/dist/components/Dialog/DialogHeader.js +17 -13
- package/dist/components/Divider/Divider.js +6 -6
- package/dist/components/Input/InputGroup.js +6 -13
- package/dist/components/Input/InputGroupAddon.js +5 -5
- package/dist/components/Input/InputOtp/InputOtp.js +2 -3
- package/dist/components/Input/InputOtp/InputOtpItem.js +2 -3
- package/dist/components/Input/InputSwitch/InputSwitch.js +2 -2
- package/dist/components/Input/InputSwitch/styles/useHandleStyles.js +13 -11
- package/dist/components/Input/InputSwitch/styles/useSliderStyles.d.ts +6 -5
- package/dist/components/Input/InputSwitch/styles/useSliderStyles.js +36 -29
- package/dist/components/Input/InputTextBase/InputTextBase.d.ts +0 -5
- package/dist/components/Input/InputTextBase/InputTextBase.js +41 -26
- package/dist/components/Input/InputTextBase/useInputStyles.d.ts +6 -5
- package/dist/components/Input/InputTextBase/useInputStyles.js +6 -9
- package/dist/components/Input/index.d.ts +0 -1
- package/dist/components/Input/index.js +0 -1
- package/dist/components/List/Base/ListBase.js +17 -14
- package/dist/components/MenuItem/MenuItemAccessory.js +5 -5
- package/dist/components/MenuItem/MenuItemIcon.js +4 -5
- package/dist/components/MenuItem/Template/MenuItemTemplate.js +8 -5
- package/dist/components/Message/Message.js +54 -38
- package/dist/components/ProgressBar/ProgressBar.js +2 -3
- package/dist/components/ProgressSpinner/ProgressSpinner.js +3 -4
- package/dist/components/RadioButton/RadioButton.js +87 -104
- package/dist/components/Rating/Rating.js +2 -3
- package/dist/components/Rating/RatingClear.js +10 -11
- package/dist/components/Rating/RatingItem.js +23 -24
- package/dist/components/Rating/RatingItemContainer.js +2 -3
- package/dist/components/SelectButton/SelectButton.js +2 -3
- package/dist/components/SelectButton/SelectButtonItem.js +22 -49
- package/dist/components/Skeleton/Skeleton.js +2 -3
- package/dist/components/Slider/Slider.js +4 -6
- package/dist/components/Tabs/TabItem/TabItem.js +12 -21
- package/dist/components/Tabs/Tabs.js +2 -3
- package/dist/components/Tag/Tag.js +44 -29
- package/dist/components/Timer/Timer.js +2 -3
- package/dist/components/Timer/TimerFlip.js +2 -3
- package/dist/components/ToggleButton/ToggleButton.js +159 -35
- package/dist/components/Typography/Anchor.js +11 -7
- package/dist/components/Typography/Body.js +3 -4
- package/dist/components/Typography/Caption.js +11 -5
- package/dist/components/Typography/Service.js +13 -7
- package/dist/components/Typography/Subtitle.js +3 -6
- package/dist/components/Typography/Title.js +3 -6
- package/dist/hooks/useChangeTheme.d.ts +2 -1
- package/dist/hooks/useChangeTheme.js +10 -3
- package/dist/hooks/useFonts.d.ts +2 -1
- package/dist/hooks/useFonts.js +3 -3
- package/dist/hooks/useTheme.d.ts +2 -1
- package/dist/hooks/useTheme.js +6 -4
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -1
- package/dist/theme/ThemeContext.d.ts +9 -7
- package/dist/theme/ThemeContext.js +21 -14
- package/dist/theme/darkTheme.js +1 -0
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.js +1 -1
- package/dist/theme/lightTheme.js +1 -0
- package/dist/theme/types.d.ts +1 -0
- package/dist/utils/SvgUniversal.d.ts +9 -14
- package/dist/utils/SvgUniversal.js +10 -2
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +1 -0
- package/package.json +18 -8
- package/dist/components/Button/styles/index.d.ts +0 -2
- package/dist/components/Button/styles/index.js +0 -2
- package/dist/components/Button/styles/useBasicButtonStyles.d.ts +0 -98
- package/dist/components/Button/styles/useBasicButtonStyles.js +0 -81
- package/dist/components/Button/styles/useDangerButtonStyles.d.ts +0 -63
- package/dist/components/Button/styles/useDangerButtonStyles.js +0 -57
- package/dist/components/Button/styles/useInfoButtonStyles.d.ts +0 -63
- package/dist/components/Button/styles/useInfoButtonStyles.js +0 -56
- package/dist/components/Button/styles/useSeverityButtonStyles.d.ts +0 -64
- package/dist/components/Button/styles/useSeverityButtonStyles.js +0 -29
- package/dist/components/Button/styles/useSuccessButtonStyles.d.ts +0 -63
- package/dist/components/Button/styles/useSuccessButtonStyles.js +0 -61
- package/dist/components/Button/styles/useWarningButtonStyles.d.ts +0 -63
- package/dist/components/Button/styles/useWarningButtonStyles.js +0 -61
- package/dist/components/Button/utils/useButtonContainerCallbackStyle.d.ts +0 -3
- package/dist/components/Button/utils/useButtonContainerCallbackStyle.js +0 -141
- package/dist/components/Button/utils/useButtonLabelStyle.d.ts +0 -3
- package/dist/components/Button/utils/useButtonLabelStyle.js +0 -40
- package/dist/components/Button/utils/useIconStyle.d.ts +0 -7
- package/dist/components/Button/utils/useIconStyle.js +0 -35
- package/dist/components/Button/utils/useTypeBasedStyle.d.ts +0 -2
- package/dist/components/Button/utils/useTypeBasedStyle.js +0 -4
- package/dist/components/Checkbox/hooks/usePressableStyles.d.ts +0 -15
- package/dist/components/Checkbox/hooks/usePressableStyles.js +0 -91
- package/dist/components/Input/FloatLabel.d.ts +0 -22
- package/dist/components/Input/FloatLabel.js +0 -19
- package/dist/components/ToggleButton/hooks/useIconSize.d.ts +0 -14
- package/dist/components/ToggleButton/hooks/useIconSize.js +0 -26
- package/dist/components/ToggleButton/hooks/useLabelSize.d.ts +0 -8
- package/dist/components/ToggleButton/hooks/useLabelSize.js +0 -19
- package/dist/components/ToggleButton/hooks/useStateStyles.d.ts +0 -11
- package/dist/components/ToggleButton/hooks/useStateStyles.js +0 -92
- package/dist/utils/makeStyles.d.ts +0 -11
- package/dist/utils/makeStyles.js +0 -19
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import { StyleSheet, } from 'react-native';
|
|
3
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
4
|
-
import { useTypeBasedStyle } from './useTypeBasedStyle';
|
|
5
|
-
export const useButtonContainerCallbackStyle = (size, variant, shape, disabled, loading, iconOnly, style, containerVariantStyles, pressedVariantStyles) => {
|
|
6
|
-
const styles = useButtonContainerStyle();
|
|
7
|
-
const sizeBasedStyle = useTypeBasedStyle(size, styles);
|
|
8
|
-
const variantBasedStyle = useTypeBasedStyle(variant, containerVariantStyles);
|
|
9
|
-
const shapeBasedStyle = useTypeBasedStyle(shape, styles);
|
|
10
|
-
const pressedStyle = useTypeBasedStyle(variant, pressedVariantStyles);
|
|
11
|
-
const iconOnlyLinkContainerStyle = useIconOnlyLinkContainerStyle();
|
|
12
|
-
const disabledStyle = useMemo(() => {
|
|
13
|
-
if (variant === 'link') {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
return styles.disabled;
|
|
17
|
-
}, [styles.disabled, variant]);
|
|
18
|
-
return useCallback(({ pressed }) => {
|
|
19
|
-
const containerStyle = [
|
|
20
|
-
styles.container,
|
|
21
|
-
sizeBasedStyle,
|
|
22
|
-
variantBasedStyle,
|
|
23
|
-
shapeBasedStyle,
|
|
24
|
-
];
|
|
25
|
-
if (iconOnly) {
|
|
26
|
-
containerStyle.push(styles.iconOnly);
|
|
27
|
-
if (variant === 'link') {
|
|
28
|
-
containerStyle.push(iconOnlyLinkContainerStyle[size]);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
if (disabled || loading) {
|
|
32
|
-
containerStyle.push(disabledStyle);
|
|
33
|
-
}
|
|
34
|
-
if (pressed) {
|
|
35
|
-
containerStyle.push(pressedStyle);
|
|
36
|
-
}
|
|
37
|
-
if (typeof style === 'function') {
|
|
38
|
-
containerStyle.push(style({ pressed }));
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
containerStyle.push(style);
|
|
42
|
-
}
|
|
43
|
-
return StyleSheet.flatten(containerStyle);
|
|
44
|
-
}, [
|
|
45
|
-
disabled,
|
|
46
|
-
disabledStyle,
|
|
47
|
-
iconOnly,
|
|
48
|
-
iconOnlyLinkContainerStyle,
|
|
49
|
-
loading,
|
|
50
|
-
pressedStyle,
|
|
51
|
-
shapeBasedStyle,
|
|
52
|
-
size,
|
|
53
|
-
sizeBasedStyle,
|
|
54
|
-
style,
|
|
55
|
-
styles.container,
|
|
56
|
-
styles.iconOnly,
|
|
57
|
-
variant,
|
|
58
|
-
variantBasedStyle,
|
|
59
|
-
]);
|
|
60
|
-
};
|
|
61
|
-
const useButtonContainerStyle = makeStyles(({ theme, border, spacing }) => ({
|
|
62
|
-
container: {
|
|
63
|
-
flexDirection: 'row',
|
|
64
|
-
justifyContent: 'center',
|
|
65
|
-
alignItems: 'center',
|
|
66
|
-
borderWidth: border.Width.border,
|
|
67
|
-
},
|
|
68
|
-
xlarge: {
|
|
69
|
-
paddingHorizontal: spacing.Padding['p-6'],
|
|
70
|
-
paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
|
|
71
|
-
height: theme.Button.Common.buttonHeightXL,
|
|
72
|
-
minHeight: theme.Button.Common.buttonHeightXL,
|
|
73
|
-
maxHeight: theme.Button.Common.buttonHeightXL,
|
|
74
|
-
gap: spacing.Gap['gap-3'],
|
|
75
|
-
borderRadius: theme.General.borderRadius2XL,
|
|
76
|
-
},
|
|
77
|
-
large: {
|
|
78
|
-
paddingHorizontal: spacing.Padding['p-6'],
|
|
79
|
-
paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
|
|
80
|
-
height: theme.Button.Common.buttonHeightLG,
|
|
81
|
-
minHeight: theme.Button.Common.buttonHeightLG,
|
|
82
|
-
maxHeight: theme.Button.Common.buttonHeightLG,
|
|
83
|
-
gap: spacing.Gap['gap-3'],
|
|
84
|
-
borderRadius: theme.General.borderRadius2XL,
|
|
85
|
-
},
|
|
86
|
-
base: {
|
|
87
|
-
paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight,
|
|
88
|
-
paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
|
|
89
|
-
height: theme.Button.Common.buttonHeight,
|
|
90
|
-
minHeight: theme.Button.Common.buttonHeight,
|
|
91
|
-
maxHeight: theme.Button.Common.buttonHeight,
|
|
92
|
-
gap: theme.General.inlineSpacing,
|
|
93
|
-
borderRadius: theme.General.borderRadiusXL,
|
|
94
|
-
},
|
|
95
|
-
small: {
|
|
96
|
-
paddingHorizontal: spacing.Padding['p-3'],
|
|
97
|
-
paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
|
|
98
|
-
height: theme.Button.Common.buttonHeightSM,
|
|
99
|
-
minHeight: theme.Button.Common.buttonHeightSM,
|
|
100
|
-
maxHeight: theme.Button.Common.buttonHeightSM,
|
|
101
|
-
gap: theme.General.inlineSpacing,
|
|
102
|
-
borderRadius: theme.General.borderRadiusXL,
|
|
103
|
-
},
|
|
104
|
-
square: {},
|
|
105
|
-
circle: { borderRadius: border.Radius['rounded-full'] },
|
|
106
|
-
disabled: {
|
|
107
|
-
backgroundColor: theme.Button.Disabled.disabledButtonBg,
|
|
108
|
-
borderColor: theme.Button.Disabled.disabledButtonBorderColor,
|
|
109
|
-
},
|
|
110
|
-
iconOnly: { aspectRatio: 1 },
|
|
111
|
-
}));
|
|
112
|
-
const useIconOnlyLinkContainerStyle = makeStyles(({ spacing, sizing }) => ({
|
|
113
|
-
xlarge: {
|
|
114
|
-
paddingHorizontal: spacing.Gap['gap-1'],
|
|
115
|
-
paddingVertical: spacing.Gap['gap-1'],
|
|
116
|
-
height: sizing.Height['h-2'],
|
|
117
|
-
minHeight: sizing.Height['h-2'],
|
|
118
|
-
maxHeight: sizing.Height['h-2'],
|
|
119
|
-
},
|
|
120
|
-
large: {
|
|
121
|
-
paddingHorizontal: spacing.Gap['gap-0'],
|
|
122
|
-
paddingVertical: spacing.Gap['gap-0'],
|
|
123
|
-
height: 24.5,
|
|
124
|
-
minHeight: 24.5,
|
|
125
|
-
maxHeight: 24.5,
|
|
126
|
-
},
|
|
127
|
-
base: {
|
|
128
|
-
paddingHorizontal: spacing.Gap['gap-1'],
|
|
129
|
-
paddingVertical: spacing.Gap['gap-1'],
|
|
130
|
-
height: 21.5,
|
|
131
|
-
minHeight: 21.5,
|
|
132
|
-
maxHeight: 21.5,
|
|
133
|
-
},
|
|
134
|
-
small: {
|
|
135
|
-
paddingHorizontal: spacing.Gap['gap-1'],
|
|
136
|
-
paddingVertical: spacing.Gap['gap-1'],
|
|
137
|
-
height: sizing.Height['h-1'],
|
|
138
|
-
minHeight: sizing.Height['h-2'],
|
|
139
|
-
maxHeight: sizing.Height['h-2'],
|
|
140
|
-
},
|
|
141
|
-
}));
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { type TextStyle } from 'react-native';
|
|
2
|
-
import type { BaseButtonProps, ButtonVariant, LabelVariantStyles } from '../types';
|
|
3
|
-
export declare const useButtonLabelStyle: <Variant extends ButtonVariant>(size: Required<BaseButtonProps<Variant>>["size"], variant: Required<BaseButtonProps<Variant>>["variant"], disabled: Required<BaseButtonProps<Variant>>["disabled"], loading: Required<BaseButtonProps<Variant>>["loading"], labelVariantStyles: LabelVariantStyles<Variant>) => TextStyle;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { StyleSheet } from 'react-native';
|
|
3
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
4
|
-
import { useTypeBasedStyle } from './useTypeBasedStyle';
|
|
5
|
-
export const useButtonLabelStyle = (size, variant, disabled, loading, labelVariantStyles) => {
|
|
6
|
-
const styles = useButtonLabelStyles();
|
|
7
|
-
const sizeBasedStyle = useTypeBasedStyle(size, styles);
|
|
8
|
-
const variantBasedStyle = useTypeBasedStyle(variant, labelVariantStyles);
|
|
9
|
-
return useMemo(() => {
|
|
10
|
-
const containerStyle = [
|
|
11
|
-
styles.font,
|
|
12
|
-
sizeBasedStyle,
|
|
13
|
-
variantBasedStyle,
|
|
14
|
-
];
|
|
15
|
-
if (disabled || loading) {
|
|
16
|
-
containerStyle.push(styles.disabled);
|
|
17
|
-
}
|
|
18
|
-
return StyleSheet.flatten(containerStyle);
|
|
19
|
-
}, [
|
|
20
|
-
disabled,
|
|
21
|
-
loading,
|
|
22
|
-
sizeBasedStyle,
|
|
23
|
-
styles.disabled,
|
|
24
|
-
styles.font,
|
|
25
|
-
variantBasedStyle,
|
|
26
|
-
]);
|
|
27
|
-
};
|
|
28
|
-
const useButtonLabelStyles = makeStyles(({ theme, typography, fonts }) => ({
|
|
29
|
-
font: {
|
|
30
|
-
fontWeight: 600,
|
|
31
|
-
includeFontPadding: false,
|
|
32
|
-
verticalAlign: 'middle',
|
|
33
|
-
fontFamily: fonts.primary,
|
|
34
|
-
},
|
|
35
|
-
xlarge: { fontSize: typography.Size['text-xl'] },
|
|
36
|
-
large: { fontSize: typography.Size['text-xl'] },
|
|
37
|
-
base: { fontSize: typography.Size['text-base'] },
|
|
38
|
-
small: { fontSize: typography.Size['text-sm'] },
|
|
39
|
-
disabled: { color: theme.Button.Disabled.disabledButtonTextColor },
|
|
40
|
-
}));
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type ColorValue } from 'react-native';
|
|
2
|
-
import type { BaseButtonProps, ButtonVariant, IconVariantStyles } from '../types';
|
|
3
|
-
export declare const useIconStyle: <Variant extends ButtonVariant>(size: Required<BaseButtonProps<Variant>>["size"], variant: Required<BaseButtonProps<Variant>>["variant"], disabled: Required<BaseButtonProps<Variant>>["disabled"], loading: Required<BaseButtonProps<Variant>>["loading"], iconVariantStyles: IconVariantStyles<Variant>) => {
|
|
4
|
-
width: number;
|
|
5
|
-
height: number;
|
|
6
|
-
color: ColorValue;
|
|
7
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { StyleSheet } from 'react-native';
|
|
3
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
4
|
-
import { useTypeBasedStyle } from './useTypeBasedStyle';
|
|
5
|
-
export const useIconStyle = (size, variant, disabled, loading, iconVariantStyles) => {
|
|
6
|
-
const styles = useStyles();
|
|
7
|
-
const sizeBasedStyle = useTypeBasedStyle(size, styles);
|
|
8
|
-
const variantBasedStyle = useTypeBasedStyle(variant, iconVariantStyles);
|
|
9
|
-
return useMemo(() => {
|
|
10
|
-
const containerStyle = [sizeBasedStyle, variantBasedStyle];
|
|
11
|
-
if (disabled || loading) {
|
|
12
|
-
containerStyle.push(styles.disabled);
|
|
13
|
-
}
|
|
14
|
-
return StyleSheet.flatten(containerStyle);
|
|
15
|
-
}, [disabled, loading, sizeBasedStyle, styles.disabled, variantBasedStyle]);
|
|
16
|
-
};
|
|
17
|
-
const useStyles = makeStyles(({ theme, typography }) => ({
|
|
18
|
-
xlarge: {
|
|
19
|
-
height: typography.Size['text-2xl'],
|
|
20
|
-
width: typography.Size['text-2xl'],
|
|
21
|
-
},
|
|
22
|
-
large: {
|
|
23
|
-
height: typography.Size['text-2xl'],
|
|
24
|
-
width: typography.Size['text-2xl'],
|
|
25
|
-
},
|
|
26
|
-
base: {
|
|
27
|
-
height: typography.Size['text-xl'],
|
|
28
|
-
width: typography.Size['text-xl'],
|
|
29
|
-
},
|
|
30
|
-
small: {
|
|
31
|
-
height: typography.Size['text-base'],
|
|
32
|
-
width: typography.Size['text-base'],
|
|
33
|
-
},
|
|
34
|
-
disabled: { color: theme.Button.Disabled.disabledButtonTextColor },
|
|
35
|
-
}));
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import type { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native';
|
|
2
|
-
export declare const useTypeBasedStyle: <Type extends string, Style extends TextStyle | ViewStyle | ImageStyle | object>(type: Type, styles: Record<Type, StyleProp<Style>>) => Record<Type, StyleProp<Style>>[Type];
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { CheckboxProps } from '../Checkbox';
|
|
2
|
-
export declare const usePressableStyles: ({ checked, indeterminate, disabled, state, }: Pick<CheckboxProps, "checked" | "indeterminate" | "disabled" | "state">) => (pressed: boolean) => (false | {
|
|
3
|
-
width: number;
|
|
4
|
-
height: number;
|
|
5
|
-
borderRadius: number;
|
|
6
|
-
borderWidth: number;
|
|
7
|
-
} | {
|
|
8
|
-
backgroundColor: string;
|
|
9
|
-
borderColor: string;
|
|
10
|
-
} | {
|
|
11
|
-
borderColor: string;
|
|
12
|
-
opacity: number;
|
|
13
|
-
outlineWidth: number;
|
|
14
|
-
mixBlendMode: "luminosity";
|
|
15
|
-
})[];
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
3
|
-
export const usePressableStyles = ({ checked, indeterminate = false, disabled = false, state, }) => {
|
|
4
|
-
const styles = useStyles();
|
|
5
|
-
const styleMap = useMemo(() => ({
|
|
6
|
-
default: { filled: styles.defaultFilled, clean: styles.defaultClean },
|
|
7
|
-
disabled: { filled: styles.disabledFilled, clean: styles.disabledClean },
|
|
8
|
-
danger: {
|
|
9
|
-
filled: { ...styles.dangerFilled, ...styles.dangerOutline },
|
|
10
|
-
clean: { ...styles.dangerClean, ...styles.dangerOutline },
|
|
11
|
-
},
|
|
12
|
-
hover: { filled: styles.hoverFilled, clean: styles.hoverClean },
|
|
13
|
-
}), [
|
|
14
|
-
styles.defaultFilled,
|
|
15
|
-
styles.defaultClean,
|
|
16
|
-
styles.disabledFilled,
|
|
17
|
-
styles.disabledClean,
|
|
18
|
-
styles.dangerFilled,
|
|
19
|
-
styles.dangerClean,
|
|
20
|
-
styles.hoverFilled,
|
|
21
|
-
styles.hoverClean,
|
|
22
|
-
styles.dangerOutline,
|
|
23
|
-
]);
|
|
24
|
-
return useCallback((pressed) => {
|
|
25
|
-
const isFilled = checked || indeterminate;
|
|
26
|
-
const stateStyles = state in styleMap && isFilled
|
|
27
|
-
? styleMap[state].filled
|
|
28
|
-
: styleMap[state].clean;
|
|
29
|
-
const disabledStyles = isFilled
|
|
30
|
-
? styleMap.disabled.filled
|
|
31
|
-
: styleMap.disabled.clean;
|
|
32
|
-
const pressedStyles = isFilled
|
|
33
|
-
? styleMap.hover.filled
|
|
34
|
-
: styleMap.hover.clean;
|
|
35
|
-
return [
|
|
36
|
-
styles.container,
|
|
37
|
-
stateStyles,
|
|
38
|
-
disabled && disabledStyles,
|
|
39
|
-
pressed && pressedStyles,
|
|
40
|
-
];
|
|
41
|
-
}, [checked, indeterminate, disabled, state, styles.container, styleMap]);
|
|
42
|
-
};
|
|
43
|
-
const useStyles = makeStyles(({ theme, border }) => ({
|
|
44
|
-
container: {
|
|
45
|
-
width: theme.Form.Checkbox.checkboxWidth,
|
|
46
|
-
height: theme.Form.Checkbox.checkboxHeight,
|
|
47
|
-
borderRadius: border.Radius['rounded-lg'],
|
|
48
|
-
borderWidth: border.Width.border,
|
|
49
|
-
},
|
|
50
|
-
defaultClean: {
|
|
51
|
-
backgroundColor: theme.Form.InputText.inputBg,
|
|
52
|
-
borderColor: theme.Form.InputText.inputBorderColor,
|
|
53
|
-
},
|
|
54
|
-
defaultFilled: {
|
|
55
|
-
backgroundColor: theme.Form.Checkbox.checkboxActiveBg,
|
|
56
|
-
borderColor: theme.Form.Checkbox.checkboxActiveBorderColor,
|
|
57
|
-
},
|
|
58
|
-
hoverClean: {
|
|
59
|
-
backgroundColor: theme.Form.InputText.inputBg,
|
|
60
|
-
borderColor: theme.Form.InputText.inputHoverBorderColor,
|
|
61
|
-
},
|
|
62
|
-
hoverFilled: {
|
|
63
|
-
backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg,
|
|
64
|
-
borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor,
|
|
65
|
-
},
|
|
66
|
-
dangerClean: {
|
|
67
|
-
backgroundColor: theme.Form.InputText.inputBg,
|
|
68
|
-
borderColor: theme.Form.InputText.inputErrorBorderColor,
|
|
69
|
-
},
|
|
70
|
-
dangerFilled: {
|
|
71
|
-
backgroundColor: theme.Form.Checkbox.checkboxActiveBg,
|
|
72
|
-
borderColor: theme.Form.InputText.inputErrorBorderColor,
|
|
73
|
-
},
|
|
74
|
-
dangerOutline: {
|
|
75
|
-
outlineStyle: 'solid',
|
|
76
|
-
outlineColor: theme.General.focusOutlineErrorColor,
|
|
77
|
-
outlineWidth: Math.round(theme.General.focusShadowWidth),
|
|
78
|
-
},
|
|
79
|
-
disabledClean: {
|
|
80
|
-
backgroundColor: theme.Button.Disabled.disabledButtonBg,
|
|
81
|
-
borderColor: theme.Form.InputText.inputBorderColor,
|
|
82
|
-
outlineWidth: 0,
|
|
83
|
-
mixBlendMode: 'luminosity',
|
|
84
|
-
},
|
|
85
|
-
disabledFilled: {
|
|
86
|
-
borderColor: theme.Form.Checkbox.checkboxActiveBorderColor,
|
|
87
|
-
opacity: 0.2,
|
|
88
|
-
outlineWidth: 0,
|
|
89
|
-
mixBlendMode: 'luminosity',
|
|
90
|
-
},
|
|
91
|
-
}));
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
2
|
-
import type { InputTextBaseProps } from './InputTextBase/types';
|
|
3
|
-
export interface FloatLabelProps extends InputTextBaseProps {
|
|
4
|
-
/** Текст плейсхолдера */
|
|
5
|
-
placeholder: string;
|
|
6
|
-
/** Показать индикатор загрузки в поле */
|
|
7
|
-
loading?: boolean;
|
|
8
|
-
/** Дополнительная стилизация для контейнера компонента */
|
|
9
|
-
style?: StyleProp<ViewStyle>;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Компонент для ввода текста с плавающим плейсхолдером
|
|
13
|
-
* @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=2168-9279
|
|
14
|
-
* @see InputTextBaseProps
|
|
15
|
-
* @deprecated Используйте {@link InputText} с `floatLabel={true}`
|
|
16
|
-
*/
|
|
17
|
-
export declare const FloatLabel: import("react").NamedExoticComponent<FloatLabelProps>;
|
|
18
|
-
export declare const FloatLabelTestId: {
|
|
19
|
-
root: string;
|
|
20
|
-
pressable: string;
|
|
21
|
-
placeholder: string;
|
|
22
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { memo } from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { InputTextBase } from './InputTextBase/InputTextBase';
|
|
4
|
-
/**
|
|
5
|
-
* Компонент для ввода текста с плавающим плейсхолдером
|
|
6
|
-
* @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=2168-9279
|
|
7
|
-
* @see InputTextBaseProps
|
|
8
|
-
* @deprecated Используйте {@link InputText} с `floatLabel={true}`
|
|
9
|
-
*/
|
|
10
|
-
export const FloatLabel = memo(({ style, ...otherProps }) => {
|
|
11
|
-
return (<View style={style}>
|
|
12
|
-
<InputTextBase {...otherProps}/>
|
|
13
|
-
</View>);
|
|
14
|
-
});
|
|
15
|
-
export const FloatLabelTestId = {
|
|
16
|
-
root: 'FloatLabel',
|
|
17
|
-
pressable: 'PressableContainer',
|
|
18
|
-
placeholder: 'Placeholder',
|
|
19
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { ToggleButtonProps } from '../ToggleButton';
|
|
2
|
-
export declare const useIconSize: (size?: ToggleButtonProps["size"]) => {
|
|
3
|
-
width: number;
|
|
4
|
-
height: number;
|
|
5
|
-
} | {
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
} | {
|
|
9
|
-
width: number;
|
|
10
|
-
height: number;
|
|
11
|
-
} | {
|
|
12
|
-
width: number;
|
|
13
|
-
height: number;
|
|
14
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
3
|
-
export const useIconSize = (size = 'base') => {
|
|
4
|
-
const styles = useStyles();
|
|
5
|
-
return useMemo(() => {
|
|
6
|
-
return styles[size];
|
|
7
|
-
}, [size, styles]);
|
|
8
|
-
};
|
|
9
|
-
const useStyles = makeStyles(({ typography }) => ({
|
|
10
|
-
xlarge: {
|
|
11
|
-
width: typography.Size['text-4xl'],
|
|
12
|
-
height: typography.Size['text-4xl'],
|
|
13
|
-
},
|
|
14
|
-
large: {
|
|
15
|
-
width: typography.Size['text-2xl'],
|
|
16
|
-
height: typography.Size['text-2xl'],
|
|
17
|
-
},
|
|
18
|
-
base: {
|
|
19
|
-
width: typography.Size['text-xl'],
|
|
20
|
-
height: typography.Size['text-xl'],
|
|
21
|
-
},
|
|
22
|
-
small: {
|
|
23
|
-
width: typography.Size['text-base'],
|
|
24
|
-
height: typography.Size['text-base'],
|
|
25
|
-
},
|
|
26
|
-
}));
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
3
|
-
export const useLabelSize = (size = 'base') => {
|
|
4
|
-
const styles = useStyles();
|
|
5
|
-
return useMemo(() => {
|
|
6
|
-
return [styles.common, styles[size]];
|
|
7
|
-
}, [size, styles]);
|
|
8
|
-
};
|
|
9
|
-
const useStyles = makeStyles(({ typography }) => ({
|
|
10
|
-
common: {
|
|
11
|
-
fontWeight: '600',
|
|
12
|
-
includeFontPadding: false,
|
|
13
|
-
verticalAlign: 'middle',
|
|
14
|
-
},
|
|
15
|
-
xlarge: { fontSize: typography.Size['text-2xl'] },
|
|
16
|
-
large: { fontSize: typography.Size['text-xl'] },
|
|
17
|
-
base: { fontSize: typography.Size['text-base'] },
|
|
18
|
-
small: { fontSize: typography.Size['text-sm'] },
|
|
19
|
-
}));
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export declare const useStateStyles: (checked?: boolean, disabled?: boolean, pressed?: boolean) => {
|
|
2
|
-
borderContainer: (false | {
|
|
3
|
-
borderColor: string;
|
|
4
|
-
})[];
|
|
5
|
-
contentContainer: (false | {
|
|
6
|
-
backgroundColor: string;
|
|
7
|
-
})[];
|
|
8
|
-
label: (false | {
|
|
9
|
-
color: string;
|
|
10
|
-
})[];
|
|
11
|
-
};
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { makeStyles } from '../../../utils/makeStyles';
|
|
3
|
-
export const useStateStyles = (checked = false, disabled = false, pressed = false) => {
|
|
4
|
-
const styles = useStyles();
|
|
5
|
-
const borderContainer = useMemo(() => [
|
|
6
|
-
styles.borderContainer,
|
|
7
|
-
pressed && styles.pressedBorderContainer,
|
|
8
|
-
checked && styles.checkedBorderContainer,
|
|
9
|
-
checked && pressed && styles.checkedPressedBorderContainer,
|
|
10
|
-
disabled && styles.disabledBorderContainer,
|
|
11
|
-
], [
|
|
12
|
-
checked,
|
|
13
|
-
disabled,
|
|
14
|
-
pressed,
|
|
15
|
-
styles.borderContainer,
|
|
16
|
-
styles.checkedBorderContainer,
|
|
17
|
-
styles.checkedPressedBorderContainer,
|
|
18
|
-
styles.disabledBorderContainer,
|
|
19
|
-
styles.pressedBorderContainer,
|
|
20
|
-
]);
|
|
21
|
-
const contentContainer = useMemo(() => [
|
|
22
|
-
styles.contentContainer,
|
|
23
|
-
pressed && styles.pressedContentContainer,
|
|
24
|
-
checked && styles.checkedContentContainer,
|
|
25
|
-
checked && pressed && styles.checkedPressedContentContainer,
|
|
26
|
-
disabled && styles.disabledContentContainer,
|
|
27
|
-
], [
|
|
28
|
-
checked,
|
|
29
|
-
disabled,
|
|
30
|
-
pressed,
|
|
31
|
-
styles.checkedContentContainer,
|
|
32
|
-
styles.checkedPressedContentContainer,
|
|
33
|
-
styles.contentContainer,
|
|
34
|
-
styles.disabledContentContainer,
|
|
35
|
-
styles.pressedContentContainer,
|
|
36
|
-
]);
|
|
37
|
-
const label = useMemo(() => [
|
|
38
|
-
styles.label,
|
|
39
|
-
pressed && styles.pressedLabel,
|
|
40
|
-
checked && styles.checkedLabel,
|
|
41
|
-
checked && pressed && styles.checkedPressedLabel,
|
|
42
|
-
disabled && styles.disabledLabel,
|
|
43
|
-
], [
|
|
44
|
-
checked,
|
|
45
|
-
disabled,
|
|
46
|
-
pressed,
|
|
47
|
-
styles.checkedLabel,
|
|
48
|
-
styles.checkedPressedLabel,
|
|
49
|
-
styles.disabledLabel,
|
|
50
|
-
styles.label,
|
|
51
|
-
styles.pressedLabel,
|
|
52
|
-
]);
|
|
53
|
-
return useMemo(() => ({ borderContainer, contentContainer, label }), [borderContainer, contentContainer, label]);
|
|
54
|
-
};
|
|
55
|
-
const useStyles = makeStyles(({ theme }) => ({
|
|
56
|
-
borderContainer: {
|
|
57
|
-
borderColor: theme.Form.ToggleButton.toggleButtonBorderColor,
|
|
58
|
-
},
|
|
59
|
-
pressedBorderContainer: {
|
|
60
|
-
borderColor: theme.Form.ToggleButton.toggleButtonHoverBg,
|
|
61
|
-
},
|
|
62
|
-
checkedBorderContainer: {
|
|
63
|
-
borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor,
|
|
64
|
-
},
|
|
65
|
-
checkedPressedBorderContainer: {
|
|
66
|
-
borderColor: theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor,
|
|
67
|
-
},
|
|
68
|
-
disabledBorderContainer: {
|
|
69
|
-
borderColor: theme.Button.Disabled.disabledButtonBorderColor,
|
|
70
|
-
opacity: 0.6,
|
|
71
|
-
},
|
|
72
|
-
contentContainer: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg },
|
|
73
|
-
pressedContentContainer: {
|
|
74
|
-
backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg,
|
|
75
|
-
},
|
|
76
|
-
checkedContentContainer: {
|
|
77
|
-
backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg,
|
|
78
|
-
},
|
|
79
|
-
checkedPressedContentContainer: {
|
|
80
|
-
backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg,
|
|
81
|
-
},
|
|
82
|
-
disabledContentContainer: {
|
|
83
|
-
backgroundColor: theme.Button.Disabled.disabledButtonBg,
|
|
84
|
-
},
|
|
85
|
-
label: { color: theme.Form.ToggleButton.toggleButtonTextColor },
|
|
86
|
-
pressedLabel: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor },
|
|
87
|
-
checkedLabel: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor },
|
|
88
|
-
checkedPressedLabel: {
|
|
89
|
-
color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor,
|
|
90
|
-
},
|
|
91
|
-
disabledLabel: { color: theme.Button.Disabled.disabledButtonTextColor },
|
|
92
|
-
}));
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
|
2
|
-
import { type FontsConfigType, type ThemeType } from '../theme';
|
|
3
|
-
export declare const makeStyles: <T extends StylesObject>(createStyles: CreateStyles<T>) => (() => T);
|
|
4
|
-
type StylesItem = ViewStyle | ImageStyle | TextStyle;
|
|
5
|
-
type StylesObject = Record<string, StylesItem>;
|
|
6
|
-
type CreateStyles<T extends StylesObject> = (theme: ThemeType & FontsConfigType) => CheckInvalidProps<T> extends never ? T : 'TypeError. Invalid key of style property was used.';
|
|
7
|
-
type ExcludeStylesProps<T> = Exclude<keyof T, keyof (ViewStyle & ImageStyle & TextStyle)>;
|
|
8
|
-
type CheckInvalidProps<T extends object> = {
|
|
9
|
-
[Key in keyof T]: ExcludeStylesProps<T[Key]>;
|
|
10
|
-
}[keyof T];
|
|
11
|
-
export {};
|
package/dist/utils/makeStyles.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { useFonts } from '../hooks/useFonts';
|
|
3
|
-
import { useTheme } from '../hooks/useTheme';
|
|
4
|
-
import { darkTheme, lightTheme, ThemeVariant, } from '../theme';
|
|
5
|
-
export const makeStyles = (createStyles) => () => {
|
|
6
|
-
const fonts = useFonts();
|
|
7
|
-
const theme = useTheme();
|
|
8
|
-
const themeValues = useMemo(() => {
|
|
9
|
-
switch (theme) {
|
|
10
|
-
case ThemeVariant.Light:
|
|
11
|
-
return lightTheme;
|
|
12
|
-
case ThemeVariant.Dark:
|
|
13
|
-
return darkTheme;
|
|
14
|
-
default:
|
|
15
|
-
return lightTheme;
|
|
16
|
-
}
|
|
17
|
-
}, [theme]);
|
|
18
|
-
return useMemo(() => createStyles({ ...themeValues, fonts }), [fonts, themeValues]);
|
|
19
|
-
};
|