@ledgerhq/react-ui 0.10.4 → 0.11.0-next.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/form/BaseInput/index.js +0 -2
- 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/form/BaseInput/index.js +0 -2
- package/lib/components/navigation/FlowStepper/index.d.ts +5 -1
- package/lib/components/navigation/FlowStepper/index.js +2 -2
- package/package.json +2 -2
|
@@ -83,8 +83,6 @@ const BaseInput = import_styled_components.default.input.attrs({
|
|
|
83
83
|
outline: none;
|
|
84
84
|
cursor: ${(p) => p.disabled ? "not-allowed" : "text"};
|
|
85
85
|
flex-shrink: 1;
|
|
86
|
-
padding-top: 14px;
|
|
87
|
-
padding-bottom: 14px;
|
|
88
86
|
padding-left: 20px;
|
|
89
87
|
padding-right: 20px;
|
|
90
88
|
&::placeholder {
|
|
@@ -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;AAuCxB,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,YAGzB,CAAC,MAAM,aAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,WAG5C,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAErC,CAAC,MACD,EAAE,SACF,CAAC,EAAE,SACH,CAAC,EAAE,WACH;AAAA,0BACsB,EAAE,MAAM,OAAO,QAAQ;AAAA,8BACnB,yBAAK,EAAE,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,IAG3D,CAAC,MACD,EAAE,SACF,CAAC,EAAE,YACH;AAAA,0BACsB,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,IAG3C,CAAC,MACD,CAAC,EAAE,SACH,EAAE,WACF,CAAC,EAAE,YACH;AAAA,0BACsB,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,IAG7C,CAAC,MACD,CAAC,EAAE,SACH,CAAC,EAAE,WACH,CAAC,EAAE,YACH;AAAA;AAAA,kBAEc,CAAC,EAAE,YAAY,aAAa,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,MACD,EAAE,YACF;AAAA,eACW,EAAE,MAAM,OAAO,QAAQ;AAAA,oBAClB,CAAC,OAAM,GAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI3C,MAAM,YAAY,iCAAO,MAAM,MAEpC;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKG,CAAC,MAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,MAAM,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,YAG1E,CAAC,MAAO,EAAE,WAAW,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
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 && <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>}\n {warning && <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>}\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
|
}
|
|
@@ -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-next.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -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",
|