@ledgerhq/react-ui 0.27.0 → 0.28.0-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/pre-ldls/components/AccountItem/AccountItem.js +77 -31
- package/lib/cjs/pre-ldls/components/AccountItem/AccountItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AccountList/AccountList.js +1 -1
- package/lib/cjs/pre-ldls/components/AccountList/AccountList.js.map +1 -1
- package/lib/cjs/pre-ldls/components/Address/Address.js +3 -2
- package/lib/cjs/pre-ldls/components/Address/Address.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js +10 -1
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.js +6 -2
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js +2 -1
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Tag/Tag.js +1 -0
- package/lib/cjs/pre-ldls/components/Tag/Tag.js.map +2 -2
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js +44 -14
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map +3 -3
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js +5 -1
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map +2 -2
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts +1 -0
- package/lib/pre-ldls/components/AccountItem/AccountItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AccountItem/AccountItem.js +70 -19
- package/lib/pre-ldls/components/AccountItem/AccountItem.js.map +1 -1
- package/lib/pre-ldls/components/AccountList/AccountList.js +1 -1
- package/lib/pre-ldls/components/Address/Address.d.ts +2 -1
- package/lib/pre-ldls/components/Address/Address.d.ts.map +1 -1
- package/lib/pre-ldls/components/Address/Address.js +2 -2
- 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 +9 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
- package/lib/pre-ldls/components/AssetList/AssetList.d.ts +3 -1
- package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map +1 -1
- package/lib/pre-ldls/components/AssetList/AssetList.js +2 -2
- package/lib/pre-ldls/components/AssetList/AssetList.js.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.d.ts.map +1 -1
- package/lib/pre-ldls/components/Tag/Tag.js +1 -0
- package/lib/pre-ldls/components/Tag/Tag.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 +40 -14
- package/lib/pre-ldls/components/VirtualList/VirtualList.js.map +1 -1
- package/package.json +3 -3
|
@@ -55,6 +55,11 @@ const Wrapper = import_styled_components.default.div`
|
|
|
55
55
|
border-radius: var(--radius-s, 8px);
|
|
56
56
|
justify-content: space-between;
|
|
57
57
|
align-items: center;
|
|
58
|
+
width: 100%;
|
|
59
|
+
box-sizing: border-box;
|
|
60
|
+
max-width: 100%;
|
|
61
|
+
min-width: 200px;
|
|
62
|
+
overflow: hidden;
|
|
58
63
|
|
|
59
64
|
:hover {
|
|
60
65
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -64,41 +69,82 @@ const Wrapper = import_styled_components.default.div`
|
|
|
64
69
|
background-color: var(--colors-surface-transparent-pressed);
|
|
65
70
|
}
|
|
66
71
|
`;
|
|
72
|
+
const ContentContainer = import_styled_components.default.div`
|
|
73
|
+
display: flex;
|
|
74
|
+
justify-content: space-between;
|
|
75
|
+
align-items: center;
|
|
76
|
+
min-width: 0;
|
|
77
|
+
flex: 1;
|
|
78
|
+
width: 100%;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
`;
|
|
81
|
+
const AccountInfoContainer = import_styled_components.default.div`
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
min-width: 0;
|
|
86
|
+
flex: 1;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
`;
|
|
89
|
+
const NameRow = import_styled_components.default.div`
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: row;
|
|
92
|
+
align-items: center;
|
|
93
|
+
margin-bottom: var(--spacing-xxxs);
|
|
94
|
+
min-width: 0;
|
|
95
|
+
width: 100%;
|
|
96
|
+
`;
|
|
97
|
+
const NameDiv = import_styled_components.default.div`
|
|
98
|
+
white-space: nowrap;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
text-overflow: ellipsis;
|
|
101
|
+
min-width: 0;
|
|
102
|
+
flex: 1;
|
|
103
|
+
max-width: fit-content;
|
|
104
|
+
`;
|
|
105
|
+
const TagWrapper = import_styled_components.default.div`
|
|
106
|
+
flex-shrink: 0;
|
|
107
|
+
margin-left: var(--spacing-xxs);
|
|
108
|
+
display: flex;
|
|
109
|
+
flex: 1;
|
|
110
|
+
max-width: fit-content;
|
|
111
|
+
align-items: center;
|
|
112
|
+
`;
|
|
113
|
+
const BalanceContainer = import_styled_components.default.div`
|
|
114
|
+
display: flex;
|
|
115
|
+
flex-direction: column;
|
|
116
|
+
text-align: right;
|
|
117
|
+
flex-shrink: 0;
|
|
118
|
+
margin-left: var(--spacing-xs);
|
|
119
|
+
`;
|
|
67
120
|
const AccountItem = ({ onClick, account, showIcon = true }) => {
|
|
68
|
-
const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
|
|
69
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(
|
|
70
|
-
|
|
121
|
+
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
122
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, /* @__PURE__ */ import_react.default.createElement(AccountInfoContainer, null, /* @__PURE__ */ import_react.default.createElement(NameRow, null, /* @__PURE__ */ import_react.default.createElement(NameDiv, null, /* @__PURE__ */ import_react.default.createElement(
|
|
123
|
+
import_components.Text,
|
|
71
124
|
{
|
|
125
|
+
variant: "largeLineHeight",
|
|
126
|
+
fontWeight: "semiBold",
|
|
127
|
+
color: "var(--colors-content-default-default)",
|
|
128
|
+
fontSize: "14px",
|
|
129
|
+
lineHeight: "20px",
|
|
130
|
+
title: name,
|
|
72
131
|
style: {
|
|
73
|
-
display: "
|
|
74
|
-
|
|
75
|
-
|
|
132
|
+
display: "block",
|
|
133
|
+
whiteSpace: "nowrap",
|
|
134
|
+
overflow: "hidden",
|
|
135
|
+
textOverflow: "ellipsis"
|
|
76
136
|
}
|
|
77
137
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
import_components.Text,
|
|
90
|
-
{
|
|
91
|
-
variant: "largeLineHeight",
|
|
92
|
-
fontWeight: "semiBold",
|
|
93
|
-
color: "var(--colors-content-default-default)",
|
|
94
|
-
marginRight: "var(--spacing-xxs)",
|
|
95
|
-
fontSize: "14px",
|
|
96
|
-
lineHeight: "20px"
|
|
97
|
-
},
|
|
98
|
-
name
|
|
99
|
-
),
|
|
100
|
-
protocol && /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "capitalize" }, protocol)
|
|
101
|
-
), /* @__PURE__ */ import_react.default.createElement(import_Address.Address, { address, cryptoId, ticker, showIcon }))
|
|
102
|
-
), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", textAlign: "right" } }, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)));
|
|
138
|
+
name
|
|
139
|
+
)), protocol && /* @__PURE__ */ import_react.default.createElement(TagWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Tag.Tag, { textTransform: "uppercase" }, protocol))), /* @__PURE__ */ import_react.default.createElement(
|
|
140
|
+
import_Address.Address,
|
|
141
|
+
{
|
|
142
|
+
address,
|
|
143
|
+
cryptoId,
|
|
144
|
+
ticker,
|
|
145
|
+
parentId,
|
|
146
|
+
showIcon
|
|
147
|
+
}
|
|
148
|
+
)), /* @__PURE__ */ import_react.default.createElement(BalanceContainer, null, /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "14px" }, fiatValue), /* @__PURE__ */ import_react.default.createElement(import_components.Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
|
|
103
149
|
};
|
|
104
150
|
//# sourceMappingURL=AccountItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n name: string;\n id: string;\n balance: string;\n fiatValue: string;\n address: string;\n protocol?: string;\n cryptoId?: string;\n ticker?: string;\n};\n\ntype AccountItemProps = {\n onClick: () => void;\n showIcon?: boolean;\n account: Account;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n padding: var(--spacing-xs) var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n justify-content: space-between;\n align-items: center;\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\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;\n\n return (\n <Wrapper onClick={onClick}>\n <
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\nimport { Tag } from \"../Tag/Tag\";\nimport { Address } from \"../Address/Address\";\n\nexport type Account = {\n name: string;\n id: string;\n balance: string;\n fiatValue: string;\n address: string;\n protocol?: string;\n cryptoId?: string;\n ticker?: string;\n parentId?: string;\n};\n\ntype AccountItemProps = {\n onClick: () => void;\n showIcon?: boolean;\n account: Account;\n};\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxxs\",\n \"spacing-xxs\",\n \"spacing-xs\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n padding: var(--spacing-xs) var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\n justify-content: space-between;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n max-width: 100%;\n min-width: 200px;\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 ContentContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-width: 0;\n flex: 1;\n width: 100%;\n overflow: hidden;\n`;\n\nconst AccountInfoContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 0;\n flex: 1;\n overflow: hidden;\n`;\n\nconst NameRow = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: var(--spacing-xxxs);\n min-width: 0;\n width: 100%;\n`;\n\nconst NameDiv = styled.div`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n flex: 1;\n max-width: fit-content;\n`;\n\nconst TagWrapper = styled.div`\n flex-shrink: 0;\n margin-left: var(--spacing-xxs);\n display: flex;\n flex: 1;\n max-width: fit-content;\n align-items: center;\n`;\n\nconst BalanceContainer = styled.div`\n display: flex;\n flex-direction: column;\n text-align: right;\n flex-shrink: 0;\n margin-left: var(--spacing-xs);\n`;\n\nexport const AccountItem = ({ onClick, account, showIcon = true }: AccountItemProps) => {\n const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;\n\n return (\n <Wrapper onClick={onClick}>\n <ContentContainer>\n <AccountInfoContainer>\n <NameRow>\n <NameDiv>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n fontSize=\"14px\"\n lineHeight=\"20px\"\n title={name}\n style={{\n display: \"block\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n }}\n >\n {name}\n </Text>\n </NameDiv>\n {protocol && (\n <TagWrapper>\n <Tag textTransform=\"uppercase\">{protocol}</Tag>\n </TagWrapper>\n )}\n </NameRow>\n <Address\n address={address}\n cryptoId={cryptoId}\n ticker={ticker}\n parentId={parentId}\n showIcon={showIcon}\n />\n </AccountInfoContainer>\n <BalanceContainer>\n <Text fontSize=\"14px\">{fiatValue}</Text>\n <Text fontSize=\"12px\" color=\"var(--colors-content-subdued-default-default)\">\n {balance}\n </Text>\n </BalanceContainer>\n </ContentContainer>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,iBAAoB;AACpB,qBAAwB;AAoBxB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBH,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUhC,MAAM,uBAAuB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1B,MAAM,mBAAmB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,MAAM,cAAc,CAAC,EAAE,SAAS,SAAS,WAAW,KAAK,MAAwB;AACtF,QAAM,EAAE,MAAM,SAAS,WAAW,UAAU,SAAS,QAAQ,UAAU,SAAS,IAAI;AAEpF,SACE,6BAAAC,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,4BACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,cAAc;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH,CACF,GACC,YACC,6BAAAA,QAAA,cAAC,kBACC,6BAAAA,QAAA,cAAC,kBAAI,eAAc,eAAa,QAAS,CAC3C,CAEJ,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,GACA,6BAAAA,QAAA,cAAC,wBACC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,UAAQ,SAAU,GACjC,6BAAAA,QAAA,cAAC,0BAAK,UAAS,QAAO,OAAM,mDACzB,OACH,CACF,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -42,6 +42,6 @@ const AccountList = ({
|
|
|
42
42
|
(account) => /* @__PURE__ */ import_react.default.createElement(import_AccountItem.AccountItem, { onClick: () => onClick(account.id), account }),
|
|
43
43
|
[onClick]
|
|
44
44
|
);
|
|
45
|
-
return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: accounts, itemHeight:
|
|
45
|
+
return /* @__PURE__ */ import_react.default.createElement(import_VirtualList.VirtualList, { items: accounts, itemHeight: 70, renderItem: renderAccountItem });
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=AccountList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AccountList/AccountList.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n accounts,\n onClick,\n}: {\n accounts: Account[];\n onClick: (networkId: string) => void;\n}) => {\n const renderAccountItem = useCallback(\n (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n [onClick],\n );\n\n return <VirtualList items={accounts} itemHeight={
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport { Account, AccountItem } from \"../AccountItem/AccountItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AccountList = ({\n accounts,\n onClick,\n}: {\n accounts: Account[];\n onClick: (networkId: string) => void;\n}) => {\n const renderAccountItem = useCallback(\n (account: Account) => <AccountItem onClick={() => onClick(account.id)} account={account} />,\n [onClick],\n );\n\n return <VirtualList items={accounts} itemHeight={70} renderItem={renderAccountItem} />;\n};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,yBAAqC;AACrC,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAAqB,6BAAAA,QAAA,cAAC,kCAAY,SAAS,MAAM,QAAQ,QAAQ,EAAE,GAAG,SAAkB;AAAA,IACzF,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,6BAAAA,QAAA,cAAC,kCAAY,OAAO,UAAU,YAAY,IAAI,YAAY,mBAAmB;AACtF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -47,7 +47,8 @@ const Address = ({
|
|
|
47
47
|
address,
|
|
48
48
|
showIcon,
|
|
49
49
|
cryptoId,
|
|
50
|
-
ticker
|
|
50
|
+
ticker,
|
|
51
|
+
parentId
|
|
51
52
|
}) => {
|
|
52
53
|
return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
|
|
53
54
|
import_components.Text,
|
|
@@ -57,6 +58,6 @@ const Address = ({
|
|
|
57
58
|
color: "var(--colors-content-subdued-default-default)"
|
|
58
59
|
},
|
|
59
60
|
address
|
|
60
|
-
), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker }));
|
|
61
|
+
), showIcon && /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { ledgerId: cryptoId, ticker, network: parentId }));
|
|
61
62
|
};
|
|
62
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}: {\n address: string;\n showIcon: boolean;\n cryptoId?: string;\n ticker?: 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} ticker={ticker} />}\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;AACF,
|
|
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} ticker={ticker} network={parentId} />}\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,YAAY,6BAAAA,QAAA,cAAC,gCAAW,UAAU,UAAU,QAAgB,SAAS,UAAU,CAClF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -52,6 +52,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
52
52
|
cursor: pointer;
|
|
53
53
|
border-radius: var(--radius-s, 8px);
|
|
54
54
|
align-items: center;
|
|
55
|
+
overflow: hidden;
|
|
55
56
|
|
|
56
57
|
:hover {
|
|
57
58
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -66,6 +67,8 @@ const InfoWrapper = import_styled_components.default.div`
|
|
|
66
67
|
flex-direction: column;
|
|
67
68
|
justify-content: center;
|
|
68
69
|
margin-left: var(--margin-s);
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
flex: 1;
|
|
69
72
|
`;
|
|
70
73
|
const AssetItem = ({ name, ticker, id, onClick }) => {
|
|
71
74
|
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) }, /* @__PURE__ */ import_react.default.createElement(import_CryptoIcon.CryptoIcon, { size: "48px", ledgerId: id, ticker }), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -73,7 +76,13 @@ const AssetItem = ({ name, ticker, id, onClick }) => {
|
|
|
73
76
|
{
|
|
74
77
|
variant: "largeLineHeight",
|
|
75
78
|
fontWeight: "semiBold",
|
|
76
|
-
color: "var(--colors-content-default-default)"
|
|
79
|
+
color: "var(--colors-content-default-default)",
|
|
80
|
+
style: {
|
|
81
|
+
display: "block",
|
|
82
|
+
whiteSpace: "nowrap",
|
|
83
|
+
overflow: "hidden",
|
|
84
|
+
textOverflow: "ellipsis"
|
|
85
|
+
}
|
|
77
86
|
},
|
|
78
87
|
name
|
|
79
88
|
), /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -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};\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\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`;\n\nexport const AssetItem = ({ name, ticker, id, onClick }: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n >\n {name}\n </Text>\n <Text\n variant=\"bodyLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {ticker}\n </Text>\n </InfoWrapper>\n </Wrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAY3B,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;
|
|
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};\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\nexport const AssetItem = ({ name, ticker, id, onClick }: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker, id })}>\n <CryptoIcon size=\"48px\" ledgerId={id} ticker={ticker} />\n <InfoWrapper>\n <Text\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 <Text\n variant=\"bodyLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-subdued-default-default)\"\n >\n {ticker}\n </Text>\n </InfoWrapper>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AACrB,wBAA2B;AAY3B,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;AASpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,IAAI,QAAQ,MAAsB;AAC1E,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,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;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -37,7 +37,9 @@ var import_VirtualList = require("../VirtualList/VirtualList");
|
|
|
37
37
|
const AssetList = ({
|
|
38
38
|
assets,
|
|
39
39
|
onClick,
|
|
40
|
-
onVisibleItemsScrollEnd
|
|
40
|
+
onVisibleItemsScrollEnd,
|
|
41
|
+
scrollToTop,
|
|
42
|
+
hasNextPage
|
|
41
43
|
}) => {
|
|
42
44
|
const renderAssetItem = (0, import_react.useCallback)(
|
|
43
45
|
({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
|
|
@@ -49,7 +51,9 @@ const AssetList = ({
|
|
|
49
51
|
itemHeight: 70,
|
|
50
52
|
items: assets,
|
|
51
53
|
onVisibleItemsScrollEnd,
|
|
52
|
-
renderItem: renderAssetItem
|
|
54
|
+
renderItem: renderAssetItem,
|
|
55
|
+
scrollToTop,
|
|
56
|
+
hasNextPage
|
|
53
57
|
}
|
|
54
58
|
);
|
|
55
59
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n assets,\n onClick,\n onVisibleItemsScrollEnd,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker, id }: AssetType) => (\n <AssetItem name={name} ticker={ticker} id={id} onClick={onClick} />\n ),\n [onClick],\n );\n\n return (\n <VirtualList\n itemHeight={70}\n items={assets}\n onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n renderItem={renderAssetItem}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from \"react\";\nimport { AssetItem, AssetType } from \"../AssetItem/AssetItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const AssetList = ({\n assets,\n onClick,\n onVisibleItemsScrollEnd,\n scrollToTop,\n hasNextPage,\n}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n onVisibleItemsScrollEnd?: () => void;\n scrollToTop?: boolean;\n hasNextPage?: boolean;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker, id }: AssetType) => (\n <AssetItem name={name} ticker={ticker} id={id} onClick={onClick} />\n ),\n [onClick],\n );\n\n return (\n <VirtualList\n itemHeight={70}\n items={assets}\n onVisibleItemsScrollEnd={onVisibleItemsScrollEnd}\n renderItem={renderAssetItem}\n scrollToTop={scrollToTop}\n hasNextPage={hasNextPage}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,QAAQ,GAAG,MAClB,6BAAAA,QAAA,cAAC,8BAAU,MAAY,QAAgB,IAAQ,SAAkB;AAAA,IAEnE,CAAC,OAAO;AAAA,EACV;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/AssetList/AssetList.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n component: AssetList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/AssetList\",\n tags: [\"autodocs\"],\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n })),\n onClick: testFn,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const TestAssetClick: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByText(\"Bitcoin 1\");\n await userEvent.click(input);\n await expect(testFn).toHaveBeenCalledWith({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n },\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAElB,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { AssetList } from \"./AssetList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\nimport React from \"react\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof AssetList> = {\n component: AssetList,\n decorators: [\n Story => (\n <div style={{ height: \"400px\" }}>\n <Story />\n </div>\n ),\n ],\n title: \"PreLdls/Components/AssetList\",\n tags: [\"autodocs\"],\n args: {\n assets: Array.from({ length: 50 }).map((_, i) => ({\n name: `Bitcoin ${i}`,\n ticker: \"BTC\",\n id: \"bitcoin\",\n })),\n onClick: testFn,\n scrollToTop: false,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof AssetList>;\n\nexport const Default: Story = {};\n\nexport const TestAssetClick: Story = {\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByText(\"Bitcoin 1\");\n await userEvent.click(input);\n await expect(testFn).toHaveBeenCalledWith({ name: \"Bitcoin 1\", ticker: \"BTC\", id: \"bitcoin\" });\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0B;AAC1B,kBAA8C;AAC9C,mBAAkB;AAElB,MAAM,aAAS,gBAAG;AAElB,MAAM,OAA+B;AAAA,EACnC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO;AAAA,MAChD,MAAM,WAAW,CAAC;AAAA,MAClB,QAAQ;AAAA,MACR,IAAI;AAAA,IACN,EAAE;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;AACA,IAAO,4BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,iBAAwB;AAAA,EACnC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,EAAE,MAAM,aAAa,QAAQ,OAAO,IAAI,UAAU,CAAC;AAAA,EAC/F;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Tag/Tag.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n children,\n}: {\n textTransform?: string;\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\">\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { Text } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\nimport styled from \"styled-components\";\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n \"radius-xs\",\n \"spacing-xxxs\",\n )}\n\n padding: 1px var(--spacing-xxxs);\n border-radius: var(--radius-xs);\n display: inline-flex;\n background-color: var(--colors-surface-transparent-subdued-default);\n flex-shrink: 0;\n`;\n\nexport const Tag = ({\n textTransform = \"none\",\n children,\n}: {\n textTransform?: string;\n children: ReactNode;\n}) => {\n return (\n <Wrapper data-testid=\"tag\">\n <Text\n color=\"var(--colors-content-subdued-default-default)\"\n fontSize=\"10px\"\n lineHeight=\"16px\"\n textTransform={textTransform}\n >\n {children}\n </Text>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAqB;AACrB,kBAA2B;AAC3B,+BAAmB;AAEnB,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASI,MAAM,MAAM,CAAC;AAAA,EAClB,gBAAgB;AAAA,EAChB;AACF,MAGM;AACJ,SACE,6BAAAC,QAAA,cAAC,WAAQ,eAAY,SACnB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,UAAS;AAAA,MACT,YAAW;AAAA,MACX;AAAA;AAAA,IAEC;AAAA,EACH,CACF;AAEJ;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -35,6 +35,9 @@ var import_react = __toESM(require("react"));
|
|
|
35
35
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
36
36
|
var import_components = require("../../../components");
|
|
37
37
|
const DefaultLoadingComponent = () => /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { justifyContent: "center", alignItems: "center", height: "76px" }, /* @__PURE__ */ import_react.default.createElement(import_components.InfiniteLoader, null));
|
|
38
|
+
function easeInOutCubic(t) {
|
|
39
|
+
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
40
|
+
}
|
|
38
41
|
const VirtualList = ({
|
|
39
42
|
itemHeight,
|
|
40
43
|
overscan = 5,
|
|
@@ -42,32 +45,59 @@ const VirtualList = ({
|
|
|
42
45
|
isLoading,
|
|
43
46
|
hasNextPage = false,
|
|
44
47
|
threshold = 5,
|
|
45
|
-
onVisibleItemsScrollEnd,
|
|
46
48
|
items,
|
|
47
|
-
|
|
49
|
+
onVisibleItemsScrollEnd,
|
|
50
|
+
renderItem,
|
|
51
|
+
scrollToTop = false
|
|
48
52
|
}) => {
|
|
49
53
|
const parentRef = (0, import_react.useRef)(null);
|
|
54
|
+
const scrollToFn = (0, import_react.useCallback)(
|
|
55
|
+
(offset, options, instance) => {
|
|
56
|
+
const element = instance.scrollElement;
|
|
57
|
+
if (!element)
|
|
58
|
+
return;
|
|
59
|
+
const duration = options.behavior === "smooth" ? 100 : 0;
|
|
60
|
+
if (duration === 0) {
|
|
61
|
+
element.scrollTop = offset;
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const startTime = performance.now();
|
|
65
|
+
const startTop = element.scrollTop;
|
|
66
|
+
const distanceToScroll = offset - startTop;
|
|
67
|
+
const scrollStep = (currentTime) => {
|
|
68
|
+
const elapsed = currentTime - startTime;
|
|
69
|
+
const progress = Math.min(elapsed / duration, 1);
|
|
70
|
+
const easedProgress = easeInOutCubic(progress);
|
|
71
|
+
element.scrollTop = startTop + distanceToScroll * easedProgress;
|
|
72
|
+
if (progress < 1) {
|
|
73
|
+
requestAnimationFrame(scrollStep);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
requestAnimationFrame(scrollStep);
|
|
77
|
+
},
|
|
78
|
+
[]
|
|
79
|
+
);
|
|
50
80
|
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
51
81
|
count: hasNextPage ? items.length + 1 : items.length,
|
|
82
|
+
overscan,
|
|
52
83
|
getScrollElement: () => parentRef.current,
|
|
53
84
|
estimateSize: () => itemHeight,
|
|
54
|
-
|
|
85
|
+
scrollToFn
|
|
55
86
|
});
|
|
87
|
+
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
88
|
+
(0, import_react.useEffect)(() => {
|
|
89
|
+
if (scrollToTop && parentRef.current) {
|
|
90
|
+
scrollToFn(0, { behavior: "smooth" }, { scrollElement: parentRef.current });
|
|
91
|
+
}
|
|
92
|
+
}, [scrollToTop, scrollToFn]);
|
|
56
93
|
(0, import_react.useEffect)(() => {
|
|
57
|
-
|
|
58
|
-
if (!items2.length)
|
|
94
|
+
if (!virtualItems.length)
|
|
59
95
|
return;
|
|
60
|
-
const lastItem =
|
|
61
|
-
if (lastItem.index >=
|
|
96
|
+
const lastItem = virtualItems[virtualItems.length - 1];
|
|
97
|
+
if (lastItem.index >= virtualItems.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
|
|
62
98
|
onVisibleItemsScrollEnd();
|
|
63
99
|
}
|
|
64
|
-
}, [
|
|
65
|
-
hasNextPage,
|
|
66
|
-
onVisibleItemsScrollEnd,
|
|
67
|
-
items.length,
|
|
68
|
-
isLoading,
|
|
69
|
-
rowVirtualizer.getVirtualItems()
|
|
70
|
-
]);
|
|
100
|
+
}, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);
|
|
71
101
|
const showCustomLoadingComponent = !!LoadingComponent;
|
|
72
102
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
73
103
|
"div",
|
|
@@ -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 } 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\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nexport const VirtualList = <T,>({\n itemHeight,\n overscan = 5,\n LoadingComponent,\n isLoading,\n hasNextPage = false,\n threshold = 5,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
6
|
-
"names": ["React"
|
|
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\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 itemHeight,\n overscan = 5,\n LoadingComponent,\n isLoading,\n hasNextPage = false,\n threshold = 5,\n items,\n onVisibleItemsScrollEnd,\n renderItem,\n scrollToTop = false,\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 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 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 </div>\n {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -89,6 +89,9 @@ const meta = {
|
|
|
89
89
|
},
|
|
90
90
|
renderItem: {
|
|
91
91
|
description: "Function to render each item in the list. Receives the index of the item as an argument and should return a React node."
|
|
92
|
+
},
|
|
93
|
+
scrollToTop: {
|
|
94
|
+
description: "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."
|
|
92
95
|
}
|
|
93
96
|
},
|
|
94
97
|
args: {
|
|
@@ -101,7 +104,8 @@ const meta = {
|
|
|
101
104
|
onVisibleItemsScrollEnd: () => {
|
|
102
105
|
},
|
|
103
106
|
items,
|
|
104
|
-
renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i)
|
|
107
|
+
renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i),
|
|
108
|
+
scrollToTop: false
|
|
105
109
|
}
|
|
106
110
|
};
|
|
107
111
|
var VirtualList_stories_default = meta;
|
|
@@ -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 },\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 },\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 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,yBAA4B;AAC5B,2BAAuB;AACvB,kBAAmD;AAEnD,MAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE,EAAE,EAAE;AAE1D,MAAM,OAAgD;AAAA,EACpD,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WACE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,IACA,UAAU;AAAA,MACR,aACE;AAAA,MACF,OAAO;AAAA,QACL,cAAc;AAAA,UACZ,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,aACE;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA,aAAa;AAAA,MACX,aACE;AAAA,MACF,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,aACE;AAAA,MACF,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,yBAAyB;AAAA,MACvB,aACE;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,MACV,aACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,WAAW;AAAA,IACX,yBAAyB,MAAM;AAAA,IAAC;AAAA,IAChC;AAAA,IACA,YAAY,CAAC,EAAE,EAAE,MAAqB,6BAAAA,QAAA,cAAC,QAAG,UAAU,KAAG,UAAO,CAAE;AAAA,
|
|
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 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
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"AccountItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAyFF,eAAO,MAAM,WAAW,mCAA2C,gBAAgB,sBAiDlF,CAAC"}
|
|
@@ -13,6 +13,11 @@ const Wrapper = styled.div `
|
|
|
13
13
|
border-radius: var(--radius-s, 8px);
|
|
14
14
|
justify-content: space-between;
|
|
15
15
|
align-items: center;
|
|
16
|
+
width: 100%;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
max-width: 100%;
|
|
19
|
+
min-width: 200px;
|
|
20
|
+
overflow: hidden;
|
|
16
21
|
|
|
17
22
|
:hover {
|
|
18
23
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -22,26 +27,72 @@ const Wrapper = styled.div `
|
|
|
22
27
|
background-color: var(--colors-surface-transparent-pressed);
|
|
23
28
|
}
|
|
24
29
|
`;
|
|
30
|
+
const ContentContainer = styled.div `
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
align-items: center;
|
|
34
|
+
min-width: 0;
|
|
35
|
+
flex: 1;
|
|
36
|
+
width: 100%;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
`;
|
|
39
|
+
const AccountInfoContainer = styled.div `
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
min-width: 0;
|
|
44
|
+
flex: 1;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
`;
|
|
47
|
+
const NameRow = styled.div `
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: row;
|
|
50
|
+
align-items: center;
|
|
51
|
+
margin-bottom: var(--spacing-xxxs);
|
|
52
|
+
min-width: 0;
|
|
53
|
+
width: 100%;
|
|
54
|
+
`;
|
|
55
|
+
const NameDiv = styled.div `
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
min-width: 0;
|
|
60
|
+
flex: 1;
|
|
61
|
+
max-width: fit-content;
|
|
62
|
+
`;
|
|
63
|
+
const TagWrapper = styled.div `
|
|
64
|
+
flex-shrink: 0;
|
|
65
|
+
margin-left: var(--spacing-xxs);
|
|
66
|
+
display: flex;
|
|
67
|
+
flex: 1;
|
|
68
|
+
max-width: fit-content;
|
|
69
|
+
align-items: center;
|
|
70
|
+
`;
|
|
71
|
+
const BalanceContainer = styled.div `
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
text-align: right;
|
|
75
|
+
flex-shrink: 0;
|
|
76
|
+
margin-left: var(--spacing-xs);
|
|
77
|
+
`;
|
|
25
78
|
export const AccountItem = ({ onClick, account, showIcon = true }) => {
|
|
26
|
-
const { name, balance, fiatValue, protocol, address, ticker, cryptoId } = account;
|
|
79
|
+
const { name, balance, fiatValue, protocol, address, ticker, cryptoId, parentId } = account;
|
|
27
80
|
return (React.createElement(Wrapper, { onClick: onClick },
|
|
28
|
-
React.createElement(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
React.createElement(
|
|
43
|
-
|
|
44
|
-
React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
45
|
-
React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance))));
|
|
81
|
+
React.createElement(ContentContainer, null,
|
|
82
|
+
React.createElement(AccountInfoContainer, null,
|
|
83
|
+
React.createElement(NameRow, null,
|
|
84
|
+
React.createElement(NameDiv, null,
|
|
85
|
+
React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", fontSize: "14px", lineHeight: "20px", title: name, style: {
|
|
86
|
+
display: "block",
|
|
87
|
+
whiteSpace: "nowrap",
|
|
88
|
+
overflow: "hidden",
|
|
89
|
+
textOverflow: "ellipsis",
|
|
90
|
+
} }, name)),
|
|
91
|
+
protocol && (React.createElement(TagWrapper, null,
|
|
92
|
+
React.createElement(Tag, { textTransform: "uppercase" }, protocol)))),
|
|
93
|
+
React.createElement(Address, { address: address, cryptoId: cryptoId, ticker: ticker, parentId: parentId, showIcon: showIcon })),
|
|
94
|
+
React.createElement(BalanceContainer, null,
|
|
95
|
+
React.createElement(Text, { fontSize: "14px" }, fiatValue),
|
|
96
|
+
React.createElement(Text, { fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, balance)))));
|
|
46
97
|
};
|
|
47
98
|
//# sourceMappingURL=AccountItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"AccountItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AccountItem/AccountItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAoB7C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,EACpC,wCAAwC,CACzC;;;;;;;;;;;;;;;;;;;;;CAqBF,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQlC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOtC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAG,IAAI,EAAoB,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAE5F,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,gBAAgB;YACf,oBAAC,oBAAoB;gBACnB,oBAAC,OAAO;oBACN,oBAAC,OAAO;wBACN,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE;gCACL,OAAO,EAAE,OAAO;gCAChB,UAAU,EAAE,QAAQ;gCACpB,QAAQ,EAAE,QAAQ;gCAClB,YAAY,EAAE,UAAU;6BACzB,IAEA,IAAI,CACA,CACC;oBACT,QAAQ,IAAI,CACX,oBAAC,UAAU;wBACT,oBAAC,GAAG,IAAC,aAAa,EAAC,WAAW,IAAE,QAAQ,CAAO,CACpC,CACd,CACO;gBACV,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACmB;YACvB,oBAAC,gBAAgB;gBACf,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,IAAE,SAAS,CAAQ;gBACxC,oBAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,+CAA+C,IACxE,OAAO,CACH,CACU,CACF,CACX,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -3,6 +3,6 @@ import { AccountItem } from "../AccountItem/AccountItem";
|
|
|
3
3
|
import { VirtualList } from "../VirtualList/VirtualList";
|
|
4
4
|
export const AccountList = ({ accounts, onClick, }) => {
|
|
5
5
|
const renderAccountItem = useCallback((account) => React.createElement(AccountItem, { onClick: () => onClick(account.id), account: account }), [onClick]);
|
|
6
|
-
return React.createElement(VirtualList, { items: accounts, itemHeight:
|
|
6
|
+
return React.createElement(VirtualList, { items: accounts, itemHeight: 70, renderItem: renderAccountItem });
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=AccountList.js.map
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const Address: ({ address, showIcon, cryptoId, ticker, }: {
|
|
2
|
+
export declare const Address: ({ address, showIcon, cryptoId, ticker, parentId, }: {
|
|
3
3
|
address: string;
|
|
4
4
|
showIcon: boolean;
|
|
5
5
|
cryptoId?: string | undefined;
|
|
6
6
|
ticker?: string | undefined;
|
|
7
|
+
parentId?: string | undefined;
|
|
7
8
|
}) => React.JSX.Element;
|
|
8
9
|
//# sourceMappingURL=Address.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;
|
|
1
|
+
{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,OAAO;aAOT,MAAM;cACL,OAAO;;;;uBAiBlB,CAAC"}
|
|
@@ -10,9 +10,9 @@ const Wrapper = styled.div `
|
|
|
10
10
|
flex-direction: row;
|
|
11
11
|
align-items: center;
|
|
12
12
|
`;
|
|
13
|
-
export const Address = ({ address, showIcon, cryptoId, ticker, }) => {
|
|
13
|
+
export const Address = ({ address, showIcon, cryptoId, ticker, parentId, }) => {
|
|
14
14
|
return (React.createElement(Wrapper, null,
|
|
15
15
|
React.createElement(Text, { marginRight: "var(--spacing-xxxs)", fontSize: "12px", color: "var(--colors-content-subdued-default-default)" }, address),
|
|
16
|
-
showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker })));
|
|
16
|
+
showIcon && React.createElement(CryptoIcon, { ledgerId: cryptoId, ticker: ticker, network: parentId })));
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=Address.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,
|
|
1
|
+
{"version":3,"file":"Address.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Address/Address.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,cAAc,EAAE,wCAAwC,CAAC;;;;;CAKvE,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,GAOT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,IAAI,IACH,WAAW,EAAC,qBAAqB,EACjC,QAAQ,EAAC,MAAM,EACf,KAAK,EAAC,+CAA+C,IAEpD,OAAO,CACH;QACN,QAAQ,IAAI,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAI,CAC1E,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;
|
|
1
|
+
{"version":3,"file":"AssetItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,cAAc,GAAG,SAAS,GAAG;IAChC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC,CAAC;AAsCF,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA4BtE,CAAC"}
|
|
@@ -11,6 +11,7 @@ const Wrapper = styled.div `
|
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
border-radius: var(--radius-s, 8px);
|
|
13
13
|
align-items: center;
|
|
14
|
+
overflow: hidden;
|
|
14
15
|
|
|
15
16
|
:hover {
|
|
16
17
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -25,12 +26,19 @@ const InfoWrapper = styled.div `
|
|
|
25
26
|
flex-direction: column;
|
|
26
27
|
justify-content: center;
|
|
27
28
|
margin-left: var(--margin-s);
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
flex: 1;
|
|
28
31
|
`;
|
|
29
32
|
export const AssetItem = ({ name, ticker, id, onClick }) => {
|
|
30
33
|
return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) },
|
|
31
34
|
React.createElement(CryptoIcon, { size: "48px", ledgerId: id, ticker: ticker }),
|
|
32
35
|
React.createElement(InfoWrapper, null,
|
|
33
|
-
React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)"
|
|
36
|
+
React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)", style: {
|
|
37
|
+
display: "block",
|
|
38
|
+
whiteSpace: "nowrap",
|
|
39
|
+
overflow: "hidden",
|
|
40
|
+
textOverflow: "ellipsis",
|
|
41
|
+
} }, name),
|
|
34
42
|
React.createElement(Text, { variant: "bodyLineHeight", fontWeight: "semiBold", color: "var(--colors-content-subdued-default-default)" }, ticker))));
|
|
35
43
|
};
|
|
36
44
|
//# sourceMappingURL=AssetItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAYtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC
|
|
1
|
+
{"version":3,"file":"AssetItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetItem/AssetItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAYtD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;;;CAgBF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO7B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzE,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;QACnD,oBAAC,UAAU,IAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI;QACxD,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,EAC7C,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;iBACzB,IAEA,IAAI,CACA;YACP,oBAAC,IAAI,IACH,OAAO,EAAC,gBAAgB,EACxB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,+CAA+C,IAEpD,MAAM,CACF,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { AssetType } from "../AssetItem/AssetItem";
|
|
3
|
-
export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, }: {
|
|
3
|
+
export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }: {
|
|
4
4
|
assets: AssetType[];
|
|
5
5
|
onClick: (asset: AssetType) => void;
|
|
6
6
|
onVisibleItemsScrollEnd?: (() => void) | undefined;
|
|
7
|
+
scrollToTop?: boolean | undefined;
|
|
8
|
+
hasNextPage?: boolean | undefined;
|
|
7
9
|
}) => React.JSX.Element;
|
|
8
10
|
//# sourceMappingURL=AssetList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;
|
|
1
|
+
{"version":3,"file":"AssetList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAa,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG9D,eAAO,MAAM,SAAS;YAOZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;;;uBAqBrC,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useCallback } from "react";
|
|
2
2
|
import { AssetItem } from "../AssetItem/AssetItem";
|
|
3
3
|
import { VirtualList } from "../VirtualList/VirtualList";
|
|
4
|
-
export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, }) => {
|
|
4
|
+
export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, scrollToTop, hasNextPage, }) => {
|
|
5
5
|
const renderAssetItem = useCallback(({ name, ticker, id }) => (React.createElement(AssetItem, { name: name, ticker: ticker, id: id, onClick: onClick })), [onClick]);
|
|
6
|
-
return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem }));
|
|
6
|
+
return (React.createElement(VirtualList, { itemHeight: 70, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem, scrollToTop: scrollToTop, hasNextPage: hasNextPage }));
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=AssetList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,
|
|
1
|
+
{"version":3,"file":"AssetList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/AssetList/AssetList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,MAAM,EACN,OAAO,EACP,uBAAuB,EACvB,WAAW,EACX,WAAW,GAOZ,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAa,EAAE,EAAE,CAAC,CACnC,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,MAAM,EACb,uBAAuB,EAAE,uBAAuB,EAChD,UAAU,EAAE,eAAe,EAC3B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBzC,eAAO,MAAM,GAAG;;cAKJ,SAAS;uBAcpB,CAAC"}
|
|
@@ -9,6 +9,7 @@ const Wrapper = styled.div `
|
|
|
9
9
|
border-radius: var(--radius-xs);
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
background-color: var(--colors-surface-transparent-subdued-default);
|
|
12
|
+
flex-shrink: 0;
|
|
12
13
|
`;
|
|
13
14
|
export const Tag = ({ textTransform = "none", children, }) => {
|
|
14
15
|
return (React.createElement(Wrapper, { "data-testid": "tag" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,4CAA4C,EAC5C,wCAAwC,EACxC,WAAW,EACX,cAAc,CACf;;;;;;;CAOF,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAClB,aAAa,GAAG,MAAM,EACtB,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,OAAO,mBAAa,KAAK;QACxB,oBAAC,IAAI,IACH,KAAK,EAAC,+CAA+C,EACrD,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,MAAM,EACjB,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACJ,CACC,CACX,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -46,7 +46,11 @@ type VirtualListProps<T> = {
|
|
|
46
46
|
* The array of items which will be rendered
|
|
47
47
|
*/
|
|
48
48
|
items: T[];
|
|
49
|
+
/**
|
|
50
|
+
* When set to true, the list will scroll to the top
|
|
51
|
+
*/
|
|
52
|
+
scrollToTop?: boolean;
|
|
49
53
|
};
|
|
50
|
-
export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold,
|
|
54
|
+
export declare const VirtualList: <T>({ itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, items, onVisibleItemsScrollEnd, renderItem, scrollToTop, }: VirtualListProps<T>) => React.JSX.Element;
|
|
51
55
|
export {};
|
|
52
56
|
//# sourceMappingURL=VirtualList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAYF,eAAO,MAAM,WAAW,+IAWrB,iBAAiB,CAAC,CAAC,sBA0GrB,CAAC"}
|
|
@@ -1,34 +1,60 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from "react";
|
|
1
|
+
import React, { useEffect, useRef, useCallback } from "react";
|
|
2
2
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
3
3
|
import { Flex, InfiniteLoader } from "../../../components";
|
|
4
4
|
const DefaultLoadingComponent = () => (React.createElement(Flex, { justifyContent: "center", alignItems: "center", height: "76px" },
|
|
5
5
|
React.createElement(InfiniteLoader, null)));
|
|
6
|
-
|
|
6
|
+
function easeInOutCubic(t) {
|
|
7
|
+
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
8
|
+
}
|
|
9
|
+
export const VirtualList = ({ itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, items, onVisibleItemsScrollEnd, renderItem, scrollToTop = false, }) => {
|
|
7
10
|
const parentRef = useRef(null);
|
|
11
|
+
const scrollToFn = useCallback((offset, options, instance) => {
|
|
12
|
+
const element = instance.scrollElement;
|
|
13
|
+
if (!element)
|
|
14
|
+
return;
|
|
15
|
+
const duration = options.behavior === "smooth" ? 100 : 0;
|
|
16
|
+
if (duration === 0) {
|
|
17
|
+
element.scrollTop = offset;
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
const startTime = performance.now();
|
|
21
|
+
const startTop = element.scrollTop;
|
|
22
|
+
const distanceToScroll = offset - startTop;
|
|
23
|
+
const scrollStep = (currentTime) => {
|
|
24
|
+
const elapsed = currentTime - startTime;
|
|
25
|
+
const progress = Math.min(elapsed / duration, 1);
|
|
26
|
+
const easedProgress = easeInOutCubic(progress);
|
|
27
|
+
element.scrollTop = startTop + distanceToScroll * easedProgress;
|
|
28
|
+
if (progress < 1) {
|
|
29
|
+
requestAnimationFrame(scrollStep);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
requestAnimationFrame(scrollStep);
|
|
33
|
+
}, []);
|
|
8
34
|
const rowVirtualizer = useVirtualizer({
|
|
9
35
|
count: hasNextPage ? items.length + 1 : items.length,
|
|
36
|
+
overscan,
|
|
10
37
|
getScrollElement: () => parentRef.current,
|
|
11
38
|
estimateSize: () => itemHeight,
|
|
12
|
-
|
|
39
|
+
scrollToFn,
|
|
13
40
|
});
|
|
41
|
+
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (scrollToTop && parentRef.current) {
|
|
44
|
+
scrollToFn(0, { behavior: "smooth" }, { scrollElement: parentRef.current });
|
|
45
|
+
}
|
|
46
|
+
}, [scrollToTop, scrollToFn]);
|
|
14
47
|
useEffect(() => {
|
|
15
|
-
|
|
16
|
-
if (!items.length)
|
|
48
|
+
if (!virtualItems.length)
|
|
17
49
|
return;
|
|
18
|
-
const lastItem =
|
|
19
|
-
if (lastItem.index >=
|
|
50
|
+
const lastItem = virtualItems[virtualItems.length - 1];
|
|
51
|
+
if (lastItem.index >= virtualItems.length - 1 - threshold &&
|
|
20
52
|
hasNextPage &&
|
|
21
53
|
!isLoading &&
|
|
22
54
|
onVisibleItemsScrollEnd) {
|
|
23
55
|
onVisibleItemsScrollEnd();
|
|
24
56
|
}
|
|
25
|
-
}, [
|
|
26
|
-
hasNextPage,
|
|
27
|
-
onVisibleItemsScrollEnd,
|
|
28
|
-
items.length,
|
|
29
|
-
isLoading,
|
|
30
|
-
rowVirtualizer.getVirtualItems(),
|
|
31
|
-
]);
|
|
57
|
+
}, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);
|
|
32
58
|
const showCustomLoadingComponent = !!LoadingComponent;
|
|
33
59
|
return (React.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto", scrollbarWidth: "none" } },
|
|
34
60
|
React.createElement("div", { style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0-nightly.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
78
|
"@ledgerhq/crypto-icons-ui": "^1.14.0",
|
|
79
|
-
"@ledgerhq/ui
|
|
80
|
-
"@ledgerhq/
|
|
79
|
+
"@ledgerhq/icons-ui": "^0.10.0",
|
|
80
|
+
"@ledgerhq/ui-shared": "^0.3.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": ">=17.0.2",
|