@ledgerhq/react-ui 0.14.11-nightly.1 → 0.14.11-nightly.3
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/layout/List/VerticalTimeline/TimelineItem.js +2 -1
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +3 -3
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +2 -2
- package/lib/cjs/components/loaders/ProgressLoader/index.js +1 -1
- package/lib/cjs/components/loaders/ProgressLoader/index.js.map +2 -2
- package/lib/cjs/components/navigation/progress/Stepper/index.js +25 -5
- package/lib/cjs/components/navigation/progress/Stepper/index.js.map +2 -2
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +3 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +1 -0
- package/lib/components/layout/List/VerticalTimeline/index.js.map +1 -1
- package/lib/components/loaders/ProgressLoader/index.js +1 -1
- package/lib/components/loaders/ProgressLoader/index.js.map +1 -1
- package/lib/components/navigation/progress/Stepper/index.d.ts +9 -1
- package/lib/components/navigation/progress/Stepper/index.js +15 -5
- package/lib/components/navigation/progress/Stepper/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -36,6 +36,7 @@ var import_styled_components = __toESM(require("styled-components"));
|
|
|
36
36
|
var import__2 = require("../..");
|
|
37
37
|
var import__3 = require("../../..");
|
|
38
38
|
var import_Tag = __toESM(require("../../../Tag"));
|
|
39
|
+
var import_InfiniteLoader = __toESM(require("../../../loaders/InfiniteLoader"));
|
|
39
40
|
var import_TimelineIndicator = __toESM(require("./TimelineIndicator"));
|
|
40
41
|
const getContainerBackground = (theme, status) => {
|
|
41
42
|
if (status === "completed") {
|
|
@@ -94,7 +95,7 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
|
94
95
|
textProps: { color: colors.neutral.c100 }
|
|
95
96
|
},
|
|
96
97
|
`${item.estimatedTime / 60} min`
|
|
97
|
-
)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))));
|
|
98
|
+
) || (item == null ? void 0 : item.hasLoader) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_InfiniteLoader.default, { size: 30 })), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))));
|
|
98
99
|
}
|
|
99
100
|
var TimelineItem_default = import_react.default.memo(TimelineItem);
|
|
100
101
|
//# sourceMappingURL=TimelineItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"../../../../styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c50;\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n }\n return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n border-radius: ${p => p.theme.radii[2]}px;\n background: ${p => getContainerBackground(p.theme, p.status)};\n border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n justify-content: space-between;\n align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n <TimelineIndicator\n status={item.status}\n isFirstItem={isFirstItem}\n isLastItem={isLastItem}\n mr={4}\n />\n <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n <TimelineIndicatorContentHeader height=\"20px\">\n <Text\n variant=\"body\"\n fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n color={\n item.status !== \"inactive\" && isLastItem\n ? \"success.c70\"\n : item.status === \"active\"\n ? \"primary.c80\"\n : \"neutral.c70\"\n }\n >\n {item.title}\n </Text>\n {item?.estimatedTime && item.status === \"active\" && (\n <Tag\n size=\"small\"\n type=\"opacity\"\n active\n disabled\n textProps={{ color: colors.neutral.c100 }}\n >{`${item.estimatedTime / 60} min`}</Tag>\n )}\n </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Box position=\"relative\" pt={6}>\n {item.renderBody(item.status === \"active\")}\n </Box>\n )}\n </Container>\n </Flex>\n );\n}\n\nexport default React.memo(TimelineItem);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;
|
|
6
|
-
"names": ["import__", "styled", "React", "TimelineIndicator", "Tag"]
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"../../../../styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex, Box } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\nimport InfiniteLoader from \"../../../loaders/InfiniteLoader\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n item: Item;\n isFirstItem?: boolean;\n isLastItem?: boolean;\n onClick?: () => void;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c20;\n }\n return \"transparent\";\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (status === \"completed\") {\n return \"transparent\";\n } else if (isLastItem && status === \"active\") {\n return theme.colors.success.c50;\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n }\n return \"transparent\";\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n flex: 1;\n border-radius: ${p => p.theme.radii[2]}px;\n background: ${p => getContainerBackground(p.theme, p.status)};\n border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};\n padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n justify-content: space-between;\n align-items: center;\n`;\n\nfunction TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props) {\n const { colors } = useTheme();\n\n return (\n <Flex flexDirection=\"row\" onClick={onClick} flex={1}>\n <TimelineIndicator\n status={item.status}\n isFirstItem={isFirstItem}\n isLastItem={isLastItem}\n mr={4}\n />\n <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n <TimelineIndicatorContentHeader height=\"20px\">\n <Text\n variant=\"body\"\n fontWeight={item.status === \"active\" ? \"semiBold\" : \"medium\"}\n color={\n item.status !== \"inactive\" && isLastItem\n ? \"success.c70\"\n : item.status === \"active\"\n ? \"primary.c80\"\n : \"neutral.c70\"\n }\n >\n {item.title}\n </Text>\n {(item?.estimatedTime && item.status === \"active\" && (\n <Tag\n size=\"small\"\n type=\"opacity\"\n active\n disabled\n textProps={{ color: colors.neutral.c100 }}\n >{`${item.estimatedTime / 60} min`}</Tag>\n )) ||\n (item?.hasLoader && item.status === \"active\" && <InfiniteLoader size={30} />)}\n </TimelineIndicatorContentHeader>\n {item.renderBody && item.status === \"active\" && (\n <Box position=\"relative\" pt={6}>\n {item.renderBody(item.status === \"active\")}\n </Box>\n )}\n </Container>\n </Flex>\n );\n}\n\nexport default React.memo(TimelineItem);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAChB,4BAA2B;AAE3B,+BAA8B;AAS9B,MAAM,yBAAyB,CAAC,OAAc,WAAuB;AACnE,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,EACT,WAAW,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO;AACT;AAEA,MAAM,gBAAY,yBAAAC,SAAO,cAAI;AAAA;AAAA,mBAEV,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACxB,OAAK,uBAAuB,EAAE,OAAO,EAAE,MAAM,CAAC;AAAA,sBACxC,OAAK,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAI9E,MAAM,qCAAiC,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKlD,SAAS,aAAa,EAAE,MAAM,aAAa,YAAY,QAAQ,GAAU;AACvE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,kBAAK,eAAc,OAAM,SAAkB,MAAM,KAChD,6BAAAA,QAAA;AAAA,IAAC,yBAAAC;AAAA,IAAA;AAAA,MACC,QAAQ,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA;AAAA,EACN,GACA,6BAAAD,QAAA,cAAC,aAAU,QAAQ,KAAK,QAAQ,YAAwB,IAAI,GAAG,eAAc,YAC3E,6BAAAA,QAAA,cAAC,kCAA+B,QAAO,UACrC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAY,KAAK,WAAW,WAAW,aAAa;AAAA,MACpD,OACE,KAAK,WAAW,cAAc,aAC1B,gBACA,KAAK,WAAW,WAChB,gBACA;AAAA;AAAA,IAGL,KAAK;AAAA,EACR,IACE,6BAAM,kBAAiB,KAAK,WAAW,YACvC,6BAAAA,QAAA;AAAA,IAAC,WAAAE;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAM;AAAA,MACN,UAAQ;AAAA,MACR,WAAW,EAAE,OAAO,OAAO,QAAQ,KAAK;AAAA;AAAA,IACxC,GAAG,KAAK,gBAAgB,EAAE;AAAA,EAAO,MAElC,6BAAM,cAAa,KAAK,WAAW,YAAY,6BAAAF,QAAA,cAAC,sBAAAG,SAAA,EAAe,MAAM,IAAI,CAC9E,GACC,KAAK,cAAc,KAAK,WAAW,YAClC,6BAAAH,QAAA,cAAC,iBAAI,UAAS,YAAW,IAAI,KAC1B,KAAK,WAAW,KAAK,WAAW,QAAQ,CAC3C,CAEJ,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
|
|
6
|
+
"names": ["import__", "styled", "React", "TimelineIndicator", "Tag", "InfiniteLoader"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"../../../styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n status: ItemStatus;\n title: string;\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n estimatedTime?: number;\n};\n\nexport type Props = BaseStyledProps & {\n steps?: Item[];\n onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n return (\n <Flex {...props} flexDirection=\"column\" flex={1}>\n {steps?.map((step, index) => (\n <TimelineItem\n key={index}\n item={step}\n isFirstItem={index === 0}\n isLastItem={index === steps.length - 1}\n onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n />\n ))}\n </Flex>\n );\n}\n\nconst SubtitleText: React.FC<TextProps> = props => (\n <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = props => (\n <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport Text, { TextProps } from \"../../../asorted/Text\";\nimport { BaseStyledProps } from \"../../../styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n status: ItemStatus;\n title: string;\n renderBody?: (isDisplayed?: boolean) => ReactNode;\n estimatedTime?: number;\n hasLoader?: boolean;\n};\n\nexport type Props = BaseStyledProps & {\n steps?: Item[];\n onClickIndex?: (index: number) => void;\n};\n\nexport default function VerticalTimeline({ steps, onClickIndex, ...props }: Props) {\n return (\n <Flex {...props} flexDirection=\"column\" flex={1}>\n {steps?.map((step, index) => (\n <TimelineItem\n key={index}\n item={step}\n isFirstItem={index === 0}\n isLastItem={index === steps.length - 1}\n onClick={onClickIndex ? () => onClickIndex(index) : undefined}\n />\n ))}\n </Flex>\n );\n}\n\nconst SubtitleText: React.FC<TextProps> = props => (\n <Text variant=\"body\" fontWeight=\"semiBold\" color=\"neutral.c100\" mb={3} {...props} />\n);\n\nconst BodyText: React.FC<TextProps> = props => (\n <Text variant=\"bodyLineHeight\" fontWeight=\"medium\" color=\"neutral.c80\" {...props} />\n);\n\nVerticalTimeline.BodyText = BodyText;\nVerticalTimeline.SubtitleText = SubtitleText;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AACrB,kBAAgC;AAkBjB,SAAR,iBAAkC,EAAE,OAAO,cAAc,GAAG,MAAM,GAAU;AACjF,SACE,6BAAAA,QAAA,cAAC,iBAAM,GAAG,OAAO,eAAc,UAAS,MAAM,KAC3C,+BAAO,IAAI,CAAC,MAAM,UACjB,6BAAAA,QAAA;AAAA,IAAC,oBAAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa,UAAU;AAAA,MACvB,YAAY,UAAU,MAAM,SAAS;AAAA,MACrC,SAAS,eAAe,MAAM,aAAa,KAAK,IAAI;AAAA;AAAA,EACtD,EAEJ;AAEJ;AAEA,MAAM,eAAoC,WACxC,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,QAAO,YAAW,YAAW,OAAM,gBAAe,IAAI,GAAI,GAAG,OAAO;AAGpF,MAAM,WAAgC,WACpC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAQ,kBAAiB,YAAW,UAAS,OAAM,eAAe,GAAG,OAAO;AAGpF,iBAAiB,WAAW;AAC5B,iBAAiB,eAAe;",
|
|
6
6
|
"names": ["React", "TimelineItem", "Text"]
|
|
7
7
|
}
|
|
@@ -117,7 +117,7 @@ function ProgressLoader({
|
|
|
117
117
|
frontStrokeLinecap,
|
|
118
118
|
backgroundStrokeColor
|
|
119
119
|
}) {
|
|
120
|
-
return /* @__PURE__ */ import_react.default.createElement(StyledProgressLoaderContainer, null, showPercentage && /* @__PURE__ */ import_react.default.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" }, progress, "%"), infinite ? /* @__PURE__ */ import_react.default.createElement(StyledSpinningContainer, null, /* @__PURE__ */ import_react.default.createElement(
|
|
120
|
+
return /* @__PURE__ */ import_react.default.createElement(StyledProgressLoaderContainer, null, showPercentage && /* @__PURE__ */ import_react.default.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" }, Math.floor(progress), "%"), infinite ? /* @__PURE__ */ import_react.default.createElement(StyledSpinningContainer, null, /* @__PURE__ */ import_react.default.createElement(
|
|
121
121
|
ProgressCircleSvg,
|
|
122
122
|
{
|
|
123
123
|
radius,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/loaders/ProgressLoader/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n /**\n * Radius of the progress ring.\n */\n radius?: number;\n\n /**\n * Thickness of the progress ring.\n */\n stroke?: number;\n\n /**\n * Progress of the loader, in percent, between 0 and 100.\n */\n progress?: number;\n\n /**\n * Whether to make it infinite, with spinning and whatnot.\n */\n infinite?: boolean;\n\n /**\n * Whether to display the progress, defaults to true.\n */\n showPercentage?: boolean;\n\n /**\n * Percentage text color\n */\n textColor?: string;\n\n /**\n * Front stroke color.\n */\n frontStrokeColor?: string;\n\n /**\n * Front stroke linecap.\n * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n */\n frontStrokeLinecap?: \"butt\" | \"round\";\n\n /**\n * Background stroke color.\n */\n backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n fill: \"transparent\",\n cx: \"50%\",\n cy: \"50%\",\n})`\n transition: stroke-dashoffset 0.35s;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs(props => ({\n stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs(props => ({\n stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n display: flex;\n position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n animation: rotation 1s infinite linear;\n display: flex;\n align-items: center;\n justify-content: center;\n @keyframes rotation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n`;\n\nfunction ProgressCircleSvg({\n radius,\n stroke,\n progress,\n backgroundStrokeColor,\n frontStrokeColor,\n frontStrokeLinecap,\n}: {\n radius: number;\n stroke: number;\n progress: number;\n backgroundStrokeColor?: string;\n frontStrokeColor?: string;\n frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n const normalizedRadius = radius - stroke / 2;\n const circumference = normalizedRadius * 2 * Math.PI;\n const strokeDashoffset = circumference - (progress / 100) * circumference;\n return (\n <svg height={radius * 2} width={radius * 2}>\n <StyledCircleBackground\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset: 0 }}\n stroke={backgroundStrokeColor}\n r={normalizedRadius}\n />\n <StyledCircleFront\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset }}\n stroke={frontStrokeColor}\n strokeLinecap={frontStrokeLinecap}\n r={normalizedRadius}\n />\n </svg>\n );\n}\n\nexport default function ProgressLoader({\n radius = 32,\n stroke = 6,\n progress = 0,\n showPercentage = true,\n infinite,\n textColor,\n frontStrokeColor,\n frontStrokeLinecap,\n backgroundStrokeColor,\n}: Props): JSX.Element {\n return (\n <StyledProgressLoaderContainer>\n {showPercentage && (\n <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n {progress}%\n </StyledCenteredText>\n )}\n {infinite ? (\n <StyledSpinningContainer>\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={25}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n </StyledSpinningContainer>\n ) : (\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={progress}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n )}\n </StyledProgressLoaderContainer>\n );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAClE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAC7D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\n\nexport interface Props {\n /**\n * Radius of the progress ring.\n */\n radius?: number;\n\n /**\n * Thickness of the progress ring.\n */\n stroke?: number;\n\n /**\n * Progress of the loader, in percent, between 0 and 100.\n */\n progress?: number;\n\n /**\n * Whether to make it infinite, with spinning and whatnot.\n */\n infinite?: boolean;\n\n /**\n * Whether to display the progress, defaults to true.\n */\n showPercentage?: boolean;\n\n /**\n * Percentage text color\n */\n textColor?: string;\n\n /**\n * Front stroke color.\n */\n frontStrokeColor?: string;\n\n /**\n * Front stroke linecap.\n * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap\n */\n frontStrokeLinecap?: \"butt\" | \"round\";\n\n /**\n * Background stroke color.\n */\n backgroundStrokeColor?: string;\n}\n\nconst StyledCircle = styled.circle.attrs({\n fill: \"transparent\",\n cx: \"50%\",\n cy: \"50%\",\n})`\n transition: stroke-dashoffset 0.35s;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n`;\n\nconst StyledCircleBackground = styled(StyledCircle).attrs(props => ({\n stroke: props.stroke || props.theme.colors.primary.c30,\n}))``;\n\nconst StyledCircleFront = styled(StyledCircle).attrs(props => ({\n stroke: props.stroke || props.theme.colors.primary.c80,\n}))``;\n\nconst StyledCenteredText = styled(Text)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n`;\n\nconst StyledProgressLoaderContainer = styled.div`\n display: flex;\n position: absolute;\n`;\nconst StyledSpinningContainer = styled.div`\n animation: rotation 1s infinite linear;\n display: flex;\n align-items: center;\n justify-content: center;\n @keyframes rotation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n`;\n\nfunction ProgressCircleSvg({\n radius,\n stroke,\n progress,\n backgroundStrokeColor,\n frontStrokeColor,\n frontStrokeLinecap,\n}: {\n radius: number;\n stroke: number;\n progress: number;\n backgroundStrokeColor?: string;\n frontStrokeColor?: string;\n frontStrokeLinecap?: \"butt\" | \"round\" | \"square\";\n}) {\n const normalizedRadius = radius - stroke / 2;\n const circumference = normalizedRadius * 2 * Math.PI;\n const strokeDashoffset = circumference - (progress / 100) * circumference;\n return (\n <svg height={radius * 2} width={radius * 2}>\n <StyledCircleBackground\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset: 0 }}\n stroke={backgroundStrokeColor}\n r={normalizedRadius}\n />\n <StyledCircleFront\n strokeWidth={stroke}\n strokeDasharray={circumference + \" \" + circumference}\n style={{ strokeDashoffset }}\n stroke={frontStrokeColor}\n strokeLinecap={frontStrokeLinecap}\n r={normalizedRadius}\n />\n </svg>\n );\n}\n\nexport default function ProgressLoader({\n radius = 32,\n stroke = 6,\n progress = 0,\n showPercentage = true,\n infinite,\n textColor,\n frontStrokeColor,\n frontStrokeLinecap,\n backgroundStrokeColor,\n}: Props): JSX.Element {\n return (\n <StyledProgressLoaderContainer>\n {showPercentage && (\n <StyledCenteredText variant=\"body\" color={textColor || \"primary.c80\"}>\n {Math.floor(progress)}%\n </StyledCenteredText>\n )}\n {infinite ? (\n <StyledSpinningContainer>\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={25}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n </StyledSpinningContainer>\n ) : (\n <ProgressCircleSvg\n radius={radius}\n stroke={stroke}\n progress={progress}\n frontStrokeColor={frontStrokeColor}\n frontStrokeLinecap={frontStrokeLinecap}\n backgroundStrokeColor={backgroundStrokeColor}\n />\n )}\n </StyledProgressLoaderContainer>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAkDjB,MAAM,eAAe,yBAAAA,QAAO,OAAO,MAAM;AAAA,EACvC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AACN,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,6BAAyB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAClE,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,wBAAoB,yBAAAA,SAAO,YAAY,EAAE,MAAM,YAAU;AAAA,EAC7D,QAAQ,MAAM,UAAU,MAAM,MAAM,OAAO,QAAQ;AACrD,EAAE;AAEF,MAAM,yBAAqB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC,MAAM,gCAAgC,yBAAAD,QAAO;AAAA;AAAA;AAAA;AAI7C,MAAM,0BAA0B,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevC,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,mBAAmB,SAAS,SAAS;AAC3C,QAAM,gBAAgB,mBAAmB,IAAI,KAAK;AAClD,QAAM,mBAAmB,gBAAiB,WAAW,MAAO;AAC5D,SACE,6BAAAE,QAAA,cAAC,SAAI,QAAQ,SAAS,GAAG,OAAO,SAAS,KACvC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,kBAAkB,EAAE;AAAA,MAC7B,QAAQ;AAAA,MACR,GAAG;AAAA;AAAA,EACL,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,iBAAiB,gBAAgB,MAAM;AAAA,MACvC,OAAO,EAAE,iBAAiB;AAAA,MAC1B,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA;AAAA,EACL,CACF;AAEJ;AAEe,SAAR,eAAgC;AAAA,EACrC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,6BAAAA,QAAA,cAAC,qCACE,kBACC,6BAAAA,QAAA,cAAC,sBAAmB,SAAQ,QAAO,OAAO,aAAa,iBACpD,KAAK,MAAM,QAAQ,GAAE,GACxB,GAED,WACC,6BAAAA,QAAA,cAAC,+BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,IAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CAEJ;AAEJ;",
|
|
6
6
|
"names": ["styled", "Text", "React"]
|
|
7
7
|
}
|
|
@@ -80,6 +80,7 @@ const Item = {
|
|
|
80
80
|
};
|
|
81
81
|
const StepText = (0, import_styled_components.default)(import_Text.default)`
|
|
82
82
|
text-align: center;
|
|
83
|
+
white-space: pre-wrap;
|
|
83
84
|
color: ${(p) => {
|
|
84
85
|
if (p.state === "errored") {
|
|
85
86
|
return p.theme.colors.error.c50;
|
|
@@ -122,7 +123,10 @@ const Step = (0, import_react.memo)(function Step2({
|
|
|
122
123
|
const nextInactive = state === "pending";
|
|
123
124
|
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", alignItems: "center", flex: 20 }, /* @__PURE__ */ import_react.default.createElement(Item.Spacer, { mb: 5 }, !hideLeftSeparator && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive, position: "left" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" }), stepContentsByState[state], nextState && /* @__PURE__ */ import_react.default.createElement(Separator.Item, { inactive: nextInactive, position: "right" }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: "1" })), typeof Label === "string" ? /* @__PURE__ */ import_react.default.createElement(StepText, { state, variant: "small" }, Label) : /* @__PURE__ */ import_react.default.createElement(Label, { state }));
|
|
124
125
|
});
|
|
125
|
-
function getState(activeIndex, index, errored, disabled) {
|
|
126
|
+
function getState(activeIndex, index, errored, disabled, completed) {
|
|
127
|
+
if (completed) {
|
|
128
|
+
return "completed";
|
|
129
|
+
}
|
|
126
130
|
if (disabled) {
|
|
127
131
|
return "disabled";
|
|
128
132
|
}
|
|
@@ -134,10 +138,26 @@ function getState(activeIndex, index, errored, disabled) {
|
|
|
134
138
|
}
|
|
135
139
|
return "completed";
|
|
136
140
|
}
|
|
137
|
-
function Stepper({
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
+
function Stepper({
|
|
142
|
+
steps,
|
|
143
|
+
activeIndex = 0,
|
|
144
|
+
errored,
|
|
145
|
+
disabledIndexes,
|
|
146
|
+
filterDuplicate,
|
|
147
|
+
isOver,
|
|
148
|
+
...extraProps
|
|
149
|
+
}) {
|
|
150
|
+
const displayedSteps = filterDuplicate ? steps.filter((step, index) => index === 0 || step !== steps[index - 1]) : steps;
|
|
151
|
+
const dislayedActiveIndex = filterDuplicate ? displayedSteps.findIndex((step) => step === steps[activeIndex]) : activeIndex;
|
|
152
|
+
return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexWrap: "nowrap", justifyContent: "space-between", ...extraProps }, displayedSteps.map((step, idx) => {
|
|
153
|
+
const state = getState(
|
|
154
|
+
dislayedActiveIndex,
|
|
155
|
+
idx,
|
|
156
|
+
errored,
|
|
157
|
+
disabledIndexes == null ? void 0 : disabledIndexes.includes(idx),
|
|
158
|
+
isOver
|
|
159
|
+
);
|
|
160
|
+
const nextState = idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : void 0;
|
|
141
161
|
return /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, { key: idx }, idx > 0 && /* @__PURE__ */ import_react.default.createElement(Separator.Step, { inactive: state === "pending" }), /* @__PURE__ */ import_react.default.createElement(Step, { label: step, state, nextState, hideLeftSeparator: idx === 0 }));
|
|
142
162
|
}));
|
|
143
163
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/navigation/progress/Stepper/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { IconsLegacy } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n /**\n * An array of labels that will determine the progress bar steps.\n * A label is either a string or a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n * A styled StepText component is exported to allow easy styling of such a custom label.\n */\n steps: LabelType[];\n /**\n * Index of the active step, starting at zero and defaulting to 0 if omitted.\n */\n activeIndex?: number;\n /**\n * If true the current step is considered as a failure.\n */\n errored?: boolean;\n /**\n * Steps with indexes contained inside the array will be shown as disabled.\n */\n disabledIndexes?: number[];\n}\n\nexport type StepProps = {\n /**\n * State of the step.\n */\n state: StepState;\n /**\n * The label to display. To display more than text, this can be a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n * A styled StepText component is exported to allow easy styling of such a custom Label\n */\n label: LabelType;\n /**\n * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n */\n hideLeftSeparator: boolean;\n /**\n * The next step state, or undefined if the current step is the last one.\n */\n nextState?: StepState;\n};\n\nexport const Item = {\n Container: styled.div.attrs({\n mx: \"8px\",\n })<ColorProps & BorderProps & SpaceProps>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${p => p.theme.space[8]}px;\n height: ${p => p.theme.space[8]}px;\n ${color}\n ${border}\n ${space}\n `,\n Spacer: styled.div<SpaceProps>`\n display: flex;\n align-self: stretch;\n ${space}\n `,\n Current: styled.div.attrs({\n backgroundColor: \"primary.c90\",\n })<ColorProps>`\n width: 6px;\n height: 6px;\n border-radius: 6px;\n ${color}\n `,\n Pending: styled.div.attrs({\n backgroundColor: \"neutral.c70\",\n })<ColorProps>`\n width: ${p => p.theme.space[2]}px;\n height: ${p => p.theme.space[2]}px;\n border-radius: ${p => p.theme.space[2]}px;\n ${color}\n `,\n Completed: (): JSX.Element => <IconsLegacy.CheckAloneMedium size={16} />,\n Disabled: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n Errored: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n text-align: center;\n color: ${p => {\n if (p.state === \"errored\") {\n return p.theme.colors.error.c50;\n }\n if (p.state === \"disabled\") {\n return p.theme.colors.neutral.c50;\n }\n if (p.state === \"pending\") {\n return p.theme.colors.neutral.c70;\n }\n return p.theme.colors.neutral.c100;\n }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n flex: 1;\n position: relative;\n overflow-x: hidden;\n background-color: ${p => p.theme.colors.neutral.c40};\n height: 1px;\n top: ${p => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n Step: styled(BaseSeparator)``,\n Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n pending: (\n <Item.Container>\n <Item.Pending />\n </Item.Container>\n ),\n current: (\n <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Current />\n </Item.Container>\n ),\n completed: (\n <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Completed />\n </Item.Container>\n ),\n errored: (\n <Item.Container color=\"error.c50\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n <Item.Errored />\n </Item.Container>\n ),\n disabled: (\n <Item.Container color=\"neutral.c50\">\n <Item.Disabled />\n </Item.Container>\n ),\n};\n\nexport const Step = memo(function Step({\n state,\n label: Label,\n hideLeftSeparator,\n nextState,\n}: StepProps): JSX.Element {\n const inactive = state === \"pending\";\n const nextInactive = state === \"pending\";\n\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\" flex={20}>\n <Item.Spacer mb={5}>\n {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n <Flex flex=\"1\" />\n )}\n {stepContentsByState[state]}\n {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n <Flex flex=\"1\" />\n )}\n </Item.Spacer>\n {typeof Label === \"string\" ? (\n <StepText state={state} variant=\"small\">\n {Label}\n </StepText>\n ) : (\n <Label state={state} />\n )}\n </Flex>\n );\n});\n\nfunction getState(activeIndex: number
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,+BAAmB;AACnB,2BAA0E;AAC1E,eAA4B;AAC5B,kBAAiB;AACjB,kBAAmC;
|
|
4
|
+
"sourcesContent": ["import React, { memo, Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { border, BorderProps, color, ColorProps, space, SpaceProps } from \"styled-system\";\nimport { IconsLegacy } from \"../../../../index\";\nimport Text from \"../../../asorted/Text\";\nimport Flex, { FlexBoxProps } from \"../../../layout/Flex\";\n\n/**\n * The state of a progress bar step.\n */\nexport type StepState = \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\";\n\ntype LabelType = string | React.ComponentType<{ state: StepState }>;\nexport interface Props extends FlexBoxProps {\n /**\n * An array of labels that will determine the progress bar steps.\n * A label is either a string or a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\"`.\n * A styled StepText component is exported to allow easy styling of such a custom label.\n */\n steps: LabelType[];\n /**\n * Index of the active step, starting at zero and defaulting to 0 if omitted.\n */\n activeIndex?: number;\n /**\n * If true the current step is considered as a failure.\n */\n errored?: boolean;\n /**\n * Steps with indexes contained inside the array will be shown as disabled.\n */\n disabledIndexes?: number[];\n /**\n * Delete steps with same following labels\n */\n filterDuplicate?: boolean;\n /**\n * Complete all the steps\n */\n isOver?: boolean;\n}\n\nexport type StepProps = {\n /**\n * State of the step.\n */\n state: StepState;\n /**\n * The label to display. To display more than text, this can be a component that will be rendered with the\n * prop `state: \"pending\" | \"current\" | \"completed\" | \"errored\" | \"disabled\"`.\n * A styled StepText component is exported to allow easy styling of such a custom Label\n */\n label: LabelType;\n /**\n * If true, hides the left \"separator\" bar that bridges the gap between the wider separator and the item.\n */\n hideLeftSeparator: boolean;\n /**\n * The next step state, or undefined if the current step is the last one.\n */\n nextState?: StepState;\n};\n\nexport const Item = {\n Container: styled.div.attrs({\n mx: \"8px\",\n })<ColorProps & BorderProps & SpaceProps>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${p => p.theme.space[8]}px;\n height: ${p => p.theme.space[8]}px;\n ${color}\n ${border}\n ${space}\n `,\n Spacer: styled.div<SpaceProps>`\n display: flex;\n align-self: stretch;\n ${space}\n `,\n Current: styled.div.attrs({\n backgroundColor: \"primary.c90\",\n })<ColorProps>`\n width: 6px;\n height: 6px;\n border-radius: 6px;\n ${color}\n `,\n Pending: styled.div.attrs({\n backgroundColor: \"neutral.c70\",\n })<ColorProps>`\n width: ${p => p.theme.space[2]}px;\n height: ${p => p.theme.space[2]}px;\n border-radius: ${p => p.theme.space[2]}px;\n ${color}\n `,\n Completed: (): JSX.Element => <IconsLegacy.CheckAloneMedium size={16} />,\n Disabled: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n Errored: (): JSX.Element => <IconsLegacy.CloseMedium size={16} />,\n};\n\nexport const StepText = styled(Text)<{ state: StepState }>`\n text-align: center;\n white-space: pre-wrap;\n color: ${p => {\n if (p.state === \"errored\") {\n return p.theme.colors.error.c50;\n }\n if (p.state === \"disabled\") {\n return p.theme.colors.neutral.c50;\n }\n if (p.state === \"pending\") {\n return p.theme.colors.neutral.c70;\n }\n return p.theme.colors.neutral.c100;\n }};\n`;\n\nconst BaseSeparator = styled.div<{ inactive?: boolean }>`\n flex: 1;\n position: relative;\n overflow-x: hidden;\n background-color: ${p => p.theme.colors.neutral.c40};\n height: 1px;\n top: ${p => p.theme.space[5]}px;\n`;\n\nconst Separator = {\n Step: styled(BaseSeparator)``,\n Item: styled(BaseSeparator)<{ position: string }>``,\n};\n\nconst stepContentsByState = {\n pending: (\n <Item.Container>\n <Item.Pending />\n </Item.Container>\n ),\n current: (\n <Item.Container backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Current />\n </Item.Container>\n ),\n completed: (\n <Item.Container color=\"primary.c90\" backgroundColor=\"primary.c20\" borderRadius=\"8px\">\n <Item.Completed />\n </Item.Container>\n ),\n errored: (\n <Item.Container color=\"error.c50\" backgroundColor=\"warning.c30\" borderRadius=\"8px\">\n <Item.Errored />\n </Item.Container>\n ),\n disabled: (\n <Item.Container color=\"neutral.c50\">\n <Item.Disabled />\n </Item.Container>\n ),\n};\n\nexport const Step = memo(function Step({\n state,\n label: Label,\n hideLeftSeparator,\n nextState,\n}: StepProps): JSX.Element {\n const inactive = state === \"pending\";\n const nextInactive = state === \"pending\";\n\n return (\n <Flex flexDirection=\"column\" alignItems=\"center\" flex={20}>\n <Item.Spacer mb={5}>\n {(!hideLeftSeparator && <Separator.Item inactive={inactive} position=\"left\" />) || (\n <Flex flex=\"1\" />\n )}\n {stepContentsByState[state]}\n {(nextState && <Separator.Item inactive={nextInactive} position=\"right\" />) || (\n <Flex flex=\"1\" />\n )}\n </Item.Spacer>\n {typeof Label === \"string\" ? (\n <StepText state={state} variant=\"small\">\n {Label}\n </StepText>\n ) : (\n <Label state={state} />\n )}\n </Flex>\n );\n});\n\nfunction getState(\n activeIndex: number,\n index: number,\n errored?: boolean,\n disabled?: boolean,\n completed?: boolean,\n) {\n if (completed) {\n return \"completed\";\n }\n if (disabled) {\n return \"disabled\";\n }\n if (activeIndex < index) {\n return \"pending\";\n }\n if (activeIndex === index) {\n return errored ? \"errored\" : \"current\";\n }\n return \"completed\";\n}\n\nfunction Stepper({\n steps,\n activeIndex = 0,\n errored,\n disabledIndexes,\n filterDuplicate,\n isOver,\n ...extraProps\n}: Props) {\n const displayedSteps = filterDuplicate\n ? steps.filter((step, index) => index === 0 || step !== steps[index - 1])\n : steps;\n const dislayedActiveIndex = filterDuplicate\n ? displayedSteps.findIndex(step => step === steps[activeIndex])\n : activeIndex;\n\n return (\n <Flex flexWrap=\"nowrap\" justifyContent=\"space-between\" {...extraProps}>\n {displayedSteps.map((step, idx) => {\n const state = getState(\n dislayedActiveIndex,\n idx,\n errored,\n disabledIndexes?.includes(idx),\n isOver,\n );\n const nextState =\n idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : undefined;\n return (\n <Fragment key={idx}>\n {idx > 0 && <Separator.Step inactive={state === \"pending\"} />}\n <Step label={step} state={state} nextState={nextState} hideLeftSeparator={idx === 0} />\n </Fragment>\n );\n })}\n </Flex>\n );\n}\n\nexport default memo(Stepper);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,+BAAmB;AACnB,2BAA0E;AAC1E,eAA4B;AAC5B,kBAAiB;AACjB,kBAAmC;AA2D5B,MAAM,OAAO;AAAA,EAClB,WAAW,yBAAAA,QAAO,IAAI,MAAM;AAAA,IAC1B,IAAI;AAAA,EACN,CAAC;AAAA;AAAA;AAAA;AAAA,aAIU,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,cACpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,MAC7B,0BAAK;AAAA,MACL,2BAAM;AAAA,MACN,0BAAK;AAAA;AAAA,EAET,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAAA,MAGX,0BAAK;AAAA;AAAA,EAET,SAAS,yBAAAA,QAAO,IAAI,MAAM;AAAA,IACxB,iBAAiB;AAAA,EACnB,CAAC;AAAA;AAAA;AAAA;AAAA,MAIG,0BAAK;AAAA;AAAA,EAET,SAAS,yBAAAA,QAAO,IAAI,MAAM;AAAA,IACxB,iBAAiB;AAAA,EACnB,CAAC;AAAA,aACU,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,cACpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,qBACd,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,MACpC,0BAAK;AAAA;AAAA,EAET,WAAW,MAAmB,6BAAAC,QAAA,cAAC,qBAAY,kBAAZ,EAA6B,MAAM,IAAI;AAAA,EACtE,UAAU,MAAmB,6BAAAA,QAAA,cAAC,qBAAY,aAAZ,EAAwB,MAAM,IAAI;AAAA,EAChE,SAAS,MAAmB,6BAAAA,QAAA,cAAC,qBAAY,aAAZ,EAAwB,MAAM,IAAI;AACjE;AAEO,MAAM,eAAW,yBAAAD,SAAO,YAAAE,OAAI;AAAA;AAAA;AAAA,WAGxB,OAAK;AACZ,MAAI,EAAE,UAAU,WAAW;AACzB,WAAO,EAAE,MAAM,OAAO,MAAM;AAAA,EAC9B;AACA,MAAI,EAAE,UAAU,YAAY;AAC1B,WAAO,EAAE,MAAM,OAAO,QAAQ;AAAA,EAChC;AACA,MAAI,EAAE,UAAU,WAAW;AACzB,WAAO,EAAE,MAAM,OAAO,QAAQ;AAAA,EAChC;AACA,SAAO,EAAE,MAAM,OAAO,QAAQ;AAChC,CAAC;AAAA;AAGH,MAAM,gBAAgB,yBAAAF,QAAO;AAAA;AAAA;AAAA;AAAA,sBAIP,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,SAE5C,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAG9B,MAAM,YAAY;AAAA,EAChB,UAAM,yBAAAA,SAAO,aAAa;AAAA,EAC1B,UAAM,yBAAAA,SAAO,aAAa;AAC5B;AAEA,MAAM,sBAAsB;AAAA,EAC1B,SACE,6BAAAC,QAAA,cAAC,KAAK,WAAL,MACC,6BAAAA,QAAA,cAAC,KAAK,SAAL,IAAa,CAChB;AAAA,EAEF,SACE,6BAAAA,QAAA,cAAC,KAAK,WAAL,EAAe,iBAAgB,eAAc,cAAa,SACzD,6BAAAA,QAAA,cAAC,KAAK,SAAL,IAAa,CAChB;AAAA,EAEF,WACE,6BAAAA,QAAA,cAAC,KAAK,WAAL,EAAe,OAAM,eAAc,iBAAgB,eAAc,cAAa,SAC7E,6BAAAA,QAAA,cAAC,KAAK,WAAL,IAAe,CAClB;AAAA,EAEF,SACE,6BAAAA,QAAA,cAAC,KAAK,WAAL,EAAe,OAAM,aAAY,iBAAgB,eAAc,cAAa,SAC3E,6BAAAA,QAAA,cAAC,KAAK,SAAL,IAAa,CAChB;AAAA,EAEF,UACE,6BAAAA,QAAA,cAAC,KAAK,WAAL,EAAe,OAAM,iBACpB,6BAAAA,QAAA,cAAC,KAAK,UAAL,IAAc,CACjB;AAEJ;AAEO,MAAM,WAAO,mBAAK,SAASE,MAAK;AAAA,EACrC;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,WAAW,UAAU;AAC3B,QAAM,eAAe,UAAU;AAE/B,SACE,6BAAAF,QAAA,cAAC,YAAAG,SAAA,EAAK,eAAc,UAAS,YAAW,UAAS,MAAM,MACrD,6BAAAH,QAAA,cAAC,KAAK,QAAL,EAAY,IAAI,KACb,CAAC,qBAAqB,6BAAAA,QAAA,cAAC,UAAU,MAAV,EAAe,UAAoB,UAAS,QAAO,KAC1E,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAK,KAAI,GAEhB,oBAAoB,KAAK,GACxB,aAAa,6BAAAH,QAAA,cAAC,UAAU,MAAV,EAAe,UAAU,cAAc,UAAS,SAAQ,KACtE,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAK,KAAI,CAEnB,GACC,OAAO,UAAU,WAChB,6BAAAH,QAAA,cAAC,YAAS,OAAc,SAAQ,WAC7B,KACH,IAEA,6BAAAA,QAAA,cAAC,SAAM,OAAc,CAEzB;AAEJ,CAAC;AAED,SAAS,SACP,aACA,OACA,SACA,UACA,WACA;AACA,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AACA,MAAI,cAAc,OAAO;AACvB,WAAO;AAAA,EACT;AACA,MAAI,gBAAgB,OAAO;AACzB,WAAO,UAAU,YAAY;AAAA,EAC/B;AACA,SAAO;AACT;AAEA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,iBAAiB,kBACnB,MAAM,OAAO,CAAC,MAAM,UAAU,UAAU,KAAK,SAAS,MAAM,QAAQ,CAAC,CAAC,IACtE;AACJ,QAAM,sBAAsB,kBACxB,eAAe,UAAU,UAAQ,SAAS,MAAM,WAAW,CAAC,IAC5D;AAEJ,SACE,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,UAAS,UAAS,gBAAe,iBAAiB,GAAG,cACxD,eAAe,IAAI,CAAC,MAAM,QAAQ;AACjC,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,mDAAiB,SAAS;AAAA,MAC1B;AAAA,IACF;AACA,UAAM,YACJ,MAAM,eAAe,SAAS,IAAI,SAAS,qBAAqB,MAAM,CAAC,IAAI;AAC7E,WACE,6BAAAH,QAAA,cAAC,yBAAS,KAAK,OACZ,MAAM,KAAK,6BAAAA,QAAA,cAAC,UAAU,MAAV,EAAe,UAAU,UAAU,WAAW,GAC3D,6BAAAA,QAAA,cAAC,QAAK,OAAO,MAAM,OAAc,WAAsB,mBAAmB,QAAQ,GAAG,CACvF;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEA,IAAO,sBAAQ,mBAAK,OAAO;",
|
|
6
6
|
"names": ["styled", "React", "Text", "Step", "Flex"]
|
|
7
7
|
}
|
|
@@ -3,6 +3,7 @@ import styled, { useTheme } from "styled-components";
|
|
|
3
3
|
import { Flex, Box } from "../..";
|
|
4
4
|
import { Text } from "../../..";
|
|
5
5
|
import Tag from "../../../Tag";
|
|
6
|
+
import InfiniteLoader from "../../../loaders/InfiniteLoader";
|
|
6
7
|
import TimelineIndicator from "./TimelineIndicator";
|
|
7
8
|
const getContainerBackground = (theme, status) => {
|
|
8
9
|
if (status === "completed") {
|
|
@@ -47,7 +48,8 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
|
47
48
|
: item.status === "active"
|
|
48
49
|
? "primary.c80"
|
|
49
50
|
: "neutral.c70" }, item.title),
|
|
50
|
-
(item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`)))
|
|
51
|
+
((item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`))) ||
|
|
52
|
+
((item === null || item === void 0 ? void 0 : item.hasLoader) && item.status === "active" && React.createElement(InfiniteLoader, { size: 30 }))),
|
|
51
53
|
item.renderBody && item.status === "active" && (React.createElement(Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active"))))));
|
|
52
54
|
}
|
|
53
55
|
export default React.memo(TimelineItem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,GAAG,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,IAAmB,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,IAAmB,MAAM,uBAAuB,CAAC;AAkBxD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAwC;QAAxC,EAAE,KAAK,EAAE,YAAY,OAAmB,EAAd,KAAK,cAA/B,yBAAiC,CAAF;IACtE,OAAO,CACL,oBAAC,IAAI,oBAAK,KAAK,IAAE,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,KAC5C,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,KAAK,KAAK,CAAC,EACxB,UAAU,EAAE,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EACtC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAC7D,CACH,CAAC,CACG,CACR,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAwB,KAAK,CAAC,EAAE,CAAC,CACjD,oBAAC,IAAI,kBAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,CAAC,IAAM,KAAK,EAAI,CACrF,CAAC;AAEF,MAAM,QAAQ,GAAwB,KAAK,CAAC,EAAE,CAAC,CAC7C,oBAAC,IAAI,kBAAC,OAAO,EAAC,gBAAgB,EAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CACrF,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACrC,gBAAgB,CAAC,YAAY,GAAG,YAAY,CAAC"}
|
|
@@ -52,7 +52,7 @@ function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, fr
|
|
|
52
52
|
export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, infinite, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
|
|
53
53
|
return (React.createElement(StyledProgressLoaderContainer, null,
|
|
54
54
|
showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
|
|
55
|
-
progress,
|
|
55
|
+
Math.floor(progress),
|
|
56
56
|
"%")),
|
|
57
57
|
infinite ? (React.createElement(StyledSpinningContainer, null,
|
|
58
58
|
React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: 25, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))) : (React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/loaders/ProgressLoader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAkDtC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAC,CAAA;;;;CAID,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAClE,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,iBAAiB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMtC,CAAC;AAEF,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG/C,CAAC;AACF,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAazC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GAQnB;IACC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACrD,MAAM,gBAAgB,GAAG,aAAa,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAC1E,OAAO,CACL,6BAAK,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;QACxC,oBAAC,sBAAsB,IACrB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAC9B,MAAM,EAAE,qBAAqB,EAC7B,CAAC,EAAE,gBAAgB,GACnB;QACF,oBAAC,iBAAiB,IAChB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,EAC3B,MAAM,EAAE,gBAAgB,EACxB,aAAa,EAAE,kBAAkB,EACjC,CAAC,EAAE,gBAAgB,GACnB,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,CAAC,EACZ,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACf;IACN,OAAO,CACL,oBAAC,6BAA6B;QAC3B,cAAc,IAAI,CACjB,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,IAAI,aAAa;YACjE,QAAQ;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/loaders/ProgressLoader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAkDtC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IACvC,IAAI,EAAE,aAAa;IACnB,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAC,CAAA;;;;CAID,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAClE,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,iBAAiB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CACvD,CAAC,CAAC,CAAA,EAAE,CAAC;AAEN,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMtC,CAAC;AAEF,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG/C,CAAC;AACF,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAazC,CAAC;AAEF,SAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GAQnB;IACC,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IACrD,MAAM,gBAAgB,GAAG,aAAa,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAC1E,OAAO,CACL,6BAAK,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;QACxC,oBAAC,sBAAsB,IACrB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,CAAC,EAAE,EAC9B,MAAM,EAAE,qBAAqB,EAC7B,CAAC,EAAE,gBAAgB,GACnB;QACF,oBAAC,iBAAiB,IAChB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,aAAa,GAAG,GAAG,GAAG,aAAa,EACpD,KAAK,EAAE,EAAE,gBAAgB,EAAE,EAC3B,MAAM,EAAE,gBAAgB,EACxB,aAAa,EAAE,kBAAkB,EACjC,CAAC,EAAE,gBAAgB,GACnB,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,CAAC,EACV,QAAQ,GAAG,CAAC,EACZ,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,GACf;IACN,OAAO,CACL,oBAAC,6BAA6B;QAC3B,cAAc,IAAI,CACjB,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,IAAI,aAAa;YACjE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;gBACF,CACtB;QACA,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,uBAAuB;YACtB,oBAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,EAAE,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,GAC5C,CACsB,CAC3B,CAAC,CAAC,CAAC,CACF,oBAAC,iBAAiB,IAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,GAC5C,CACH,CAC6B,CACjC,CAAC;AACJ,CAAC"}
|
|
@@ -28,6 +28,14 @@ export interface Props extends FlexBoxProps {
|
|
|
28
28
|
* Steps with indexes contained inside the array will be shown as disabled.
|
|
29
29
|
*/
|
|
30
30
|
disabledIndexes?: number[];
|
|
31
|
+
/**
|
|
32
|
+
* Delete steps with same following labels
|
|
33
|
+
*/
|
|
34
|
+
filterDuplicate?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Complete all the steps
|
|
37
|
+
*/
|
|
38
|
+
isOver?: boolean;
|
|
31
39
|
}
|
|
32
40
|
export type StepProps = {
|
|
33
41
|
/**
|
|
@@ -68,6 +76,6 @@ export declare const StepText: import("styled-components").StyledComponent<"span
|
|
|
68
76
|
state: StepState;
|
|
69
77
|
}, keyof import("../../../asorted/Text").TextProps>;
|
|
70
78
|
export declare const Step: React.NamedExoticComponent<StepProps>;
|
|
71
|
-
declare function Stepper({ steps, activeIndex, errored, disabledIndexes, ...extraProps }: Props): React.JSX.Element;
|
|
79
|
+
declare function Stepper({ steps, activeIndex, errored, disabledIndexes, filterDuplicate, isOver, ...extraProps }: Props): React.JSX.Element;
|
|
72
80
|
declare const _default: React.MemoExoticComponent<typeof Stepper>;
|
|
73
81
|
export default _default;
|
|
@@ -55,6 +55,7 @@ export const Item = {
|
|
|
55
55
|
};
|
|
56
56
|
export const StepText = styled(Text) `
|
|
57
57
|
text-align: center;
|
|
58
|
+
white-space: pre-wrap;
|
|
58
59
|
color: ${p => {
|
|
59
60
|
if (p.state === "errored") {
|
|
60
61
|
return p.theme.colors.error.c50;
|
|
@@ -102,7 +103,10 @@ export const Step = memo(function Step({ state, label: Label, hideLeftSeparator,
|
|
|
102
103
|
(nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
|
|
103
104
|
typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
|
|
104
105
|
});
|
|
105
|
-
function getState(activeIndex, index, errored, disabled) {
|
|
106
|
+
function getState(activeIndex, index, errored, disabled, completed) {
|
|
107
|
+
if (completed) {
|
|
108
|
+
return "completed";
|
|
109
|
+
}
|
|
106
110
|
if (disabled) {
|
|
107
111
|
return "disabled";
|
|
108
112
|
}
|
|
@@ -115,10 +119,16 @@ function getState(activeIndex, index, errored, disabled) {
|
|
|
115
119
|
return "completed";
|
|
116
120
|
}
|
|
117
121
|
function Stepper(_a) {
|
|
118
|
-
var { steps, activeIndex = 0, errored, disabledIndexes } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes"]);
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
+
var { steps, activeIndex = 0, errored, disabledIndexes, filterDuplicate, isOver } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes", "filterDuplicate", "isOver"]);
|
|
123
|
+
const displayedSteps = filterDuplicate
|
|
124
|
+
? steps.filter((step, index) => index === 0 || step !== steps[index - 1])
|
|
125
|
+
: steps;
|
|
126
|
+
const dislayedActiveIndex = filterDuplicate
|
|
127
|
+
? displayedSteps.findIndex(step => step === steps[activeIndex])
|
|
128
|
+
: activeIndex;
|
|
129
|
+
return (React.createElement(Flex, Object.assign({ flexWrap: "nowrap", justifyContent: "space-between" }, extraProps), displayedSteps.map((step, idx) => {
|
|
130
|
+
const state = getState(dislayedActiveIndex, idx, errored, disabledIndexes === null || disabledIndexes === void 0 ? void 0 : disabledIndexes.includes(idx), isOver);
|
|
131
|
+
const nextState = idx < displayedSteps.length - 1 ? getState(dislayedActiveIndex, idx + 1) : undefined;
|
|
122
132
|
return (React.createElement(Fragment, { key: idx },
|
|
123
133
|
idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
|
|
124
134
|
React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/navigation/progress/Stepper/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,KAAK,EAAc,KAAK,EAAc,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AACzC,OAAO,IAAsB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/navigation/progress/Stepper/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,KAAK,EAAc,KAAK,EAAc,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AACzC,OAAO,IAAsB,MAAM,sBAAsB,CAAC;AA2D1D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;QAC1B,EAAE,EAAE,KAAK;KACV,CAAC,CAAuC;;;;aAI9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;cACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MAC7B,KAAK;MACL,MAAM;MACN,KAAK;GACR;IACD,MAAM,EAAE,MAAM,CAAC,GAAG,CAAY;;;MAG1B,KAAK;GACR;IACD,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,eAAe,EAAE,aAAa;KAC/B,CAAC,CAAY;;;;MAIV,KAAK;GACR;IACD,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,eAAe,EAAE,aAAa;KAC/B,CAAC,CAAY;aACH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;cACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;qBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;MACpC,KAAK;GACR;IACD,SAAS,EAAE,GAAgB,EAAE,CAAC,oBAAC,WAAW,CAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI;IACxE,QAAQ,EAAE,GAAgB,EAAE,CAAC,oBAAC,WAAW,CAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI;IAClE,OAAO,EAAE,GAAgB,EAAE,CAAC,oBAAC,WAAW,CAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI;CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAsB;;;WAG/C,CAAC,CAAC,EAAE;IACX,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE;QACzB,OAAO,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;KACjC;IACD,IAAI,CAAC,CAAC,KAAK,KAAK,UAAU,EAAE;QAC1B,OAAO,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KACnC;IACD,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE;QACzB,OAAO,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KACnC;IACD,OAAO,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;AACrC,CAAC;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;sBAIlC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;;SAE5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CAC7B,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC,aAAa,CAAC,CAAA,EAAE;IAC7B,IAAI,EAAE,MAAM,CAAC,aAAa,CAAC,CAAsB,EAAE;CACpD,CAAC;AAEF,MAAM,mBAAmB,GAAG;IAC1B,OAAO,EAAE,CACP,oBAAC,IAAI,CAAC,SAAS;QACb,oBAAC,IAAI,CAAC,OAAO,OAAG,CACD,CAClB;IACD,OAAO,EAAE,CACP,oBAAC,IAAI,CAAC,SAAS,IAAC,eAAe,EAAC,aAAa,EAAC,YAAY,EAAC,KAAK;QAC9D,oBAAC,IAAI,CAAC,OAAO,OAAG,CACD,CAClB;IACD,SAAS,EAAE,CACT,oBAAC,IAAI,CAAC,SAAS,IAAC,KAAK,EAAC,aAAa,EAAC,eAAe,EAAC,aAAa,EAAC,YAAY,EAAC,KAAK;QAClF,oBAAC,IAAI,CAAC,SAAS,OAAG,CACH,CAClB;IACD,OAAO,EAAE,CACP,oBAAC,IAAI,CAAC,SAAS,IAAC,KAAK,EAAC,WAAW,EAAC,eAAe,EAAC,aAAa,EAAC,YAAY,EAAC,KAAK;QAChF,oBAAC,IAAI,CAAC,OAAO,OAAG,CACD,CAClB;IACD,QAAQ,EAAE,CACR,oBAAC,IAAI,CAAC,SAAS,IAAC,KAAK,EAAC,aAAa;QACjC,oBAAC,IAAI,CAAC,QAAQ,OAAG,CACF,CAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,EACrC,KAAK,EACL,KAAK,EAAE,KAAK,EACZ,iBAAiB,EACjB,SAAS,GACC;IACV,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAC;IAEzC,OAAO,CACL,oBAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE;QACvD,oBAAC,IAAI,CAAC,MAAM,IAAC,EAAE,EAAE,CAAC;YACf,CAAC,CAAC,iBAAiB,IAAI,oBAAC,SAAS,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,MAAM,GAAG,CAAC,IAAI,CACjF,oBAAC,IAAI,IAAC,IAAI,EAAC,GAAG,GAAG,CAClB;YACA,mBAAmB,CAAC,KAAK,CAAC;YAC1B,CAAC,SAAS,IAAI,oBAAC,SAAS,CAAC,IAAI,IAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAC,OAAO,GAAG,CAAC,IAAI,CAC7E,oBAAC,IAAI,IAAC,IAAI,EAAC,GAAG,GAAG,CAClB,CACW;QACb,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,OAAO,IACpC,KAAK,CACG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,QAAQ,CACf,WAAmB,EACnB,KAAa,EACb,OAAiB,EACjB,QAAkB,EAClB,SAAmB;IAEnB,IAAI,SAAS,EAAE;QACb,OAAO,WAAW,CAAC;KACpB;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,UAAU,CAAC;KACnB;IACD,IAAI,WAAW,GAAG,KAAK,EAAE;QACvB,OAAO,SAAS,CAAC;KAClB;IACD,IAAI,WAAW,KAAK,KAAK,EAAE;QACzB,OAAO,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;KACxC;IACD,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,SAAS,OAAO,CAAC,EAQT;QARS,EACf,KAAK,EACL,WAAW,GAAG,CAAC,EACf,OAAO,EACP,eAAe,EACf,eAAe,EACf,MAAM,OAEA,EADH,UAAU,cAPE,mFAQhB,CADc;IAEb,MAAM,cAAc,GAAG,eAAe;QACpC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,KAAK,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACzE,CAAC,CAAC,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe;QACzC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,WAAW,CAAC,CAAC;QAC/D,CAAC,CAAC,WAAW,CAAC;IAEhB,OAAO,CACL,oBAAC,IAAI,kBAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,IAAK,UAAU,GAClE,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;QAChC,MAAM,KAAK,GAAG,QAAQ,CACpB,mBAAmB,EACnB,GAAG,EACH,OAAO,EACP,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,GAAG,CAAC,EAC9B,MAAM,CACP,CAAC;QACF,MAAM,SAAS,GACb,GAAG,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACvF,OAAO,CACL,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG;YACf,GAAG,GAAG,CAAC,IAAI,oBAAC,SAAS,CAAC,IAAI,IAAC,QAAQ,EAAE,KAAK,KAAK,SAAS,GAAI;YAC7D,oBAAC,IAAI,IAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC,GAAI,CAC9E,CACZ,CAAC;IACJ,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC,OAAO,CAAC,CAAC"}
|