@ledgerhq/react-ui 0.10.4 → 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/cjs/components/navigation/FlowStepper/index.js +3 -1
- package/lib/cjs/components/navigation/FlowStepper/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/lib/components/navigation/FlowStepper/index.d.ts +5 -1
- package/lib/components/navigation/FlowStepper/index.js +2 -2
- package/package.json +3 -3
- 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
|
}
|
|
@@ -38,6 +38,7 @@ function FlowStepper({
|
|
|
38
38
|
extraContainerProps,
|
|
39
39
|
extraStepperProps,
|
|
40
40
|
extraStepperContainerProps,
|
|
41
|
+
extraChildrenContainerProps,
|
|
41
42
|
renderChildren,
|
|
42
43
|
children
|
|
43
44
|
}) {
|
|
@@ -82,7 +83,8 @@ function FlowStepper({
|
|
|
82
83
|
})), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
|
|
83
84
|
flex: 1,
|
|
84
85
|
flexDirection: "column",
|
|
85
|
-
position: "relative"
|
|
86
|
+
position: "relative",
|
|
87
|
+
...extraChildrenContainerProps
|
|
86
88
|
}, renderChildren ? renderChildren({ ...renderArgs, children: innerContents }) : innerContents), getSectionContents(footer, stepFooter, renderStepFooter));
|
|
87
89
|
}
|
|
88
90
|
function Step({ children }) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/navigation/FlowStepper/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { isElement } from \"react-is\";\nimport { Props as StepperProps } from \"../progress/Stepper\";\nimport Flex, { FlexBoxProps as FlexProps } from \"../../layout/Flex\";\nimport { Stepper } from \"..\";\n\nexport type StepProps = {\n /**\n * A specific index, can be used to explicitely order steps.\n */\n index?: number;\n /**\n * Custom header for this step.\n */\n header?: React.ReactNode;\n /**\n * Custom footer for this step.\n */\n footer?: React.ReactNode;\n /**\n * The label of the step.\n */\n label: string;\n /**\n * Hides the step from the progress stepper.\n */\n hidden?: boolean;\n /**\n * The step contents.\n */\n children: React.ReactNode;\n};\n\ninterface InnerProps {\n /**\n * The active index.\n */\n activeIndex: number;\n /**\n * The total number of steps.\n */\n stepsLength: number;\n}\n\ntype StepChild = React.ReactElement<StepProps>;\ntype SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;\ntype SectionStepRenderFunc<ExtraProps> = (\n args: InnerProps & ExtraProps & { children: React.ReactNode },\n) => React.ReactNode;\n\nexport interface Props<ExtraProps> {\n /**\n * The index of the active step.\n */\n activeIndex: number;\n /**\n * An optional generic header displayed above the stepper.\n */\n header?: SectionRenderFunc<ExtraProps>;\n /**\n * Custom rendering function to wrap the header (only used if the `header` is defined\n * on the child for the current step.)\n */\n renderStepHeader?: SectionStepRenderFunc<ExtraProps>;\n /**\n * An optional generic footer displayed below the body.\n */\n footer?: SectionRenderFunc<ExtraProps>;\n /**\n * Custom rendering function to wrap the footer (only used if the `footer` is defined\n * on the child for the current step.)\n */\n renderStepFooter?: SectionStepRenderFunc<ExtraProps>;\n /**\n * Extra props that are passed to the header and footer render functions.\n */\n extraProps?: ExtraProps;\n /**\n * Extra props that are passed to the container `Flex` element.\n */\n extraContainerProps?: FlexProps;\n /**\n * Extra props that are passed to the stepper component.\n */\n extraStepperProps?: Partial<StepperProps>;\n /**\n * Extra props that are passed to the stepper `Flex` wrapper.\n */\n extraStepperContainerProps?: FlexProps;\n /**\n * Custom rendering function to wrap children.\n */\n renderChildren?: (\n args: InnerProps & ExtraProps & { children: React.ReactNode },\n ) => React.ReactNode;\n /**\n * A list of children representing each step of the flow.\n * Each child can have a prop `stepHeader` and/or `stepFooter` that will\n * associate a custom header/footer to this particular step.\n * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.\n */\n children: StepChild | StepChild[];\n}\n\nfunction FlowStepper<ExtraProps>({\n activeIndex,\n header,\n renderStepHeader,\n footer,\n renderStepFooter,\n extraProps,\n extraContainerProps,\n extraStepperProps,\n extraStepperContainerProps,\n renderChildren,\n children,\n}: Props<ExtraProps>) {\n const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce<{\n steps: string[];\n innerContents: React.ReactNode | null;\n stepHeader: React.ReactNode | null;\n stepFooter: React.ReactNode | null;\n }>(\n (acc, child, idx) => {\n const index = (isElement(child) && child.props.index) ?? idx;\n const label = isElement(child) && child.props.label;\n const hidden = isElement(child) && child.props.hidden;\n const stepHeader = isElement(child) && child.props.header;\n const stepFooter = isElement(child) && child.props.footer;\n\n if (label && !hidden) {\n acc.steps[index] = label;\n }\n if (index === activeIndex) {\n acc.innerContents = child;\n acc.stepFooter = stepFooter;\n acc.stepHeader = stepHeader;\n }\n return acc;\n },\n {\n steps: [],\n innerContents: null,\n stepHeader: null,\n stepFooter: null,\n },\n );\n\n const renderArgs = { ...extraProps, activeIndex, stepsLength: steps.length } as InnerProps &\n ExtraProps;\n\n function getSectionContents(\n renderFunc?: SectionRenderFunc<ExtraProps>,\n stepSection?: React.ReactNode,\n renderStepFunc?: SectionStepRenderFunc<ExtraProps>,\n ) {\n return stepSection\n ? renderStepFunc\n ? renderStepFunc({ ...renderArgs, children: stepSection })\n : stepSection\n : renderFunc && renderFunc(renderArgs);\n }\n\n return (\n <Flex flex={1} flexDirection=\"column\" {...extraContainerProps}>\n {getSectionContents(header, stepHeader, renderStepHeader)}\n <Flex my={8} justifyContent=\"center\" {...extraStepperContainerProps}>\n <Stepper activeIndex={activeIndex} steps={steps} flex={1} {...extraStepperProps} />\n </Flex>\n <Flex flex={1} flexDirection=\"column\" position=\"relative\">\n {renderChildren\n ? renderChildren({ ...renderArgs, children: innerContents })\n : innerContents}\n </Flex>\n {getSectionContents(footer, stepFooter, renderStepFooter)}\n </Flex>\n );\n}\n\nfunction Step({ children }: StepProps) {\n return <>{children}</>;\n}\n\nFlowStepper.Step = Step;\nexport default FlowStepper;\n\nexport type IndexedStepProps = StepProps & {\n /**\n * String to identify the step. Must be different from sibling steps's `key` prop.\n */\n itemKey: string;\n};\n\ntype IndexedStepperChild = React.ReactElement<IndexedStepProps>;\n\nexport type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, \"activeIndex\" | \"children\"> & {\n /**\n * The key of the active step\n */\n activeKey: string;\n\n /**\n * A list of children representing each step of the flow.\n */\n children: IndexedStepperChild | IndexedStepperChild[];\n};\n\n/**\n * This is a FlowStepper where each child must have an `itemKey: string` prop\n * and the active step is defined by the `activeKey: string` prop.\n *\n * This allows for usages with a lot of steps where dealing with indices could be\n * painful and error prone (for instance inserting/removing a step somewhere would shift\n * the indices of the following steps and navigation would be impacted).\n *\n * By using string identifiers (`itemKey`) for each step, it's more \"human readable\"\n * and less error prone to setup a navigation logic between steps.\n */\nfunction FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>) {\n const { activeKey, children, ...otherProps } = props;\n const activeIndex = React.Children.toArray(children).findIndex((child) => {\n const res = isElement(child) && child.props.itemKey === activeKey;\n return res;\n });\n return (\n <FlowStepper {...otherProps} activeIndex={activeIndex}>\n {children}\n </FlowStepper>\n );\n}\n\nfunction IndexedStep({ children }: IndexedStepProps) {\n return <>{children}</>;\n}\n\nFlowStepperIndexed.Step = IndexedStep;\nFlowStepper.Indexed = FlowStepperIndexed;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,sBAA0B;AAE1B,kBAAgD;AAChD,eAAwB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { isElement } from \"react-is\";\nimport { Props as StepperProps } from \"../progress/Stepper\";\nimport Flex, { FlexBoxProps as FlexProps } from \"../../layout/Flex\";\nimport { Stepper } from \"..\";\n\nexport type StepProps = {\n /**\n * A specific index, can be used to explicitely order steps.\n */\n index?: number;\n /**\n * Custom header for this step.\n */\n header?: React.ReactNode;\n /**\n * Custom footer for this step.\n */\n footer?: React.ReactNode;\n /**\n * The label of the step.\n */\n label: string;\n /**\n * Hides the step from the progress stepper.\n */\n hidden?: boolean;\n /**\n * The step contents.\n */\n children: React.ReactNode;\n};\n\ninterface InnerProps {\n /**\n * The active index.\n */\n activeIndex: number;\n /**\n * The total number of steps.\n */\n stepsLength: number;\n}\n\ntype StepChild = React.ReactElement<StepProps>;\ntype SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;\ntype SectionStepRenderFunc<ExtraProps> = (\n args: InnerProps & ExtraProps & { children: React.ReactNode },\n) => React.ReactNode;\n\nexport interface Props<ExtraProps> {\n /**\n * The index of the active step.\n */\n activeIndex: number;\n /**\n * An optional generic header displayed above the stepper.\n */\n header?: SectionRenderFunc<ExtraProps>;\n /**\n * Custom rendering function to wrap the header (only used if the `header` is defined\n * on the child for the current step.)\n */\n renderStepHeader?: SectionStepRenderFunc<ExtraProps>;\n /**\n * An optional generic footer displayed below the body.\n */\n footer?: SectionRenderFunc<ExtraProps>;\n /**\n * Custom rendering function to wrap the footer (only used if the `footer` is defined\n * on the child for the current step.)\n */\n renderStepFooter?: SectionStepRenderFunc<ExtraProps>;\n /**\n * Extra props that are passed to the header and footer render functions.\n */\n extraProps?: ExtraProps;\n /**\n * Extra props that are passed to the container `Flex` element.\n */\n extraContainerProps?: FlexProps;\n /**\n * Extra props that are passed to the stepper component.\n */\n extraStepperProps?: Partial<StepperProps>;\n /**\n * Extra props that are passed to the stepper `Flex` wrapper.\n */\n extraStepperContainerProps?: FlexProps;\n /**\n * Extra props that are passed to the children `Flex` wrapper.\n */\n extraChildrenContainerProps?: FlexProps;\n /**\n * Custom rendering function to wrap children.\n */\n renderChildren?: (\n args: InnerProps & ExtraProps & { children: React.ReactNode },\n ) => React.ReactNode;\n /**\n * A list of children representing each step of the flow.\n * Each child can have a prop `stepHeader` and/or `stepFooter` that will\n * associate a custom header/footer to this particular step.\n * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.\n */\n children: StepChild | StepChild[];\n}\n\nfunction FlowStepper<ExtraProps>({\n activeIndex,\n header,\n renderStepHeader,\n footer,\n renderStepFooter,\n extraProps,\n extraContainerProps,\n extraStepperProps,\n extraStepperContainerProps,\n extraChildrenContainerProps,\n renderChildren,\n children,\n}: Props<ExtraProps>) {\n const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce<{\n steps: string[];\n innerContents: React.ReactNode | null;\n stepHeader: React.ReactNode | null;\n stepFooter: React.ReactNode | null;\n }>(\n (acc, child, idx) => {\n const index = (isElement(child) && child.props.index) ?? idx;\n const label = isElement(child) && child.props.label;\n const hidden = isElement(child) && child.props.hidden;\n const stepHeader = isElement(child) && child.props.header;\n const stepFooter = isElement(child) && child.props.footer;\n\n if (label && !hidden) {\n acc.steps[index] = label;\n }\n if (index === activeIndex) {\n acc.innerContents = child;\n acc.stepFooter = stepFooter;\n acc.stepHeader = stepHeader;\n }\n return acc;\n },\n {\n steps: [],\n innerContents: null,\n stepHeader: null,\n stepFooter: null,\n },\n );\n\n const renderArgs = { ...extraProps, activeIndex, stepsLength: steps.length } as InnerProps &\n ExtraProps;\n\n function getSectionContents(\n renderFunc?: SectionRenderFunc<ExtraProps>,\n stepSection?: React.ReactNode,\n renderStepFunc?: SectionStepRenderFunc<ExtraProps>,\n ) {\n return stepSection\n ? renderStepFunc\n ? renderStepFunc({ ...renderArgs, children: stepSection })\n : stepSection\n : renderFunc && renderFunc(renderArgs);\n }\n\n return (\n <Flex flex={1} flexDirection=\"column\" {...extraContainerProps}>\n {getSectionContents(header, stepHeader, renderStepHeader)}\n <Flex my={8} justifyContent=\"center\" {...extraStepperContainerProps}>\n <Stepper activeIndex={activeIndex} steps={steps} flex={1} {...extraStepperProps} />\n </Flex>\n <Flex flex={1} flexDirection=\"column\" position=\"relative\" {...extraChildrenContainerProps}>\n {renderChildren\n ? renderChildren({ ...renderArgs, children: innerContents })\n : innerContents}\n </Flex>\n {getSectionContents(footer, stepFooter, renderStepFooter)}\n </Flex>\n );\n}\n\nfunction Step({ children }: StepProps) {\n return <>{children}</>;\n}\n\nFlowStepper.Step = Step;\nexport default FlowStepper;\n\nexport type IndexedStepProps = StepProps & {\n /**\n * String to identify the step. Must be different from sibling steps's `key` prop.\n */\n itemKey: string;\n};\n\ntype IndexedStepperChild = React.ReactElement<IndexedStepProps>;\n\nexport type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, \"activeIndex\" | \"children\"> & {\n /**\n * The key of the active step\n */\n activeKey: string;\n\n /**\n * A list of children representing each step of the flow.\n */\n children: IndexedStepperChild | IndexedStepperChild[];\n};\n\n/**\n * This is a FlowStepper where each child must have an `itemKey: string` prop\n * and the active step is defined by the `activeKey: string` prop.\n *\n * This allows for usages with a lot of steps where dealing with indices could be\n * painful and error prone (for instance inserting/removing a step somewhere would shift\n * the indices of the following steps and navigation would be impacted).\n *\n * By using string identifiers (`itemKey`) for each step, it's more \"human readable\"\n * and less error prone to setup a navigation logic between steps.\n */\nfunction FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>) {\n const { activeKey, children, ...otherProps } = props;\n const activeIndex = React.Children.toArray(children).findIndex((child) => {\n const res = isElement(child) && child.props.itemKey === activeKey;\n return res;\n });\n return (\n <FlowStepper {...otherProps} activeIndex={activeIndex}>\n {children}\n </FlowStepper>\n );\n}\n\nfunction IndexedStep({ children }: IndexedStepProps) {\n return <>{children}</>;\n}\n\nFlowStepperIndexed.Step = IndexedStep;\nFlowStepper.Indexed = FlowStepperIndexed;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,sBAA0B;AAE1B,kBAAgD;AAChD,eAAwB;AAwGxB,qBAAiC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACoB;AACpB,QAAM,EAAE,OAAO,eAAe,YAAY,eAAe,qBAAM,SAAS,QAAQ,UAAU,OAMxF,CAAC,KAAK,OAAO,QAAQ;AACnB,UAAM,QAAS,gCAAU,UAAU,MAAM,MAAM,UAAU;AACzD,UAAM,QAAQ,+BAAU,UAAU,MAAM,MAAM;AAC9C,UAAM,SAAS,+BAAU,UAAU,MAAM,MAAM;AAC/C,UAAM,cAAa,+BAAU,UAAU,MAAM,MAAM;AACnD,UAAM,cAAa,+BAAU,UAAU,MAAM,MAAM;AAEnD,QAAI,SAAS,CAAC,QAAQ;AACpB,UAAI,MAAM,SAAS;AAAA;AAErB,QAAI,UAAU,aAAa;AACzB,UAAI,gBAAgB;AACpB,UAAI,aAAa;AACjB,UAAI,aAAa;AAAA;AAEnB,WAAO;AAAA,KAET;AAAA,IACE,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA;AAIhB,QAAM,aAAa,KAAK,YAAY,aAAa,aAAa,MAAM;AAGpE,8BACE,YACA,aACA,gBACA;AACA,WAAO,cACH,iBACE,eAAe,KAAK,YAAY,UAAU,iBAC1C,cACF,cAAc,WAAW;AAAA;AAG/B,SACE,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA,IAAG,eAAc;AAAA,OAAa;AAAA,KACvC,mBAAmB,QAAQ,YAAY,mBACxC,mDAAC,qBAAD;AAAA,IAAM,IAAI;AAAA,IAAG,gBAAe;AAAA,OAAa;AAAA,KACvC,mDAAC,kBAAD;AAAA,IAAS;AAAA,IAA0B;AAAA,IAAc,MAAM;AAAA,OAAO;AAAA,OAEhE,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA,IAAG,eAAc;AAAA,IAAS,UAAS;AAAA,OAAe;AAAA,KAC3D,iBACG,eAAe,KAAK,YAAY,UAAU,mBAC1C,gBAEL,mBAAmB,QAAQ,YAAY;AAAA;AAK9C,cAAc,EAAE,YAAuB;AACrC,SAAO,wFAAG;AAAA;AAGZ,YAAY,OAAO;AACnB,IAAO,sBAAQ;AAkCf,4BAAwC,OAAiC;AACvE,QAAM,EAAE,WAAW,aAAa,eAAe;AAC/C,QAAM,cAAc,qBAAM,SAAS,QAAQ,UAAU,UAAU,CAAC,UAAU;AACxE,UAAM,MAAM,+BAAU,UAAU,MAAM,MAAM,YAAY;AACxD,WAAO;AAAA;AAET,SACE,mDAAC,aAAD;AAAA,OAAiB;AAAA,IAAY;AAAA,KAC1B;AAAA;AAKP,qBAAqB,EAAE,YAA8B;AACnD,SAAO,wFAAG;AAAA;AAGZ,mBAAmB,OAAO;AAC1B,YAAY,UAAU;",
|
|
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);
|
|
@@ -81,6 +81,10 @@ export interface Props<ExtraProps> {
|
|
|
81
81
|
* Extra props that are passed to the stepper `Flex` wrapper.
|
|
82
82
|
*/
|
|
83
83
|
extraStepperContainerProps?: FlexProps;
|
|
84
|
+
/**
|
|
85
|
+
* Extra props that are passed to the children `Flex` wrapper.
|
|
86
|
+
*/
|
|
87
|
+
extraChildrenContainerProps?: FlexProps;
|
|
84
88
|
/**
|
|
85
89
|
* Custom rendering function to wrap children.
|
|
86
90
|
*/
|
|
@@ -95,7 +99,7 @@ export interface Props<ExtraProps> {
|
|
|
95
99
|
*/
|
|
96
100
|
children: StepChild | StepChild[];
|
|
97
101
|
}
|
|
98
|
-
declare function FlowStepper<ExtraProps>({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
|
|
102
|
+
declare function FlowStepper<ExtraProps>({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, extraChildrenContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
|
|
99
103
|
declare namespace FlowStepper {
|
|
100
104
|
var Step: ({ children }: StepProps) => JSX.Element;
|
|
101
105
|
var Indexed: typeof FlowStepperIndexed;
|
|
@@ -13,7 +13,7 @@ import React from "react";
|
|
|
13
13
|
import { isElement } from "react-is";
|
|
14
14
|
import Flex from "../../layout/Flex";
|
|
15
15
|
import { Stepper } from "..";
|
|
16
|
-
function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
|
|
16
|
+
function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStepFooter, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, extraChildrenContainerProps, renderChildren, children, }) {
|
|
17
17
|
const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce((acc, child, idx) => {
|
|
18
18
|
var _a;
|
|
19
19
|
const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
|
|
@@ -48,7 +48,7 @@ function FlowStepper({ activeIndex, header, renderStepHeader, footer, renderStep
|
|
|
48
48
|
getSectionContents(header, stepHeader, renderStepHeader),
|
|
49
49
|
React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
|
|
50
50
|
React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
|
|
51
|
-
React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren
|
|
51
|
+
React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column", position: "relative" }, extraChildrenContainerProps), renderChildren
|
|
52
52
|
? renderChildren(Object.assign(Object.assign({}, renderArgs), { children: innerContents }))
|
|
53
53
|
: innerContents),
|
|
54
54
|
getSectionContents(footer, stepFooter, renderStepFooter)));
|
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": {
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"prettier": "^2.4.1",
|
|
109
109
|
"react": "^17.0.2",
|
|
110
110
|
"react-dom": "^17.0.2",
|
|
111
|
-
"rimraf": "^
|
|
111
|
+
"rimraf": "^4.1.2",
|
|
112
112
|
"styled-components": "^5.3.3",
|
|
113
113
|
"stylelint": "^14.9.1",
|
|
114
114
|
"stylelint-config-recommended": "^8.0.0",
|
|
@@ -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;
|