@ledgerhq/react-ui 0.10.5 → 0.11.0-ios-builds-improvement.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/lib/cjs/components/asorted/Icon/index.js +0 -2
- package/lib/cjs/components/asorted/Icon/index.js.map +2 -2
- package/lib/cjs/components/asorted/index.js +0 -1
- package/lib/cjs/components/asorted/index.js.map +2 -2
- package/lib/cjs/components/form/BaseInput/index.js +13 -6
- package/lib/cjs/components/form/BaseInput/index.js.map +2 -2
- package/lib/components/asorted/Icon/index.d.ts +0 -1
- package/lib/components/asorted/Icon/index.js +0 -1
- package/lib/components/asorted/index.d.ts +1 -1
- package/lib/components/asorted/index.js +1 -1
- package/lib/components/form/BaseInput/index.d.ts +2 -0
- package/lib/components/form/BaseInput/index.js +7 -7
- package/package.json +2 -2
- package/lib/cjs/components/asorted/Icon/FlagIcon.js +0 -77
- package/lib/cjs/components/asorted/Icon/FlagIcon.js.map +0 -7
- package/lib/cjs/components/asorted/Icon/Flags.stories.js +0 -124
- package/lib/cjs/components/asorted/Icon/Flags.stories.js.map +0 -7
- package/lib/components/asorted/Icon/FlagIcon.d.ts +0 -14
- package/lib/components/asorted/Icon/FlagIcon.js +0 -46
|
@@ -24,7 +24,6 @@ var __toModule = (module2) => {
|
|
|
24
24
|
__export(exports, {
|
|
25
25
|
BoxedIcon: () => import_BoxedIcon.default,
|
|
26
26
|
CryptoIcon: () => import_CryptoIcon.default,
|
|
27
|
-
FlagIcon: () => import_FlagIcon.default,
|
|
28
27
|
IconBox: () => import_BoxedIcon.IconBox,
|
|
29
28
|
PaymentIcon: () => import_PaymentIcon.default,
|
|
30
29
|
ProviderIcon: () => import_ProviderIcon.default,
|
|
@@ -36,5 +35,4 @@ var import_BoxedIcon = __toModule(require("./BoxedIcon"));
|
|
|
36
35
|
var import_CryptoIcon = __toModule(require("./CryptoIcon"));
|
|
37
36
|
var import_PaymentIcon = __toModule(require("./PaymentIcon"));
|
|
38
37
|
var import_ProviderIcon = __toModule(require("./ProviderIcon"));
|
|
39
|
-
var import_FlagIcon = __toModule(require("./FlagIcon"));
|
|
40
38
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/index.tsx"],
|
|
4
|
-
"sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\nexport { default as PaymentIcon } from \"./PaymentIcon\";\nexport { default as ProviderIcon } from \"./ProviderIcon\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\nexport { default as PaymentIcon } from \"./PaymentIcon\";\nexport { default as ProviderIcon } from \"./ProviderIcon\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;AACtC,yBAAuC;AACvC,0BAAwC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,7 +25,6 @@ __export(exports, {
|
|
|
25
25
|
BoxedIcon: () => import_Icon.BoxedIcon,
|
|
26
26
|
CryptoIcon: () => import_Icon.CryptoIcon,
|
|
27
27
|
Divider: () => import_Divider.default,
|
|
28
|
-
FlagIcon: () => import_Icon.FlagIcon,
|
|
29
28
|
Icon: () => import_Icon.default,
|
|
30
29
|
IconBox: () => import_Icon.IconBox,
|
|
31
30
|
PaymentIcon: () => import_Icon.PaymentIcon,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/asorted/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAA2F;AAC3F,kBAAgC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,6 +26,7 @@ __export(exports, {
|
|
|
26
26
|
ClearableButtonUnstyled: () => ClearableButtonUnstyled,
|
|
27
27
|
InputContainer: () => InputContainer,
|
|
28
28
|
InputErrorContainer: () => InputErrorContainer,
|
|
29
|
+
InputInfoContainer: () => InputInfoContainer,
|
|
29
30
|
InputRenderLeftContainer: () => InputRenderLeftContainer,
|
|
30
31
|
InputRenderRightContainer: () => InputRenderRightContainer,
|
|
31
32
|
InputWarningContainer: () => InputWarningContainer,
|
|
@@ -83,8 +84,6 @@ const BaseInput = import_styled_components.default.input.attrs({
|
|
|
83
84
|
outline: none;
|
|
84
85
|
cursor: ${(p) => p.disabled ? "not-allowed" : "text"};
|
|
85
86
|
flex-shrink: 1;
|
|
86
|
-
padding-top: 14px;
|
|
87
|
-
padding-bottom: 14px;
|
|
88
87
|
padding-left: 20px;
|
|
89
88
|
padding-right: 20px;
|
|
90
89
|
&::placeholder {
|
|
@@ -116,6 +115,10 @@ const InputWarningContainer = (0, import_styled_components.default)(import_Text.
|
|
|
116
115
|
color: ${(p) => p.theme.colors.warning.c80};
|
|
117
116
|
margin-left: 12px;
|
|
118
117
|
`;
|
|
118
|
+
const InputInfoContainer = (0, import_styled_components.default)(import_Text.default)`
|
|
119
|
+
color: ${(p) => p.theme.colors.neutral.c60};
|
|
120
|
+
margin-left: 12px;
|
|
121
|
+
`;
|
|
119
122
|
const InputRenderLeftContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
|
|
120
123
|
alignItems: "center",
|
|
121
124
|
pl: "16px"
|
|
@@ -134,6 +137,7 @@ function Input(props, ref) {
|
|
|
134
137
|
disabled,
|
|
135
138
|
error,
|
|
136
139
|
warning,
|
|
140
|
+
info,
|
|
137
141
|
onChange,
|
|
138
142
|
onChangeEvent,
|
|
139
143
|
renderLeft,
|
|
@@ -160,6 +164,7 @@ function Input(props, ref) {
|
|
|
160
164
|
disabled,
|
|
161
165
|
error,
|
|
162
166
|
warning,
|
|
167
|
+
info,
|
|
163
168
|
onChange: handleChange,
|
|
164
169
|
value: inputValue,
|
|
165
170
|
onFocus: (event) => {
|
|
@@ -191,15 +196,17 @@ function Input(props, ref) {
|
|
|
191
196
|
error,
|
|
192
197
|
warning,
|
|
193
198
|
...containerProps
|
|
194
|
-
}, inner), (error || warning) && !disabled && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
199
|
+
}, inner), (error || warning || info) && !disabled && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
195
200
|
flexDirection: "column",
|
|
196
201
|
rowGap: 2,
|
|
197
202
|
mt: 2
|
|
198
|
-
}, error
|
|
203
|
+
}, error ? /* @__PURE__ */ import_react.default.createElement(InputErrorContainer, {
|
|
204
|
+
variant: "small"
|
|
205
|
+
}, error) : warning ? /* @__PURE__ */ import_react.default.createElement(InputWarningContainer, {
|
|
199
206
|
variant: "small"
|
|
200
|
-
},
|
|
207
|
+
}, warning) : info ? /* @__PURE__ */ import_react.default.createElement(InputInfoContainer, {
|
|
201
208
|
variant: "small"
|
|
202
|
-
},
|
|
209
|
+
}, info) : null));
|
|
203
210
|
}
|
|
204
211
|
var BaseInput_default = import_react.default.forwardRef(Input);
|
|
205
212
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/BaseInput/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n TypographyProps & {\n disabled?: boolean;\n error?: string;\n warning?: string;\n };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n value: T;\n onChange?: (value: T) => void;\n onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n unwrapped?: boolean;\n containerProps?: InputContainerProps;\n clearable?: boolean;\n /**\n * A function can be provided to serialize a value of any type to a string.\n *\n * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n * and create higher-level components that will automatically perform the input/output\n * conversion to other types.\n *\n * *A serializer function should always be used in conjunction with a deserializer function.*\n */\n serialize?: (value: T) => ValueType;\n /**\n * A deserializer can be provided to convert the html input value from a string to any other type.\n *\n * *A deserializer function should always be used in conjunction with a serializer function.*\n */\n deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n display: flex;\n height: 48px;\n border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n border-radius: 24px;\n transition: all 0.2s ease;\n color: ${(p) => p.theme.colors.neutral.c100};\n\n ${(p) =>\n p.focus &&\n !p.error &&\n !p.warning &&\n css`\n border: 1px solid ${p.theme.colors.primary.c80};\n box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n `};\n\n ${(p) =>\n p.error &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.error.c100};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c80};\n `};\n\n ${(p) =>\n !p.error &&\n !p.warning &&\n !p.disabled &&\n css`\n &:hover {\n border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n }\n `};\n\n ${(p) =>\n p.disabled &&\n css`\n color: ${p.theme.colors.neutral.c60};\n background: ${(p) => p.theme.colors.neutral.c20};\n `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n fontSize: \"paragraph\",\n fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n height: 100%;\n width: 100%;\n border: 0;\n caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};\n background: none;\n outline: none;\n cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n flex-shrink: 1;\n padding-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAA4B;AAC5B,2BAA4C;AAC5C,mBAA2E;AAC3E,qCAAoC;AACpC,kBAAoB;AACpB,kBAAiB;AACjB,qBAAqB;AACrB,oBAA+B;
|
|
4
|
+
"sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n TypographyProps & {\n disabled?: boolean;\n error?: string;\n warning?: string;\n info?: string;\n };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n value: T;\n onChange?: (value: T) => void;\n onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n unwrapped?: boolean;\n containerProps?: InputContainerProps;\n clearable?: boolean;\n /**\n * A function can be provided to serialize a value of any type to a string.\n *\n * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n * and create higher-level components that will automatically perform the input/output\n * conversion to other types.\n *\n * *A serializer function should always be used in conjunction with a deserializer function.*\n */\n serialize?: (value: T) => ValueType;\n /**\n * A deserializer can be provided to convert the html input value from a string to any other type.\n *\n * *A deserializer function should always be used in conjunction with a serializer function.*\n */\n deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n display: flex;\n height: 48px;\n border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n border-radius: 24px;\n transition: all 0.2s ease;\n color: ${(p) => p.theme.colors.neutral.c100};\n\n ${(p) =>\n p.focus &&\n !p.error &&\n !p.warning &&\n css`\n border: 1px solid ${p.theme.colors.primary.c80};\n box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n `};\n\n ${(p) =>\n p.error &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.error.c100};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c80};\n `};\n\n ${(p) =>\n !p.error &&\n !p.warning &&\n !p.disabled &&\n css`\n &:hover {\n border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n }\n `};\n\n ${(p) =>\n p.disabled &&\n css`\n color: ${p.theme.colors.neutral.c60};\n background: ${(p) => p.theme.colors.neutral.c20};\n `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n fontSize: \"paragraph\",\n fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n height: 100%;\n width: 100%;\n border: 0;\n caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};\n background: none;\n outline: none;\n cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n flex-shrink: 1;\n padding-left: 20px;\n padding-right: 20px;\n &::placeholder {\n color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n\n /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Hide type=number arrow for Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n /* stylelint-enable property-no-vendor-prefix */\n\n ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n color: ${(p) => p.theme.colors.error.c100};\n margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n color: ${(p) => p.theme.colors.warning.c80};\n margin-left: 12px;\n`;\nexport const InputInfoContainer = styled(Text)`\n color: ${(p) => p.theme.colors.neutral.c60};\n margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n props: InputProps<T>,\n ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n const {\n value,\n disabled,\n error,\n warning,\n info,\n onChange,\n onChangeEvent,\n renderLeft,\n renderRight,\n unwrapped,\n containerProps,\n serialize = IDENTITY,\n deserialize = IDENTITY,\n clearable,\n ...htmlInputProps\n } = props;\n const [focus, setFocus] = useState(false);\n const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange && onChange(deserialize(e.target.value));\n onChangeEvent && onChangeEvent(e);\n },\n [onChange, onChangeEvent, deserialize],\n );\n\n const handleClear = useCallback(() => {\n onChange && onChange(deserialize(\"\"));\n }, [onChange, deserialize]);\n\n const inner = (\n <>\n {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n <BaseInput\n ref={ref}\n {...htmlInputProps}\n disabled={disabled}\n error={error}\n warning={warning}\n info={info}\n onChange={handleChange}\n value={inputValue}\n onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(true);\n htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n }}\n onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(false);\n htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n }}\n />\n {clearable && inputValue && (\n <FlexBox alignItems={\"center\"} mr={7}>\n <ClearableButtonUnstyled onClick={handleClear}>\n <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n </ClearableButtonUnstyled>\n </FlexBox>\n )}\n {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n </>\n );\n\n if (unwrapped) {\n return (\n <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n {inner}\n </FlexBox>\n );\n }\n\n return (\n <div>\n <InputContainer\n disabled={disabled}\n focus={focus}\n error={error}\n warning={warning}\n {...containerProps}\n >\n {inner}\n </InputContainer>\n {(error || warning || info) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error ? (\n <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>\n ) : warning ? (\n <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>\n ) : info ? (\n <InputInfoContainer variant=\"small\">{info}</InputInfoContainer>\n ) : null}\n </FlexBox>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(Input) as <T>(\n props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default as Divider } from "./Divider";
|
|
2
|
-
export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon
|
|
2
|
+
export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from "./Icon";
|
|
3
3
|
export { default as Text } from "./Text";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default as Divider } from "./Divider";
|
|
2
|
-
export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon
|
|
2
|
+
export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from "./Icon";
|
|
3
3
|
export { default as Text } from "./Text";
|
|
@@ -5,6 +5,7 @@ export type CommonProps = InputHTMLAttributes<HTMLInputElement> & TypographyProp
|
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
error?: string;
|
|
7
7
|
warning?: string;
|
|
8
|
+
info?: string;
|
|
8
9
|
};
|
|
9
10
|
export type InputProps<T = ValueType> = Omit<CommonProps, "value" | "onChange"> & {
|
|
10
11
|
value: T;
|
|
@@ -41,6 +42,7 @@ export declare const BaseInput: import("styled-components").StyledComponent<"inp
|
|
|
41
42
|
} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
|
|
42
43
|
export declare const InputErrorContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
|
|
43
44
|
export declare const InputWarningContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
|
|
45
|
+
export declare const InputInfoContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
|
|
44
46
|
export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
|
|
45
47
|
columnGap?: string | number | undefined;
|
|
46
48
|
rowGap?: string | number | undefined;
|
|
@@ -73,8 +73,6 @@ export const BaseInput = styled.input.attrs({
|
|
|
73
73
|
outline: none;
|
|
74
74
|
cursor: ${(p) => (p.disabled ? "not-allowed" : "text")};
|
|
75
75
|
flex-shrink: 1;
|
|
76
|
-
padding-top: 14px;
|
|
77
|
-
padding-bottom: 14px;
|
|
78
76
|
padding-left: 20px;
|
|
79
77
|
padding-right: 20px;
|
|
80
78
|
&::placeholder {
|
|
@@ -106,6 +104,10 @@ export const InputWarningContainer = styled(Text) `
|
|
|
106
104
|
color: ${(p) => p.theme.colors.warning.c80};
|
|
107
105
|
margin-left: 12px;
|
|
108
106
|
`;
|
|
107
|
+
export const InputInfoContainer = styled(Text) `
|
|
108
|
+
color: ${(p) => p.theme.colors.neutral.c60};
|
|
109
|
+
margin-left: 12px;
|
|
110
|
+
`;
|
|
109
111
|
export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
|
|
110
112
|
alignItems: "center",
|
|
111
113
|
pl: "16px",
|
|
@@ -121,7 +123,7 @@ export const ClearableButtonUnstyled = styled(ButtonUnstyled) `
|
|
|
121
123
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
122
124
|
const IDENTITY = (_) => _;
|
|
123
125
|
function Input(props, ref) {
|
|
124
|
-
const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
|
|
126
|
+
const { value, disabled, error, warning, info, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "info", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
|
|
125
127
|
const [focus, setFocus] = useState(false);
|
|
126
128
|
const inputValue = useMemo(() => serialize(value), [serialize, value]);
|
|
127
129
|
const handleChange = useCallback((e) => {
|
|
@@ -133,7 +135,7 @@ function Input(props, ref) {
|
|
|
133
135
|
}, [onChange, deserialize]);
|
|
134
136
|
const inner = (React.createElement(React.Fragment, null,
|
|
135
137
|
typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
|
|
136
|
-
React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, onChange: handleChange, value: inputValue, onFocus: (event) => {
|
|
138
|
+
React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, info: info, onChange: handleChange, value: inputValue, onFocus: (event) => {
|
|
137
139
|
setFocus(true);
|
|
138
140
|
htmlInputProps.onFocus && htmlInputProps.onFocus(event);
|
|
139
141
|
}, onBlur: (event) => {
|
|
@@ -149,8 +151,6 @@ function Input(props, ref) {
|
|
|
149
151
|
}
|
|
150
152
|
return (React.createElement("div", null,
|
|
151
153
|
React.createElement(InputContainer, Object.assign({ disabled: disabled, focus: focus, error: error, warning: warning }, containerProps), inner),
|
|
152
|
-
(error || warning) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 },
|
|
153
|
-
error && React.createElement(InputErrorContainer, { variant: "small" }, error),
|
|
154
|
-
warning && React.createElement(InputWarningContainer, { variant: "small" }, warning)))));
|
|
154
|
+
(error || warning || info) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 }, error ? (React.createElement(InputErrorContainer, { variant: "small" }, error)) : warning ? (React.createElement(InputWarningContainer, { variant: "small" }, warning)) : info ? (React.createElement(InputInfoContainer, { variant: "small" }, info)) : null))));
|
|
155
155
|
}
|
|
156
156
|
export default React.forwardRef(Input);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0-ios-builds-improvement.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
78
|
"@ledgerhq/crypto-icons-ui": "^0.2.1",
|
|
79
|
-
"@ledgerhq/icons-ui": "^0.3.
|
|
79
|
+
"@ledgerhq/icons-ui": "^0.3.5-ios-builds-improvement.0",
|
|
80
80
|
"@ledgerhq/ui-shared": "^0.1.10"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
|
-
for (var name in all)
|
|
11
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
-
};
|
|
13
|
-
var __reExport = (target, module2, desc) => {
|
|
14
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
-
for (let key of __getOwnPropNames(module2))
|
|
16
|
-
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
-
}
|
|
19
|
-
return target;
|
|
20
|
-
};
|
|
21
|
-
var __toModule = (module2) => {
|
|
22
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
-
};
|
|
24
|
-
__export(exports, {
|
|
25
|
-
default: () => FlagIcon_default,
|
|
26
|
-
iconNames: () => iconNames,
|
|
27
|
-
sizes: () => sizes
|
|
28
|
-
});
|
|
29
|
-
var flags = __toModule(require("@ledgerhq/icons-ui/react/Flags/index"));
|
|
30
|
-
var import_react = __toModule(require("react"));
|
|
31
|
-
var import_styled_components = __toModule(require("styled-components"));
|
|
32
|
-
var import_Flex = __toModule(require("../../layout/Flex"));
|
|
33
|
-
const sizes = {
|
|
34
|
-
XXS: 16,
|
|
35
|
-
S: 32,
|
|
36
|
-
L: 48
|
|
37
|
-
};
|
|
38
|
-
const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
|
|
39
|
-
const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
|
|
40
|
-
if (!set.has(key))
|
|
41
|
-
set.add(key);
|
|
42
|
-
return set;
|
|
43
|
-
}, new Set()));
|
|
44
|
-
const FlagContainer = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
45
|
-
borderRadius: "50%",
|
|
46
|
-
position: "relative"
|
|
47
|
-
})`
|
|
48
|
-
&:after {
|
|
49
|
-
content: "";
|
|
50
|
-
display: block;
|
|
51
|
-
box-shadow: inset 0 0 10px black;
|
|
52
|
-
position: absolute;
|
|
53
|
-
top: 0;
|
|
54
|
-
left: 0;
|
|
55
|
-
width: 100%;
|
|
56
|
-
height: 100%;
|
|
57
|
-
border-radius: 100%;
|
|
58
|
-
opacity: 10%;
|
|
59
|
-
${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}
|
|
60
|
-
}
|
|
61
|
-
`;
|
|
62
|
-
const FlagIcon = ({ name, size = "S" }) => {
|
|
63
|
-
const maybeIconName = `${name}`;
|
|
64
|
-
if (maybeIconName in flags) {
|
|
65
|
-
const Component = flags[maybeIconName];
|
|
66
|
-
return /* @__PURE__ */ import_react.default.createElement(FlagContainer, {
|
|
67
|
-
width: sizes[size],
|
|
68
|
-
height: sizes[size],
|
|
69
|
-
overflow: "hidden"
|
|
70
|
-
}, /* @__PURE__ */ import_react.default.createElement(Component, {
|
|
71
|
-
size: sizes[size]
|
|
72
|
-
}));
|
|
73
|
-
}
|
|
74
|
-
return null;
|
|
75
|
-
};
|
|
76
|
-
var FlagIcon_default = FlagIcon;
|
|
77
|
-
//# sourceMappingURL=FlagIcon.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/components/asorted/Icon/FlagIcon.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as flags from \"@ledgerhq/icons-ui/react/Flags/index\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n XXS: 16,\n S: 32,\n L: 48,\n};\n\nexport type FlagsSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: FlagsSizes;\n};\n\nexport const iconNames = Array.from(\n Object.keys(flags).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst FlagContainer = styled(FlexBox).attrs({\n borderRadius: \"50%\",\n position: \"relative\",\n})`\n &:after {\n content: \"\";\n display: block;\n box-shadow: inset 0 0 10px black;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 100%;\n opacity: 10%;\n ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}\n }\n`;\n\nconst FlagIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n\n if (maybeIconName in flags) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n const Component = flags[maybeIconName];\n return (\n <FlagContainer width={sizes[size]} height={sizes[size]} overflow={\"hidden\"}>\n <Component size={sizes[size]} />\n </FlagContainer>\n );\n }\n return null;\n};\n\nexport default FlagIcon;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AAClB,+BAAmB;AACnB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,GAAG;AAAA,EACH,GAAG;AAAA;AAUE,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,OAAO,OAAO,CAAC,KAAK,WAAW;AACzC,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,gBAAgB,sCAAO,qBAAS,MAAM;AAAA,EAC1C,cAAc;AAAA,EACd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaN,CAAC,MAAM,qCAAqC,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIzE,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,UAAqC;AACpE,QAAM,gBAAgB,GAAG;AAEzB,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM;AACxB,WACE,mDAAC,eAAD;AAAA,MAAe,OAAO,MAAM;AAAA,MAAO,QAAQ,MAAM;AAAA,MAAO,UAAU;AAAA,OAChE,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAI7B,SAAO;AAAA;AAGT,IAAO,mBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
__markAsModule(target);
|
|
10
|
-
for (var name in all)
|
|
11
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
-
};
|
|
13
|
-
var __reExport = (target, module2, desc) => {
|
|
14
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
15
|
-
for (let key of __getOwnPropNames(module2))
|
|
16
|
-
if (!__hasOwnProp.call(target, key) && key !== "default")
|
|
17
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
18
|
-
}
|
|
19
|
-
return target;
|
|
20
|
-
};
|
|
21
|
-
var __toModule = (module2) => {
|
|
22
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
23
|
-
};
|
|
24
|
-
__export(exports, {
|
|
25
|
-
List: () => List,
|
|
26
|
-
SingleIcon: () => SingleIcon,
|
|
27
|
-
default: () => Flags_stories_default
|
|
28
|
-
});
|
|
29
|
-
var import_react = __toModule(require("react"));
|
|
30
|
-
var import_styled_components = __toModule(require("styled-components"));
|
|
31
|
-
var import_FlagIcon = __toModule(require("./FlagIcon"));
|
|
32
|
-
var import__ = __toModule(require("../../.."));
|
|
33
|
-
const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
|
|
34
|
-
flex: 1;
|
|
35
|
-
height: auto;
|
|
36
|
-
${(p) => p.theme.overflow.y};
|
|
37
|
-
`;
|
|
38
|
-
const Container = (0, import_styled_components.default)(import__.Flex).attrs({
|
|
39
|
-
flex: 1,
|
|
40
|
-
flexDirection: "column",
|
|
41
|
-
p: 4
|
|
42
|
-
})`
|
|
43
|
-
overflow: hidden;
|
|
44
|
-
height: calc(100vh - 4em);
|
|
45
|
-
`;
|
|
46
|
-
const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
|
|
47
|
-
flexDirection: "column",
|
|
48
|
-
justifyContent: "flex-end",
|
|
49
|
-
alignItems: "center",
|
|
50
|
-
p: 4
|
|
51
|
-
})`
|
|
52
|
-
${(p) => p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``}
|
|
53
|
-
border-radius: 4px;
|
|
54
|
-
height: 100px;
|
|
55
|
-
`;
|
|
56
|
-
const Bold = import_styled_components.default.b`
|
|
57
|
-
color: ${(p) => p.theme.colors.primary.c80};
|
|
58
|
-
`;
|
|
59
|
-
const Story = {
|
|
60
|
-
title: "Asorted/Icons/Flags",
|
|
61
|
-
argTypes: {
|
|
62
|
-
size: {
|
|
63
|
-
type: "enum",
|
|
64
|
-
description: "Icon size",
|
|
65
|
-
defaultValue: "L",
|
|
66
|
-
control: {
|
|
67
|
-
options: Object.keys(import_FlagIcon.sizes)
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
name: {
|
|
71
|
-
type: "enum",
|
|
72
|
-
defaultValue: "France",
|
|
73
|
-
description: "[Only for single icon], Icon name",
|
|
74
|
-
control: {
|
|
75
|
-
options: import_FlagIcon.iconNames,
|
|
76
|
-
control: {
|
|
77
|
-
type: "select"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
var Flags_stories_default = Story;
|
|
84
|
-
const ListTemplate = (args) => {
|
|
85
|
-
const [search, setSearch] = (0, import_react.useState)("");
|
|
86
|
-
const s = search.toLowerCase();
|
|
87
|
-
const regexp = new RegExp(s, "i");
|
|
88
|
-
return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, {
|
|
89
|
-
value: search,
|
|
90
|
-
onChange: setSearch
|
|
91
|
-
}), /* @__PURE__ */ import_react.default.createElement(ScrollArea, {
|
|
92
|
-
gridTemplateColumns: "repeat(auto-fill, 100px);",
|
|
93
|
-
gridTemplateRows: "repeat(auto-fill, 100px);",
|
|
94
|
-
gridGap: 4,
|
|
95
|
-
mt: 4
|
|
96
|
-
}, import_FlagIcon.iconNames.sort((a, b) => {
|
|
97
|
-
return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
|
|
98
|
-
}).map((name) => {
|
|
99
|
-
const match = name.match(regexp);
|
|
100
|
-
const active = s && match;
|
|
101
|
-
const index = match?.index ?? 0;
|
|
102
|
-
return /* @__PURE__ */ import_react.default.createElement(IconContainer, {
|
|
103
|
-
active: !!active
|
|
104
|
-
}, /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
|
|
105
|
-
flex: 1,
|
|
106
|
-
justifyContent: "center",
|
|
107
|
-
alignItems: "center"
|
|
108
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_FlagIcon.default, {
|
|
109
|
-
key: name,
|
|
110
|
-
name,
|
|
111
|
-
size: args.size
|
|
112
|
-
})), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
|
|
113
|
-
variant: "extraSmall"
|
|
114
|
-
}, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
|
|
115
|
-
})));
|
|
116
|
-
};
|
|
117
|
-
const FlagTemplate = (args) => {
|
|
118
|
-
return /* @__PURE__ */ import_react.default.createElement(import_FlagIcon.default, {
|
|
119
|
-
...args
|
|
120
|
-
});
|
|
121
|
-
};
|
|
122
|
-
const List = ListTemplate.bind({});
|
|
123
|
-
const SingleIcon = FlagTemplate.bind({});
|
|
124
|
-
//# sourceMappingURL=Flags.stories.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/components/asorted/Icon/Flags.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport FlagIcon, { iconNames, Props as FlagIconProps, sizes as flagSizes } from \"./FlagIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/Icons/Flags\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(flagSizes),\n },\n },\n name: {\n type: \"enum\",\n defaultValue: \"France\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: iconNames,\n control: {\n type: \"select\",\n },\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: FlagIconProps) => {\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {iconNames\n .sort((a: string, b: string) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n .map((name) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <FlagIcon key={name} name={name} size={args.size} />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst FlagTemplate = (args: FlagIconProps) => {\n return <FlagIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,sBAAgF;AAChF,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,wBAAQ;AAEf,MAAM,eAAe,CAAC,SAAwB;AAC5C,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,0BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,yBAAD;AAAA,MAAU,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,SAE9C,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAAwB;AAC5C,SAAO,mDAAC,yBAAD;AAAA,OAAc;AAAA;AAAA;AAGhB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const sizes: {
|
|
3
|
-
XXS: number;
|
|
4
|
-
S: number;
|
|
5
|
-
L: number;
|
|
6
|
-
};
|
|
7
|
-
export type FlagsSizes = keyof typeof sizes;
|
|
8
|
-
export type Props = {
|
|
9
|
-
name: string;
|
|
10
|
-
size?: FlagsSizes;
|
|
11
|
-
};
|
|
12
|
-
export declare const iconNames: string[];
|
|
13
|
-
declare const FlagIcon: ({ name, size }: Props) => JSX.Element | null;
|
|
14
|
-
export default FlagIcon;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as flags from "@ledgerhq/icons-ui/react/Flags/index";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import styled from "styled-components";
|
|
4
|
-
import FlexBox from "../../layout/Flex";
|
|
5
|
-
export const sizes = {
|
|
6
|
-
XXS: 16,
|
|
7
|
-
S: 32,
|
|
8
|
-
L: 48,
|
|
9
|
-
};
|
|
10
|
-
export const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
|
|
11
|
-
const key = rawKey
|
|
12
|
-
.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
|
|
13
|
-
.replace(/(.+)(Ultra)+$/g, "$1");
|
|
14
|
-
if (!set.has(key))
|
|
15
|
-
set.add(key);
|
|
16
|
-
return set;
|
|
17
|
-
}, new Set()));
|
|
18
|
-
const FlagContainer = styled(FlexBox).attrs({
|
|
19
|
-
borderRadius: "50%",
|
|
20
|
-
position: "relative",
|
|
21
|
-
}) `
|
|
22
|
-
&:after {
|
|
23
|
-
content: "";
|
|
24
|
-
display: block;
|
|
25
|
-
box-shadow: inset 0 0 10px black;
|
|
26
|
-
position: absolute;
|
|
27
|
-
top: 0;
|
|
28
|
-
left: 0;
|
|
29
|
-
width: 100%;
|
|
30
|
-
height: 100%;
|
|
31
|
-
border-radius: 100%;
|
|
32
|
-
opacity: 10%;
|
|
33
|
-
${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
const FlagIcon = ({ name, size = "S" }) => {
|
|
37
|
-
const maybeIconName = `${name}`;
|
|
38
|
-
if (maybeIconName in flags) {
|
|
39
|
-
// @ts-expect-error FIXME I don't know how to make you happy ts
|
|
40
|
-
const Component = flags[maybeIconName];
|
|
41
|
-
return (React.createElement(FlagContainer, { width: sizes[size], height: sizes[size], overflow: "hidden" },
|
|
42
|
-
React.createElement(Component, { size: sizes[size] })));
|
|
43
|
-
}
|
|
44
|
-
return null;
|
|
45
|
-
};
|
|
46
|
-
export default FlagIcon;
|