@elliemae/ds-virtual-list 3.0.0-next.2 → 3.0.0-next.6

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.
Files changed (56) hide show
  1. package/dist/cjs/VirtualList.js +62 -0
  2. package/dist/cjs/VirtualList.js.map +7 -0
  3. package/dist/cjs/VirtualListDataTestID.js +37 -0
  4. package/dist/cjs/VirtualListDataTestID.js.map +7 -0
  5. package/dist/cjs/hooks/useVirtualList.js +57 -0
  6. package/dist/cjs/hooks/useVirtualList.js.map +7 -0
  7. package/dist/cjs/index.d.js +27 -0
  8. package/dist/cjs/index.d.js.map +7 -0
  9. package/dist/cjs/index.js +28 -0
  10. package/dist/cjs/index.js.map +7 -0
  11. package/dist/cjs/parts/List.js +66 -0
  12. package/dist/cjs/parts/List.js.map +7 -0
  13. package/dist/cjs/props.js +57 -0
  14. package/dist/cjs/props.js.map +7 -0
  15. package/dist/cjs/styled.js +55 -0
  16. package/dist/cjs/styled.js.map +7 -0
  17. package/dist/esm/VirtualList.js +35 -0
  18. package/dist/esm/VirtualList.js.map +7 -0
  19. package/dist/esm/VirtualListDataTestID.js +8 -0
  20. package/dist/esm/VirtualListDataTestID.js.map +7 -0
  21. package/dist/esm/hooks/useVirtualList.js +28 -0
  22. package/dist/esm/hooks/useVirtualList.js.map +7 -0
  23. package/dist/esm/index.d.js +2 -0
  24. package/dist/esm/index.d.js.map +7 -0
  25. package/dist/esm/index.js +3 -0
  26. package/dist/esm/index.js.map +7 -0
  27. package/dist/esm/parts/List.js +37 -0
  28. package/dist/esm/parts/List.js.map +7 -0
  29. package/dist/esm/props.js +28 -0
  30. package/dist/esm/props.js.map +7 -0
  31. package/dist/esm/styled.js +26 -0
  32. package/dist/esm/styled.js.map +7 -0
  33. package/package.json +37 -28
  34. package/cjs/VirtualList.js +0 -36
  35. package/cjs/VirtualListDataTestID.js +0 -9
  36. package/cjs/hooks/useVirtualList.js +0 -43
  37. package/cjs/index.d.js +0 -2
  38. package/cjs/index.js +0 -10
  39. package/cjs/parts/List.js +0 -52
  40. package/cjs/props.js +0 -27
  41. package/cjs/styled.js +0 -23
  42. package/esm/VirtualList.js +0 -27
  43. package/esm/VirtualListDataTestID.js +0 -5
  44. package/esm/hooks/useVirtualList.js +0 -35
  45. package/esm/index.d.js +0 -1
  46. package/esm/index.js +0 -1
  47. package/esm/parts/List.js +0 -43
  48. package/esm/props.js +0 -22
  49. package/esm/styled.js +0 -13
  50. package/types/VirtualList.d.ts +0 -5
  51. package/types/VirtualListDataTestID.d.ts +0 -3
  52. package/types/hooks/useVirtualList.d.ts +0 -9
  53. package/types/index.d.ts +0 -1
  54. package/types/parts/List.d.ts +0 -10
  55. package/types/props.d.ts +0 -20
  56. package/types/styled.d.ts +0 -5
@@ -0,0 +1,37 @@
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { uid } from "uid";
4
+ import { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from "../styled";
5
+ import { LIST_DATA_TESTID } from "../VirtualListDataTestID";
6
+ import { useVirtualList } from "../hooks/useVirtualList";
7
+ const List = (props) => {
8
+ const { parentRef, virtualItems, filteredChildren, totalSize } = useVirtualList(props);
9
+ const [dynamicRerenderWorkaround, setDynamicRerenderWorkaround] = React2.useState(uid(6));
10
+ const virtualChildren = React2.useMemo(() => virtualItems.map((virtualItem) => {
11
+ const { index, measureRef, start } = virtualItem;
12
+ const style = {
13
+ transform: `translateY(${start}px)`
14
+ };
15
+ return /* @__PURE__ */ React2.createElement(VirtualItemStyled, {
16
+ ref: measureRef,
17
+ style,
18
+ role: "listitem",
19
+ key: `ds-virtual-list-item-${uid(6)}`
20
+ }, filteredChildren[index]);
21
+ }), [filteredChildren, virtualItems]);
22
+ React2.useEffect(() => {
23
+ setDynamicRerenderWorkaround(uid(6));
24
+ }, [filteredChildren]);
25
+ return /* @__PURE__ */ React2.createElement(StyledContainerContentList, {
26
+ key: `ds-virtual-list-${dynamicRerenderWorkaround}`,
27
+ ref: parentRef,
28
+ "data-testid": LIST_DATA_TESTID.CONTAINER,
29
+ role: "list"
30
+ }, /* @__PURE__ */ React2.createElement(StyledVirtualList, {
31
+ height: `${totalSize}px`
32
+ }, virtualChildren));
33
+ };
34
+ export {
35
+ List
36
+ };
37
+ //# sourceMappingURL=List.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/List.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { uid } from 'uid';\nimport { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from '../styled';\n\nimport { LIST_DATA_TESTID } from '../VirtualListDataTestID';\n\nimport { DSVirtualListProps } from '../index.d';\nimport { useVirtualList } from '../hooks/useVirtualList';\n\n/**\n * List component: renders a list of items\n * Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role\n *\n * @param {DSVirtualListProps} props\n * @returns JSX\n */\nexport const List: React.FC<DSVirtualListProps> = (props: DSVirtualListProps) => {\n const { parentRef, virtualItems, filteredChildren, totalSize } = useVirtualList(props);\n const [dynamicRerenderWorkaround, setDynamicRerenderWorkaround] = React.useState(uid(6));\n const virtualChildren = React.useMemo(\n () =>\n virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const style = {\n transform: `translateY(${start}px)`,\n };\n return (\n <VirtualItemStyled ref={measureRef} style={style} role=\"listitem\" key={`ds-virtual-list-item-${uid(6)}`}>\n {filteredChildren[index]}\n </VirtualItemStyled>\n );\n }),\n [filteredChildren, virtualItems],\n );\n React.useEffect(() => {\n setDynamicRerenderWorkaround(uid(6));\n }, [filteredChildren]);\n return (\n <StyledContainerContentList\n key={`ds-virtual-list-${dynamicRerenderWorkaround}`}\n ref={parentRef}\n data-testid={LIST_DATA_TESTID.CONTAINER}\n role=\"list\"\n >\n <StyledVirtualList height={`${totalSize}px`}>{virtualChildren}</StyledVirtualList>\n </StyledContainerContentList>\n );\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGA;AASO,MAAM,OAAqC,CAAC,UAA8B;AAC/E,QAAM,EAAE,WAAW,cAAc,kBAAkB,cAAc,eAAe;AAChF,QAAM,CAAC,2BAA2B,gCAAgC,OAAM,SAAS,IAAI;AACrF,QAAM,kBAAkB,OAAM,QAC5B,MACE,aAAa,IAAI,CAAC,gBAAgB;AAChC,UAAM,EAAE,OAAO,YAAY,UAAU;AACrC,UAAM,QAAQ;AAAA,MACZ,WAAW,cAAc;AAAA;AAE3B,WACE,qCAAC,mBAAD;AAAA,MAAmB,KAAK;AAAA,MAAY;AAAA,MAAc,MAAK;AAAA,MAAW,KAAK,wBAAwB,IAAI;AAAA,OAChG,iBAAiB;AAAA,MAI1B,CAAC,kBAAkB;AAErB,SAAM,UAAU,MAAM;AACpB,iCAA6B,IAAI;AAAA,KAChC,CAAC;AACJ,SACE,qCAAC,4BAAD;AAAA,IACE,KAAK,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,eAAa,iBAAiB;AAAA,IAC9B,MAAK;AAAA,KAEL,qCAAC,mBAAD;AAAA,IAAmB,QAAQ,GAAG;AAAA,KAAgB;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,28 @@
1
+ import * as React from "react";
2
+ import { noop } from "lodash";
3
+ import { PropTypes } from "react-desc";
4
+ const actionRef = {
5
+ scrollTo: PropTypes.func.description("Scroll to a index inside the list")
6
+ };
7
+ const DSVirtualListSchema = {
8
+ children: PropTypes.arrayOf(PropTypes.node).description("Children list").defaultValue([]),
9
+ actionRef: PropTypes.shape({
10
+ current: PropTypes.shape(actionRef)
11
+ }).description(`Action reference
12
+
13
+ scrollTo: Function(index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void
14
+ `)
15
+ };
16
+ const defaultProps = {
17
+ children: [],
18
+ actionRef: {
19
+ current: {
20
+ scrollTo: noop
21
+ }
22
+ }
23
+ };
24
+ export {
25
+ DSVirtualListSchema,
26
+ defaultProps
27
+ };
28
+ //# sourceMappingURL=props.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { noop } from 'lodash';\nimport { PropTypes } from 'react-desc';\n\nconst actionRef = {\n scrollTo: PropTypes.func.description('Scroll to a index inside the list'),\n};\nexport const DSVirtualListSchema = {\n children: PropTypes.arrayOf(PropTypes.node).description('Children list').defaultValue([]),\n actionRef: PropTypes.shape({\n current: PropTypes.shape(actionRef),\n }).description(`Action reference\n \nscrollTo: Function(index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void\n `),\n};\n\nexport const defaultProps = {\n children: [],\n actionRef: {\n current: {\n scrollTo: noop,\n },\n },\n};\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,YAAY;AAAA,EAChB,UAAU,UAAU,KAAK,YAAY;AAAA;AAEhC,MAAM,sBAAsB;AAAA,EACjC,UAAU,UAAU,QAAQ,UAAU,MAAM,YAAY,iBAAiB,aAAa;AAAA,EACtF,WAAW,UAAU,MAAM;AAAA,IACzB,SAAS,UAAU,MAAM;AAAA,KACxB,YAAY;AAAA;AAAA;AAAA;AAAA;AAMV,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,WAAW;AAAA,IACT,SAAS;AAAA,MACP,UAAU;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,26 @@
1
+ import * as React from "react";
2
+ import styled from "styled-components";
3
+ const StyledContainerContentList = styled.div`
4
+ width: 100%;
5
+ height: 100%;
6
+ padding-bottom: 0;
7
+ overflow-y: auto;
8
+ overflow-x: hidden;
9
+ `;
10
+ const StyledVirtualList = styled.div`
11
+ width: 100%;
12
+ height: ${(props) => props.height};
13
+ position: relative;
14
+ `;
15
+ const VirtualItemStyled = styled.div`
16
+ position: absolute;
17
+ top: 0;
18
+ left: 0;
19
+ width: 100%;
20
+ `;
21
+ export {
22
+ StyledContainerContentList,
23
+ StyledVirtualList,
24
+ VirtualItemStyled
25
+ };
26
+ //# sourceMappingURL=styled.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const StyledContainerContentList = styled.div`\n width: 100%;\n height: 100%;\n padding-bottom: 0;\n overflow-y: auto;\n overflow-x: hidden;\n`;\nexport const StyledVirtualList = styled.div<{ height: string }>`\n width: 100%;\n height: ${(props) => props.height};\n position: relative;\n`;\nexport const VirtualItemStyled = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n`;\n"],
5
+ "mappings": "AAAA;ACAA;AAEO,MAAM,6BAA6B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,oBAAoB,OAAO;AAAA;AAAA,YAE5B,CAAC,UAAU,MAAM;AAAA;AAAA;AAGtB,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,39 +1,42 @@
1
1
  {
2
2
  "name": "@elliemae/ds-virtual-list",
3
- "version": "3.0.0-next.2",
3
+ "version": "3.0.0-next.6",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Virtual List",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "module": "./dist/esm/index.js",
10
+ "main": "./dist/cjs/index.js",
11
+ "types": "./dist/types/index.d.ts",
9
12
  "exports": {
10
13
  ".": {
11
- "import": "./esm/index.js",
12
- "require": "./cjs/index.js"
14
+ "import": "./dist/esm/index.js",
15
+ "require": "./dist/cjs/index.js"
13
16
  },
14
17
  "./VirtualListDataTestID": {
15
- "import": "./esm/VirtualListDataTestID.js",
16
- "require": "./cjs/VirtualListDataTestID.js"
18
+ "import": "./dist/esm/VirtualListDataTestID.js",
19
+ "require": "./dist/cjs/VirtualListDataTestID.js"
17
20
  },
18
21
  "./VirtualList": {
19
- "import": "./esm/VirtualList.js",
20
- "require": "./cjs/VirtualList.js"
22
+ "import": "./dist/esm/VirtualList.js",
23
+ "require": "./dist/cjs/VirtualList.js"
21
24
  },
22
25
  "./styled": {
23
- "import": "./esm/styled.js",
24
- "require": "./cjs/styled.js"
26
+ "import": "./dist/esm/styled.js",
27
+ "require": "./dist/cjs/styled.js"
25
28
  },
26
29
  "./props": {
27
- "import": "./esm/props.js",
28
- "require": "./cjs/props.js"
30
+ "import": "./dist/esm/props.js",
31
+ "require": "./dist/cjs/props.js"
29
32
  },
30
33
  "./parts/List": {
31
- "import": "./esm/parts/List.js",
32
- "require": "./cjs/parts/List.js"
34
+ "import": "./dist/esm/parts/List.js",
35
+ "require": "./dist/cjs/parts/List.js"
33
36
  },
34
37
  "./hooks/useVirtualList": {
35
- "import": "./esm/hooks/useVirtualList.js",
36
- "require": "./cjs/hooks/useVirtualList.js"
38
+ "import": "./dist/esm/hooks/useVirtualList.js",
39
+ "require": "./dist/cjs/hooks/useVirtualList.js"
37
40
  }
38
41
  },
39
42
  "sideEffects": [
@@ -45,18 +48,18 @@
45
48
  "url": "https://git.elliemae.io/platform-ui/dimsum.git"
46
49
  },
47
50
  "engines": {
48
- "npm": ">=7",
49
- "node": ">=14"
51
+ "pnpm": ">=6",
52
+ "node": ">=16"
50
53
  },
51
54
  "author": "ICE MT",
52
- "scripts": {
53
- "prebuild": "exit 0",
54
- "predev": "exit 0",
55
- "build": "node ../../scripts/build/build.js",
56
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
55
+ "jestSonar": {
56
+ "sonar56x": true,
57
+ "reportPath": "reports",
58
+ "reportFile": "tests.xml",
59
+ "indent": 4
57
60
  },
58
61
  "dependencies": {
59
- "@elliemae/ds-props-helpers": "3.0.0-next.2",
62
+ "@elliemae/ds-props-helpers": "3.0.0-next.6",
60
63
  "prop-types": "~15.7.2",
61
64
  "react-desc": "~4.1.3",
62
65
  "react-virtual": "~2.3.2"
@@ -72,7 +75,13 @@
72
75
  },
73
76
  "publishConfig": {
74
77
  "access": "public",
75
- "directory": "dist",
76
- "generateSubmodules": true
78
+ "typeSafety": false
79
+ },
80
+ "scripts": {
81
+ "test": "node ../../scripts/testing/test.mjs",
82
+ "lint": "node ../../scripts/lint.mjs",
83
+ "dts": "node ../../scripts/dts.mjs",
84
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
85
+ "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch"
77
86
  }
78
87
  }
@@ -1,36 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
- require('react');
12
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
- var reactDesc = require('react-desc');
14
- var List = require('./parts/List.js');
15
- var props = require('./props.js');
16
- var jsxRuntime = require('react/jsx-runtime');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
-
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
-
24
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
-
26
- const DSVirtualList = props$1 => {
27
- const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
28
- dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.DSVirtualListSchema);
29
- return /*#__PURE__*/jsxRuntime.jsx(List.List, _objectSpread({}, propsWithDefault));
30
- };
31
-
32
- const DSVirtualListWithSchema = reactDesc.describe(DSVirtualList).description('DSVirtualList');
33
- DSVirtualListWithSchema.propTypes = props.DSVirtualListSchema;
34
-
35
- exports.DSVirtualList = DSVirtualList;
36
- exports.DSVirtualListWithSchema = DSVirtualListWithSchema;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const LIST_DATA_TESTID = {
6
- CONTAINER: 'virtual-list-container'
7
- };
8
-
9
- exports.LIST_DATA_TESTID = LIST_DATA_TESTID;
@@ -1,43 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.constructor.js');
9
- require('core-js/modules/esnext.async-iterator.to-array.js');
10
- require('core-js/modules/esnext.iterator.to-array.js');
11
- var React = require('react');
12
- var reactVirtual = require('react-virtual');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
-
18
- const useVirtualList = config => {
19
- const {
20
- children,
21
- actionRef
22
- } = config;
23
- const parentRef = React__default["default"].useRef();
24
- const filteredChildren = React__default["default"].useMemo(() => React__default["default"].Children.toArray(children).filter(child => child), [children]);
25
- const useVirtualHelpers = reactVirtual.useVirtual({
26
- size: filteredChildren.length,
27
- parentRef,
28
- overscan: 15
29
- });
30
- React__default["default"].useEffect(() => {
31
- if (actionRef) {
32
- actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
33
- }
34
- }, [actionRef, useVirtualHelpers]);
35
- return {
36
- parentRef,
37
- virtualItems: useVirtualHelpers.virtualItems,
38
- filteredChildren,
39
- totalSize: useVirtualHelpers.totalSize
40
- };
41
- };
42
-
43
- exports.useVirtualList = useVirtualList;
package/cjs/index.d.js DELETED
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
package/cjs/index.js DELETED
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var VirtualList = require('./VirtualList.js');
6
-
7
-
8
-
9
- exports.DSVirtualList = VirtualList.DSVirtualList;
10
- exports.DSVirtualListWithSchema = VirtualList.DSVirtualListWithSchema;
package/cjs/parts/List.js DELETED
@@ -1,52 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx2 = require('@babel/runtime/helpers/jsx');
6
- require('core-js/modules/esnext.async-iterator.map.js');
7
- require('core-js/modules/esnext.iterator.map.js');
8
- var React = require('react');
9
- var styled = require('../styled.js');
10
- var VirtualListDataTestID = require('../VirtualListDataTestID.js');
11
- var useVirtualList = require('../hooks/useVirtualList.js');
12
- var jsxRuntime = require('react/jsx-runtime');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
17
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
-
19
- const List = props => {
20
- const {
21
- parentRef,
22
- virtualItems,
23
- filteredChildren,
24
- totalSize
25
- } = useVirtualList.useVirtualList(props);
26
- const virtualChildren = React__default["default"].useMemo(() => virtualItems.map(virtualItem => {
27
- const {
28
- index,
29
- measureRef,
30
- start
31
- } = virtualItem;
32
- const style = {
33
- transform: "translateY(".concat(start, "px)")
34
- };
35
- return /*#__PURE__*/jsxRuntime.jsx(styled.VirtualItemStyled, {
36
- ref: measureRef,
37
- style: style,
38
- role: "listitem",
39
- children: filteredChildren[index]
40
- });
41
- }), [filteredChildren, virtualItems]);
42
- return /*#__PURE__*/jsxRuntime.jsx(styled.StyledContainerContentList, {
43
- ref: parentRef,
44
- "data-testid": VirtualListDataTestID.LIST_DATA_TESTID.CONTAINER,
45
- role: "list",
46
- children: /*#__PURE__*/_jsx2__default["default"](styled.StyledVirtualList, {
47
- height: "".concat(totalSize, "px")
48
- }, void 0, virtualChildren)
49
- });
50
- };
51
-
52
- exports.List = List;
package/cjs/props.js DELETED
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var lodash = require('lodash');
6
- var reactDesc = require('react-desc');
7
-
8
- const actionRef = {
9
- scrollTo: reactDesc.PropTypes.func.description('Scroll to a index inside the list')
10
- };
11
- const DSVirtualListSchema = {
12
- children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.node).description('Children list').defaultValue([]),
13
- actionRef: reactDesc.PropTypes.shape({
14
- current: reactDesc.PropTypes.shape(actionRef)
15
- }).description("Action reference\n \nscrollTo: Function(index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void\n ")
16
- };
17
- const defaultProps = {
18
- children: [],
19
- actionRef: {
20
- current: {
21
- scrollTo: lodash.noop
22
- }
23
- }
24
- };
25
-
26
- exports.DSVirtualListSchema = DSVirtualListSchema;
27
- exports.defaultProps = defaultProps;
package/cjs/styled.js DELETED
@@ -1,23 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var styled = require('styled-components');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
-
11
- const StyledContainerContentList = /*#__PURE__*/styled__default["default"].div.withConfig({
12
- componentId: "sc-1fdc3np-0"
13
- })(["width:100%;height:100%;padding-bottom:0;overflow-y:auto;overflow-x:hidden;"]);
14
- const StyledVirtualList = /*#__PURE__*/styled__default["default"].div.withConfig({
15
- componentId: "sc-1fdc3np-1"
16
- })(["width:100%;height:", ";position:relative;"], props => props.height);
17
- const VirtualItemStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
18
- componentId: "sc-1fdc3np-2"
19
- })(["position:absolute;top:0;left:0;width:100%;"]);
20
-
21
- exports.StyledContainerContentList = StyledContainerContentList;
22
- exports.StyledVirtualList = StyledVirtualList;
23
- exports.VirtualItemStyled = VirtualItemStyled;
@@ -1,27 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import 'react';
8
- import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
9
- import { describe } from 'react-desc';
10
- import { List } from './parts/List.js';
11
- import { DSVirtualListSchema, defaultProps } from './props.js';
12
- import { jsx } from 'react/jsx-runtime';
13
-
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
-
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
-
18
- const DSVirtualList = props => {
19
- const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
20
- useValidateTypescriptPropTypes(propsWithDefault, DSVirtualListSchema);
21
- return /*#__PURE__*/jsx(List, _objectSpread({}, propsWithDefault));
22
- };
23
-
24
- const DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');
25
- DSVirtualListWithSchema.propTypes = DSVirtualListSchema;
26
-
27
- export { DSVirtualList, DSVirtualListWithSchema };
@@ -1,5 +0,0 @@
1
- const LIST_DATA_TESTID = {
2
- CONTAINER: 'virtual-list-container'
3
- };
4
-
5
- export { LIST_DATA_TESTID };
@@ -1,35 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.constructor.js';
5
- import 'core-js/modules/esnext.async-iterator.to-array.js';
6
- import 'core-js/modules/esnext.iterator.to-array.js';
7
- import React from 'react';
8
- import { useVirtual } from 'react-virtual';
9
-
10
- const useVirtualList = config => {
11
- const {
12
- children,
13
- actionRef
14
- } = config;
15
- const parentRef = React.useRef();
16
- const filteredChildren = React.useMemo(() => React.Children.toArray(children).filter(child => child), [children]);
17
- const useVirtualHelpers = useVirtual({
18
- size: filteredChildren.length,
19
- parentRef,
20
- overscan: 15
21
- });
22
- React.useEffect(() => {
23
- if (actionRef) {
24
- actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
25
- }
26
- }, [actionRef, useVirtualHelpers]);
27
- return {
28
- parentRef,
29
- virtualItems: useVirtualHelpers.virtualItems,
30
- filteredChildren,
31
- totalSize: useVirtualHelpers.totalSize
32
- };
33
- };
34
-
35
- export { useVirtualList };
package/esm/index.d.js DELETED
@@ -1 +0,0 @@
1
-
package/esm/index.js DELETED
@@ -1 +0,0 @@
1
- export { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';
package/esm/parts/List.js DELETED
@@ -1,43 +0,0 @@
1
- import _jsx2 from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/esnext.async-iterator.map.js';
3
- import 'core-js/modules/esnext.iterator.map.js';
4
- import React from 'react';
5
- import { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from '../styled.js';
6
- import { LIST_DATA_TESTID } from '../VirtualListDataTestID.js';
7
- import { useVirtualList } from '../hooks/useVirtualList.js';
8
- import { jsx } from 'react/jsx-runtime';
9
-
10
- const List = props => {
11
- const {
12
- parentRef,
13
- virtualItems,
14
- filteredChildren,
15
- totalSize
16
- } = useVirtualList(props);
17
- const virtualChildren = React.useMemo(() => virtualItems.map(virtualItem => {
18
- const {
19
- index,
20
- measureRef,
21
- start
22
- } = virtualItem;
23
- const style = {
24
- transform: "translateY(".concat(start, "px)")
25
- };
26
- return /*#__PURE__*/jsx(VirtualItemStyled, {
27
- ref: measureRef,
28
- style: style,
29
- role: "listitem",
30
- children: filteredChildren[index]
31
- });
32
- }), [filteredChildren, virtualItems]);
33
- return /*#__PURE__*/jsx(StyledContainerContentList, {
34
- ref: parentRef,
35
- "data-testid": LIST_DATA_TESTID.CONTAINER,
36
- role: "list",
37
- children: /*#__PURE__*/_jsx2(StyledVirtualList, {
38
- height: "".concat(totalSize, "px")
39
- }, void 0, virtualChildren)
40
- });
41
- };
42
-
43
- export { List };
package/esm/props.js DELETED
@@ -1,22 +0,0 @@
1
- import { noop } from 'lodash';
2
- import { PropTypes } from 'react-desc';
3
-
4
- const actionRef = {
5
- scrollTo: PropTypes.func.description('Scroll to a index inside the list')
6
- };
7
- const DSVirtualListSchema = {
8
- children: PropTypes.arrayOf(PropTypes.node).description('Children list').defaultValue([]),
9
- actionRef: PropTypes.shape({
10
- current: PropTypes.shape(actionRef)
11
- }).description("Action reference\n \nscrollTo: Function(index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void\n ")
12
- };
13
- const defaultProps = {
14
- children: [],
15
- actionRef: {
16
- current: {
17
- scrollTo: noop
18
- }
19
- }
20
- };
21
-
22
- export { DSVirtualListSchema, defaultProps };
package/esm/styled.js DELETED
@@ -1,13 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- const StyledContainerContentList = /*#__PURE__*/styled.div.withConfig({
4
- componentId: "sc-1fdc3np-0"
5
- })(["width:100%;height:100%;padding-bottom:0;overflow-y:auto;overflow-x:hidden;"]);
6
- const StyledVirtualList = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "sc-1fdc3np-1"
8
- })(["width:100%;height:", ";position:relative;"], props => props.height);
9
- const VirtualItemStyled = /*#__PURE__*/styled.div.withConfig({
10
- componentId: "sc-1fdc3np-2"
11
- })(["position:absolute;top:0;left:0;width:100%;"]);
12
-
13
- export { StyledContainerContentList, StyledVirtualList, VirtualItemStyled };
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import { DSVirtualListProps } from './index.d';
3
- declare const DSVirtualList: React.ComponentType<DSVirtualListProps>;
4
- declare const DSVirtualListWithSchema: any;
5
- export { DSVirtualList, DSVirtualListWithSchema };
@@ -1,3 +0,0 @@
1
- export declare const LIST_DATA_TESTID: {
2
- CONTAINER: string;
3
- };
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { VirtualItem } from 'react-virtual';
3
- import { DSVirtualListProps } from '../index.d';
4
- export declare const useVirtualList: (config: DSVirtualListProps) => {
5
- parentRef: React.MutableRefObject<HTMLDivElement>;
6
- virtualItems: VirtualItem[];
7
- filteredChildren: React.ReactNode[];
8
- totalSize: number;
9
- };
package/types/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './VirtualList';
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- import { DSVirtualListProps } from '../index.d';
3
- /**
4
- * List component: renders a list of items
5
- * Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role
6
- *
7
- * @param {DSVirtualListProps} props
8
- * @returns JSX
9
- */
10
- export declare const List: React.FC<DSVirtualListProps>;