@elliemae/ds-virtual-list 2.3.0-alpha.7 → 2.3.0-next.1
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 +36 -0
- package/cjs/VirtualListDataTestID.js +9 -0
- package/cjs/hooks/useVirtualList.js +43 -0
- package/cjs/index.d.js +2 -0
- package/cjs/index.js +10 -0
- package/cjs/parts/List.js +52 -0
- package/cjs/props.js +27 -0
- package/cjs/styled.js +23 -0
- package/esm/VirtualList.js +27 -0
- package/esm/VirtualListDataTestID.js +5 -0
- package/esm/hooks/useVirtualList.js +35 -0
- package/esm/index.d.js +1 -0
- package/esm/index.js +1 -0
- package/esm/parts/List.js +43 -0
- package/esm/props.js +22 -0
- package/esm/styled.js +13 -0
- package/package.json +29 -31
- 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/dist/cjs/VirtualList.js +0 -50
- package/dist/cjs/VirtualList.js.map +0 -7
- package/dist/cjs/VirtualListDataTestID.js +0 -37
- package/dist/cjs/VirtualListDataTestID.js.map +0 -7
- package/dist/cjs/hooks/useVirtualList.js +0 -57
- package/dist/cjs/hooks/useVirtualList.js.map +0 -7
- package/dist/cjs/index.d.js +0 -27
- package/dist/cjs/index.d.js.map +0 -7
- package/dist/cjs/index.js +0 -28
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/parts/List.js +0 -59
- package/dist/cjs/parts/List.js.map +0 -7
- package/dist/cjs/props.js +0 -57
- package/dist/cjs/props.js.map +0 -7
- package/dist/cjs/styled.js +0 -55
- package/dist/cjs/styled.js.map +0 -7
- package/dist/esm/VirtualList.js +0 -21
- package/dist/esm/VirtualList.js.map +0 -7
- package/dist/esm/VirtualListDataTestID.js +0 -8
- package/dist/esm/VirtualListDataTestID.js.map +0 -7
- package/dist/esm/hooks/useVirtualList.js +0 -28
- package/dist/esm/hooks/useVirtualList.js.map +0 -7
- package/dist/esm/index.d.js +0 -2
- package/dist/esm/index.d.js.map +0 -7
- package/dist/esm/index.js +0 -3
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/parts/List.js +0 -30
- package/dist/esm/parts/List.js.map +0 -7
- package/dist/esm/props.js +0 -28
- package/dist/esm/props.js.map +0 -7
- package/dist/esm/styled.js +0 -26
- package/dist/esm/styled.js.map +0 -7
|
@@ -0,0 +1,36 @@
|
|
|
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;
|
|
@@ -0,0 +1,43 @@
|
|
|
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
ADDED
package/cjs/index.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
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;
|
|
@@ -0,0 +1,52 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
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;
|
|
@@ -0,0 +1,27 @@
|
|
|
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 };
|
|
@@ -0,0 +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';
|
|
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
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/esm/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DSVirtualList, DSVirtualListWithSchema } from './VirtualList.js';
|
|
@@ -0,0 +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';
|
|
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
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
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 };
|
package/package.json
CHANGED
|
@@ -1,42 +1,39 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-virtual-list",
|
|
3
|
-
"version": "2.3.0-
|
|
3
|
+
"version": "2.3.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Virtual List",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"module": "./dist/esm/index.js",
|
|
10
|
-
"main": "./dist/cjs/index.js",
|
|
11
|
-
"types": "./dist/types/index.d.ts",
|
|
6
|
+
"module": "./esm/index.js",
|
|
7
|
+
"main": "./cjs/index.js",
|
|
8
|
+
"types": "./types/index.d.ts",
|
|
12
9
|
"exports": {
|
|
13
10
|
".": {
|
|
14
|
-
"import": "./
|
|
15
|
-
"require": "./
|
|
11
|
+
"import": "./esm/index.js",
|
|
12
|
+
"require": "./cjs/index.js"
|
|
16
13
|
},
|
|
17
14
|
"./VirtualListDataTestID": {
|
|
18
|
-
"import": "./
|
|
19
|
-
"require": "./
|
|
15
|
+
"import": "./esm/VirtualListDataTestID.js",
|
|
16
|
+
"require": "./cjs/VirtualListDataTestID.js"
|
|
20
17
|
},
|
|
21
18
|
"./VirtualList": {
|
|
22
|
-
"import": "./
|
|
23
|
-
"require": "./
|
|
19
|
+
"import": "./esm/VirtualList.js",
|
|
20
|
+
"require": "./cjs/VirtualList.js"
|
|
24
21
|
},
|
|
25
22
|
"./styled": {
|
|
26
|
-
"import": "./
|
|
27
|
-
"require": "./
|
|
23
|
+
"import": "./esm/styled.js",
|
|
24
|
+
"require": "./cjs/styled.js"
|
|
28
25
|
},
|
|
29
26
|
"./props": {
|
|
30
|
-
"import": "./
|
|
31
|
-
"require": "./
|
|
27
|
+
"import": "./esm/props.js",
|
|
28
|
+
"require": "./cjs/props.js"
|
|
32
29
|
},
|
|
33
30
|
"./parts/List": {
|
|
34
|
-
"import": "./
|
|
35
|
-
"require": "./
|
|
31
|
+
"import": "./esm/parts/List.js",
|
|
32
|
+
"require": "./cjs/parts/List.js"
|
|
36
33
|
},
|
|
37
34
|
"./hooks/useVirtualList": {
|
|
38
|
-
"import": "./
|
|
39
|
-
"require": "./
|
|
35
|
+
"import": "./esm/hooks/useVirtualList.js",
|
|
36
|
+
"require": "./cjs/hooks/useVirtualList.js"
|
|
40
37
|
}
|
|
41
38
|
},
|
|
42
39
|
"sideEffects": [
|
|
@@ -48,12 +45,18 @@
|
|
|
48
45
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
49
46
|
},
|
|
50
47
|
"engines": {
|
|
51
|
-
"
|
|
52
|
-
"node": ">=
|
|
48
|
+
"npm": ">=7",
|
|
49
|
+
"node": ">=14"
|
|
53
50
|
},
|
|
54
51
|
"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"
|
|
57
|
+
},
|
|
55
58
|
"dependencies": {
|
|
56
|
-
"@elliemae/ds-props-helpers": "2.3.0-
|
|
59
|
+
"@elliemae/ds-props-helpers": "2.3.0-next.1",
|
|
57
60
|
"prop-types": "~15.7.2",
|
|
58
61
|
"react-desc": "~4.1.3",
|
|
59
62
|
"react-virtual": "~2.3.2"
|
|
@@ -69,12 +72,7 @@
|
|
|
69
72
|
},
|
|
70
73
|
"publishConfig": {
|
|
71
74
|
"access": "public",
|
|
72
|
-
"
|
|
73
|
-
|
|
74
|
-
"scripts": {
|
|
75
|
-
"prebuild": "exit 0",
|
|
76
|
-
"predev": "exit 0",
|
|
77
|
-
"build": "node ../../scripts/build/build.js",
|
|
78
|
-
"dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
|
|
75
|
+
"directory": "dist",
|
|
76
|
+
"generateSubmodules": true
|
|
79
77
|
}
|
|
80
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(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
8
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
9
|
+
};
|
|
10
|
+
isRequired: import("react-desc").PropTypesDescValue;
|
|
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/dist/cjs/VirtualList.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var VirtualList_exports = {};
|
|
29
|
-
__export(VirtualList_exports, {
|
|
30
|
-
DSVirtualList: () => DSVirtualList,
|
|
31
|
-
DSVirtualListWithSchema: () => DSVirtualListWithSchema
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react = __toESM(require("react"));
|
|
35
|
-
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
|
-
var import_react_desc = require("react-desc");
|
|
37
|
-
var import_List = require("./parts/List");
|
|
38
|
-
var import_props = require("./props");
|
|
39
|
-
const DSVirtualList = (props) => {
|
|
40
|
-
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.defaultProps);
|
|
41
|
-
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_props.DSVirtualListSchema);
|
|
42
|
-
return /* @__PURE__ */ import_react.default.createElement(import_List.List, {
|
|
43
|
-
...propsWithDefault
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
DSVirtualList.propTypes = import_props.DSVirtualListSchema;
|
|
47
|
-
const DSVirtualListWithSchema = (0, import_react_desc.describe)(DSVirtualList).description("DSVirtualList");
|
|
48
|
-
DSVirtualListWithSchema.propTypes = import_props.DSVirtualListSchema;
|
|
49
|
-
module.exports = __toCommonJS(VirtualList_exports);
|
|
50
|
-
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/VirtualList.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"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, DSVirtualListSchema);\n\n return <List {...propsWithDefault} />;\n};\n\nDSVirtualList.propTypes = DSVirtualListSchema;\nconst DSVirtualListWithSchema = describe(DSVirtualList).description('DSVirtualList');\nDSVirtualListWithSchema.propTypes = DSVirtualListSchema;\n\nexport { DSVirtualList, DSVirtualListWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAA6E;AAC7E,wBAAyB;AACzB,kBAAqB;AACrB,mBAAkD;AAIlD,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AAEjD,SAAO,mDAAC,kBAAD;AAAA,OAAU;AAAA;AAAA;AAGnB,cAAc,YAAY;AAC1B,MAAM,0BAA0B,gCAAS,eAAe,YAAY;AACpE,wBAAwB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var VirtualListDataTestID_exports = {};
|
|
29
|
-
__export(VirtualListDataTestID_exports, {
|
|
30
|
-
LIST_DATA_TESTID: () => LIST_DATA_TESTID
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
const LIST_DATA_TESTID = {
|
|
34
|
-
CONTAINER: "virtual-list-container"
|
|
35
|
-
};
|
|
36
|
-
module.exports = __toCommonJS(VirtualListDataTestID_exports);
|
|
37
|
-
//# sourceMappingURL=VirtualListDataTestID.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/VirtualListDataTestID.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const LIST_DATA_TESTID = {\n CONTAINER: 'virtual-list-container',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|