@elliemae/ds-virtual-list 1.60.0 → 2.0.0-alpha.13
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/cjs/VirtualList.js +19 -16
- package/cjs/VirtualListDataTestID.js +1 -2
- package/cjs/hooks/useVirtualList.js +18 -15
- package/cjs/index.d.js +0 -1
- package/cjs/index.js +0 -12
- package/cjs/parts/List.js +34 -38
- package/cjs/props.js +3 -4
- package/cjs/styled.js +4 -7
- package/esm/VirtualList.js +17 -14
- package/esm/VirtualListDataTestID.js +1 -2
- package/esm/hooks/useVirtualList.js +18 -15
- package/esm/index.d.js +0 -1
- package/esm/index.js +0 -12
- package/esm/parts/List.js +32 -37
- package/esm/props.js +3 -4
- package/esm/styled.js +4 -7
- package/package.json +56 -16
- package/types/VirtualList.d.ts +5 -0
- package/types/VirtualListDataTestID.d.ts +3 -0
- package/types/hooks/useVirtualList.d.ts +9 -0
- package/types/index.d.ts +1 -0
- package/types/parts/List.d.ts +10 -0
- package/types/props.d.ts +20 -0
- package/types/styled.d.ts +5 -0
- package/VirtualList/package.json +0 -10
- package/VirtualListDataTestID/package.json +0 -10
- package/cjs/VirtualList.js.map +0 -1
- package/cjs/VirtualListDataTestID.js.map +0 -1
- package/cjs/hooks/useVirtualList.js.map +0 -1
- package/cjs/index.d.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/cjs/parts/List.js.map +0 -1
- package/cjs/props.js.map +0 -1
- package/cjs/styled.js.map +0 -1
- package/esm/VirtualList.js.map +0 -1
- package/esm/VirtualListDataTestID.js.map +0 -1
- package/esm/hooks/useVirtualList.js.map +0 -1
- package/esm/index.d.js.map +0 -1
- package/esm/index.js.map +0 -1
- package/esm/parts/List.js.map +0 -1
- package/esm/props.js.map +0 -1
- package/esm/styled.js.map +0 -1
- package/hooks/useVirtualList/package.json +0 -10
- package/parts/List/package.json +0 -10
- package/props/package.json +0 -10
- package/styled/package.json +0 -10
package/cjs/VirtualList.js
CHANGED
|
@@ -2,32 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
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');
|
|
6
12
|
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
7
13
|
var reactDesc = require('react-desc');
|
|
8
|
-
var
|
|
14
|
+
var List = require('./parts/List.js');
|
|
9
15
|
var props = require('./props.js');
|
|
10
|
-
require('
|
|
11
|
-
require('styled-components');
|
|
12
|
-
require('./VirtualListDataTestID.js');
|
|
13
|
-
require('./hooks/useVirtualList.js');
|
|
14
|
-
require('react-virtual');
|
|
15
|
-
require('lodash');
|
|
16
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
16
17
|
|
|
17
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
19
|
|
|
19
|
-
var
|
|
20
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
21
|
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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));
|
|
25
30
|
};
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
var DSVirtualListWithSchema = reactDesc.describe(DSVirtualList).description('DSVirtualList');
|
|
32
|
+
const DSVirtualListWithSchema = reactDesc.describe(DSVirtualList).description('DSVirtualList');
|
|
29
33
|
DSVirtualListWithSchema.propTypes = props.DSVirtualListSchema;
|
|
30
34
|
|
|
31
35
|
exports.DSVirtualList = DSVirtualList;
|
|
32
36
|
exports.DSVirtualListWithSchema = DSVirtualListWithSchema;
|
|
33
|
-
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -2,9 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const LIST_DATA_TESTID = {
|
|
6
6
|
CONTAINER: 'virtual-list-container'
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
exports.LIST_DATA_TESTID = LIST_DATA_TESTID;
|
|
10
|
-
//# sourceMappingURL=VirtualListDataTestID.js.map
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
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');
|
|
5
11
|
var React = require('react');
|
|
6
12
|
var reactVirtual = require('react-virtual');
|
|
7
13
|
|
|
@@ -9,32 +15,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
15
|
|
|
10
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
17
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}, [children]);
|
|
21
|
-
var useVirtualHelpers = reactVirtual.useVirtual({
|
|
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({
|
|
22
26
|
size: filteredChildren.length,
|
|
23
|
-
parentRef
|
|
27
|
+
parentRef,
|
|
24
28
|
overscan: 15
|
|
25
29
|
});
|
|
26
|
-
React__default[
|
|
30
|
+
React__default["default"].useEffect(() => {
|
|
27
31
|
if (actionRef) {
|
|
28
32
|
actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
|
|
29
33
|
}
|
|
30
34
|
}, [actionRef, useVirtualHelpers]);
|
|
31
35
|
return {
|
|
32
|
-
parentRef
|
|
36
|
+
parentRef,
|
|
33
37
|
virtualItems: useVirtualHelpers.virtualItems,
|
|
34
|
-
filteredChildren
|
|
38
|
+
filteredChildren,
|
|
35
39
|
totalSize: useVirtualHelpers.totalSize
|
|
36
40
|
};
|
|
37
41
|
};
|
|
38
42
|
|
|
39
43
|
exports.useVirtualList = useVirtualList;
|
|
40
|
-
//# sourceMappingURL=useVirtualList.js.map
|
package/cjs/index.d.js
CHANGED
package/cjs/index.js
CHANGED
|
@@ -3,20 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var VirtualList = require('./VirtualList.js');
|
|
6
|
-
require('react');
|
|
7
|
-
require('@elliemae/ds-props-helpers');
|
|
8
|
-
require('react-desc');
|
|
9
|
-
require('./parts/List.js');
|
|
10
|
-
require('./styled.js');
|
|
11
|
-
require('styled-components');
|
|
12
|
-
require('./VirtualListDataTestID.js');
|
|
13
|
-
require('./hooks/useVirtualList.js');
|
|
14
|
-
require('react-virtual');
|
|
15
|
-
require('./props.js');
|
|
16
|
-
require('lodash');
|
|
17
6
|
|
|
18
7
|
|
|
19
8
|
|
|
20
9
|
exports.DSVirtualList = VirtualList.DSVirtualList;
|
|
21
10
|
exports.DSVirtualListWithSchema = VirtualList.DSVirtualListWithSchema;
|
|
22
|
-
//# sourceMappingURL=index.js.map
|
package/cjs/parts/List.js
CHANGED
|
@@ -2,55 +2,51 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
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');
|
|
5
8
|
var React = require('react');
|
|
6
9
|
var styled = require('../styled.js');
|
|
7
10
|
var VirtualListDataTestID = require('../VirtualListDataTestID.js');
|
|
8
|
-
var
|
|
9
|
-
require('
|
|
10
|
-
require('react-virtual');
|
|
11
|
+
var useVirtualList = require('../hooks/useVirtualList.js');
|
|
12
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
11
13
|
|
|
12
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
15
|
|
|
16
|
+
var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
|
|
14
17
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
transform: "translateY(".concat(start, "px)")
|
|
38
|
-
};
|
|
39
|
-
return /*#__PURE__*/React__default['default'].createElement(styled.VirtualItemStyled, {
|
|
40
|
-
ref: measureRef,
|
|
41
|
-
style: style,
|
|
42
|
-
role: "listitem"
|
|
43
|
-
}, filteredChildren[index]);
|
|
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]
|
|
44
40
|
});
|
|
45
|
-
}, [filteredChildren, virtualItems]);
|
|
46
|
-
return /*#__PURE__*/
|
|
41
|
+
}), [filteredChildren, virtualItems]);
|
|
42
|
+
return /*#__PURE__*/jsxRuntime.jsx(styled.StyledContainerContentList, {
|
|
47
43
|
ref: parentRef,
|
|
48
44
|
"data-testid": VirtualListDataTestID.LIST_DATA_TESTID.CONTAINER,
|
|
49
|
-
role: "list"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
role: "list",
|
|
46
|
+
children: /*#__PURE__*/_jsx2__default["default"](styled.StyledVirtualList, {
|
|
47
|
+
height: "".concat(totalSize, "px")
|
|
48
|
+
}, void 0, virtualChildren)
|
|
49
|
+
});
|
|
53
50
|
};
|
|
54
51
|
|
|
55
52
|
exports.List = List;
|
|
56
|
-
//# sourceMappingURL=List.js.map
|
package/cjs/props.js
CHANGED
|
@@ -5,16 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var lodash = require('lodash');
|
|
6
6
|
var reactDesc = require('react-desc');
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const actionRef = {
|
|
9
9
|
scrollTo: reactDesc.PropTypes.func.description('Scroll to a index inside the list')
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
const DSVirtualListSchema = {
|
|
12
12
|
children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.node).description('Children list').defaultValue([]),
|
|
13
13
|
actionRef: reactDesc.PropTypes.shape({
|
|
14
14
|
current: reactDesc.PropTypes.shape(actionRef)
|
|
15
15
|
}).description("Action reference\n \nscrollTo: Function(index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void\n ")
|
|
16
16
|
};
|
|
17
|
-
|
|
17
|
+
const defaultProps = {
|
|
18
18
|
children: [],
|
|
19
19
|
actionRef: {
|
|
20
20
|
current: {
|
|
@@ -25,4 +25,3 @@ var defaultProps = {
|
|
|
25
25
|
|
|
26
26
|
exports.DSVirtualListSchema = DSVirtualListSchema;
|
|
27
27
|
exports.defaultProps = defaultProps;
|
|
28
|
-
//# sourceMappingURL=props.js.map
|
package/cjs/styled.js
CHANGED
|
@@ -8,19 +8,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
8
8
|
|
|
9
9
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
const StyledContainerContentList = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
12
12
|
componentId: "sc-1fdc3np-0"
|
|
13
13
|
})(["width:100%;height:100%;padding-bottom:0;overflow-y:auto;overflow-x:hidden;"]);
|
|
14
|
-
|
|
14
|
+
const StyledVirtualList = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
15
15
|
componentId: "sc-1fdc3np-1"
|
|
16
|
-
})(["width:100%;height:", ";position:relative;"],
|
|
17
|
-
|
|
18
|
-
});
|
|
19
|
-
var VirtualItemStyled = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
16
|
+
})(["width:100%;height:", ";position:relative;"], props => props.height);
|
|
17
|
+
const VirtualItemStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
20
18
|
componentId: "sc-1fdc3np-2"
|
|
21
19
|
})(["position:absolute;top:0;left:0;width:100%;"]);
|
|
22
20
|
|
|
23
21
|
exports.StyledContainerContentList = StyledContainerContentList;
|
|
24
22
|
exports.StyledVirtualList = StyledVirtualList;
|
|
25
23
|
exports.VirtualItemStyled = VirtualItemStyled;
|
|
26
|
-
//# sourceMappingURL=styled.js.map
|
package/esm/VirtualList.js
CHANGED
|
@@ -1,24 +1,27 @@
|
|
|
1
|
-
import
|
|
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';
|
|
2
8
|
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
|
|
3
9
|
import { describe } from 'react-desc';
|
|
4
10
|
import { List } from './parts/List.js';
|
|
5
11
|
import { DSVirtualListSchema, defaultProps } from './props.js';
|
|
6
|
-
import '
|
|
7
|
-
import 'styled-components';
|
|
8
|
-
import './VirtualListDataTestID.js';
|
|
9
|
-
import './hooks/useVirtualList.js';
|
|
10
|
-
import 'react-virtual';
|
|
11
|
-
import 'lodash';
|
|
12
|
+
import { jsx } from 'react/jsx-runtime';
|
|
12
13
|
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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));
|
|
17
22
|
};
|
|
18
23
|
|
|
19
|
-
|
|
20
|
-
var DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');
|
|
24
|
+
const DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');
|
|
21
25
|
DSVirtualListWithSchema.propTypes = DSVirtualListSchema;
|
|
22
26
|
|
|
23
27
|
export { DSVirtualList, DSVirtualListWithSchema };
|
|
24
|
-
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1,32 +1,35 @@
|
|
|
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';
|
|
1
7
|
import React from 'react';
|
|
2
8
|
import { useVirtual } from 'react-virtual';
|
|
3
9
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}, [children]);
|
|
13
|
-
var useVirtualHelpers = useVirtual({
|
|
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({
|
|
14
18
|
size: filteredChildren.length,
|
|
15
|
-
parentRef
|
|
19
|
+
parentRef,
|
|
16
20
|
overscan: 15
|
|
17
21
|
});
|
|
18
|
-
React.useEffect(
|
|
22
|
+
React.useEffect(() => {
|
|
19
23
|
if (actionRef) {
|
|
20
24
|
actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;
|
|
21
25
|
}
|
|
22
26
|
}, [actionRef, useVirtualHelpers]);
|
|
23
27
|
return {
|
|
24
|
-
parentRef
|
|
28
|
+
parentRef,
|
|
25
29
|
virtualItems: useVirtualHelpers.virtualItems,
|
|
26
|
-
filteredChildren
|
|
30
|
+
filteredChildren,
|
|
27
31
|
totalSize: useVirtualHelpers.totalSize
|
|
28
32
|
};
|
|
29
33
|
};
|
|
30
34
|
|
|
31
35
|
export { useVirtualList };
|
|
32
|
-
//# sourceMappingURL=useVirtualList.js.map
|
package/esm/index.d.js
CHANGED
package/esm/index.js
CHANGED
|
@@ -1,13 +1 @@
|
|
|
1
1
|
export { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';
|
|
2
|
-
import 'react';
|
|
3
|
-
import '@elliemae/ds-props-helpers';
|
|
4
|
-
import 'react-desc';
|
|
5
|
-
import './parts/List.js';
|
|
6
|
-
import './styled.js';
|
|
7
|
-
import 'styled-components';
|
|
8
|
-
import './VirtualListDataTestID.js';
|
|
9
|
-
import './hooks/useVirtualList.js';
|
|
10
|
-
import 'react-virtual';
|
|
11
|
-
import './props.js';
|
|
12
|
-
import 'lodash';
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
package/esm/parts/List.js
CHANGED
|
@@ -1,48 +1,43 @@
|
|
|
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';
|
|
1
4
|
import React from 'react';
|
|
2
5
|
import { VirtualItemStyled, StyledContainerContentList, StyledVirtualList } from '../styled.js';
|
|
3
6
|
import { LIST_DATA_TESTID } from '../VirtualListDataTestID.js';
|
|
4
7
|
import { useVirtualList } from '../hooks/useVirtualList.js';
|
|
5
|
-
import '
|
|
6
|
-
import 'react-virtual';
|
|
8
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
transform: "translateY(".concat(start, "px)")
|
|
30
|
-
};
|
|
31
|
-
return /*#__PURE__*/React.createElement(VirtualItemStyled, {
|
|
32
|
-
ref: measureRef,
|
|
33
|
-
style: style,
|
|
34
|
-
role: "listitem"
|
|
35
|
-
}, filteredChildren[index]);
|
|
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]
|
|
36
31
|
});
|
|
37
|
-
}, [filteredChildren, virtualItems]);
|
|
38
|
-
return /*#__PURE__*/
|
|
32
|
+
}), [filteredChildren, virtualItems]);
|
|
33
|
+
return /*#__PURE__*/jsx(StyledContainerContentList, {
|
|
39
34
|
ref: parentRef,
|
|
40
35
|
"data-testid": LIST_DATA_TESTID.CONTAINER,
|
|
41
|
-
role: "list"
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
role: "list",
|
|
37
|
+
children: /*#__PURE__*/_jsx2(StyledVirtualList, {
|
|
38
|
+
height: "".concat(totalSize, "px")
|
|
39
|
+
}, void 0, virtualChildren)
|
|
40
|
+
});
|
|
45
41
|
};
|
|
46
42
|
|
|
47
43
|
export { List };
|
|
48
|
-
//# sourceMappingURL=List.js.map
|
package/esm/props.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { noop } from 'lodash';
|
|
2
2
|
import { PropTypes } from 'react-desc';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const actionRef = {
|
|
5
5
|
scrollTo: PropTypes.func.description('Scroll to a index inside the list')
|
|
6
6
|
};
|
|
7
|
-
|
|
7
|
+
const DSVirtualListSchema = {
|
|
8
8
|
children: PropTypes.arrayOf(PropTypes.node).description('Children list').defaultValue([]),
|
|
9
9
|
actionRef: PropTypes.shape({
|
|
10
10
|
current: PropTypes.shape(actionRef)
|
|
11
11
|
}).description("Action reference\n \nscrollTo: Function(index: number, { align: 'start' | 'center' | 'end' | 'auto' }) => void\n ")
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
const defaultProps = {
|
|
14
14
|
children: [],
|
|
15
15
|
actionRef: {
|
|
16
16
|
current: {
|
|
@@ -20,4 +20,3 @@ var defaultProps = {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
export { DSVirtualListSchema, defaultProps };
|
|
23
|
-
//# sourceMappingURL=props.js.map
|
package/esm/styled.js
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
const StyledContainerContentList = /*#__PURE__*/styled.div.withConfig({
|
|
4
4
|
componentId: "sc-1fdc3np-0"
|
|
5
5
|
})(["width:100%;height:100%;padding-bottom:0;overflow-y:auto;overflow-x:hidden;"]);
|
|
6
|
-
|
|
6
|
+
const StyledVirtualList = /*#__PURE__*/styled.div.withConfig({
|
|
7
7
|
componentId: "sc-1fdc3np-1"
|
|
8
|
-
})(["width:100%;height:", ";position:relative;"],
|
|
9
|
-
|
|
10
|
-
});
|
|
11
|
-
var VirtualItemStyled = /*#__PURE__*/styled.div.withConfig({
|
|
8
|
+
})(["width:100%;height:", ";position:relative;"], props => props.height);
|
|
9
|
+
const VirtualItemStyled = /*#__PURE__*/styled.div.withConfig({
|
|
12
10
|
componentId: "sc-1fdc3np-2"
|
|
13
11
|
})(["position:absolute;top:0;left:0;width:100%;"]);
|
|
14
12
|
|
|
15
13
|
export { StyledContainerContentList, StyledVirtualList, VirtualItemStyled };
|
|
16
|
-
//# sourceMappingURL=styled.js.map
|
package/package.json
CHANGED
|
@@ -1,38 +1,78 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-virtual-list",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.13",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"description": "
|
|
6
|
-
"
|
|
7
|
-
"
|
|
5
|
+
"description": "ICE MT - Dimsum - Virtual List",
|
|
6
|
+
"module": "./esm/index.js",
|
|
7
|
+
"main": "./cjs/index.js",
|
|
8
|
+
"types": "./types/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./esm/index.js",
|
|
12
|
+
"require": "./cjs/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./VirtualListDataTestID": {
|
|
15
|
+
"import": "./esm/VirtualListDataTestID.js",
|
|
16
|
+
"require": "./cjs/VirtualListDataTestID.js"
|
|
17
|
+
},
|
|
18
|
+
"./VirtualList": {
|
|
19
|
+
"import": "./esm/VirtualList.js",
|
|
20
|
+
"require": "./cjs/VirtualList.js"
|
|
21
|
+
},
|
|
22
|
+
"./styled": {
|
|
23
|
+
"import": "./esm/styled.js",
|
|
24
|
+
"require": "./cjs/styled.js"
|
|
25
|
+
},
|
|
26
|
+
"./props": {
|
|
27
|
+
"import": "./esm/props.js",
|
|
28
|
+
"require": "./cjs/props.js"
|
|
29
|
+
},
|
|
30
|
+
"./parts/List": {
|
|
31
|
+
"import": "./esm/parts/List.js",
|
|
32
|
+
"require": "./cjs/parts/List.js"
|
|
33
|
+
},
|
|
34
|
+
"./hooks/useVirtualList": {
|
|
35
|
+
"import": "./esm/hooks/useVirtualList.js",
|
|
36
|
+
"require": "./cjs/hooks/useVirtualList.js"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
8
39
|
"sideEffects": [
|
|
9
40
|
"*.css",
|
|
10
41
|
"*.scss"
|
|
11
42
|
],
|
|
43
|
+
"repository": {
|
|
44
|
+
"type": "git",
|
|
45
|
+
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
46
|
+
},
|
|
47
|
+
"engines": {
|
|
48
|
+
"npm": ">=7",
|
|
49
|
+
"node": ">=14"
|
|
50
|
+
},
|
|
51
|
+
"author": "ICE MT",
|
|
12
52
|
"scripts": {
|
|
13
|
-
"dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
|
|
14
53
|
"prebuild": "exit 0",
|
|
15
54
|
"predev": "exit 0",
|
|
16
|
-
"build": "node ../../scripts/build/build.js"
|
|
55
|
+
"build": "node ../../scripts/build/build.js",
|
|
56
|
+
"dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
|
|
17
57
|
},
|
|
18
58
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-
|
|
20
|
-
"@elliemae/ds-props-helpers": "1.60.0",
|
|
59
|
+
"@elliemae/ds-props-helpers": "2.0.0-alpha.13",
|
|
21
60
|
"prop-types": "~15.7.2",
|
|
22
|
-
"react-desc": "
|
|
23
|
-
"react-virtual": "
|
|
61
|
+
"react-desc": "~4.1.3",
|
|
62
|
+
"react-virtual": "~2.3.2"
|
|
24
63
|
},
|
|
25
64
|
"devDependencies": {
|
|
26
|
-
"styled-components": "~5.3.
|
|
65
|
+
"styled-components": "~5.3.3"
|
|
27
66
|
},
|
|
28
67
|
"peerDependencies": {
|
|
29
|
-
"lodash": "^4.17.
|
|
30
|
-
"react": "~17.0.
|
|
31
|
-
"react-dom": "^17.0.
|
|
32
|
-
"styled-components": "^5.3.
|
|
68
|
+
"lodash": "^4.17.21",
|
|
69
|
+
"react": "~17.0.2",
|
|
70
|
+
"react-dom": "^17.0.2",
|
|
71
|
+
"styled-components": "^5.3.3"
|
|
33
72
|
},
|
|
34
73
|
"publishConfig": {
|
|
35
74
|
"access": "public",
|
|
36
|
-
"directory": "dist"
|
|
75
|
+
"directory": "dist",
|
|
76
|
+
"generateSubmodules": true
|
|
37
77
|
}
|
|
38
78
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
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
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './VirtualList';
|
|
@@ -0,0 +1,10 @@
|
|
|
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>;
|
package/types/props.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
+
export declare const DSVirtualListSchema: {
|
|
3
|
+
children: {
|
|
4
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
5
|
+
};
|
|
6
|
+
actionRef: {
|
|
7
|
+
defaultValue<T = unknown>(arg: T): {
|
|
8
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
9
|
+
};
|
|
10
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare const defaultProps: {
|
|
14
|
+
children: never[];
|
|
15
|
+
actionRef: {
|
|
16
|
+
current: {
|
|
17
|
+
scrollTo: (...args: any[]) => void;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare const StyledContainerContentList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const StyledVirtualList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
3
|
+
height: string;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const VirtualItemStyled: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
package/VirtualList/package.json
DELETED
package/cjs/VirtualList.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","sources":["../../src/VirtualList.tsx"],"sourcesContent":["import React from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { describe } from 'react-desc';\nimport { List } from './parts/List';\nimport { DSVirtualListSchema, defaultProps } from './props';\nimport { DSVirtualListProps } from './index.d';\n\n\nconst DSVirtualList: React.ComponentType<DSVirtualListProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSVirtualListWithSchema.toTypescript());\n\n return <List {...propsWithDefault} />;\n};\n\nDSVirtualList.propTypes = DSVirtualListSchema;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListSchema;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n"],"names":["DSVirtualList","props","propsWithDefault","useMemoMergePropsWithDefault","defaultProps","useValidateTypescriptPropTypes","DSVirtualListWithSchema","toTypescript","React","List","propTypes","DSVirtualListSchema","describe","description"],"mappings":";;;;;;;;;;;;;;;;;;;;IAQMA,aAAsD,GAAG,SAAzDA,aAAyD,CAACC,OAAD,EAAW;AACxE,MAAMC,gBAAgB,GAAGC,2CAA4B,CAACF,OAAD,EAAQG,kBAAR,CAArD;AACAC,EAAAA,6CAA8B,CAACH,gBAAD,EAAmBI,uBAAuB,CAACC,YAAxB,EAAnB,CAA9B;AAEA,sBAAOC,wCAACC,eAAD,EAAUP,gBAAV,CAAP;AACD;;AAEDF,aAAa,CAACU,SAAd,GAA0BC,yBAA1B;IACML,uBAAuB,GAAGM,kBAAQ,CAACZ,aAAD,CAAR,CAAwBa,WAAxB,CAAoC,eAApC;AAChCP,uBAAuB,CAACI,SAAxB,GAAoCC,yBAApC;;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualListDataTestID.js","sources":["../../src/VirtualListDataTestID.tsx"],"sourcesContent":["export const LIST_DATA_TESTID = {\n CONTAINER: 'virtual-list-container',\n};\n"],"names":["LIST_DATA_TESTID","CONTAINER"],"mappings":";;;;IAAaA,gBAAgB,GAAG;AAC9BC,EAAAA,SAAS,EAAE;AADmB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualList.js","sources":["../../../src/hooks/useVirtualList.tsx"],"sourcesContent":["import React from 'react';\nimport { useVirtual, VirtualItem } from 'react-virtual';\nimport { DSVirtualListProps } from '../index.d';\n\nexport const useVirtualList = (\n config: DSVirtualListProps,\n): {\n parentRef: React.MutableRefObject<HTMLDivElement>;\n virtualItems: VirtualItem[];\n filteredChildren: React.ReactNode[];\n totalSize: number;\n} => {\n const { children, actionRef } = config;\n const parentRef = React.useRef<HTMLDivElement>();\n const filteredChildren = React.useMemo(\n () => React.Children.toArray(children).filter((child) => child),\n [children],\n ) as React.ReactNode[];\n const useVirtualHelpers = useVirtual({\n size: filteredChildren.length,\n parentRef,\n overscan: 15,\n });\n React.useEffect(() => {\n if (actionRef) {\n actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;\n }\n }, [actionRef, useVirtualHelpers]);\n\n return {\n parentRef,\n virtualItems: useVirtualHelpers.virtualItems,\n filteredChildren,\n totalSize: useVirtualHelpers.totalSize,\n };\n};\n"],"names":["useVirtualList","config","children","actionRef","parentRef","React","useRef","filteredChildren","useMemo","Children","toArray","filter","child","useVirtualHelpers","useVirtual","size","length","overscan","useEffect","current","scrollTo","scrollToIndex","virtualItems","totalSize"],"mappings":";;;;;;;;;;;IAIaA,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,MAD4B,EAOzB;AACH,MAAQC,QAAR,GAAgCD,MAAhC,CAAQC,QAAR;AAAA,MAAkBC,SAAlB,GAAgCF,MAAhC,CAAkBE,SAAlB;AACA,MAAMC,SAAS,GAAGC,yBAAK,CAACC,MAAN,EAAlB;AACA,MAAMC,gBAAgB,GAAGF,yBAAK,CAACG,OAAN,CACvB;AAAA,WAAMH,yBAAK,CAACI,QAAN,CAAeC,OAAf,CAAuBR,QAAvB,EAAiCS,MAAjC,CAAwC,UAACC,KAAD;AAAA,aAAWA,KAAX;AAAA,KAAxC,CAAN;AAAA,GADuB,EAEvB,CAACV,QAAD,CAFuB,CAAzB;AAIA,MAAMW,iBAAiB,GAAGC,uBAAU,CAAC;AACnCC,IAAAA,IAAI,EAAER,gBAAgB,CAACS,MADY;AAEnCZ,IAAAA,SAAS,EAATA,SAFmC;AAGnCa,IAAAA,QAAQ,EAAE;AAHyB,GAAD,CAApC;AAKAZ,EAAAA,yBAAK,CAACa,SAAN,CAAgB,YAAM;AACpB,QAAIf,SAAJ,EAAe;AACbA,MAAAA,SAAS,CAACgB,OAAV,CAAkBC,QAAlB,GAA6BP,iBAAiB,CAACQ,aAA/C;AACD;AACF,GAJD,EAIG,CAAClB,SAAD,EAAYU,iBAAZ,CAJH;AAMA,SAAO;AACLT,IAAAA,SAAS,EAATA,SADK;AAELkB,IAAAA,YAAY,EAAET,iBAAiB,CAACS,YAF3B;AAGLf,IAAAA,gBAAgB,EAAhBA,gBAHK;AAILgB,IAAAA,SAAS,EAAEV,iBAAiB,CAACU;AAJxB,GAAP;AAMD;;;;"}
|
package/cjs/index.d.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
package/cjs/parts/List.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../src/parts/List.tsx"],"sourcesContent":["import React from 'react';\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 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\">\n {filteredChildren[index]}\n </VirtualItemStyled>\n );\n }),\n [filteredChildren, virtualItems],\n );\n return (\n <StyledContainerContentList ref={parentRef} data-testid={LIST_DATA_TESTID.CONTAINER} role=\"list\">\n <StyledVirtualList height={`${totalSize}px`}>{virtualChildren}</StyledVirtualList>\n </StyledContainerContentList>\n );\n};\n"],"names":["List","props","useVirtualList","parentRef","virtualItems","filteredChildren","totalSize","virtualChildren","React","useMemo","map","virtualItem","index","measureRef","start","style","transform","VirtualItemStyled","StyledContainerContentList","LIST_DATA_TESTID","CONTAINER","StyledVirtualList"],"mappings":";;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;;IACaA,IAAkC,GAAG,SAArCA,IAAqC,CAACC,KAAD,EAA+B;AAC/E,wBAAiEC,mCAAc,CAACD,KAAD,CAA/E;AAAA,MAAQE,SAAR,mBAAQA,SAAR;AAAA,MAAmBC,YAAnB,mBAAmBA,YAAnB;AAAA,MAAiCC,gBAAjC,mBAAiCA,gBAAjC;AAAA,MAAmDC,SAAnD,mBAAmDA,SAAnD;;AACA,MAAMC,eAAe,GAAGC,yBAAK,CAACC,OAAN,CACtB;AAAA,WACEL,YAAY,CAACM,GAAb,CAAiB,UAACC,WAAD,EAAiB;AAChC,UAAQC,KAAR,GAAqCD,WAArC,CAAQC,KAAR;AAAA,UAAeC,UAAf,GAAqCF,WAArC,CAAeE,UAAf;AAAA,UAA2BC,KAA3B,GAAqCH,WAArC,CAA2BG,KAA3B;AACA,UAAMC,KAAK,GAAG;AACZC,QAAAA,SAAS,uBAAgBF,KAAhB;AADG,OAAd;AAGA,0BACEN,wCAACS,wBAAD;AAAmB,QAAA,GAAG,EAAEJ,UAAxB;AAAoC,QAAA,KAAK,EAAEE,KAA3C;AAAkD,QAAA,IAAI,EAAC;AAAvD,SACGV,gBAAgB,CAACO,KAAD,CADnB,CADF;AAKD,KAVD,CADF;AAAA,GADsB,EAatB,CAACP,gBAAD,EAAmBD,YAAnB,CAbsB,CAAxB;AAeA,sBACEI,wCAACU,iCAAD;AAA4B,IAAA,GAAG,EAAEf,SAAjC;AAA4C,mBAAagB,sCAAgB,CAACC,SAA1E;AAAqF,IAAA,IAAI,EAAC;AAA1F,kBACEZ,wCAACa,wBAAD;AAAmB,IAAA,MAAM,YAAKf,SAAL;AAAzB,KAA8CC,eAA9C,CADF,CADF;AAKD;;;;"}
|
package/cjs/props.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"props.js","sources":["../../src/props.tsx"],"sourcesContent":["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"],"names":["actionRef","scrollTo","PropTypes","func","description","DSVirtualListSchema","children","arrayOf","node","defaultValue","shape","current","defaultProps","noop"],"mappings":";;;;;;;AAGA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,QAAQ,EAAEC,mBAAS,CAACC,IAAV,CAAeC,WAAf,CAA2B,mCAA3B;AADM,CAAlB;IAGaC,mBAAmB,GAAG;AACjCC,EAAAA,QAAQ,EAAEJ,mBAAS,CAACK,OAAV,CAAkBL,mBAAS,CAACM,IAA5B,EAAkCJ,WAAlC,CAA8C,eAA9C,EAA+DK,YAA/D,CAA4E,EAA5E,CADuB;AAEjCT,EAAAA,SAAS,EAAEE,mBAAS,CAACQ,KAAV,CAAgB;AACzBC,IAAAA,OAAO,EAAET,mBAAS,CAACQ,KAAV,CAAgBV,SAAhB;AADgB,GAAhB,EAERI,WAFQ;AAFsB;IAUtBQ,YAAY,GAAG;AAC1BN,EAAAA,QAAQ,EAAE,EADgB;AAE1BN,EAAAA,SAAS,EAAE;AACTW,IAAAA,OAAO,EAAE;AACPV,MAAAA,QAAQ,EAAEY;AADH;AADA;AAFe;;;;;"}
|
package/cjs/styled.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../src/styled.tsx"],"sourcesContent":["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"],"names":["StyledContainerContentList","styled","div","StyledVirtualList","props","height","VirtualItemStyled"],"mappings":";;;;;;;;;;IAEaA,0BAA0B,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA;IAO1BC,iBAAiB,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA,kDAElB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAFkB;IAKjBC,iBAAiB,gBAAGL,0BAAM,CAACC,GAAV;AAAA;AAAA;;;;;;"}
|
package/esm/VirtualList.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","sources":["../../src/VirtualList.tsx"],"sourcesContent":["import React from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { describe } from 'react-desc';\nimport { List } from './parts/List';\nimport { DSVirtualListSchema, defaultProps } from './props';\nimport { DSVirtualListProps } from './index.d';\n\n\nconst DSVirtualList: React.ComponentType<DSVirtualListProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSVirtualListWithSchema.toTypescript());\n\n return <List {...propsWithDefault} />;\n};\n\nDSVirtualList.propTypes = DSVirtualListSchema;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListSchema;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n"],"names":["DSVirtualList","props","propsWithDefault","useMemoMergePropsWithDefault","defaultProps","useValidateTypescriptPropTypes","DSVirtualListWithSchema","toTypescript","propTypes","DSVirtualListSchema","describe","description"],"mappings":";;;;;;;;;;;;IAQMA,aAAsD,GAAG,SAAzDA,aAAyD,CAACC,KAAD,EAAW;AACxE,MAAMC,gBAAgB,GAAGC,4BAA4B,CAACF,KAAD,EAAQG,YAAR,CAArD;AACAC,EAAAA,8BAA8B,CAACH,gBAAD,EAAmBI,uBAAuB,CAACC,YAAxB,EAAnB,CAA9B;AAEA,sBAAO,oBAAC,IAAD,EAAUL,gBAAV,CAAP;AACD;;AAEDF,aAAa,CAACQ,SAAd,GAA0BC,mBAA1B;IACMH,uBAAuB,GAAGI,QAAQ,CAACV,aAAD,CAAR,CAAwBW,WAAxB,CAAoC,eAApC;AAChCL,uBAAuB,CAACE,SAAxB,GAAoCC,mBAApC;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualListDataTestID.js","sources":["../../src/VirtualListDataTestID.tsx"],"sourcesContent":["export const LIST_DATA_TESTID = {\n CONTAINER: 'virtual-list-container',\n};\n"],"names":["LIST_DATA_TESTID","CONTAINER"],"mappings":"IAAaA,gBAAgB,GAAG;AAC9BC,EAAAA,SAAS,EAAE;AADmB;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualList.js","sources":["../../../src/hooks/useVirtualList.tsx"],"sourcesContent":["import React from 'react';\nimport { useVirtual, VirtualItem } from 'react-virtual';\nimport { DSVirtualListProps } from '../index.d';\n\nexport const useVirtualList = (\n config: DSVirtualListProps,\n): {\n parentRef: React.MutableRefObject<HTMLDivElement>;\n virtualItems: VirtualItem[];\n filteredChildren: React.ReactNode[];\n totalSize: number;\n} => {\n const { children, actionRef } = config;\n const parentRef = React.useRef<HTMLDivElement>();\n const filteredChildren = React.useMemo(\n () => React.Children.toArray(children).filter((child) => child),\n [children],\n ) as React.ReactNode[];\n const useVirtualHelpers = useVirtual({\n size: filteredChildren.length,\n parentRef,\n overscan: 15,\n });\n React.useEffect(() => {\n if (actionRef) {\n actionRef.current.scrollTo = useVirtualHelpers.scrollToIndex;\n }\n }, [actionRef, useVirtualHelpers]);\n\n return {\n parentRef,\n virtualItems: useVirtualHelpers.virtualItems,\n filteredChildren,\n totalSize: useVirtualHelpers.totalSize,\n };\n};\n"],"names":["useVirtualList","config","children","actionRef","parentRef","React","useRef","filteredChildren","useMemo","Children","toArray","filter","child","useVirtualHelpers","useVirtual","size","length","overscan","useEffect","current","scrollTo","scrollToIndex","virtualItems","totalSize"],"mappings":";;;IAIaA,cAAc,GAAG,SAAjBA,cAAiB,CAC5BC,MAD4B,EAOzB;AACH,MAAQC,QAAR,GAAgCD,MAAhC,CAAQC,QAAR;AAAA,MAAkBC,SAAlB,GAAgCF,MAAhC,CAAkBE,SAAlB;AACA,MAAMC,SAAS,GAAGC,KAAK,CAACC,MAAN,EAAlB;AACA,MAAMC,gBAAgB,GAAGF,KAAK,CAACG,OAAN,CACvB;AAAA,WAAMH,KAAK,CAACI,QAAN,CAAeC,OAAf,CAAuBR,QAAvB,EAAiCS,MAAjC,CAAwC,UAACC,KAAD;AAAA,aAAWA,KAAX;AAAA,KAAxC,CAAN;AAAA,GADuB,EAEvB,CAACV,QAAD,CAFuB,CAAzB;AAIA,MAAMW,iBAAiB,GAAGC,UAAU,CAAC;AACnCC,IAAAA,IAAI,EAAER,gBAAgB,CAACS,MADY;AAEnCZ,IAAAA,SAAS,EAATA,SAFmC;AAGnCa,IAAAA,QAAQ,EAAE;AAHyB,GAAD,CAApC;AAKAZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,YAAM;AACpB,QAAIf,SAAJ,EAAe;AACbA,MAAAA,SAAS,CAACgB,OAAV,CAAkBC,QAAlB,GAA6BP,iBAAiB,CAACQ,aAA/C;AACD;AACF,GAJD,EAIG,CAAClB,SAAD,EAAYU,iBAAZ,CAJH;AAMA,SAAO;AACLT,IAAAA,SAAS,EAATA,SADK;AAELkB,IAAAA,YAAY,EAAET,iBAAiB,CAACS,YAF3B;AAGLf,IAAAA,gBAAgB,EAAhBA,gBAHK;AAILgB,IAAAA,SAAS,EAAEV,iBAAiB,CAACU;AAJxB,GAAP;AAMD;;;;"}
|
package/esm/index.d.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
package/esm/parts/List.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../src/parts/List.tsx"],"sourcesContent":["import React from 'react';\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 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\">\n {filteredChildren[index]}\n </VirtualItemStyled>\n );\n }),\n [filteredChildren, virtualItems],\n );\n return (\n <StyledContainerContentList ref={parentRef} data-testid={LIST_DATA_TESTID.CONTAINER} role=\"list\">\n <StyledVirtualList height={`${totalSize}px`}>{virtualChildren}</StyledVirtualList>\n </StyledContainerContentList>\n );\n};\n"],"names":["List","props","useVirtualList","parentRef","virtualItems","filteredChildren","totalSize","virtualChildren","React","useMemo","map","virtualItem","index","measureRef","start","style","transform","LIST_DATA_TESTID","CONTAINER"],"mappings":";;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;;IACaA,IAAkC,GAAG,SAArCA,IAAqC,CAACC,KAAD,EAA+B;AAC/E,wBAAiEC,cAAc,CAACD,KAAD,CAA/E;AAAA,MAAQE,SAAR,mBAAQA,SAAR;AAAA,MAAmBC,YAAnB,mBAAmBA,YAAnB;AAAA,MAAiCC,gBAAjC,mBAAiCA,gBAAjC;AAAA,MAAmDC,SAAnD,mBAAmDA,SAAnD;;AACA,MAAMC,eAAe,GAAGC,KAAK,CAACC,OAAN,CACtB;AAAA,WACEL,YAAY,CAACM,GAAb,CAAiB,UAACC,WAAD,EAAiB;AAChC,UAAQC,KAAR,GAAqCD,WAArC,CAAQC,KAAR;AAAA,UAAeC,UAAf,GAAqCF,WAArC,CAAeE,UAAf;AAAA,UAA2BC,KAA3B,GAAqCH,WAArC,CAA2BG,KAA3B;AACA,UAAMC,KAAK,GAAG;AACZC,QAAAA,SAAS,uBAAgBF,KAAhB;AADG,OAAd;AAGA,0BACE,oBAAC,iBAAD;AAAmB,QAAA,GAAG,EAAED,UAAxB;AAAoC,QAAA,KAAK,EAAEE,KAA3C;AAAkD,QAAA,IAAI,EAAC;AAAvD,SACGV,gBAAgB,CAACO,KAAD,CADnB,CADF;AAKD,KAVD,CADF;AAAA,GADsB,EAatB,CAACP,gBAAD,EAAmBD,YAAnB,CAbsB,CAAxB;AAeA,sBACE,oBAAC,0BAAD;AAA4B,IAAA,GAAG,EAAED,SAAjC;AAA4C,mBAAac,gBAAgB,CAACC,SAA1E;AAAqF,IAAA,IAAI,EAAC;AAA1F,kBACE,oBAAC,iBAAD;AAAmB,IAAA,MAAM,YAAKZ,SAAL;AAAzB,KAA8CC,eAA9C,CADF,CADF;AAKD;;;;"}
|
package/esm/props.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"props.js","sources":["../../src/props.tsx"],"sourcesContent":["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"],"names":["actionRef","scrollTo","PropTypes","func","description","DSVirtualListSchema","children","arrayOf","node","defaultValue","shape","current","defaultProps","noop"],"mappings":";;;AAGA,IAAMA,SAAS,GAAG;AAChBC,EAAAA,QAAQ,EAAEC,SAAS,CAACC,IAAV,CAAeC,WAAf,CAA2B,mCAA3B;AADM,CAAlB;IAGaC,mBAAmB,GAAG;AACjCC,EAAAA,QAAQ,EAAEJ,SAAS,CAACK,OAAV,CAAkBL,SAAS,CAACM,IAA5B,EAAkCJ,WAAlC,CAA8C,eAA9C,EAA+DK,YAA/D,CAA4E,EAA5E,CADuB;AAEjCT,EAAAA,SAAS,EAAEE,SAAS,CAACQ,KAAV,CAAgB;AACzBC,IAAAA,OAAO,EAAET,SAAS,CAACQ,KAAV,CAAgBV,SAAhB;AADgB,GAAhB,EAERI,WAFQ;AAFsB;IAUtBQ,YAAY,GAAG;AAC1BN,EAAAA,QAAQ,EAAE,EADgB;AAE1BN,EAAAA,SAAS,EAAE;AACTW,IAAAA,OAAO,EAAE;AACPV,MAAAA,QAAQ,EAAEY;AADH;AADA;AAFe;;;;"}
|
package/esm/styled.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../src/styled.tsx"],"sourcesContent":["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"],"names":["StyledContainerContentList","styled","div","StyledVirtualList","props","height","VirtualItemStyled"],"mappings":";;IAEaA,0BAA0B,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;IAO1BC,iBAAiB,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA,kDAElB,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAFkB;IAKjBC,iBAAiB,gBAAGL,MAAM,CAACC,GAAV;AAAA;AAAA;;;;"}
|
package/parts/List/package.json
DELETED
package/props/package.json
DELETED