@ledgerhq/react-ui 0.40.0-nightly.5 → 0.40.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/layout/List/VerticalTimeline/TimelineIndicator.js +5 -5
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js +22 -33
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js +2 -3
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +2 -2
- package/lib/cjs/pre-ldls/components/index.js +0 -1
- package/lib/cjs/pre-ldls/components/index.js.map +2 -2
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.d.ts +1 -2
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.js +5 -5
- package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts +1 -3
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +7 -7
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.d.ts +1 -3
- package/lib/components/layout/List/VerticalTimeline/index.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.js +2 -2
- package/lib/components/layout/List/VerticalTimeline/index.js.map +1 -1
- package/lib/pre-ldls/components/index.d.ts +0 -1
- package/lib/pre-ldls/components/index.d.ts.map +1 -1
- package/lib/pre-ldls/components/index.js +0 -1
- package/lib/pre-ldls/components/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -66,8 +66,8 @@ const getIconBorder = (theme, status, isLastItem) => {
|
|
|
66
66
|
const CenterCircle = (0, import_styled_components.default)(import_Flex.default)`
|
|
67
67
|
border-radius: 9999px;
|
|
68
68
|
width: 100%;
|
|
69
|
-
background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem
|
|
70
|
-
border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem
|
|
69
|
+
background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
|
|
70
|
+
border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
|
|
71
71
|
align-items: center;
|
|
72
72
|
justify-content: center;
|
|
73
73
|
position: relative;
|
|
@@ -83,12 +83,12 @@ const Container = (0, import_styled_components.default)(import_Flex.default)`
|
|
|
83
83
|
margin-bottom: ${-topSegmentDefaultHeight}px;
|
|
84
84
|
padding-top: ${topSegmentDefaultHeight}px;
|
|
85
85
|
`;
|
|
86
|
-
function TimelineIndicator({ status, isLastItem,
|
|
86
|
+
function TimelineIndicator({ status, isLastItem, ...props }) {
|
|
87
87
|
const { colors } = (0, import_styled_components.useTheme)();
|
|
88
|
-
return /* @__PURE__ */ import_react.default.createElement(Container, { ...props }, /* @__PURE__ */ import_react.default.createElement(IconWrapper, null, /* @__PURE__ */ import_react.default.createElement(CenterCircle, { status, isLastItem
|
|
88
|
+
return /* @__PURE__ */ import_react.default.createElement(Container, { ...props }, /* @__PURE__ */ import_react.default.createElement(IconWrapper, null, /* @__PURE__ */ import_react.default.createElement(CenterCircle, { status, isLastItem }, status === "completed" && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { position: "absolute" }, /* @__PURE__ */ import_react.default.createElement(
|
|
89
89
|
import_CircledCheckSolidMedium.default,
|
|
90
90
|
{
|
|
91
|
-
color: isLastItem
|
|
91
|
+
color: isLastItem ? colors.success.c70 : colors.primary.c80,
|
|
92
92
|
size: 20
|
|
93
93
|
}
|
|
94
94
|
)))), isLastItem ? null : /* @__PURE__ */ import_react.default.createElement(BottomSegment, { status }));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"../../../../styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n flex: 1;\n border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n border-right-width: 0;\n border-style: dashed;\n border-color: ${p =>\n p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n if (status === \"inactive\") return theme.colors.success.c10;\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n } else {\n return \"transparent\";\n }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n return theme.colors.success.c70;\n } else if (status === \"inactive\") {\n return theme.colors.neutral.c40;\n }\n return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI,UAAW;AAAA;AAAA;AAAA,kBAGrC,OACd,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACtE,OAAK,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"../../../../styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n flex: 1;\n border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n border-right-width: 0;\n border-style: dashed;\n border-color: ${p =>\n p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n if (status === \"inactive\") return theme.colors.success.c10;\n return \"transparent\";\n } else if (status === \"active\") {\n return theme.colors.neutral.c40;\n } else {\n return \"transparent\";\n }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n if (isLastItem) {\n return theme.colors.success.c70;\n } else if (status === \"inactive\") {\n return theme.colors.neutral.c40;\n }\n return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n border-radius: 9999px;\n width: 100%;\n background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};\n border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};\n align-items: center;\n justify-content: center;\n position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n height: 16px;\n width: 16px;\n`;\n\nexport type Props = FlexProps & {\n status: \"inactive\" | \"active\" | \"completed\";\n isFirstItem?: boolean;\n isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n flex-direction: column;\n align-items: center;\n margin-bottom: ${-topSegmentDefaultHeight}px;\n padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n const { colors } = useTheme();\n\n return (\n <Container {...props}>\n <IconWrapper>\n <CenterCircle status={status} isLastItem={isLastItem}>\n {status === \"completed\" && (\n <Flex position=\"absolute\">\n <CircledCheckSolidMedium\n color={isLastItem ? colors.success.c70 : colors.primary.c80}\n size={20}\n />\n </Flex>\n )}\n </CenterCircle>\n </IconWrapper>\n {isLastItem ? null : <BottomSegment status={status} />}\n </Container>\n );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI,UAAW;AAAA;AAAA;AAAA,kBAGrC,OACd,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACtE,OAAK,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,gBAGhB,OAAK,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA,sBACjD,OAAK,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAMzE,MAAM,kBAAc,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAW/B,MAAM,0BAA0B;AAEhC,MAAM,gBAAY,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,mBAGV,CAAC,uBAAuB;AAAA,iBAC1B,uBAAuB;AAAA;AAGxC,SAAS,kBAAkB,EAAE,QAAQ,YAAY,GAAG,MAAM,GAAU;AAClE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,aAAW,GAAG,SACb,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,gBAAa,QAAgB,cAC3B,WAAW,eACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,UAAS,cACb,6BAAAC,QAAA;AAAA,IAAC,+BAAAC;AAAA,IAAA;AAAA,MACC,OAAO,aAAa,OAAO,QAAQ,MAAM,OAAO,QAAQ;AAAA,MACxD,MAAM;AAAA;AAAA,EACR,CACF,CAEJ,CACF,GACC,aAAa,OAAO,6BAAAD,QAAA,cAAC,iBAAc,QAAgB,CACtD;AAEJ;AAEA,IAAO,4BAAQ,aAAAA,QAAM,KAAK,iBAAiB;AAE3C,kBAAkB,0BAA0B;",
|
|
6
6
|
"names": ["styled", "Flex", "React", "CircledCheckSolidMedium"]
|
|
7
7
|
}
|
|
@@ -38,11 +38,11 @@ var import__3 = require("../../..");
|
|
|
38
38
|
var import_Tag = __toESM(require("../../../Tag"));
|
|
39
39
|
var import_InfiniteLoader = __toESM(require("../../../loaders/InfiniteLoader"));
|
|
40
40
|
var import_TimelineIndicator = __toESM(require("./TimelineIndicator"));
|
|
41
|
-
const getContainerBackground = (theme, status
|
|
41
|
+
const getContainerBackground = (theme, status) => {
|
|
42
42
|
if (status === "completed") {
|
|
43
43
|
return "transparent";
|
|
44
44
|
} else if (status === "active") {
|
|
45
|
-
return
|
|
45
|
+
return theme.colors.neutral.c20;
|
|
46
46
|
}
|
|
47
47
|
return "transparent";
|
|
48
48
|
};
|
|
@@ -60,7 +60,7 @@ const Container = (0, import_styled_components.default)(import__2.Flex)`
|
|
|
60
60
|
position: relative;
|
|
61
61
|
flex: 1;
|
|
62
62
|
border-radius: ${(p) => p.theme.radii[2]}px;
|
|
63
|
-
background: ${(p) => getContainerBackground(p.theme, p.status
|
|
63
|
+
background: ${(p) => getContainerBackground(p.theme, p.status)};
|
|
64
64
|
border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
65
65
|
`;
|
|
66
66
|
const TextContainer = (0, import_styled_components.default)(import__2.Flex)`
|
|
@@ -71,7 +71,7 @@ const TimelineIndicatorContentHeader = (0, import_styled_components.default)(imp
|
|
|
71
71
|
justify-content: space-between;
|
|
72
72
|
align-items: center;
|
|
73
73
|
`;
|
|
74
|
-
function TimelineItem({ item, isFirstItem, isLastItem, onClick
|
|
74
|
+
function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
75
75
|
const { colors } = (0, import_styled_components.useTheme)();
|
|
76
76
|
return /* @__PURE__ */ import_react.default.createElement(import__2.Flex, { flexDirection: "row", onClick, flex: 1 }, /* @__PURE__ */ import_react.default.createElement(
|
|
77
77
|
import_TimelineIndicator.default,
|
|
@@ -79,38 +79,27 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick, isNeutral }) {
|
|
|
79
79
|
status: item.status,
|
|
80
80
|
isFirstItem,
|
|
81
81
|
isLastItem,
|
|
82
|
-
mr: 4
|
|
83
|
-
isNeutral
|
|
82
|
+
mr: 4
|
|
84
83
|
}
|
|
85
|
-
), /* @__PURE__ */ import_react.default.createElement(
|
|
86
|
-
|
|
84
|
+
), /* @__PURE__ */ import_react.default.createElement(Container, { status: item.status, isLastItem, overflow: "hidden" }, item.status === "active" ? item.background : null, /* @__PURE__ */ import_react.default.createElement(TextContainer, { mb: 4, flexDirection: "column", zIndex: 1 }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, { height: "20px" }, /* @__PURE__ */ import_react.default.createElement(
|
|
85
|
+
import__3.Text,
|
|
87
86
|
{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
variant: "body",
|
|
88
|
+
fontWeight: item.status === "active" ? "semiBold" : "medium",
|
|
89
|
+
color: item.status !== "inactive" && isLastItem ? "success.c70" : item.status === "active" ? "primary.c80" : "neutral.c70"
|
|
90
|
+
},
|
|
91
|
+
item.title
|
|
92
|
+
), (item == null ? void 0 : item.estimatedTime) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(
|
|
93
|
+
import_Tag.default,
|
|
94
|
+
{
|
|
95
|
+
size: "small",
|
|
96
|
+
type: "opacity",
|
|
97
|
+
active: true,
|
|
98
|
+
disabled: true,
|
|
99
|
+
textProps: { color: colors.neutral.c100 }
|
|
92
100
|
},
|
|
93
|
-
item.
|
|
94
|
-
|
|
95
|
-
import__3.Text,
|
|
96
|
-
{
|
|
97
|
-
variant: "body",
|
|
98
|
-
fontWeight: item.status === "active" ? "semiBold" : "medium",
|
|
99
|
-
color: item.status !== "inactive" && isLastItem && !isNeutral ? "success.c70" : item.status === "active" ? "primary.c80" : "neutral.c70"
|
|
100
|
-
},
|
|
101
|
-
item.title
|
|
102
|
-
), (item == null ? void 0 : item.estimatedTime) && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(
|
|
103
|
-
import_Tag.default,
|
|
104
|
-
{
|
|
105
|
-
size: "small",
|
|
106
|
-
type: "opacity",
|
|
107
|
-
active: true,
|
|
108
|
-
disabled: true,
|
|
109
|
-
textProps: { color: colors.neutral.c100 }
|
|
110
|
-
},
|
|
111
|
-
`${item.estimatedTime / 60} min`
|
|
112
|
-
) || (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")))
|
|
113
|
-
));
|
|
101
|
+
`${item.estimatedTime / 60} min`
|
|
102
|
+
) || (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")))));
|
|
114
103
|
}
|
|
115
104
|
var TimelineItem_default = import_react.default.memo(TimelineItem);
|
|
116
105
|
//# 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\";\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,IAAAA,YAA0B;AAC1B,IAAAA,YAAqB;AACrB,iBAAgB;AAChB,4BAA2B;AAE3B,+BAA8B;
|
|
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 position: relative;\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`;\n\nconst TextContainer = styled(Flex)`\n flex: 1;\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} overflow=\"hidden\">\n {item.status === \"active\" ? item.background : null}\n\n <TextContainer mb={4} flexDirection=\"column\" zIndex={1}>\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 </TextContainer>\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;AAAA,mBAGV,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;AAG9E,MAAM,oBAAgB,yBAAAA,SAAO,cAAI;AAAA;AAAA;AAAA;AAKjC,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,UAAS,YAC9D,KAAK,WAAW,WAAW,KAAK,aAAa,MAE9C,6BAAAA,QAAA,cAAC,iBAAc,IAAI,GAAG,eAAc,UAAS,QAAQ,KACnD,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,WACd,gBACA;AAAA;AAAA,IAGP,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,CACF;AAEJ;AAEA,IAAO,uBAAQ,aAAAA,QAAM,KAAK,YAAY;",
|
|
6
6
|
"names": ["import__", "styled", "React", "TimelineIndicator", "Tag", "InfiniteLoader"]
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ var import_react = __toESM(require("react"));
|
|
|
35
35
|
var import_TimelineItem = __toESM(require("./TimelineItem"));
|
|
36
36
|
var import__ = require("../..");
|
|
37
37
|
var import_Text = __toESM(require("../../../asorted/Text"));
|
|
38
|
-
function VerticalTimeline({ steps, onClickIndex,
|
|
38
|
+
function VerticalTimeline({ steps, onClickIndex, ...props }) {
|
|
39
39
|
return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { ...props, flexDirection: "column", flex: 1 }, steps == null ? void 0 : steps.map((step, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
40
40
|
import_TimelineItem.default,
|
|
41
41
|
{
|
|
@@ -43,8 +43,7 @@ function VerticalTimeline({ steps, onClickIndex, isNeutral, ...props }) {
|
|
|
43
43
|
item: step,
|
|
44
44
|
isFirstItem: index === 0,
|
|
45
45
|
isLastItem: index === steps.length - 1,
|
|
46
|
-
onClick: onClickIndex ? () => onClickIndex(index) : void 0
|
|
47
|
-
isNeutral
|
|
46
|
+
onClick: onClickIndex ? () => onClickIndex(index) : void 0
|
|
48
47
|
}
|
|
49
48
|
)));
|
|
50
49
|
}
|
|
@@ -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 hasLoader?: boolean;\n background?: ReactNode;\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 background?: ReactNode;\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;AAmBjB,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
|
}
|
|
@@ -31,5 +31,4 @@ __reExport(components_exports, require("./Search/Search"), module.exports);
|
|
|
31
31
|
__reExport(components_exports, require("./Tag/Tag"), module.exports);
|
|
32
32
|
__reExport(components_exports, require("./TextInput/TextInput"), module.exports);
|
|
33
33
|
__reExport(components_exports, require("./VirtualList/VirtualList"), module.exports);
|
|
34
|
-
__reExport(components_exports, require("./CryptoIcon/CryptoIcon"), module.exports);
|
|
35
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/pre-ldls/components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./CardButton/CardButton\";\nexport * from \"./ApyIndicator/ApyIndicator\";\nexport * from \"./MarketPriceIndicator/MarketPriceIndicator\";\nexport * from \"./MarketPercentIndicator/MarketPercentIndicator\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./TextInput/TextInput\";\nexport * from \"./VirtualList/VirtualList\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,oCALd;AAMA,+BAAc,wCANd;AAOA,+BAAc,wDAPd;AAQA,+BAAc,4DARd;AASA,+BAAc,0BATd;AAUA,+BAAc,sCAVd;AAWA,+BAAc,sCAXd;AAYA,+BAAc,4BAZd;AAaA,+BAAc,sBAbd;AAcA,+BAAc,kCAdd;AAeA,+BAAc,sCAfd;
|
|
4
|
+
"sourcesContent": ["export * from \"./AccountItem/AccountItem\";\nexport * from \"./AccountList/AccountList\";\nexport * from \"./Address/Address\";\nexport * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./CardButton/CardButton\";\nexport * from \"./ApyIndicator/ApyIndicator\";\nexport * from \"./MarketPriceIndicator/MarketPriceIndicator\";\nexport * from \"./MarketPercentIndicator/MarketPercentIndicator\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./Tag/Tag\";\nexport * from \"./TextInput/TextInput\";\nexport * from \"./VirtualList/VirtualList\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,sCAAd;AACA,+BAAc,sCADd;AAEA,+BAAc,8BAFd;AAGA,+BAAc,kCAHd;AAIA,+BAAc,kCAJd;AAKA,+BAAc,oCALd;AAMA,+BAAc,wCANd;AAOA,+BAAc,wDAPd;AAQA,+BAAc,4DARd;AASA,+BAAc,0BATd;AAUA,+BAAc,sCAVd;AAWA,+BAAc,sCAXd;AAYA,+BAAc,4BAZd;AAaA,+BAAc,sBAbd;AAcA,+BAAc,kCAdd;AAeA,+BAAc,sCAfd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,9 +4,8 @@ export type Props = FlexProps & {
|
|
|
4
4
|
status: "inactive" | "active" | "completed";
|
|
5
5
|
isFirstItem?: boolean;
|
|
6
6
|
isLastItem?: boolean;
|
|
7
|
-
isNeutral?: boolean;
|
|
8
7
|
};
|
|
9
|
-
declare function TimelineIndicator({ status, isLastItem,
|
|
8
|
+
declare function TimelineIndicator({ status, isLastItem, ...props }: Props): React.JSX.Element;
|
|
10
9
|
declare namespace TimelineIndicator {
|
|
11
10
|
var topSegmentDefaultHeight: number;
|
|
12
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAa,EAAE,YAAY,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAa,EAAE,YAAY,IAAI,SAAS,EAAE,MAAM,YAAY,CAAC;AAmD7D,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG;IAC9B,MAAM,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAWF,iBAAS,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAoBjE;kBApBQ,iBAAiB;;;;AAsB1B,wBAA6C"}
|
|
@@ -36,8 +36,8 @@ const getIconBorder = (theme, status, isLastItem) => {
|
|
|
36
36
|
const CenterCircle = styled(Flex) `
|
|
37
37
|
border-radius: 9999px;
|
|
38
38
|
width: 100%;
|
|
39
|
-
background: ${p => getIconBackground(p.theme, p.status, p.isLastItem
|
|
40
|
-
border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem
|
|
39
|
+
background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};
|
|
40
|
+
border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};
|
|
41
41
|
align-items: center;
|
|
42
42
|
justify-content: center;
|
|
43
43
|
position: relative;
|
|
@@ -53,12 +53,12 @@ const Container = styled(Flex) `
|
|
|
53
53
|
margin-bottom: ${-topSegmentDefaultHeight}px;
|
|
54
54
|
padding-top: ${topSegmentDefaultHeight}px;
|
|
55
55
|
`;
|
|
56
|
-
function TimelineIndicator({ status, isLastItem,
|
|
56
|
+
function TimelineIndicator({ status, isLastItem, ...props }) {
|
|
57
57
|
const { colors } = useTheme();
|
|
58
58
|
return (React.createElement(Container, { ...props },
|
|
59
59
|
React.createElement(IconWrapper, null,
|
|
60
|
-
React.createElement(CenterCircle, { status: status, isLastItem: isLastItem
|
|
61
|
-
React.createElement(CircledCheckSolidMedium, { color: isLastItem
|
|
60
|
+
React.createElement(CenterCircle, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(Flex, { position: "absolute" },
|
|
61
|
+
React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c70 : colors.primary.c80, size: 20 }))))),
|
|
62
62
|
isLastItem ? null : React.createElement(BottomSegment, { status: status })));
|
|
63
63
|
}
|
|
64
64
|
export default React.memo(TimelineIndicator);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineIndicator.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,uBAAuB,MAAM,wDAAwD,CAAC;AAC7F,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,IAAmC,MAAM,YAAY,CAAC;AAI7D,MAAM,UAAU,GAAG,CAAC,CAAC;AAErB,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAA0C;;uBAErD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;;;kBAGrC,CAAC,CAAC,EAAE,CAClB,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;gBACtE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG;CAC1E,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAE,MAAkB,EAAE,UAAoB,EAAE,EAAE;IACnF,IAAI,UAAU,EAAE,CAAC;QACf,IAAI,MAAM,KAAK,UAAU;YAAE,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;QAC3D,OAAO,aAAa,CAAC;IACvB,CAAC;SAAM,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;IAClC,CAAC;SAAM,CAAC;QACN,OAAO,aAAa,CAAC;IACvB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,KAAY,EAAE,MAAkB,EAAE,UAAoB,EAAE,EAAE;IAC/E,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;IAClC,CAAC;SAAM,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;IAClC,CAAC;IACD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"TimelineIndicator.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,10 +5,8 @@ export type Props = {
|
|
|
5
5
|
isFirstItem?: boolean;
|
|
6
6
|
isLastItem?: boolean;
|
|
7
7
|
onClick?: () => void;
|
|
8
|
-
activeBackground?: string;
|
|
9
|
-
isNeutral?: boolean;
|
|
10
8
|
};
|
|
11
|
-
declare function TimelineItem({ item, isFirstItem, isLastItem, onClick
|
|
9
|
+
declare function TimelineItem({ item, isFirstItem, isLastItem, onClick }: Props): React.JSX.Element;
|
|
12
10
|
declare const _default: React.MemoExoticComponent<typeof TimelineItem>;
|
|
13
11
|
export default _default;
|
|
14
12
|
//# sourceMappingURL=TimelineItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,IAAI,EAAc,MAAM,GAAG,CAAC;AAQrC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,IAAI,EAAc,MAAM,GAAG,CAAC;AAQrC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAwCF,iBAAS,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,KAAK,qBAiDtE;;AAED,wBAAwC"}
|
|
@@ -5,12 +5,12 @@ import { Text } from "../../..";
|
|
|
5
5
|
import Tag from "../../../Tag";
|
|
6
6
|
import InfiniteLoader from "../../../loaders/InfiniteLoader";
|
|
7
7
|
import TimelineIndicator from "./TimelineIndicator";
|
|
8
|
-
const getContainerBackground = (theme, status
|
|
8
|
+
const getContainerBackground = (theme, status) => {
|
|
9
9
|
if (status === "completed") {
|
|
10
10
|
return "transparent";
|
|
11
11
|
}
|
|
12
12
|
else if (status === "active") {
|
|
13
|
-
return
|
|
13
|
+
return theme.colors.neutral.c20;
|
|
14
14
|
}
|
|
15
15
|
return "transparent";
|
|
16
16
|
};
|
|
@@ -30,7 +30,7 @@ const Container = styled(Flex) `
|
|
|
30
30
|
position: relative;
|
|
31
31
|
flex: 1;
|
|
32
32
|
border-radius: ${p => p.theme.radii[2]}px;
|
|
33
|
-
background: ${p => getContainerBackground(p.theme, p.status
|
|
33
|
+
background: ${p => getContainerBackground(p.theme, p.status)};
|
|
34
34
|
border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
35
35
|
`;
|
|
36
36
|
const TextContainer = styled(Flex) `
|
|
@@ -41,15 +41,15 @@ const TimelineIndicatorContentHeader = styled(Flex) `
|
|
|
41
41
|
justify-content: space-between;
|
|
42
42
|
align-items: center;
|
|
43
43
|
`;
|
|
44
|
-
function TimelineItem({ item, isFirstItem, isLastItem, onClick
|
|
44
|
+
function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
45
45
|
const { colors } = useTheme();
|
|
46
46
|
return (React.createElement(Flex, { flexDirection: "row", onClick: onClick, flex: 1 },
|
|
47
|
-
React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4
|
|
48
|
-
React.createElement(Container, { status: item.status, isLastItem: isLastItem
|
|
47
|
+
React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
|
|
48
|
+
React.createElement(Container, { status: item.status, isLastItem: isLastItem, overflow: "hidden" },
|
|
49
49
|
item.status === "active" ? item.background : null,
|
|
50
50
|
React.createElement(TextContainer, { mb: 4, flexDirection: "column", zIndex: 1 },
|
|
51
51
|
React.createElement(TimelineIndicatorContentHeader, { height: "20px" },
|
|
52
|
-
React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", color: item.status !== "inactive" && isLastItem
|
|
52
|
+
React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", color: item.status !== "inactive" && isLastItem
|
|
53
53
|
? "success.c70"
|
|
54
54
|
: item.status === "active"
|
|
55
55
|
? "primary.c80"
|
|
@@ -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;AAC/B,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAE7D,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,14 +9,12 @@ export type Item = {
|
|
|
9
9
|
estimatedTime?: number;
|
|
10
10
|
hasLoader?: boolean;
|
|
11
11
|
background?: ReactNode;
|
|
12
|
-
activeBackground?: string;
|
|
13
12
|
};
|
|
14
13
|
export type Props = BaseStyledProps & {
|
|
15
14
|
steps?: Item[];
|
|
16
15
|
onClickIndex?: (index: number) => void;
|
|
17
|
-
isNeutral?: boolean;
|
|
18
16
|
};
|
|
19
|
-
declare function VerticalTimeline({ steps, onClickIndex,
|
|
17
|
+
declare function VerticalTimeline({ steps, onClickIndex, ...props }: Props): React.JSX.Element;
|
|
20
18
|
declare namespace VerticalTimeline {
|
|
21
19
|
var BodyText: React.FC<TextProps>;
|
|
22
20
|
var SubtitleText: React.FC<TextProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE7D,MAAM,MAAM,IAAI,GAAG;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,SAAS,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE7D,MAAM,MAAM,IAAI,GAAG;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,SAAS,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,eAAe,GAAG;IACpC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,iBAAwB,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAchF;kBAduB,gBAAgB;;;;eAAhB,gBAAgB"}
|
|
@@ -2,8 +2,8 @@ import React from "react";
|
|
|
2
2
|
import TimelineItem from "./TimelineItem";
|
|
3
3
|
import { Flex } from "../..";
|
|
4
4
|
import Text from "../../../asorted/Text";
|
|
5
|
-
export default function VerticalTimeline({ steps, onClickIndex,
|
|
6
|
-
return (React.createElement(Flex, { ...props, flexDirection: "column", flex: 1 }, steps?.map((step, index) => (React.createElement(TimelineItem, { key: index, item: step, isFirstItem: index === 0, isLastItem: index === steps.length - 1, onClick: onClickIndex ? () => onClickIndex(index) : undefined
|
|
5
|
+
export default function VerticalTimeline({ steps, onClickIndex, ...props }) {
|
|
6
|
+
return (React.createElement(Flex, { ...props, flexDirection: "column", flex: 1 }, steps?.map((step, index) => (React.createElement(TimelineItem, { key: index, item: step, isFirstItem: index === 0, isLastItem: index === steps.length - 1, onClick: onClickIndex ? () => onClickIndex(index) : undefined })))));
|
|
7
7
|
}
|
|
8
8
|
const SubtitleText = props => (React.createElement(Text, { variant: "body", fontWeight: "semiBold", color: "neutral.c100", mb: 3, ...props }));
|
|
9
9
|
const BodyText = props => (React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "medium", color: "neutral.c80", ...props }));
|
|
@@ -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;AAmBxD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAS;IAC/E,OAAO,CACL,oBAAC,IAAI,OAAK,KAAK,EAAE,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,IAC5C,KAAK,EAAE,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,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,UAAU,EAAC,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,CAAC,KAAM,KAAK,GAAI,CACrF,CAAC;AAEF,MAAM,QAAQ,GAAwB,KAAK,CAAC,EAAE,CAAC,CAC7C,oBAAC,IAAI,IAAC,OAAO,EAAC,gBAAgB,EAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,KAAK,KAAK,GAAI,CACrF,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACrC,gBAAgB,CAAC,YAAY,GAAG,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.40.0
|
|
3
|
+
"version": "0.40.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"react-transition-group": "^4.4.2",
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
|
-
"@ledgerhq/crypto-icons-ui": "^1.21.0
|
|
79
|
-
"@ledgerhq/ui
|
|
80
|
-
"@ledgerhq/
|
|
78
|
+
"@ledgerhq/crypto-icons-ui": "^1.21.0",
|
|
79
|
+
"@ledgerhq/icons-ui": "^0.15.0",
|
|
80
|
+
"@ledgerhq/ui-shared": "^0.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": ">=17.0.2",
|