@ledgerhq/react-ui 0.11.0-next.0 → 0.11.0-nightly.1
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.
|
@@ -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,
|
|
@@ -114,6 +115,10 @@ const InputWarningContainer = (0, import_styled_components.default)(import_Text.
|
|
|
114
115
|
color: ${(p) => p.theme.colors.warning.c80};
|
|
115
116
|
margin-left: 12px;
|
|
116
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
|
+
`;
|
|
117
122
|
const InputRenderLeftContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
|
|
118
123
|
alignItems: "center",
|
|
119
124
|
pl: "16px"
|
|
@@ -132,6 +137,7 @@ function Input(props, ref) {
|
|
|
132
137
|
disabled,
|
|
133
138
|
error,
|
|
134
139
|
warning,
|
|
140
|
+
info,
|
|
135
141
|
onChange,
|
|
136
142
|
onChangeEvent,
|
|
137
143
|
renderLeft,
|
|
@@ -158,6 +164,7 @@ function Input(props, ref) {
|
|
|
158
164
|
disabled,
|
|
159
165
|
error,
|
|
160
166
|
warning,
|
|
167
|
+
info,
|
|
161
168
|
onChange: handleChange,
|
|
162
169
|
value: inputValue,
|
|
163
170
|
onFocus: (event) => {
|
|
@@ -189,15 +196,17 @@ function Input(props, ref) {
|
|
|
189
196
|
error,
|
|
190
197
|
warning,
|
|
191
198
|
...containerProps
|
|
192
|
-
}, 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, {
|
|
193
200
|
flexDirection: "column",
|
|
194
201
|
rowGap: 2,
|
|
195
202
|
mt: 2
|
|
196
|
-
}, error
|
|
203
|
+
}, error ? /* @__PURE__ */ import_react.default.createElement(InputErrorContainer, {
|
|
204
|
+
variant: "small"
|
|
205
|
+
}, error) : warning ? /* @__PURE__ */ import_react.default.createElement(InputWarningContainer, {
|
|
197
206
|
variant: "small"
|
|
198
|
-
},
|
|
207
|
+
}, warning) : info ? /* @__PURE__ */ import_react.default.createElement(InputInfoContainer, {
|
|
199
208
|
variant: "small"
|
|
200
|
-
},
|
|
209
|
+
}, info) : null));
|
|
201
210
|
}
|
|
202
211
|
var BaseInput_default = import_react.default.forwardRef(Input);
|
|
203
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-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`;\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 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 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) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error
|
|
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
|
}
|
|
@@ -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;
|
|
@@ -104,6 +104,10 @@ export const InputWarningContainer = styled(Text) `
|
|
|
104
104
|
color: ${(p) => p.theme.colors.warning.c80};
|
|
105
105
|
margin-left: 12px;
|
|
106
106
|
`;
|
|
107
|
+
export const InputInfoContainer = styled(Text) `
|
|
108
|
+
color: ${(p) => p.theme.colors.neutral.c60};
|
|
109
|
+
margin-left: 12px;
|
|
110
|
+
`;
|
|
107
111
|
export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
|
|
108
112
|
alignItems: "center",
|
|
109
113
|
pl: "16px",
|
|
@@ -119,7 +123,7 @@ export const ClearableButtonUnstyled = styled(ButtonUnstyled) `
|
|
|
119
123
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
120
124
|
const IDENTITY = (_) => _;
|
|
121
125
|
function Input(props, ref) {
|
|
122
|
-
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"]);
|
|
123
127
|
const [focus, setFocus] = useState(false);
|
|
124
128
|
const inputValue = useMemo(() => serialize(value), [serialize, value]);
|
|
125
129
|
const handleChange = useCallback((e) => {
|
|
@@ -131,7 +135,7 @@ function Input(props, ref) {
|
|
|
131
135
|
}, [onChange, deserialize]);
|
|
132
136
|
const inner = (React.createElement(React.Fragment, null,
|
|
133
137
|
typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
|
|
134
|
-
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) => {
|
|
135
139
|
setFocus(true);
|
|
136
140
|
htmlInputProps.onFocus && htmlInputProps.onFocus(event);
|
|
137
141
|
}, onBlur: (event) => {
|
|
@@ -147,8 +151,6 @@ function Input(props, ref) {
|
|
|
147
151
|
}
|
|
148
152
|
return (React.createElement("div", null,
|
|
149
153
|
React.createElement(InputContainer, Object.assign({ disabled: disabled, focus: focus, error: error, warning: warning }, containerProps), inner),
|
|
150
|
-
(error || warning) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 },
|
|
151
|
-
error && React.createElement(InputErrorContainer, { variant: "small" }, error),
|
|
152
|
-
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))));
|
|
153
155
|
}
|
|
154
156
|
export default React.forwardRef(Input);
|