@ledgerhq/react-ui 0.25.0-next.0 → 0.25.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/AssetItem/AssetItem.js +4 -2
- package/lib/cjs/pre-ldls/components/AssetItem/AssetItem.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.js +12 -3
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.js.map +2 -2
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js +5 -1
- package/lib/cjs/pre-ldls/components/AssetList/AssetList.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Input/Input.js +2 -1
- package/lib/cjs/pre-ldls/components/Input/Input.js.map +2 -2
- package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js +2 -0
- package/lib/cjs/pre-ldls/components/NetworkItem/NetworkItem.js.map +2 -2
- package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts +2 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/AssetItem/AssetItem.js +4 -3
- package/lib/pre-ldls/components/AssetItem/AssetItem.js.map +1 -1
- package/lib/pre-ldls/components/AssetList/AssetList.d.ts +2 -1
- package/lib/pre-ldls/components/AssetList/AssetList.d.ts.map +1 -1
- package/lib/pre-ldls/components/AssetList/AssetList.js +3 -3
- package/lib/pre-ldls/components/AssetList/AssetList.js.map +1 -1
- package/lib/pre-ldls/components/Input/Input.d.ts.map +1 -1
- package/lib/pre-ldls/components/Input/Input.js +2 -1
- package/lib/pre-ldls/components/Input/Input.js.map +1 -1
- package/lib/pre-ldls/components/NetworkItem/NetworkItem.d.ts.map +1 -1
- package/lib/pre-ldls/components/NetworkItem/NetworkItem.js +2 -1
- package/lib/pre-ldls/components/NetworkItem/NetworkItem.js.map +1 -1
- package/package.json +1 -1
|
@@ -54,6 +54,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
54
54
|
${(0, import_libs.withTokens)(
|
|
55
55
|
"spacing-xxs",
|
|
56
56
|
"margin-s",
|
|
57
|
+
"radius-s",
|
|
57
58
|
"colors-content-subdued-default-default",
|
|
58
59
|
"colors-content-default-default",
|
|
59
60
|
"colors-surface-transparent-hover",
|
|
@@ -63,6 +64,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
63
64
|
display: flex;
|
|
64
65
|
padding: var(--spacing-xxs);
|
|
65
66
|
cursor: pointer;
|
|
67
|
+
border-radius: var(--radius-s, 8px);
|
|
66
68
|
|
|
67
69
|
:hover {
|
|
68
70
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -78,8 +80,8 @@ const InfoWrapper = import_styled_components.default.div`
|
|
|
78
80
|
justify-content: center;
|
|
79
81
|
margin-left: var(--margin-s);
|
|
80
82
|
`;
|
|
81
|
-
const AssetItem = ({ name, ticker, onClick }) => {
|
|
82
|
-
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker }) }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
|
|
83
|
+
const AssetItem = ({ name, ticker, id, onClick }) => {
|
|
84
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
|
|
83
85
|
import_components.Text,
|
|
84
86
|
{
|
|
85
87
|
variant: "largeLineHeight",
|
|
@@ -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\";\n\nexport type AssetType = {\n name: string;\n ticker: string;\n};\n\ntype AssetItemProps = AssetType & {\n onClick: (asset: AssetType) => void;\n};\n\nconst TempAssetBadge = () => (\n // TODO: To be replaced with LIVE-18221\n <div style={{ display: \"flex\", alignItems: \"center\" }}>\n <span\n style={{\n height: 48,\n width: 48,\n borderRadius: 48,\n backgroundColor: \"grey\",\n display: \"inline-block\",\n }}\n />\n </div>\n);\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-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\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, onClick }: AssetItemProps) => {\n return (\n <Wrapper onClick={() => onClick({ name, ticker })}>\n <TempAssetBadge />\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;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\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 TempAssetBadge = () => (\n // TODO: To be replaced with LIVE-18221\n <div style={{ display: \"flex\", alignItems: \"center\" }}>\n <span\n style={{\n height: 48,\n width: 48,\n borderRadius: 48,\n backgroundColor: \"grey\",\n display: \"inline-block\",\n }}\n />\n </div>\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\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 <TempAssetBadge />\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;AAYrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,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;AAgBH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,YAAY,CAAC,EAAE,MAAM,QAAQ,IAAI,QAAQ,MAAsB;AAC1E,SACE,6BAAAD,QAAA,cAAC,WAAQ,SAAS,MAAM,QAAQ,EAAE,MAAM,QAAQ,GAAG,CAAC,KAClD,6BAAAA,QAAA,cAAC,oBAAe,GAChB,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;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": ["React", "styled"]
|
|
7
7
|
}
|
|
@@ -36,12 +36,21 @@ var import_AssetItem = require("../AssetItem/AssetItem");
|
|
|
36
36
|
var import_VirtualList = require("../VirtualList/VirtualList");
|
|
37
37
|
const AssetList = ({
|
|
38
38
|
assets,
|
|
39
|
-
onClick
|
|
39
|
+
onClick,
|
|
40
|
+
onVisibleItemsScrollEnd
|
|
40
41
|
}) => {
|
|
41
42
|
const renderAssetItem = (0, import_react.useCallback)(
|
|
42
|
-
({ name, ticker }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, onClick }),
|
|
43
|
+
({ name, ticker, id }) => /* @__PURE__ */ import_react.default.createElement(import_AssetItem.AssetItem, { name, ticker, id, onClick }),
|
|
43
44
|
[onClick]
|
|
44
45
|
);
|
|
45
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
46
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
47
|
+
import_VirtualList.VirtualList,
|
|
48
|
+
{
|
|
49
|
+
itemHeight: 64,
|
|
50
|
+
items: assets,
|
|
51
|
+
onVisibleItemsScrollEnd,
|
|
52
|
+
renderItem: renderAssetItem
|
|
53
|
+
}
|
|
54
|
+
);
|
|
46
55
|
};
|
|
47
56
|
//# sourceMappingURL=AssetList.js.map
|
|
@@ -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}: {\n assets: AssetType[];\n onClick: (asset: AssetType) => void;\n}) => {\n const renderAssetItem = useCallback(\n ({ name, ticker }: AssetType) => <AssetItem name={name} ticker={ticker} onClick={onClick}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,uBAAqC;AACrC,yBAA4B;AAErB,MAAM,YAAY,CAAC;AAAA,EACxB;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}: {\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={64}\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,MAIM;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;AAAA,EACd;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -45,7 +45,11 @@ const meta = {
|
|
|
45
45
|
title: "PreLdls/Components/AssetList",
|
|
46
46
|
tags: ["autodocs"],
|
|
47
47
|
args: {
|
|
48
|
-
assets: Array.from({ length: 50 }).map((_, i) => ({
|
|
48
|
+
assets: Array.from({ length: 50 }).map((_, i) => ({
|
|
49
|
+
name: `Bitcoin ${i}`,
|
|
50
|
+
ticker: "BTC",
|
|
51
|
+
id: `bitcoin-${i}`
|
|
52
|
+
})),
|
|
49
53
|
onClick: testFn
|
|
50
54
|
}
|
|
51
55
|
};
|
|
@@ -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) => ({
|
|
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,
|
|
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-${i}`,\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\" });\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,WAAW,CAAC;AAAA,IAClB,EAAE;AAAA,IACF,SAAS;AAAA,EACX;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,MAAM,CAAC;AAAA,EAChF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -44,7 +44,6 @@ const Wrapper = import_styled_components.default.div`
|
|
|
44
44
|
)}
|
|
45
45
|
|
|
46
46
|
display: flex;
|
|
47
|
-
width: 328px;
|
|
48
47
|
height: 40px;
|
|
49
48
|
min-width: 328px;
|
|
50
49
|
padding: 0px var(--spacing-s, 16px);
|
|
@@ -54,9 +53,11 @@ const Wrapper = import_styled_components.default.div`
|
|
|
54
53
|
border-radius: var(--radius-s, 8px);
|
|
55
54
|
background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));
|
|
56
55
|
color: var(--colors-content-subdued-default-default);
|
|
56
|
+
overflow: hidden;
|
|
57
57
|
`;
|
|
58
58
|
const StyledInput = import_styled_components.default.input`
|
|
59
59
|
background: none;
|
|
60
|
+
cursor: text;
|
|
60
61
|
border: none;
|
|
61
62
|
width: 100%;
|
|
62
63
|
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Input/Input.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\ntype Props = Readonly<React.ComponentProps<\"input\"> & { icon?: React.ReactNode }>;\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-s\",\n \"spacing-xxs\",\n \"radius-s\",\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAI3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;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;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\ntype Props = Readonly<React.ComponentProps<\"input\"> & { icon?: React.ReactNode }>;\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-s\",\n \"spacing-xxs\",\n \"radius-s\",\n \"colors-surface-transparent-subdued-default\",\n \"colors-content-subdued-default-default\",\n )}\n\n display: flex;\n height: 40px;\n min-width: 328px;\n padding: 0px var(--spacing-s, 16px);\n align-items: center;\n gap: var(--spacing-xxs, 8px);\n\n border-radius: var(--radius-s, 8px);\n background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));\n color: var(--colors-content-subdued-default-default);\n overflow: hidden;\n`;\n\nconst StyledInput = styled.input`\n background: none;\n cursor: text;\n border: none;\n width: 100%;\n`;\n\nexport const Input = React.forwardRef<HTMLInputElement, Props>(\n ({ type = \"text\", icon = null, ...props }, ref) => {\n return (\n <Wrapper>\n {icon}\n <StyledInput {...props} type={type} ref={ref} />\n </Wrapper>\n );\n },\n);\nInput.displayName = \"Input\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAI3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB;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;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,QAAQ,aAAAC,QAAM;AAAA,EACzB,CAAC,EAAE,OAAO,QAAQ,OAAO,MAAM,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE,6BAAAA,QAAA,cAAC,eACE,MACD,6BAAAA,QAAA,cAAC,eAAa,GAAG,OAAO,MAAY,KAAU,CAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;",
|
|
6
6
|
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -54,6 +54,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
54
54
|
${(0, import_libs.withTokens)(
|
|
55
55
|
"spacing-xxs",
|
|
56
56
|
"margin-s",
|
|
57
|
+
"radius-s",
|
|
57
58
|
"colors-content-default-default",
|
|
58
59
|
"colors-surface-transparent-hover",
|
|
59
60
|
"colors-surface-transparent-pressed"
|
|
@@ -61,6 +62,7 @@ const Wrapper = import_styled_components.default.div`
|
|
|
61
62
|
display: flex;
|
|
62
63
|
padding: var(--spacing-xxs);
|
|
63
64
|
cursor: pointer;
|
|
65
|
+
border-radius: var(--radius-s, 8px);
|
|
64
66
|
|
|
65
67
|
:hover {
|
|
66
68
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\n\ntype NetworkItemProps = {\n name: string;\n onClick: () => void;\n};\n\nconst TempAssetBadge = () => (\n // TODO: To be replaced with LIVE-18221\n <div style={{ display: \"flex\", alignItems: \"center\" }}>\n <span\n style={{\n height: 48,\n width: 48,\n borderRadius: 48,\n backgroundColor: \"grey\",\n display: \"inline-block\",\n }}\n />\n </div>\n);\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\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 NetworkItem = ({ name, onClick }: NetworkItemProps) => {\n return (\n <Wrapper onClick={onClick}>\n <TempAssetBadge />\n <InfoWrapper>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n >\n {name}\n </Text>\n </InfoWrapper>\n </Wrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAOrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;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\";\n\ntype NetworkItemProps = {\n name: string;\n onClick: () => void;\n};\n\nconst TempAssetBadge = () => (\n // TODO: To be replaced with LIVE-18221\n <div style={{ display: \"flex\", alignItems: \"center\" }}>\n <span\n style={{\n height: 48,\n width: 48,\n borderRadius: 48,\n backgroundColor: \"grey\",\n display: \"inline-block\",\n }}\n />\n </div>\n);\n\nconst Wrapper = styled.div`\n ${withTokens(\n \"spacing-xxs\",\n \"margin-s\",\n \"radius-s\",\n \"colors-content-default-default\",\n \"colors-surface-transparent-hover\",\n \"colors-surface-transparent-pressed\",\n )}\n display: flex;\n padding: var(--spacing-xxs);\n cursor: pointer;\n border-radius: var(--radius-s, 8px);\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 NetworkItem = ({ name, onClick }: NetworkItemProps) => {\n return (\n <Wrapper onClick={onClick}>\n <TempAssetBadge />\n <InfoWrapper>\n <Text\n variant=\"largeLineHeight\"\n fontWeight=\"semiBold\"\n color=\"var(--colors-content-default-default)\"\n >\n {name}\n </Text>\n </InfoWrapper>\n </Wrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAOrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB;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;AAeH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,cAAc,CAAC,EAAE,MAAM,QAAQ,MAAwB;AAClE,SACE,6BAAAD,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,oBAAe,GAChB,6BAAAA,QAAA,cAAC,mBACC,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": ["React", "styled"]
|
|
7
7
|
}
|
|
@@ -2,10 +2,11 @@ import React from "react";
|
|
|
2
2
|
export type AssetType = {
|
|
3
3
|
name: string;
|
|
4
4
|
ticker: string;
|
|
5
|
+
id: string;
|
|
5
6
|
};
|
|
6
7
|
type AssetItemProps = AssetType & {
|
|
7
8
|
onClick: (asset: AssetType) => void;
|
|
8
9
|
};
|
|
9
|
-
export declare const AssetItem: ({ name, ticker, onClick }: AssetItemProps) => React.JSX.Element;
|
|
10
|
+
export declare const AssetItem: ({ name, ticker, id, onClick }: AssetItemProps) => React.JSX.Element;
|
|
10
11
|
export {};
|
|
11
12
|
//# sourceMappingURL=AssetItem.d.ts.map
|
|
@@ -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;AAK1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,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;AAK1B,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;AAiDF,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBAsBtE,CAAC"}
|
|
@@ -13,11 +13,12 @@ React.createElement("div", { style: { display: "flex", alignItems: "center" } },
|
|
|
13
13
|
display: "inline-block",
|
|
14
14
|
} })));
|
|
15
15
|
const Wrapper = styled.div `
|
|
16
|
-
${withTokens("spacing-xxs", "margin-s", "colors-content-subdued-default-default", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
|
|
16
|
+
${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-subdued-default-default", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
|
|
17
17
|
|
|
18
18
|
display: flex;
|
|
19
19
|
padding: var(--spacing-xxs);
|
|
20
20
|
cursor: pointer;
|
|
21
|
+
border-radius: var(--radius-s, 8px);
|
|
21
22
|
|
|
22
23
|
:hover {
|
|
23
24
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -33,8 +34,8 @@ const InfoWrapper = styled.div `
|
|
|
33
34
|
justify-content: center;
|
|
34
35
|
margin-left: var(--margin-s);
|
|
35
36
|
`;
|
|
36
|
-
export const AssetItem = ({ name, ticker, onClick }) => {
|
|
37
|
-
return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker }) },
|
|
37
|
+
export const AssetItem = ({ name, ticker, id, onClick }) => {
|
|
38
|
+
return (React.createElement(Wrapper, { onClick: () => onClick({ name, ticker, id }) },
|
|
38
39
|
React.createElement(TempAssetBadge, null),
|
|
39
40
|
React.createElement(InfoWrapper, null,
|
|
40
41
|
React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name),
|
|
@@ -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;
|
|
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;AAY3C,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AAC3B,uCAAuC;AACvC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;IACnD,8BACE,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,OAAO,EAAE,cAAc;SACxB,GACD,CACE,CACP,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,wCAAwC,EACxC,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;;CAcF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,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,cAAc,OAAG;QAClB,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,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,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { AssetType } from "../AssetItem/AssetItem";
|
|
3
|
-
export declare const AssetList: ({ assets, onClick, }: {
|
|
3
|
+
export declare const AssetList: ({ assets, onClick, onVisibleItemsScrollEnd, }: {
|
|
4
4
|
assets: AssetType[];
|
|
5
5
|
onClick: (asset: AssetType) => void;
|
|
6
|
+
onVisibleItemsScrollEnd?: (() => void) | undefined;
|
|
6
7
|
}) => React.JSX.Element;
|
|
7
8
|
//# 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;YAKZ,SAAS,EAAE;qBACF,SAAS,KAAK,IAAI;qCACH,IAAI;uBAiBrC,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, }) => {
|
|
5
|
-
const renderAssetItem = useCallback(({ name, ticker }) => React.createElement(AssetItem, { name: name, ticker: ticker, onClick: onClick }), [onClick]);
|
|
6
|
-
return React.createElement(VirtualList, { itemHeight: 64, items: assets, renderItem: renderAssetItem });
|
|
4
|
+
export const AssetList = ({ assets, onClick, onVisibleItemsScrollEnd, }) => {
|
|
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: 64, items: assets, onVisibleItemsScrollEnd: onVisibleItemsScrollEnd, renderItem: renderAssetItem }));
|
|
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,
|
|
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,GAKxB,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,GAC3B,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,eAAO,MAAM,KAAK;WA/B6C,MAAM,SAAS;mDAwC7E,CAAC"}
|
|
@@ -5,7 +5,6 @@ const Wrapper = styled.div `
|
|
|
5
5
|
${withTokens("spacing-s", "spacing-xxs", "radius-s", "colors-surface-transparent-subdued-default", "colors-content-subdued-default-default")}
|
|
6
6
|
|
|
7
7
|
display: flex;
|
|
8
|
-
width: 328px;
|
|
9
8
|
height: 40px;
|
|
10
9
|
min-width: 328px;
|
|
11
10
|
padding: 0px var(--spacing-s, 16px);
|
|
@@ -15,9 +14,11 @@ const Wrapper = styled.div `
|
|
|
15
14
|
border-radius: var(--radius-s, 8px);
|
|
16
15
|
background: var(--colors-surface-transparent-subdued-default, rgba(0, 0, 0, 0.03));
|
|
17
16
|
color: var(--colors-content-subdued-default-default);
|
|
17
|
+
overflow: hidden;
|
|
18
18
|
`;
|
|
19
19
|
const StyledInput = styled.input `
|
|
20
20
|
background: none;
|
|
21
|
+
cursor: text;
|
|
21
22
|
border: none;
|
|
22
23
|
width: 100%;
|
|
23
24
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAIxC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,WAAW,EACX,aAAa,EACb,UAAU,EACV,4CAA4C,EAC5C,wCAAwC,CACzC;;;;;;;;;;;;;CAaF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAIxC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,WAAW,EACX,aAAa,EACb,UAAU,EACV,4CAA4C,EAC5C,wCAAwC,CACzC;;;;;;;;;;;;;CAaF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK/B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChD,OAAO,CACL,oBAAC,OAAO;QACL,IAAI;QACL,oBAAC,WAAW,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,GAAI,CACxC,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;
|
|
1
|
+
{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA+CF,eAAO,MAAM,WAAW,sBAAuB,gBAAgB,sBAe9D,CAAC"}
|
|
@@ -13,10 +13,11 @@ React.createElement("div", { style: { display: "flex", alignItems: "center" } },
|
|
|
13
13
|
display: "inline-block",
|
|
14
14
|
} })));
|
|
15
15
|
const Wrapper = styled.div `
|
|
16
|
-
${withTokens("spacing-xxs", "margin-s", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
|
|
16
|
+
${withTokens("spacing-xxs", "margin-s", "radius-s", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
|
|
17
17
|
display: flex;
|
|
18
18
|
padding: var(--spacing-xxs);
|
|
19
19
|
cursor: pointer;
|
|
20
|
+
border-radius: var(--radius-s, 8px);
|
|
20
21
|
|
|
21
22
|
:hover {
|
|
22
23
|
background-color: var(--colors-surface-transparent-hover);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.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;AAO3C,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AAC3B,uCAAuC;AACvC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;IACnD,8BACE,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,OAAO,EAAE,cAAc;SACxB,GACD,CACE,CACP,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC
|
|
1
|
+
{"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.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;AAO3C,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AAC3B,uCAAuC;AACvC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;IACnD,8BACE,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,OAAO,EAAE,cAAc;SACxB,GACD,CACE,CACP,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,aAAa,EACb,UAAU,EACV,UAAU,EACV,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;;CAaF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;IACjE,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,cAAc,OAAG;QAClB,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,IAAI,CACA,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}
|