@ledgerhq/react-ui 0.30.0 → 0.30.1-nightly.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/cta/Button/Button.stories.js +15 -11
- package/lib/cjs/components/cta/Button/Button.stories.js.map +2 -2
- package/lib/cjs/components/cta/Button/index.js +7 -3
- package/lib/cjs/components/cta/Button/index.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.js +9 -7
- package/lib/cjs/components/form/Checkbox/Checkbox.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js +7 -1
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js +6 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map +2 -2
- package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map +2 -2
- package/lib/cjs/helpers.types.js +18 -0
- package/lib/cjs/helpers.types.js.map +7 -0
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js +24 -13
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js +25 -0
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Address/Address.js +1 -1
- package/lib/cjs/pre-ldls/components/Address/Address.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js +1 -0
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js +10 -6
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map +2 -2
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js +2 -0
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/libs/index.js +2 -0
- package/lib/cjs/pre-ldls/libs/index.js.map +2 -2
- package/lib/components/cta/Button/index.d.ts +4 -4
- package/lib/components/cta/Button/index.d.ts.map +1 -1
- package/lib/components/cta/Button/index.js +9 -5
- package/lib/components/cta/Button/index.js.map +1 -1
- package/lib/components/form/Checkbox/Checkbox.d.ts +2 -1
- package/lib/components/form/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/components/form/Checkbox/Checkbox.js +7 -7
- package/lib/components/form/Checkbox/Checkbox.js.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/TimelineItem.js +16 -10
- 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.d.ts.map +1 -1
- package/lib/components/layout/List/VerticalTimeline/index.js.map +1 -1
- package/lib/helpers.types.d.ts +16 -0
- package/lib/helpers.types.d.ts.map +1 -0
- package/lib/helpers.types.js +3 -0
- package/lib/helpers.types.js.map +1 -0
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +13 -11
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +17 -14
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/Address/Address.d.ts.map +1 -1
- package/lib/pre-ldls/components/Address/Address.js +1 -1
- package/lib/pre-ldls/components/Address/Address.js.map +1 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.js +1 -0
- package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts +5 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js +4 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js.map +1 -1
- package/lib/pre-ldls/libs/index.d.ts +1 -0
- package/lib/pre-ldls/libs/index.d.ts.map +1 -1
- package/lib/pre-ldls/libs/index.js +1 -0
- package/lib/pre-ldls/libs/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -20,6 +20,7 @@ var AccountItem_stories_exports = {};
|
|
|
20
20
|
__export(AccountItem_stories_exports, {
|
|
21
21
|
Default: () => Default,
|
|
22
22
|
TestAccount: () => TestAccount,
|
|
23
|
+
TestWithCheckbox: () => TestWithCheckbox,
|
|
23
24
|
TestWithoutAddressIcon: () => TestWithoutAddressIcon,
|
|
24
25
|
TestWithoutProtocol: () => TestWithoutProtocol,
|
|
25
26
|
default: () => AccountItem_stories_default
|
|
@@ -110,4 +111,28 @@ const TestWithoutAddressIcon = {
|
|
|
110
111
|
await (0, import_test.expect)(addressIcon).not.toBeInTheDocument();
|
|
111
112
|
}
|
|
112
113
|
};
|
|
114
|
+
const TestWithCheckbox = {
|
|
115
|
+
args: {
|
|
116
|
+
account: {
|
|
117
|
+
address: "n4A9...Zgty",
|
|
118
|
+
balance: "0.118",
|
|
119
|
+
cryptoId: "bitcoin",
|
|
120
|
+
fiatValue: "$5,969.83",
|
|
121
|
+
id: "12345",
|
|
122
|
+
name: "Main BTC",
|
|
123
|
+
ticker: "btc"
|
|
124
|
+
},
|
|
125
|
+
checkbox: {
|
|
126
|
+
isChecked: false,
|
|
127
|
+
onChange: () => {
|
|
128
|
+
},
|
|
129
|
+
name: "checkbox"
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
play: async ({ canvasElement }) => {
|
|
133
|
+
const canvas = (0, import_test.within)(canvasElement);
|
|
134
|
+
const addressIcon = canvas.queryByRole("img");
|
|
135
|
+
await (0, import_test.expect)(addressIcon).not.toBeInTheDocument();
|
|
136
|
+
}
|
|
137
|
+
};
|
|
113
138
|
//# sourceMappingURL=AccountItem.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountItem } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 ETH\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AccountItem>;\n\nexport const Default: Story = {};\n\nexport const TestAccount: Story = {\n args: {\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n protocol: \"Native Segwit\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Main BTC\");\n const protocol = canvas.getByTestId(\"tag\");\n const address = canvas.getByText(\"n4A9...Zgty\");\n const addressIcon = canvas.getByRole(\"img\");\n const fiatValue = canvas.getByText(\"$5,969.83\");\n const balance = canvas.getByText(\"0.118 BTC\");\n\n await expect(name).toBeInTheDocument();\n await expect(protocol).toBeInTheDocument();\n await expect(protocol).toHaveTextContent(\"Native Segwit\");\n await expect(address).toBeInTheDocument();\n await expect(addressIcon).toBeInTheDocument();\n await expect(fiatValue).toBeInTheDocument();\n await expect(balance).toBeInTheDocument();\n },\n};\n\nexport const TestWithoutProtocol: Story = {\n args: {\n account: {\n id: \"21345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const protocol = canvas.queryByTestId(\"tag\");\n\n await expect(protocol).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithoutAddressIcon: Story = {\n args: {\n account: {\n id: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n },\n showIcon: false,\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const addressIcon = canvas.queryByRole(\"img\");\n\n await expect(addressIcon).not.toBeInTheDocument();\n },\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AccountItem, AccountItemProps } from \"./AccountItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof AccountItem> = {\n component: AccountItem,\n title: \"PreLdls/Components/AccountItem\",\n tags: [\"autodocs\"],\n args: {\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 ETH\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n } satisfies AccountItemProps,\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AccountItem>;\n\nexport const Default: Story = {};\n\nexport const TestAccount: Story = {\n args: {\n account: {\n id: \"12345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n protocol: \"Native Segwit\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const name = canvas.getByText(\"Main BTC\");\n const protocol = canvas.getByTestId(\"tag\");\n const address = canvas.getByText(\"n4A9...Zgty\");\n const addressIcon = canvas.getByRole(\"img\");\n const fiatValue = canvas.getByText(\"$5,969.83\");\n const balance = canvas.getByText(\"0.118 BTC\");\n\n await expect(name).toBeInTheDocument();\n await expect(protocol).toBeInTheDocument();\n await expect(protocol).toHaveTextContent(\"Native Segwit\");\n await expect(address).toBeInTheDocument();\n await expect(addressIcon).toBeInTheDocument();\n await expect(fiatValue).toBeInTheDocument();\n await expect(balance).toBeInTheDocument();\n },\n};\n\nexport const TestWithoutProtocol: Story = {\n args: {\n account: {\n id: \"21345\",\n cryptoId: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n ticker: \"btc\",\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const protocol = canvas.queryByTestId(\"tag\");\n\n await expect(protocol).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithoutAddressIcon: Story = {\n args: {\n account: {\n id: \"bitcoin\",\n name: \"Main BTC\",\n balance: \"0.118 BTC\",\n fiatValue: \"$5,969.83\",\n address: \"n4A9...Zgty\",\n },\n showIcon: false,\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const addressIcon = canvas.queryByRole(\"img\");\n\n await expect(addressIcon).not.toBeInTheDocument();\n },\n};\n\nexport const TestWithCheckbox: Story = {\n args: {\n account: {\n address: \"n4A9...Zgty\",\n balance: \"0.118\",\n cryptoId: \"bitcoin\",\n fiatValue: \"$5,969.83\",\n id: \"12345\",\n name: \"Main BTC\",\n ticker: \"btc\",\n },\n checkbox: {\n isChecked: false,\n onChange: () => {},\n name: \"checkbox\",\n },\n } satisfies AccountItemProps,\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const addressIcon = canvas.queryByRole(\"img\");\n\n await expect(addressIcon).not.toBeInTheDocument();\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -58,6 +58,6 @@ const Address = ({
|
|
|
58
58
|
color: "var(--colors-content-subdued-default-default)"
|
|
59
59
|
},
|
|
60
60
|
address
|
|
61
|
-
), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker,
|
|
61
|
+
), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, network: parentId, ticker, size: "20px" }));
|
|
62
62
|
};
|
|
63
63
|
//# sourceMappingURL=Address.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Address/Address.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nconst Wrapper = styled.div`\n ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Address = ({\n address,\n showIcon,\n cryptoId,\n ticker,\n parentId,\n}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: string;\n parentId?: string;\n}) => {\n return (\n <Wrapper>\n <Text\n marginRight=\"var(--spacing-xxxs)\"\n fontSize=\"12px\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {address}\n </Text>\n {showIcon && <CryptoIcon ledgerId={cryptoId}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { Text } from \"../../../components\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nconst Wrapper = styled.div`\n ${withTokens(\"spacing-xxxs\", \"colors-content-subdued-default-default\")}\n\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Address = ({\n address,\n showIcon,\n cryptoId,\n ticker,\n parentId,\n}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: string;\n parentId?: string;\n}) => {\n return (\n <Wrapper>\n <Text\n marginRight=\"var(--spacing-xxxs)\"\n fontSize=\"12px\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {address}\n </Text>\n {showIcon && (\n <CryptoIcon ledgerId={cryptoId} network={parentId} ticker={ticker} size=\"20px\" />\n )}\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,wBAAqB;AACrB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gBAAgB,wCAAwC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjE,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,UAAS;AAAA,MACT,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,YACC,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,SAAS,UAAU,QAAgB,MAAK,QAAO,CAEnF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type AssetType = {\n name: string;\n ticker: string;\n id: string;\n leftElement?: React.ReactNode;\n rightElement?: React.ReactNode;\n};\n\ntype AssetItemProps = AssetType & {\n onClick: (asset: AssetType) => void;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"radius-s\",\n \"colors-content-subdued-default-default\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n align-items: center;\n overflow: hidden;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nconst InfoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: var(--margin-s);\n overflow: hidden;\n flex: 1;\n`;\n\nconst LeftElementWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const AssetItem = ({\n name,\n ticker,\n id,\n onClick,\n leftElement,\n rightElement,\n}: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n fontSize=\"14px\"\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n <LeftElementWrapper>\n <Text\n fontSize=\"12px\"\n lineHeight=\"16px\"\n variant=\"bodyLineHeight\"\n fontWeight=\"medium\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {ticker}\n </Text>\n {leftElement}\n </LeftElementWrapper>\n </InfoWrapper>\n {rightElement}\n </Wrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAc3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { CryptoIcon } from \"../CryptoIcon/CryptoIcon\";\n\nexport type AssetType = {\n name: string;\n ticker: string;\n id: string;\n leftElement?: React.ReactNode;\n rightElement?: React.ReactNode;\n};\n\ntype AssetItemProps = AssetType & {\n onClick: (asset: AssetType) => void;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"radius-s\",\n \"colors-content-subdued-default-default\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n align-items: center;\n overflow: hidden;\n\n :hover {\n background-color: var(--colors-surface-transparent-hover);\n }\n\n :active {\n background-color: var(--colors-surface-transparent-pressed);\n }\n`;\n\nconst InfoWrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: var(--margin-s);\n overflow: hidden;\n flex: 1;\n gap: 4px;\n`;\n\nconst LeftElementWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const AssetItem = ({\n name,\n ticker,\n id,\n onClick,\n leftElement,\n rightElement,\n}: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n fontSize=\"14px\"\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n <LeftElementWrapper>\n <Text\n fontSize=\"12px\"\n lineHeight=\"16px\"\n variant=\"bodyLineHeight\"\n fontWeight=\"medium\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {ticker}\n </Text>\n {leftElement}\n </LeftElementWrapper>\n </InfoWrapper>\n {rightElement}\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAc3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3B,MAAM,qBAAqB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,SACE,6BAAAC,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,gCAAW,MAAK,QAAO,UAAU,IAAI,QAAgB,GACtD,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,GACA,6BAAAA,QAAA,cAAC,0BACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAS;AAAA,MACT,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,GACC,WACH,CACF,GACC,YACH;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -39,17 +39,18 @@ function easeInOutCubic(t) {
|
|
|
39
39
|
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
40
40
|
}
|
|
41
41
|
const VirtualList = ({
|
|
42
|
-
|
|
43
|
-
overscan = 5,
|
|
44
|
-
LoadingComponent,
|
|
45
|
-
isLoading,
|
|
42
|
+
gap,
|
|
46
43
|
hasNextPage = false,
|
|
47
|
-
|
|
44
|
+
isLoading,
|
|
45
|
+
itemHeight,
|
|
48
46
|
items,
|
|
47
|
+
LoadingComponent,
|
|
49
48
|
onVisibleItemsScrollEnd,
|
|
49
|
+
overscan = 5,
|
|
50
50
|
renderItem,
|
|
51
51
|
scrollToTop = false,
|
|
52
|
-
bottomComponent
|
|
52
|
+
bottomComponent,
|
|
53
|
+
threshold = 5
|
|
53
54
|
}) => {
|
|
54
55
|
const parentRef = (0, import_react.useRef)(null);
|
|
55
56
|
const scrollToFn = (0, import_react.useCallback)(
|
|
@@ -79,6 +80,7 @@ const VirtualList = ({
|
|
|
79
80
|
[]
|
|
80
81
|
);
|
|
81
82
|
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
83
|
+
gap,
|
|
82
84
|
count: hasNextPage ? items.length + 1 : items.length,
|
|
83
85
|
overscan,
|
|
84
86
|
getScrollElement: () => parentRef.current,
|
|
@@ -112,6 +114,8 @@ const VirtualList = ({
|
|
|
112
114
|
style: {
|
|
113
115
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
114
116
|
width: "100%",
|
|
117
|
+
display: "flex",
|
|
118
|
+
flexDirection: "column",
|
|
115
119
|
position: "relative"
|
|
116
120
|
}
|
|
117
121
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n /**\n * When set to true, the list will scroll to the top\n */\n scrollToTop?: boolean;\n /**\n * React component or node to display at the bottom of the list, after all items.\n */\n bottomComponent?: React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AACtD,2BAA+B;AAC/B,wBAAqC;
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Gap between items in the list.\n */\n gap?: number;\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n /**\n * When set to true, the list will scroll to the top\n */\n scrollToTop?: boolean;\n /**\n * React component or node to display at the bottom of the list, after all items.\n */\n bottomComponent?: React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n gap,\n hasNextPage = false,\n isLoading,\n itemHeight,\n items,\n LoadingComponent,\n onVisibleItemsScrollEnd,\n overscan = 5,\n renderItem,\n scrollToTop = false,\n bottomComponent,\n threshold = 5,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const scrollToFn = useCallback(\n (\n offset: number,\n options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n instance: { scrollElement: HTMLElement | null },\n ) => {\n const element = instance.scrollElement;\n if (!element) return;\n\n const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n if (duration === 0) {\n element.scrollTop = offset;\n return;\n }\n\n const startTime = performance.now();\n const startTop = element.scrollTop;\n const distanceToScroll = offset - startTop;\n\n const scrollStep = (currentTime: number) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n const easedProgress = easeInOutCubic(progress);\n\n element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n if (progress < 1) {\n requestAnimationFrame(scrollStep);\n }\n };\n\n requestAnimationFrame(scrollStep);\n },\n [],\n );\n\n const rowVirtualizer = useVirtualizer({\n gap,\n count: hasNextPage ? items.length + 1 : items.length,\n overscan,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n scrollToFn,\n });\n\n const virtualItems = rowVirtualizer.getVirtualItems();\n\n useEffect(() => {\n if (scrollToTop && parentRef.current) {\n scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n }\n }, [scrollToTop, scrollToFn]);\n\n useEffect(() => {\n if (!virtualItems.length) return;\n const lastItem = virtualItems[virtualItems.length - 1];\n\n if (\n lastItem.index >= virtualItems.length - 1 - threshold &&\n hasNextPage &&\n !isLoading &&\n onVisibleItemsScrollEnd\n ) {\n onVisibleItemsScrollEnd();\n }\n }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\n\n const showCustomLoadingComponent = !!LoadingComponent;\n\n return (\n <div\n ref={parentRef}\n style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n >\n <div\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`,\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n }}\n >\n {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n <div\n key={virtualRow.index}\n data-index={virtualRow.index}\n ref={rowVirtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n transform: `translateY(${virtualRow.start}px)`,\n height: `${itemHeight}px`,\n width: \"100%\",\n }}\n >\n {renderItem(items[virtualRow.index])}\n </div>\n ))}\n {bottomComponent && (\n <div\n style={{\n position: \"absolute\",\n top: `${rowVirtualizer.getTotalSize()}px`,\n left: 0,\n width: \"100%\",\n }}\n >\n {bottomComponent}\n </div>\n )}\n </div>\n {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -56,6 +56,7 @@ const meta = {
|
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
58
|
argTypes: {
|
|
59
|
+
gap: { description: "Gap between items in the list.", defaultValue: { summary: 0 } },
|
|
59
60
|
itemHeight: {
|
|
60
61
|
description: "Height of each item in the list."
|
|
61
62
|
},
|
|
@@ -96,6 +97,7 @@ const meta = {
|
|
|
96
97
|
}
|
|
97
98
|
},
|
|
98
99
|
args: {
|
|
100
|
+
gap: 0,
|
|
99
101
|
itemHeight: 64,
|
|
100
102
|
LoadingComponent: void 0,
|
|
101
103
|
isLoading: false,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n component: VirtualList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/VirtualList\",\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n component:\n \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n },\n },\n },\n argTypes: {\n itemHeight: {\n description: \"Height of each item in the list.\",\n },\n overscan: {\n description:\n \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n table: {\n defaultValue: {\n summary: \"5\",\n },\n },\n },\n LoadingComponent: {\n description:\n \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n },\n isLoading: {\n description: \"Indicates whether new items are currently being loaded.\",\n },\n hasNextPage: {\n description:\n \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n defaultValue: {\n summary: \"false\",\n },\n },\n threshold: {\n description:\n \"Number of items to check before the end of the list to trigger loading more items.\",\n defaultValue: {\n summary: \"5\",\n },\n },\n onVisibleItemsScrollEnd: {\n description:\n \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n },\n renderItem: {\n description:\n \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n },\n scrollToTop: {\n description:\n \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n },\n },\n args: {\n itemHeight: 64,\n LoadingComponent: undefined,\n isLoading: false,\n overscan: 5,\n hasNextPage: false,\n threshold: 5,\n onVisibleItemsScrollEnd: () => {},\n items,\n renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n scrollToTop: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n args: {\n itemHeight: 50,\n overscan: 5,\n items,\n renderItem: ({ i }: { i: number }) => (\n <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n Item {i}\n </div>\n ),\n },\n};\n\nexport const WithCustomLastRow: Story = {\n render: args => {\n const items = Array.from({ length: 5 }, (_, i) => i + 1);\n\n return (\n <VirtualList\n {...args}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n bottomComponent={\n <div style={{ height: 50, backgroundColor: \"lightcoral\" }}>End of List</div>\n }\n />\n );\n },\n};\nexport const WithPagination: Story = {\n render: args => {\n const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n const [isFetching, setIsFetching] = useState(false);\n\n const handleFetchNextPage = async () => {\n action(\"fetchNextPage\")();\n if (isFetching) return;\n setIsFetching(true);\n await new Promise(resolve => setTimeout(resolve, 1000));\n setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n setIsFetching(false);\n };\n\n return (\n <VirtualList\n {...args}\n isLoading={isFetching}\n onVisibleItemsScrollEnd={handleFetchNextPage}\n hasNextPage={true}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n />\n );\n },\n args: {\n itemHeight: 50,\n overscan: 5,\n hasNextPage: true,\n isLoading: false,\n },\n};\n\nexport const TestVirtualList: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const visibleItems = canvas.getAllByText(/Item #/i);\n const firstVisibleItem = visibleItems[0];\n const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n await expect(firstVisibleItem).toBeInTheDocument();\n\n await userEvent.pointer([\n { keys: \"[TouchA>]\", target: lastVisibleItem },\n { target: firstVisibleItem },\n { keys: \"[/TouchA]\" },\n ]);\n\n await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n },\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst items = Array.from({ length: 50 }, (_, i) => ({ i }));\n\nconst meta: Meta<typeof VirtualList<{ i: number }>> = {\n component: VirtualList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/VirtualList\",\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n component:\n \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n },\n },\n },\n argTypes: {\n gap: { description: \"Gap between items in the list.\", defaultValue: { summary: 0 } },\n itemHeight: {\n description: \"Height of each item in the list.\",\n },\n overscan: {\n description:\n \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n table: {\n defaultValue: {\n summary: \"5\",\n },\n },\n },\n LoadingComponent: {\n description:\n \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n },\n isLoading: {\n description: \"Indicates whether new items are currently being loaded.\",\n },\n hasNextPage: {\n description:\n \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n defaultValue: {\n summary: \"false\",\n },\n },\n threshold: {\n description:\n \"Number of items to check before the end of the list to trigger loading more items.\",\n defaultValue: {\n summary: \"5\",\n },\n },\n onVisibleItemsScrollEnd: {\n description:\n \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n },\n renderItem: {\n description:\n \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n },\n scrollToTop: {\n description:\n \"When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position.\",\n },\n },\n args: {\n gap: 0,\n itemHeight: 64,\n LoadingComponent: undefined,\n isLoading: false,\n overscan: 5,\n hasNextPage: false,\n threshold: 5,\n onVisibleItemsScrollEnd: () => {},\n items,\n renderItem: ({ i }: { i: number }) => <h1 tabIndex={i}>Item #{i}</h1>,\n scrollToTop: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList<{ i: number }>>;\n\nexport const Default: Story = {\n args: {\n itemHeight: 50,\n overscan: 5,\n items,\n renderItem: ({ i }: { i: number }) => (\n <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n Item {i}\n </div>\n ),\n },\n};\n\nexport const WithCustomLastRow: Story = {\n render: args => {\n const items = Array.from({ length: 5 }, (_, i) => i + 1);\n\n return (\n <VirtualList\n {...args}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n bottomComponent={\n <div style={{ height: 50, backgroundColor: \"lightcoral\" }}>End of List</div>\n }\n />\n );\n },\n};\nexport const WithPagination: Story = {\n render: args => {\n const [items, setItems] = useState(Array.from({ length: 50 }, (_, i) => i));\n const [isFetching, setIsFetching] = useState(false);\n\n const handleFetchNextPage = async () => {\n action(\"fetchNextPage\")();\n if (isFetching) return;\n setIsFetching(true);\n await new Promise(resolve => setTimeout(resolve, 1000));\n setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n setIsFetching(false);\n };\n\n return (\n <VirtualList\n {...args}\n isLoading={isFetching}\n onVisibleItemsScrollEnd={handleFetchNextPage}\n hasNextPage={true}\n items={items}\n renderItem={item => (\n <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n Item {item}\n </div>\n )}\n />\n );\n },\n args: {\n itemHeight: 50,\n overscan: 5,\n hasNextPage: true,\n isLoading: false,\n },\n};\n\nexport const TestVirtualList: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n\n const visibleItems = canvas.getAllByText(/Item #/i);\n const firstVisibleItem = visibleItems[0];\n const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n await expect(firstVisibleItem).toBeInTheDocument();\n\n await userEvent.pointer([\n { keys: \"[TouchA>]\", target: lastVisibleItem },\n { target: firstVisibleItem },\n { keys: \"[/TouchA]\" },\n ]);\n\n await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n },\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "items"]
|
|
7
7
|
}
|
|
@@ -35,6 +35,8 @@ var import_memoize = __toESM(require("lodash/memoize"));
|
|
|
35
35
|
var import_styled_components = require("styled-components");
|
|
36
36
|
var import_design_tokens = require("./design-tokens");
|
|
37
37
|
const overrideOther = {
|
|
38
|
+
"radius-m": "12px",
|
|
39
|
+
// missing from tokens
|
|
38
40
|
"radius-s": "8px",
|
|
39
41
|
// missing from tokens
|
|
40
42
|
"radius-xs": "4px",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/pre-ldls/libs/index.ts"],
|
|
4
|
-
"sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n \"radius-s\": \"8px\", // missing from tokens\n \"radius-xs\": \"4px\", // missing from tokens\n \"border-width-default\": \"1px\", // missing from tokens\n \"border-width-focus\": \"2px\", // missing from tokens\n \"margin-xs\": \"8px\", // redefines marging-xs\n \"margin-s\": \"16px\", // redefines marging-s\n \"margin-m\": \"24px\", // redefines marging-m\n \"margin-l\": \"32px\", // redefines marging-l\n\n \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// Add temporarily missing and override incorrect colours here\nconst overrideColor = {\n light: {\n \"surface-transparent-hover\": \"#0000000D\", // override from colours\n \"surface-transparent-pressed\": \"#0000001A\", // override from colours\n \"border-subdued-default-hover\": \"#D5D5D5\", // override from colours\n\n \"border-subdued-default-pressed\": \"#C1C1C1\", // missing from colours\n },\n dark: {\n \"opacity-default-10\": \"#FFFFFF1A\", // missing from colours\n },\n} as const;\n\ntype ColorToken =\n | `colors-${keyof ModeColors}`\n | `colors-${keyof typeof overrideColor.light}`\n | `colors-${keyof typeof overrideColor.dark}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n const colors = {\n dark: { ...dark, ...overrideColor.dark },\n light: { ...light, ...overrideColor.light },\n }[theme];\n\n const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n const color = `colors-${key}` as ColorToken;\n if (!usedTokens.includes(color)) return [];\n return [[`--${color}`, value]];\n });\n const otherEntries = [spacing, overrideOther]\n .flatMap(Object.entries)\n .flatMap(([key, value]) => {\n if (!usedTokens.includes(key as OtherToken)) return [];\n return [[`--${key}`, value]];\n });\n\n return Object.fromEntries([...colorEntries, ...otherEntries]);\n });\n\n return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,wBAAwB;AAAA;AAAA,EACxB,sBAAsB;AAAA;AAAA,EACtB,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA;AAAA,IAC7B,+BAA+B;AAAA;AAAA,IAC/B,gCAAgC;AAAA;AAAA,IAEhC,kCAAkC;AAAA;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA;AAAA,EACxB;AACF;AAQO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
|
|
4
|
+
"sourcesContent": ["import memoize from \"lodash/memoize\";\nimport { css, DefaultTheme } from \"styled-components\";\nimport { dark, light, ModeColors, spacing, SpacingScale } from \"./design-tokens\";\n\n// Add temporarily missing and override incorrect tokens here\nconst overrideOther = {\n \"radius-m\": \"12px\", // missing from tokens\n \"radius-s\": \"8px\", // missing from tokens\n \"radius-xs\": \"4px\", // missing from tokens\n \"border-width-default\": \"1px\", // missing from tokens\n \"border-width-focus\": \"2px\", // missing from tokens\n \"margin-xs\": \"8px\", // redefines marging-xs\n \"margin-s\": \"16px\", // redefines marging-s\n \"margin-m\": \"24px\", // redefines marging-m\n \"margin-l\": \"32px\", // redefines marging-l\n\n \"spacing-xs\": \"12px\", // override from \"spacing-xxs\": \"12px\"\n \"spacing-xxs\": \"8px\", // override from \"spacing-xs\": \"8px\"\n} as const;\n\n// Add temporarily missing and override incorrect colours here\nconst overrideColor = {\n light: {\n \"surface-transparent-hover\": \"#0000000D\", // override from colours\n \"surface-transparent-pressed\": \"#0000001A\", // override from colours\n \"border-subdued-default-hover\": \"#D5D5D5\", // override from colours\n\n \"border-subdued-default-pressed\": \"#C1C1C1\", // missing from colours\n },\n dark: {\n \"opacity-default-10\": \"#FFFFFF1A\", // missing from colours\n },\n} as const;\n\ntype ColorToken =\n | `colors-${keyof ModeColors}`\n | `colors-${keyof typeof overrideColor.light}`\n | `colors-${keyof typeof overrideColor.dark}`;\ntype OtherToken = keyof (SpacingScale & typeof overrideOther);\n\nexport const withTokens = (...usedTokens: Array<ColorToken | OtherToken>) => {\n const filterTokens = memoize((theme: DefaultTheme[\"theme\"]) => {\n const colors = {\n dark: { ...dark, ...overrideColor.dark },\n light: { ...light, ...overrideColor.light },\n }[theme];\n\n const colorEntries = Object.entries(colors).flatMap(([key, value]) => {\n const color = `colors-${key}` as ColorToken;\n if (!usedTokens.includes(color)) return [];\n return [[`--${color}`, value]];\n });\n const otherEntries = [spacing, overrideOther]\n .flatMap(Object.entries)\n .flatMap(([key, value]) => {\n if (!usedTokens.includes(key as OtherToken)) return [];\n return [[`--${key}`, value]];\n });\n\n return Object.fromEntries([...colorEntries, ...otherEntries]);\n });\n\n return css(({ theme }) => filterTokens(theme.colors.type as DefaultTheme[\"theme\"]));\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoB;AACpB,+BAAkC;AAClC,2BAA+D;AAG/D,MAAM,gBAAgB;AAAA,EACpB,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,aAAa;AAAA;AAAA,EACb,wBAAwB;AAAA;AAAA,EACxB,sBAAsB;AAAA;AAAA,EACtB,aAAa;AAAA;AAAA,EACb,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EACZ,YAAY;AAAA;AAAA,EAEZ,cAAc;AAAA;AAAA,EACd,eAAe;AAAA;AACjB;AAGA,MAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,IACL,6BAA6B;AAAA;AAAA,IAC7B,+BAA+B;AAAA;AAAA,IAC/B,gCAAgC;AAAA;AAAA,IAEhC,kCAAkC;AAAA;AAAA,EACpC;AAAA,EACA,MAAM;AAAA,IACJ,sBAAsB;AAAA;AAAA,EACxB;AACF;AAQO,MAAM,aAAa,IAAI,eAA+C;AAC3E,QAAM,mBAAe,eAAAA,SAAQ,CAAC,UAAiC;AAC7D,UAAM,SAAS;AAAA,MACb,MAAM,EAAE,GAAG,2BAAM,GAAG,cAAc,KAAK;AAAA,MACvC,OAAO,EAAE,GAAG,4BAAO,GAAG,cAAc,MAAM;AAAA,IAC5C,EAAE,KAAK;AAEP,UAAM,eAAe,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,YAAM,QAAQ,UAAU,GAAG;AAC3B,UAAI,CAAC,WAAW,SAAS,KAAK;AAAG,eAAO,CAAC;AACzC,aAAO,CAAC,CAAC,KAAK,KAAK,IAAI,KAAK,CAAC;AAAA,IAC/B,CAAC;AACD,UAAM,eAAe,CAAC,8BAAS,aAAa,EACzC,QAAQ,OAAO,OAAO,EACtB,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzB,UAAI,CAAC,WAAW,SAAS,GAAiB;AAAG,eAAO,CAAC;AACrD,aAAO,CAAC,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC;AAAA,IAC7B,CAAC;AAEH,WAAO,OAAO,YAAY,CAAC,GAAG,cAAc,GAAG,YAAY,CAAC;AAAA,EAC9D,CAAC;AAED,aAAO,8BAAI,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,IAA6B,CAAC;AACpF;",
|
|
6
6
|
"names": ["memoize"]
|
|
7
7
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { BaseStyledProps } from "../../styled";
|
|
3
2
|
import { BordersProps } from "styled-system";
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { BaseStyledProps } from "../../styled";
|
|
4
|
+
type ButtonVariants = "main" | "shade" | "error" | "color" | "neutral";
|
|
5
|
+
type IconPosition = "right" | "left";
|
|
6
6
|
interface BaseProps extends BaseStyledProps, BordersProps {
|
|
7
7
|
ff?: string;
|
|
8
8
|
color?: string;
|
|
9
9
|
backgroundColor?: string;
|
|
10
|
-
size?: "xs" | "small" | "medium" | "large";
|
|
10
|
+
size?: "xs" | "small" | "medium" | "large" | "xl";
|
|
11
11
|
fontSize?: number;
|
|
12
12
|
variant?: ButtonVariants;
|
|
13
13
|
outline?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAU,YAAY,EAAqB,MAAM,eAAe,CAAC;AAIxE,OAAmB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE3D,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;AACvE,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AACrC,UAAU,SAAU,SAAQ,eAAe,EAAE,YAAY;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAsHD,eAAO,MAAM,cAAc,4GAO1B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yCAuEhB,CAAC;AAuBF,QAAA,MAAM,aAAa;oEAlB6D,WAAW,QACnF,MAAM,YAAY,CAAC,iBAAiB,CAAC,GAC1C,MAAM,YAAY;;;CAgBqD,CAAC;AAE3E,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CACrD,WAAW,GAAG;IACZ,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CACF,CAAC;AAWF,wBAAgB,YAAY,CAC1B,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,EAClD,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GAC1C,KAAK,CAAC,YAAY,CAcpB;AAED,eAAO,MAAM,eAAe,EAAE;IAC5B,CAAC,KAAK,EAAE,MAAM,GAAG;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CAsBH,CAAC;AAMF,eAAe,aAAa,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import ChevronBottom from "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium";
|
|
2
|
+
import React, { useMemo, useState } from "react";
|
|
2
3
|
import styled, { css } from "styled-components";
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
4
|
+
import { border, compose, fontSize } from "styled-system";
|
|
5
|
+
import { rgba } from "../../../styles/helpers";
|
|
5
6
|
import fontFamily from "../../../styles/styled/fontFamily";
|
|
6
7
|
import { fontSizes } from "../../../styles/theme";
|
|
7
|
-
import
|
|
8
|
-
import ChevronBottom from "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium";
|
|
8
|
+
import baseStyled from "../../styled";
|
|
9
9
|
const IconContainer = styled.div `
|
|
10
10
|
display: inline-block;
|
|
11
11
|
${p => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
|
|
@@ -242,6 +242,10 @@ export const buttonSizeStyle = {
|
|
|
242
242
|
padding: "0 28px",
|
|
243
243
|
height: "48px",
|
|
244
244
|
},
|
|
245
|
+
xl: {
|
|
246
|
+
padding: "0 28px",
|
|
247
|
+
height: "56px",
|
|
248
|
+
},
|
|
245
249
|
};
|
|
246
250
|
Button.Unstyled = ButtonUnstyled;
|
|
247
251
|
Button.Expand = React.forwardRef(ButtonExpand);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/cta/Button/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,8 @@ export type CheckboxProps = {
|
|
|
6
6
|
label?: React.ReactNode;
|
|
7
7
|
name: string;
|
|
8
8
|
onChange: (value: boolean) => void;
|
|
9
|
+
size?: number;
|
|
9
10
|
};
|
|
10
|
-
declare const Checkbox: ({ isDisabled, variant, label, isChecked, name, onChange, }: CheckboxProps) => JSX.Element;
|
|
11
|
+
declare const Checkbox: ({ isDisabled, variant, label, isChecked, name, onChange, size, }: CheckboxProps) => JSX.Element;
|
|
11
12
|
export default Checkbox;
|
|
12
13
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwF1B,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwF1B,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,QAAQ,qEAQX,aAAa,KAAG,WAiBlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -14,10 +14,10 @@ const Input = styled.input `
|
|
|
14
14
|
border-radius: ${p => `${p.theme.radii[1]}px`};
|
|
15
15
|
position: relative;
|
|
16
16
|
|
|
17
|
-
min-width: ${p => p.theme.space[7]}px;
|
|
18
|
-
height: ${p => p.theme.space[7]}px;
|
|
17
|
+
min-width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
|
|
18
|
+
height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
|
|
19
19
|
appearance: none;
|
|
20
|
-
border: 1px solid ${props => props.theme.colors.
|
|
20
|
+
border: 1px solid ${props => props.theme.colors.opacityDefault.c30};
|
|
21
21
|
box-shadow: none;
|
|
22
22
|
|
|
23
23
|
&:checked {
|
|
@@ -27,8 +27,8 @@ const Input = styled.input `
|
|
|
27
27
|
|
|
28
28
|
&:checked::after {
|
|
29
29
|
content: " ";
|
|
30
|
-
width: ${p => p.theme.space[7]}px;
|
|
31
|
-
height: ${p => p.theme.space[7]}px;
|
|
30
|
+
width: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
|
|
31
|
+
height: ${p => (p.size ? `${p.size}px` : `${p.theme.space[7]}px`)};
|
|
32
32
|
display: inline-block;
|
|
33
33
|
color: ${props => props.theme.colors.neutral.c00};
|
|
34
34
|
|
|
@@ -80,8 +80,8 @@ const Container = styled.div `
|
|
|
80
80
|
cursor: unset;
|
|
81
81
|
}
|
|
82
82
|
`;
|
|
83
|
-
const Checkbox = ({ isDisabled = false, variant = "default", label, isChecked, name, onChange, }) => (React.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled },
|
|
84
|
-
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: () => onChange(!isChecked) }),
|
|
83
|
+
const Checkbox = ({ isDisabled = false, variant = "default", label, isChecked, name, onChange, size, }) => (React.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled },
|
|
84
|
+
React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: () => onChange(!isChecked), size: size }),
|
|
85
85
|
label ? (React.createElement(Label, { as: "label", htmlFor: name }, label)) : null));
|
|
86
86
|
export default Checkbox;
|
|
87
87
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,gBAAgB,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,EAAE;IACxE,mEAAmE;IACnE,KAAK,EAAE,4BAA4B;CACpC,CAAC,CAAC;AACL,MAAM,aAAa,GAAG,kBAAkB,CAAC,oBAAoB,CAAC,oBAAC,IAAI,OAAG,CAAC,CAAC,CAAC;AAEzE,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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;CACtB,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"}
|
|
@@ -27,10 +27,14 @@ const getContainerBorder = (theme, status, isLastItem) => {
|
|
|
27
27
|
return "transparent";
|
|
28
28
|
};
|
|
29
29
|
const Container = styled(Flex) `
|
|
30
|
+
position: relative;
|
|
30
31
|
flex: 1;
|
|
31
32
|
border-radius: ${p => p.theme.radii[2]}px;
|
|
32
33
|
background: ${p => getContainerBackground(p.theme, p.status)};
|
|
33
34
|
border: 1px solid ${p => getContainerBorder(p.theme, p.status, p.isLastItem)};
|
|
35
|
+
`;
|
|
36
|
+
const TextContainer = styled(Flex) `
|
|
37
|
+
flex: 1;
|
|
34
38
|
padding: 20px 16px;
|
|
35
39
|
`;
|
|
36
40
|
const TimelineIndicatorContentHeader = styled(Flex) `
|
|
@@ -41,16 +45,18 @@ function TimelineItem({ item, isFirstItem, isLastItem, onClick }) {
|
|
|
41
45
|
const { colors } = useTheme();
|
|
42
46
|
return (React.createElement(Flex, { flexDirection: "row", onClick: onClick, flex: 1 },
|
|
43
47
|
React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
|
|
44
|
-
React.createElement(Container, { status: item.status, isLastItem: isLastItem,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
? "
|
|
50
|
-
:
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
React.createElement(Container, { status: item.status, isLastItem: isLastItem, overflow: "hidden" },
|
|
49
|
+
item.status === "active" ? item.background : null,
|
|
50
|
+
React.createElement(TextContainer, { mb: 4, flexDirection: "column", zIndex: 1 },
|
|
51
|
+
React.createElement(TimelineIndicatorContentHeader, { height: "20px" },
|
|
52
|
+
React.createElement(Text, { variant: "body", fontWeight: item.status === "active" ? "semiBold" : "medium", color: item.status !== "inactive" && isLastItem
|
|
53
|
+
? "success.c70"
|
|
54
|
+
: item.status === "active"
|
|
55
|
+
? "primary.c80"
|
|
56
|
+
: "neutral.c70" }, item.title),
|
|
57
|
+
(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`))) ||
|
|
58
|
+
(item?.hasLoader && item.status === "active" && React.createElement(InfiniteLoader, { size: 30 }))),
|
|
59
|
+
item.renderBody && item.status === "active" && (React.createElement(Box, { position: "relative", pt: 6 }, item.renderBody(item.status === "active")))))));
|
|
54
60
|
}
|
|
55
61
|
export default React.memo(TimelineItem);
|
|
56
62
|
//# sourceMappingURL=TimelineItem.js.map
|
|
@@ -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;AASpD,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAE,MAAkB,EAAE,EAAE;IAClE,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;QAC3B,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;IACD,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAE,MAAkB,EAAE,UAAoB,EAAE,EAAE;IACpF,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;QAC3B,OAAO,aAAa,CAAC;IACvB,CAAC;SAAM,IAAI,UAAU,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC7C,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;IAClC,CAAC;SAAM,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;IAClC,CAAC;IACD,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAA8C
|
|
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.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;
|
|
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"}
|