@artsy/palette-mobile 14.0.22 → 14.0.23
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.
|
@@ -8,7 +8,7 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRe
|
|
|
8
8
|
import { LayoutAnimation, Platform, TextInput, TouchableOpacity, } from "react-native";
|
|
9
9
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
10
10
|
import styled from "styled-components";
|
|
11
|
-
import {
|
|
11
|
+
import { getInputState, getInputVariant, getInputVariants, } from "./helpers";
|
|
12
12
|
import { maskValue, unmaskText } from "./maskValue";
|
|
13
13
|
import { EyeClosedIcon, EyeOpenedIcon, TriangleDown, XCircleIcon } from "../../svgs";
|
|
14
14
|
import { useTheme } from "../../utils/hooks";
|
|
@@ -142,12 +142,13 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
|
|
|
142
142
|
const labelStyles = useMemo(() => {
|
|
143
143
|
return {
|
|
144
144
|
// this is neeeded too make sure the label is on top of the input
|
|
145
|
-
backgroundColor: "
|
|
145
|
+
backgroundColor: color("background"),
|
|
146
146
|
marginRight: space(0.5),
|
|
147
147
|
zIndex: 100,
|
|
148
148
|
fontFamily: fontFamily,
|
|
149
149
|
};
|
|
150
|
-
}, [fontFamily, space]);
|
|
150
|
+
}, [fontFamily, space, color]);
|
|
151
|
+
const inputVariants = getInputVariants(theme);
|
|
151
152
|
useEffect(() => {
|
|
152
153
|
const inputState = getInputState({
|
|
153
154
|
isFocused: !!focused,
|
|
@@ -157,8 +158,8 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
|
|
|
157
158
|
}, [value, focused, animatedState]);
|
|
158
159
|
const textInputAnimatedStyles = useAnimatedStyle(() => {
|
|
159
160
|
return {
|
|
160
|
-
borderColor: withTiming(
|
|
161
|
-
color: withTiming(
|
|
161
|
+
borderColor: withTiming(inputVariants[variant][animatedState.get()].inputBorderColor),
|
|
162
|
+
color: withTiming(inputVariants[variant][animatedState.get()].inputTextColor),
|
|
162
163
|
};
|
|
163
164
|
});
|
|
164
165
|
const labelAnimatedStyles = useAnimatedStyle(() => {
|
|
@@ -168,15 +169,15 @@ export const Input = forwardRef(({ addClearListener = false, defaultValue, disab
|
|
|
168
169
|
? textInputPaddingLeft - 3
|
|
169
170
|
: HORIZONTAL_PADDING;
|
|
170
171
|
return {
|
|
171
|
-
color: withTiming(
|
|
172
|
-
top: withTiming(
|
|
173
|
-
fontSize: withTiming(
|
|
172
|
+
color: withTiming(inputVariants[variant][animatedState.get()].labelColor),
|
|
173
|
+
top: withTiming(inputVariants[variant][animatedState.get()].labelTop),
|
|
174
|
+
fontSize: withTiming(inputVariants[variant][animatedState.get()].labelFontSize),
|
|
174
175
|
marginLeft: withTiming(marginLeft),
|
|
175
176
|
};
|
|
176
177
|
});
|
|
177
178
|
const selectComponentStyles = useAnimatedStyle(() => {
|
|
178
179
|
return {
|
|
179
|
-
borderColor: withTiming(
|
|
180
|
+
borderColor: withTiming(inputVariants[variant][animatedState.get()].inputBorderColor),
|
|
180
181
|
};
|
|
181
182
|
});
|
|
182
183
|
const handleFocus = (e) => {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ThemeType, ThemeWithDarkModeType } from "../../tokens";
|
|
1
2
|
export declare const SHRINKED_LABEL_TOP = 13;
|
|
2
3
|
export declare const EXPANDED_LABEL_TOP = 40;
|
|
3
4
|
export type VariantState = {
|
|
@@ -23,14 +24,14 @@ export type VariantState = {
|
|
|
23
24
|
inputTextColor: string;
|
|
24
25
|
};
|
|
25
26
|
};
|
|
26
|
-
declare const
|
|
27
|
-
export declare const
|
|
27
|
+
declare const getDefaultVariantStates: (theme: ThemeType | ThemeWithDarkModeType) => VariantState;
|
|
28
|
+
export declare const getInputVariants: (theme: ThemeType | ThemeWithDarkModeType) => {
|
|
28
29
|
default: VariantState;
|
|
29
30
|
error: VariantState;
|
|
30
31
|
disabled: VariantState;
|
|
31
32
|
};
|
|
32
|
-
export type InputState = keyof typeof
|
|
33
|
-
export type InputVariant = keyof typeof
|
|
33
|
+
export type InputState = keyof ReturnType<typeof getDefaultVariantStates>;
|
|
34
|
+
export type InputVariant = keyof ReturnType<typeof getInputVariants>;
|
|
34
35
|
export declare const getInputState: ({ isFocused, value, }: {
|
|
35
36
|
isFocused: boolean;
|
|
36
37
|
value: string | undefined;
|
|
@@ -1,89 +1,97 @@
|
|
|
1
1
|
import { THEME } from "@artsy/palette-tokens";
|
|
2
2
|
export const SHRINKED_LABEL_TOP = 13;
|
|
3
3
|
export const EXPANDED_LABEL_TOP = 40;
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
4
|
+
const getDefaultVariantStates = (theme) => {
|
|
5
|
+
return {
|
|
6
|
+
// Unfocused input with no value
|
|
7
|
+
untouched: {
|
|
8
|
+
inputBorderColor: theme.colors.black30,
|
|
9
|
+
labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
|
|
10
|
+
labelColor: theme.colors.black60,
|
|
11
|
+
labelTop: EXPANDED_LABEL_TOP,
|
|
12
|
+
inputTextColor: theme.colors.white100,
|
|
13
|
+
},
|
|
14
|
+
// Unfocused input with value
|
|
15
|
+
touched: {
|
|
16
|
+
inputBorderColor: theme.colors.black60,
|
|
17
|
+
labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
|
|
18
|
+
labelColor: theme.colors.black60,
|
|
19
|
+
labelTop: SHRINKED_LABEL_TOP,
|
|
20
|
+
inputTextColor: theme.colors.white100,
|
|
21
|
+
},
|
|
22
|
+
// Focused input with or without value
|
|
23
|
+
focused: {
|
|
24
|
+
inputBorderColor: theme.colors.blue100,
|
|
25
|
+
labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
|
|
26
|
+
labelColor: theme.colors.blue100,
|
|
27
|
+
labelTop: SHRINKED_LABEL_TOP,
|
|
28
|
+
inputTextColor: theme.colors.white100,
|
|
29
|
+
},
|
|
30
|
+
};
|
|
29
31
|
};
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
32
|
+
const getErrorVariantStates = (theme) => {
|
|
33
|
+
return {
|
|
34
|
+
// Unfocused error input with no value
|
|
35
|
+
untouched: {
|
|
36
|
+
inputBorderColor: theme.colors.red100,
|
|
37
|
+
labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
|
|
38
|
+
labelColor: theme.colors.red100,
|
|
39
|
+
labelTop: EXPANDED_LABEL_TOP,
|
|
40
|
+
inputTextColor: theme.colors.black100,
|
|
41
|
+
},
|
|
42
|
+
// Unfocused error input with value
|
|
43
|
+
touched: {
|
|
44
|
+
inputBorderColor: theme.colors.red100,
|
|
45
|
+
labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
|
|
46
|
+
labelColor: theme.colors.red100,
|
|
47
|
+
labelTop: SHRINKED_LABEL_TOP,
|
|
48
|
+
inputTextColor: theme.colors.black100,
|
|
49
|
+
},
|
|
50
|
+
// Focused error input with or without value
|
|
51
|
+
focused: {
|
|
52
|
+
inputBorderColor: theme.colors.red100,
|
|
53
|
+
labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
|
|
54
|
+
labelColor: theme.colors.red100,
|
|
55
|
+
labelTop: SHRINKED_LABEL_TOP,
|
|
56
|
+
inputTextColor: theme.colors.black100,
|
|
57
|
+
},
|
|
58
|
+
};
|
|
55
59
|
};
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
60
|
+
const getDisabledVariantStates = (theme) => {
|
|
61
|
+
return {
|
|
62
|
+
// Unfocused disabled input with no value
|
|
63
|
+
untouched: {
|
|
64
|
+
inputBorderColor: theme.colors.black30,
|
|
65
|
+
labelFontSize: parseInt(THEME.textVariants["sm-display"].fontSize, 10),
|
|
66
|
+
labelColor: theme.colors.black30,
|
|
67
|
+
labelTop: EXPANDED_LABEL_TOP,
|
|
68
|
+
inputTextColor: theme.colors.black30,
|
|
69
|
+
},
|
|
70
|
+
// Unfocused disabled input with value
|
|
71
|
+
touched: {
|
|
72
|
+
inputBorderColor: theme.colors.black30,
|
|
73
|
+
labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
|
|
74
|
+
labelColor: theme.colors.black30,
|
|
75
|
+
labelTop: SHRINKED_LABEL_TOP,
|
|
76
|
+
inputTextColor: theme.colors.black30,
|
|
77
|
+
},
|
|
78
|
+
// Focused disabled input with or without value
|
|
79
|
+
// Adding this just to satisfy typescript because a disabled input can't be focused
|
|
80
|
+
focused: {
|
|
81
|
+
inputBorderColor: theme.colors.black30,
|
|
82
|
+
labelFontSize: parseInt(THEME.textVariants.xs.fontSize, 10),
|
|
83
|
+
labelColor: theme.colors.black30,
|
|
84
|
+
labelTop: SHRINKED_LABEL_TOP,
|
|
85
|
+
inputTextColor: theme.colors.black30,
|
|
86
|
+
},
|
|
87
|
+
};
|
|
82
88
|
};
|
|
83
|
-
export const
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
export const getInputVariants = (theme) => {
|
|
90
|
+
return {
|
|
91
|
+
default: getDefaultVariantStates(theme),
|
|
92
|
+
error: getErrorVariantStates(theme),
|
|
93
|
+
disabled: getDisabledVariantStates(theme),
|
|
94
|
+
};
|
|
87
95
|
};
|
|
88
96
|
export const getInputState = ({ isFocused, value, }) => {
|
|
89
97
|
if (isFocused) {
|
package/package.json
CHANGED