@swan-io/lake 1.3.0 → 1.3.2
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/package.json
CHANGED
|
@@ -67,7 +67,6 @@ const styles = StyleSheet.create({
|
|
|
67
67
|
paddingHorizontal: spacings[24],
|
|
68
68
|
paddingVertical: spacings[8],
|
|
69
69
|
flexDirection: "row",
|
|
70
|
-
justifyContent: "space-between",
|
|
71
70
|
alignItems: "center",
|
|
72
71
|
},
|
|
73
72
|
itemHighlighted: {
|
|
@@ -86,9 +85,9 @@ const styles = StyleSheet.create({
|
|
|
86
85
|
backgroundColor: invariantColors.transparent,
|
|
87
86
|
},
|
|
88
87
|
itemText: {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
overflow: "hidden",
|
|
89
|
+
whiteSpace: "nowrap",
|
|
90
|
+
textOverflow: "ellipsis",
|
|
92
91
|
},
|
|
93
92
|
errorText: {
|
|
94
93
|
paddingTop: spacings[4],
|
|
@@ -150,7 +149,11 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
|
|
|
150
149
|
mode !== "borderless" && error != null && styles.errorContainer,
|
|
151
150
|
(disabled || readOnly) && mode === "borderless" && styles.inputBorderlessDisabled,
|
|
152
151
|
style,
|
|
153
|
-
], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(
|
|
152
|
+
], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: name })] })) : (_jsx(LakeText, { style: [
|
|
153
|
+
styles.itemText,
|
|
154
|
+
styles.selectPlaceholder,
|
|
155
|
+
isSmall && styles.selectSmallPlaceholder,
|
|
156
|
+
], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
|
|
154
157
|
match(e.nativeEvent.key)
|
|
155
158
|
.with("ArrowDown", () => {
|
|
156
159
|
e.preventDefault();
|
|
@@ -178,6 +181,6 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
|
|
|
178
181
|
], accessibilityRole: "option", accessibilitySelected: true, onPress: () => {
|
|
179
182
|
onValueChange(item.value);
|
|
180
183
|
close();
|
|
181
|
-
}, children: [_jsxs(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children:
|
|
184
|
+
}, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name }), _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
|
|
182
185
|
} }), PopoverFooter] })] }));
|
|
183
186
|
}
|
|
@@ -18,6 +18,7 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
|
|
|
18
18
|
hideErrors?: boolean;
|
|
19
19
|
style?: TextInputProps["style"];
|
|
20
20
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
21
|
+
maxCharCount?: number;
|
|
21
22
|
};
|
|
22
23
|
export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
|
|
23
24
|
error?: string | undefined;
|
|
@@ -35,4 +36,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Om
|
|
|
35
36
|
hideErrors?: boolean | undefined;
|
|
36
37
|
style?: TextInputProps["style"];
|
|
37
38
|
onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
|
|
39
|
+
maxCharCount?: number | undefined;
|
|
38
40
|
} & import("react").RefAttributes<TextInput | null>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useCallback, useRef, useState } from "react";
|
|
3
3
|
import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
|
|
4
4
|
import { commonStyles } from "../constants/commonStyles";
|
|
@@ -7,6 +7,8 @@ import { useHover } from "../hooks/useHover";
|
|
|
7
7
|
import { useMergeRefs } from "../hooks/useMergeRefs";
|
|
8
8
|
import { useNativeProp } from "../hooks/useNativeProp";
|
|
9
9
|
import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
|
|
10
|
+
import { Box } from "./Box";
|
|
11
|
+
import { Fill } from "./Fill";
|
|
10
12
|
import { Icon } from "./Icon";
|
|
11
13
|
import { LakeText } from "./LakeText";
|
|
12
14
|
const TRANSPARENT = "transparent";
|
|
@@ -93,9 +95,6 @@ const styles = StyleSheet.create({
|
|
|
93
95
|
readOnlyEndIcon: {
|
|
94
96
|
right: 0,
|
|
95
97
|
},
|
|
96
|
-
errorText: {
|
|
97
|
-
paddingTop: spacings[4],
|
|
98
|
-
},
|
|
99
98
|
unit: {
|
|
100
99
|
backgroundColor: colors.gray[50],
|
|
101
100
|
paddingHorizontal: spacings[16],
|
|
@@ -115,8 +114,17 @@ const styles = StyleSheet.create({
|
|
|
115
114
|
borderColor: colors.gray[500],
|
|
116
115
|
boxShadow: shadows.tile,
|
|
117
116
|
},
|
|
117
|
+
descriptionLimitation: {
|
|
118
|
+
flexShrink: 0,
|
|
119
|
+
},
|
|
120
|
+
errorContainer: {
|
|
121
|
+
paddingTop: spacings[4],
|
|
122
|
+
},
|
|
118
123
|
});
|
|
119
|
-
export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false,
|
|
124
|
+
export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false,
|
|
125
|
+
//maxCharCount is different from maxLength(props inherited of TextInput), maxLength truncates the text in the limitation asked,
|
|
126
|
+
//maxCharCount doesn't have limitation but displays a counter of characters
|
|
127
|
+
maxCharCount, ...props }, forwardRef) => {
|
|
120
128
|
const inputRef = useRef(null);
|
|
121
129
|
const [isHovered, setIsHovered] = useState(false);
|
|
122
130
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -136,6 +144,7 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, validating =
|
|
|
136
144
|
const mergedRef = useMergeRefs(inputRef, forwardRef);
|
|
137
145
|
const isInteractive = !disabled && !readOnly;
|
|
138
146
|
const hasError = isNotNullishOrEmpty(error);
|
|
147
|
+
const charCount = isNullish(value) ? 0 : value.length;
|
|
139
148
|
return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, accessibilityErrorMessage: error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { keyboardType: keyboardType, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, editable: isInteractive, onChange: onChange, multiline: multiline, style: [
|
|
140
149
|
styles.input,
|
|
141
150
|
multiline && styles.multilineInput,
|
|
@@ -150,5 +159,5 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, validating =
|
|
|
150
159
|
isFocused && styles.focused,
|
|
151
160
|
isFocused && { borderColor: colors[color][500] },
|
|
152
161
|
stylesFromProps,
|
|
153
|
-
] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.
|
|
162
|
+
] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: styles.errorContainer, children: [_jsx(LakeText, { color: colors.negative[400], children: error ?? " " }), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
|
|
154
163
|
});
|
|
@@ -2,6 +2,7 @@ import { ReactNode } from "react";
|
|
|
2
2
|
type Props = {
|
|
3
3
|
color: string;
|
|
4
4
|
children: ReactNode;
|
|
5
|
+
scoped?: boolean;
|
|
5
6
|
};
|
|
6
|
-
export declare const WithPartnerAccentColor: ({ color, children }: Props) => JSX.Element;
|
|
7
|
+
export declare const WithPartnerAccentColor: ({ color, scoped, children }: Props) => JSX.Element;
|
|
7
8
|
export {};
|
|
@@ -19,46 +19,51 @@ const getContrastColor = (color) => {
|
|
|
19
19
|
}
|
|
20
20
|
return text;
|
|
21
21
|
};
|
|
22
|
-
export const WithPartnerAccentColor = ({ color, children }) => {
|
|
22
|
+
export const WithPartnerAccentColor = ({ color, scoped = false, children }) => {
|
|
23
23
|
const containerRef = useRef(null);
|
|
24
24
|
useLayoutEffect(() => {
|
|
25
25
|
try {
|
|
26
26
|
if (isNotNullish(containerRef.current)) {
|
|
27
27
|
const element = containerRef.current;
|
|
28
|
+
let scalePower = 1;
|
|
29
|
+
while (!meetsContrastGuidelines(setLightness(Math.pow(0.5, scalePower), color), "#fff").AALarge) {
|
|
30
|
+
scalePower += 0.1;
|
|
31
|
+
}
|
|
28
32
|
const colorScale = {
|
|
29
|
-
0: setLightness(1.0, color),
|
|
30
|
-
50: setLightness(0.97, color),
|
|
31
|
-
100: setLightness(0.9, color),
|
|
32
|
-
200: setLightness(0.8, color),
|
|
33
|
-
300: setLightness(0.7, color),
|
|
34
|
-
400: setLightness(0.6, color),
|
|
35
|
-
500: setLightness(0.5, color),
|
|
36
|
-
600: setLightness(0.4, color),
|
|
37
|
-
700: setLightness(0.3, color),
|
|
38
|
-
800: setLightness(0.2, color),
|
|
39
|
-
900: setLightness(0.1, color),
|
|
33
|
+
0: setLightness(Math.pow(1.0, scalePower), color),
|
|
34
|
+
50: setLightness(Math.pow(0.97, scalePower), color),
|
|
35
|
+
100: setLightness(Math.pow(0.9, scalePower), color),
|
|
36
|
+
200: setLightness(Math.pow(0.8, scalePower), color),
|
|
37
|
+
300: setLightness(Math.pow(0.7, scalePower), color),
|
|
38
|
+
400: setLightness(Math.pow(0.6, scalePower), color),
|
|
39
|
+
500: setLightness(Math.pow(0.5, scalePower), color),
|
|
40
|
+
600: setLightness(Math.pow(0.4, scalePower), color),
|
|
41
|
+
700: setLightness(Math.pow(0.3, scalePower), color),
|
|
42
|
+
800: setLightness(Math.pow(0.2, scalePower), color),
|
|
43
|
+
900: setLightness(Math.pow(0.1, scalePower), color),
|
|
40
44
|
primary: color,
|
|
41
45
|
contrast: getContrastColor(color),
|
|
42
46
|
secondary: shade(0.2, color),
|
|
43
47
|
};
|
|
44
|
-
element.ownerDocument.documentElement
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
const rootElement = scoped ? element : element.ownerDocument.documentElement;
|
|
49
|
+
rootElement.style.setProperty("--color-partner-900", colorScale[900], "");
|
|
50
|
+
rootElement.style.setProperty("--color-partner-800", colorScale[800], "");
|
|
51
|
+
rootElement.style.setProperty("--color-partner-700", colorScale[700], "");
|
|
52
|
+
rootElement.style.setProperty("--color-partner-600", colorScale[600], "");
|
|
53
|
+
rootElement.style.setProperty("--color-partner-500", colorScale[500], "");
|
|
54
|
+
rootElement.style.setProperty("--color-partner-400", colorScale[400], "");
|
|
55
|
+
rootElement.style.setProperty("--color-partner-300", colorScale[300], "");
|
|
56
|
+
rootElement.style.setProperty("--color-partner-200", colorScale[200], "");
|
|
57
|
+
rootElement.style.setProperty("--color-partner-100", colorScale[100], "");
|
|
58
|
+
rootElement.style.setProperty("--color-partner-50", colorScale[50], "");
|
|
59
|
+
rootElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
|
|
60
|
+
rootElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
|
|
61
|
+
rootElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
|
|
57
62
|
}
|
|
58
63
|
}
|
|
59
64
|
catch (err) {
|
|
60
65
|
// will default to white label color
|
|
61
66
|
}
|
|
62
|
-
}, [color]);
|
|
67
|
+
}, [color, scoped]);
|
|
63
68
|
return (_jsx(View, { ref: containerRef, style: styles.container, children: children }));
|
|
64
69
|
};
|