@os-design/core 1.0.132 → 1.0.133
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/dist/cjs/List/index.js
CHANGED
|
@@ -35,8 +35,9 @@ var _useRWLoadNext = _interopRequireDefault(require("./utils/useRWLoadNext"));
|
|
|
35
35
|
|
|
36
36
|
var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
|
|
37
37
|
|
|
38
|
-
var _excluded = ["style"],
|
|
39
|
-
_excluded2 = ["style"]
|
|
38
|
+
var _excluded = ["itemCount", "itemHeight", "threshold", "overscanCount", "height", "paddingTop", "paddingBottom", "style", "onLoadNext", "itemRenderer"],
|
|
39
|
+
_excluded2 = ["style"],
|
|
40
|
+
_excluded3 = ["style"];
|
|
40
41
|
|
|
41
42
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
42
43
|
|
|
@@ -52,10 +53,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
52
53
|
|
|
53
54
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
54
55
|
|
|
55
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
56
|
-
|
|
57
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
58
|
-
|
|
59
56
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
60
57
|
|
|
61
58
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -68,13 +65,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
68
65
|
|
|
69
66
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
70
67
|
|
|
68
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
69
|
+
|
|
70
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
71
|
+
|
|
71
72
|
/**
|
|
72
73
|
* Virtualized list.
|
|
73
74
|
* Used the react-window library.
|
|
74
75
|
*/
|
|
75
76
|
var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
76
77
|
var itemCount = _ref.itemCount,
|
|
77
|
-
itemData = _ref.itemData,
|
|
78
78
|
_ref$itemHeight = _ref.itemHeight,
|
|
79
79
|
itemHeight = _ref$itemHeight === void 0 ? 4 : _ref$itemHeight,
|
|
80
80
|
_ref$threshold = _ref.threshold,
|
|
@@ -86,14 +86,15 @@ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
86
86
|
paddingTop = _ref$paddingTop === void 0 ? 0 : _ref$paddingTop,
|
|
87
87
|
_ref$paddingBottom = _ref.paddingBottom,
|
|
88
88
|
paddingBottom = _ref$paddingBottom === void 0 ? 0 : _ref$paddingBottom,
|
|
89
|
+
_ref$style = _ref.style,
|
|
90
|
+
style = _ref$style === void 0 ? {} : _ref$style,
|
|
89
91
|
_ref$onLoadNext = _ref.onLoadNext,
|
|
90
92
|
onLoadNext = _ref$onLoadNext === void 0 ? function () {} : _ref$onLoadNext,
|
|
91
93
|
_ref$itemRenderer = _ref.itemRenderer,
|
|
92
94
|
itemRenderer = _ref$itemRenderer === void 0 ? function () {
|
|
93
95
|
return null;
|
|
94
96
|
} : _ref$itemRenderer,
|
|
95
|
-
|
|
96
|
-
innerRef = _ref.innerRef;
|
|
97
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
97
98
|
|
|
98
99
|
var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
|
|
99
100
|
_useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
|
|
@@ -140,47 +141,45 @@ var List = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
140
141
|
}, [listRef, loadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
141
142
|
|
|
142
143
|
var InnerElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, innerElementRef) {
|
|
143
|
-
var
|
|
144
|
-
|
|
144
|
+
var innerStyle = _ref3.style,
|
|
145
|
+
innerRest = _objectWithoutProperties(_ref3, _excluded2);
|
|
145
146
|
|
|
146
147
|
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
147
148
|
ref: innerElementRef,
|
|
148
|
-
style: _objectSpread(_objectSpread({},
|
|
149
|
-
height: "".concat(parseFloat(
|
|
149
|
+
style: _objectSpread(_objectSpread({}, innerStyle), {}, {
|
|
150
|
+
height: "".concat(parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize, "px")
|
|
150
151
|
})
|
|
151
|
-
},
|
|
152
|
+
}, innerRest));
|
|
152
153
|
});
|
|
153
154
|
InnerElement.displayName = 'InnerElement';
|
|
155
|
+
var listChildren = (0, _react.useCallback)(function (_ref4) {
|
|
156
|
+
var childrenStyle = _ref4.style,
|
|
157
|
+
childrenRest = _objectWithoutProperties(_ref4, _excluded3);
|
|
158
|
+
|
|
159
|
+
return itemRenderer(_objectSpread({
|
|
160
|
+
style: _objectSpread(_objectSpread({}, childrenStyle), {}, {
|
|
161
|
+
top: "".concat(parseFloat(childrenStyle.top ? childrenStyle.top.toString() : '0') + paddingTopSize, "px")
|
|
162
|
+
})
|
|
163
|
+
}, childrenRest));
|
|
164
|
+
}, [itemRenderer, paddingTopSize]);
|
|
154
165
|
var renderList = (0, _react.useCallback)(function () {
|
|
155
|
-
return /*#__PURE__*/_react["default"].createElement(_reactWindow.FixedSizeList, {
|
|
166
|
+
return /*#__PURE__*/_react["default"].createElement(_reactWindow.FixedSizeList, _extends({
|
|
156
167
|
ref: mergedListRef,
|
|
168
|
+
itemCount: itemCount,
|
|
157
169
|
width: "100%",
|
|
158
170
|
height: height,
|
|
159
|
-
itemData: itemData,
|
|
160
171
|
itemSize: itemSize,
|
|
161
|
-
|
|
162
|
-
style: heightProp ? {} : {
|
|
172
|
+
style: heightProp ? style : _objectSpread(_objectSpread({}, style), {}, {
|
|
163
173
|
height: '100% important!'
|
|
164
|
-
},
|
|
174
|
+
}),
|
|
165
175
|
overscanCount: overscanCount,
|
|
166
|
-
onScroll: heightProp ? function (
|
|
167
|
-
var scrollOffset =
|
|
176
|
+
onScroll: heightProp ? function (_ref5) {
|
|
177
|
+
var scrollOffset = _ref5.scrollOffset;
|
|
168
178
|
return loadNextHandler(scrollOffset);
|
|
169
179
|
} : undefined,
|
|
170
|
-
innerElementType: InnerElement
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
}, function (_ref5) {
|
|
174
|
-
var style = _ref5.style,
|
|
175
|
-
rest = _objectWithoutProperties(_ref5, _excluded2);
|
|
176
|
-
|
|
177
|
-
return itemRenderer(_objectSpread({
|
|
178
|
-
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
179
|
-
top: "".concat(parseFloat(style.top ? style.top.toString() : '0') + paddingTopSize, "px")
|
|
180
|
-
})
|
|
181
|
-
}, rest));
|
|
182
|
-
});
|
|
183
|
-
}, [InnerElement, height, heightProp, innerRef, itemCount, itemData, itemRenderer, itemSize, loadNextHandler, mergedListRef, outerRef, overscanCount, paddingTopSize]);
|
|
180
|
+
innerElementType: InnerElement
|
|
181
|
+
}, rest), listChildren);
|
|
182
|
+
}, [InnerElement, height, heightProp, itemCount, itemSize, listChildren, loadNextHandler, mergedListRef, overscanCount, rest, style]);
|
|
184
183
|
|
|
185
184
|
if (heightProp) {
|
|
186
185
|
return renderList();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/index.tsx"],"names":["List","ref","itemCount","itemData","itemHeight","threshold","overscanCount","heightProp","height","paddingTop","paddingBottom","onLoadNext","itemRenderer","outerRef","innerRef","listRef","mergedListRef","size","fontSize","document","body","LayoutContext","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerElementRef","style","rest","parseFloat","displayName","renderList","scrollOffset","undefined","toString"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n FixedSizeList,\n FixedSizeListProps,\n ListChildComponentProps,\n} from 'react-window';\nimport {\n useForwardedRef,\n useSize,\n useFontSize,\n useSafeAreaInset,\n} from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport interface ListProps {\n /**\n * Total count of items.\n */\n itemCount: number;\n /**\n * Array of items.\n */\n itemData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n /**\n * The item height in em.\n * @default 4\n */\n itemHeight?: number;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The height of the list in px.\n * @default undefined\n */\n height?: number;\n /**\n * The top padding in em.\n * @default 0\n */\n paddingTop?: number;\n /**\n * The bottom padding in em.\n * @default 0\n */\n paddingBottom?: number;\n /**\n * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The callback to render items.\n * @default () => null\n */\n itemRenderer?: React.FC<ListChildComponentProps>;\n /**\n * Ref to attach to the outer container element.\n * @default undefined\n */\n outerRef?: FixedSizeListProps['outerRef'];\n /**\n * Ref to attach to the inner container element.\n * @default undefined\n */\n innerRef?: FixedSizeListProps['innerRef'];\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n (\n {\n itemCount,\n itemData,\n itemHeight = 4,\n threshold = 10,\n overscanCount = 10,\n height: heightProp,\n paddingTop = 0,\n paddingBottom = 0,\n onLoadNext = () => {},\n itemRenderer = () => null,\n outerRef,\n innerRef,\n },\n ref\n ) => {\n const [listRef, mergedListRef] = useForwardedRef(ref);\n const size = useSize();\n const fontSize = useFontSize(document.body);\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n const { theme } = useTheme();\n const isMinMd = useIsMinWidth('md');\n const safeAreaInset = useSafeAreaInset();\n\n const itemSize = useMemo(\n () => itemHeight * fontSize,\n [itemHeight, fontSize]\n );\n\n const paddingTopSize = useMemo(\n () =>\n ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n paddingTop) *\n fontSize,\n [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n );\n\n const paddingBottomSize = useMemo(\n () =>\n ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n paddingBottom) *\n fontSize +\n safeAreaInset.bottom,\n [\n hasNavigation,\n theme.navigationTabHeight,\n isMinMd,\n paddingBottom,\n fontSize,\n safeAreaInset.bottom,\n ]\n );\n\n const height = useMemo(\n () => heightProp || size.height,\n [heightProp, size.height]\n );\n\n const loadNextHandler = useRWLoadNext({\n itemCount,\n threshold,\n itemSize,\n paddingTop: paddingTopSize,\n height,\n onLoadNext,\n });\n\n const windowScrollHandler = useCallback(\n ({ top }: ScrollPosition) => {\n // Set the scroll position to the list\n if (listRef.current) listRef.current.scrollTo(top);\n loadNextHandler(top);\n },\n [listRef, loadNextHandler]\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const InnerElement = forwardRef<HTMLDivElement, any>(\n ({ style, ...rest }, innerElementRef) => (\n <div\n ref={innerElementRef}\n style={{\n ...style,\n height: `${\n parseFloat(style.height) + paddingTopSize + paddingBottomSize\n }px`,\n }}\n {...rest}\n />\n )\n );\n InnerElement.displayName = 'InnerElement';\n\n const renderList = useCallback(\n () => (\n <FixedSizeList\n ref={mergedListRef}\n width='100%'\n height={height}\n itemData={itemData}\n itemSize={itemSize}\n itemCount={itemCount}\n style={heightProp ? {} : { height: '100% important!' }}\n overscanCount={overscanCount}\n onScroll={\n heightProp\n ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n : undefined\n }\n innerElementType={InnerElement}\n outerRef={outerRef}\n innerRef={innerRef}\n >\n {({ style, ...rest }) =>\n itemRenderer({\n style: {\n ...style,\n top: `${\n parseFloat(style.top ? style.top.toString() : '0') +\n paddingTopSize\n }px`,\n },\n ...rest,\n })\n }\n </FixedSizeList>\n ),\n [\n InnerElement,\n height,\n heightProp,\n innerRef,\n itemCount,\n itemData,\n itemRenderer,\n itemSize,\n loadNextHandler,\n mergedListRef,\n outerRef,\n overscanCount,\n paddingTopSize,\n ]\n );\n\n if (heightProp) {\n return renderList();\n }\n\n return (\n <WindowScroller onScroll={windowScrollHandler}>\n {renderList()}\n </WindowScroller>\n );\n }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/List/index.tsx"],"names":["List","ref","itemCount","itemHeight","threshold","overscanCount","heightProp","height","paddingTop","paddingBottom","style","onLoadNext","itemRenderer","rest","listRef","mergedListRef","size","fontSize","document","body","LayoutContext","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerElementRef","innerStyle","innerRest","parseFloat","displayName","listChildren","childrenStyle","childrenRest","toString","renderList","scrollOffset","undefined"],"mappings":"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","sourcesContent":["import React, {\n CSSProperties,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n} from 'react';\nimport {\n FixedSizeList,\n ListChildComponentProps,\n ListProps as RWListProps,\n} from 'react-window';\nimport {\n useFontSize,\n useForwardedRef,\n useSafeAreaInset,\n useSize,\n} from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport interface ListProps extends Partial<RWListProps> {\n /**\n * Total number of items in the list.\n */\n itemCount: number;\n /**\n * The item height in em.\n * @default 4\n */\n itemHeight?: number;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The height of the list in px.\n * @default undefined\n */\n height?: number;\n /**\n * The top padding in em.\n * @default 0\n */\n paddingTop?: number;\n /**\n * The bottom padding in em.\n * @default 0\n */\n paddingBottom?: number;\n /**\n * The inline css style.\n */\n style?: CSSProperties;\n /**\n * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The callback to render items.\n * @default () => null\n */\n itemRenderer?: React.FC<ListChildComponentProps>;\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n (\n {\n itemCount,\n itemHeight = 4,\n threshold = 10,\n overscanCount = 10,\n height: heightProp,\n paddingTop = 0,\n paddingBottom = 0,\n style = {},\n onLoadNext = () => {},\n itemRenderer = () => null,\n ...rest\n },\n ref\n ) => {\n const [listRef, mergedListRef] = useForwardedRef(ref);\n const size = useSize();\n const fontSize = useFontSize(document.body);\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n const { theme } = useTheme();\n const isMinMd = useIsMinWidth('md');\n const safeAreaInset = useSafeAreaInset();\n\n const itemSize = useMemo(\n () => itemHeight * fontSize,\n [itemHeight, fontSize]\n );\n\n const paddingTopSize = useMemo(\n () =>\n ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n paddingTop) *\n fontSize,\n [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n );\n\n const paddingBottomSize = useMemo(\n () =>\n ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n paddingBottom) *\n fontSize +\n safeAreaInset.bottom,\n [\n hasNavigation,\n theme.navigationTabHeight,\n isMinMd,\n paddingBottom,\n fontSize,\n safeAreaInset.bottom,\n ]\n );\n\n const height = useMemo(\n () => heightProp || size.height,\n [heightProp, size.height]\n );\n\n const loadNextHandler = useRWLoadNext({\n itemCount,\n threshold,\n itemSize,\n paddingTop: paddingTopSize,\n height,\n onLoadNext,\n });\n\n const windowScrollHandler = useCallback(\n ({ top }: ScrollPosition) => {\n // Set the scroll position to the list\n if (listRef.current) listRef.current.scrollTo(top);\n loadNextHandler(top);\n },\n [listRef, loadNextHandler]\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const InnerElement = forwardRef<HTMLDivElement, any>(\n ({ style: innerStyle, ...innerRest }, innerElementRef) => (\n <div\n ref={innerElementRef}\n style={{\n ...innerStyle,\n height: `${\n parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize\n }px`,\n }}\n {...innerRest}\n />\n )\n );\n InnerElement.displayName = 'InnerElement';\n\n const listChildren = useCallback<RWListProps['children']>(\n ({ style: childrenStyle, ...childrenRest }) =>\n itemRenderer({\n style: {\n ...childrenStyle,\n top: `${\n parseFloat(\n childrenStyle.top ? childrenStyle.top.toString() : '0'\n ) + paddingTopSize\n }px`,\n },\n ...childrenRest,\n }),\n [itemRenderer, paddingTopSize]\n );\n\n const renderList = useCallback(\n () => (\n <FixedSizeList\n ref={mergedListRef}\n itemCount={itemCount}\n width='100%'\n height={height}\n itemSize={itemSize}\n style={heightProp ? style : { ...style, height: '100% important!' }}\n overscanCount={overscanCount}\n onScroll={\n heightProp\n ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n : undefined\n }\n innerElementType={InnerElement}\n {...rest}\n >\n {listChildren}\n </FixedSizeList>\n ),\n [\n InnerElement,\n height,\n heightProp,\n itemCount,\n itemSize,\n listChildren,\n loadNextHandler,\n mergedListRef,\n overscanCount,\n rest,\n style,\n ]\n );\n\n if (heightProp) {\n return renderList();\n }\n\n return (\n <WindowScroller onScroll={windowScrollHandler}>\n {renderList()}\n </WindowScroller>\n );\n }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
|
package/dist/esm/List/index.js
CHANGED
|
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
|
|
4
4
|
import { FixedSizeList } from 'react-window';
|
|
5
|
-
import {
|
|
5
|
+
import { useFontSize, useForwardedRef, useSafeAreaInset, useSize } from '@os-design/utils';
|
|
6
6
|
import { useTheme } from '@os-design/theming';
|
|
7
7
|
import { useIsMinWidth } from '@os-design/media';
|
|
8
8
|
import WindowScroller from './WindowScroller';
|
|
@@ -15,17 +15,16 @@ import LayoutContext from '../Layout/LayoutContext';
|
|
|
15
15
|
*/
|
|
16
16
|
const List = /*#__PURE__*/forwardRef(({
|
|
17
17
|
itemCount,
|
|
18
|
-
itemData,
|
|
19
18
|
itemHeight = 4,
|
|
20
19
|
threshold = 10,
|
|
21
20
|
overscanCount = 10,
|
|
22
21
|
height: heightProp,
|
|
23
22
|
paddingTop = 0,
|
|
24
23
|
paddingBottom = 0,
|
|
24
|
+
style = {},
|
|
25
25
|
onLoadNext = () => {},
|
|
26
26
|
itemRenderer = () => null,
|
|
27
|
-
|
|
28
|
-
innerRef
|
|
27
|
+
...rest
|
|
29
28
|
}, ref) => {
|
|
30
29
|
const [listRef, mergedListRef] = useForwardedRef(ref);
|
|
31
30
|
const size = useSize();
|
|
@@ -60,41 +59,39 @@ const List = /*#__PURE__*/forwardRef(({
|
|
|
60
59
|
}, [listRef, loadNextHandler]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
61
60
|
|
|
62
61
|
const InnerElement = /*#__PURE__*/forwardRef(({
|
|
63
|
-
style,
|
|
64
|
-
...
|
|
62
|
+
style: innerStyle,
|
|
63
|
+
...innerRest
|
|
65
64
|
}, innerElementRef) => /*#__PURE__*/React.createElement("div", _extends({
|
|
66
65
|
ref: innerElementRef,
|
|
67
|
-
style: { ...
|
|
68
|
-
height: `${parseFloat(
|
|
66
|
+
style: { ...innerStyle,
|
|
67
|
+
height: `${parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize}px`
|
|
69
68
|
}
|
|
70
|
-
},
|
|
69
|
+
}, innerRest)));
|
|
71
70
|
InnerElement.displayName = 'InnerElement';
|
|
72
|
-
const
|
|
71
|
+
const listChildren = useCallback(({
|
|
72
|
+
style: childrenStyle,
|
|
73
|
+
...childrenRest
|
|
74
|
+
}) => itemRenderer({
|
|
75
|
+
style: { ...childrenStyle,
|
|
76
|
+
top: `${parseFloat(childrenStyle.top ? childrenStyle.top.toString() : '0') + paddingTopSize}px`
|
|
77
|
+
},
|
|
78
|
+
...childrenRest
|
|
79
|
+
}), [itemRenderer, paddingTopSize]);
|
|
80
|
+
const renderList = useCallback(() => /*#__PURE__*/React.createElement(FixedSizeList, _extends({
|
|
73
81
|
ref: mergedListRef,
|
|
82
|
+
itemCount: itemCount,
|
|
74
83
|
width: "100%",
|
|
75
84
|
height: height,
|
|
76
|
-
itemData: itemData,
|
|
77
85
|
itemSize: itemSize,
|
|
78
|
-
|
|
79
|
-
style: heightProp ? {} : {
|
|
86
|
+
style: heightProp ? style : { ...style,
|
|
80
87
|
height: '100% important!'
|
|
81
88
|
},
|
|
82
89
|
overscanCount: overscanCount,
|
|
83
90
|
onScroll: heightProp ? ({
|
|
84
91
|
scrollOffset
|
|
85
92
|
}) => loadNextHandler(scrollOffset) : undefined,
|
|
86
|
-
innerElementType: InnerElement
|
|
87
|
-
|
|
88
|
-
innerRef: innerRef
|
|
89
|
-
}, ({
|
|
90
|
-
style,
|
|
91
|
-
...rest
|
|
92
|
-
}) => itemRenderer({
|
|
93
|
-
style: { ...style,
|
|
94
|
-
top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTopSize}px`
|
|
95
|
-
},
|
|
96
|
-
...rest
|
|
97
|
-
})), [InnerElement, height, heightProp, innerRef, itemCount, itemData, itemRenderer, itemSize, loadNextHandler, mergedListRef, outerRef, overscanCount, paddingTopSize]);
|
|
93
|
+
innerElementType: InnerElement
|
|
94
|
+
}, rest), listChildren), [InnerElement, height, heightProp, itemCount, itemSize, listChildren, loadNextHandler, mergedListRef, overscanCount, rest, style]);
|
|
98
95
|
|
|
99
96
|
if (heightProp) {
|
|
100
97
|
return renderList();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/List/index.tsx"],"names":["React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","useForwardedRef","useSize","useFontSize","useSafeAreaInset","useTheme","useIsMinWidth","WindowScroller","useRWLoadNext","LayoutContext","List","itemCount","itemData","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","onLoadNext","itemRenderer","outerRef","innerRef","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","style","rest","innerElementRef","parseFloat","displayName","renderList","scrollOffset","undefined","toString","default"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport {\n FixedSizeList,\n FixedSizeListProps,\n ListChildComponentProps,\n} from 'react-window';\nimport {\n useForwardedRef,\n useSize,\n useFontSize,\n useSafeAreaInset,\n} from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport interface ListProps {\n /**\n * Total count of items.\n */\n itemCount: number;\n /**\n * Array of items.\n */\n itemData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n /**\n * The item height in em.\n * @default 4\n */\n itemHeight?: number;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The height of the list in px.\n * @default undefined\n */\n height?: number;\n /**\n * The top padding in em.\n * @default 0\n */\n paddingTop?: number;\n /**\n * The bottom padding in em.\n * @default 0\n */\n paddingBottom?: number;\n /**\n * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The callback to render items.\n * @default () => null\n */\n itemRenderer?: React.FC<ListChildComponentProps>;\n /**\n * Ref to attach to the outer container element.\n * @default undefined\n */\n outerRef?: FixedSizeListProps['outerRef'];\n /**\n * Ref to attach to the inner container element.\n * @default undefined\n */\n innerRef?: FixedSizeListProps['innerRef'];\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n (\n {\n itemCount,\n itemData,\n itemHeight = 4,\n threshold = 10,\n overscanCount = 10,\n height: heightProp,\n paddingTop = 0,\n paddingBottom = 0,\n onLoadNext = () => {},\n itemRenderer = () => null,\n outerRef,\n innerRef,\n },\n ref\n ) => {\n const [listRef, mergedListRef] = useForwardedRef(ref);\n const size = useSize();\n const fontSize = useFontSize(document.body);\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n const { theme } = useTheme();\n const isMinMd = useIsMinWidth('md');\n const safeAreaInset = useSafeAreaInset();\n\n const itemSize = useMemo(\n () => itemHeight * fontSize,\n [itemHeight, fontSize]\n );\n\n const paddingTopSize = useMemo(\n () =>\n ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n paddingTop) *\n fontSize,\n [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n );\n\n const paddingBottomSize = useMemo(\n () =>\n ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n paddingBottom) *\n fontSize +\n safeAreaInset.bottom,\n [\n hasNavigation,\n theme.navigationTabHeight,\n isMinMd,\n paddingBottom,\n fontSize,\n safeAreaInset.bottom,\n ]\n );\n\n const height = useMemo(\n () => heightProp || size.height,\n [heightProp, size.height]\n );\n\n const loadNextHandler = useRWLoadNext({\n itemCount,\n threshold,\n itemSize,\n paddingTop: paddingTopSize,\n height,\n onLoadNext,\n });\n\n const windowScrollHandler = useCallback(\n ({ top }: ScrollPosition) => {\n // Set the scroll position to the list\n if (listRef.current) listRef.current.scrollTo(top);\n loadNextHandler(top);\n },\n [listRef, loadNextHandler]\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const InnerElement = forwardRef<HTMLDivElement, any>(\n ({ style, ...rest }, innerElementRef) => (\n <div\n ref={innerElementRef}\n style={{\n ...style,\n height: `${\n parseFloat(style.height) + paddingTopSize + paddingBottomSize\n }px`,\n }}\n {...rest}\n />\n )\n );\n InnerElement.displayName = 'InnerElement';\n\n const renderList = useCallback(\n () => (\n <FixedSizeList\n ref={mergedListRef}\n width='100%'\n height={height}\n itemData={itemData}\n itemSize={itemSize}\n itemCount={itemCount}\n style={heightProp ? {} : { height: '100% important!' }}\n overscanCount={overscanCount}\n onScroll={\n heightProp\n ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n : undefined\n }\n innerElementType={InnerElement}\n outerRef={outerRef}\n innerRef={innerRef}\n >\n {({ style, ...rest }) =>\n itemRenderer({\n style: {\n ...style,\n top: `${\n parseFloat(style.top ? style.top.toString() : '0') +\n paddingTopSize\n }px`,\n },\n ...rest,\n })\n }\n </FixedSizeList>\n ),\n [\n InnerElement,\n height,\n heightProp,\n innerRef,\n itemCount,\n itemData,\n itemRenderer,\n itemSize,\n loadNextHandler,\n mergedListRef,\n outerRef,\n overscanCount,\n paddingTopSize,\n ]\n );\n\n if (heightProp) {\n return renderList();\n }\n\n return (\n <WindowScroller onScroll={windowScrollHandler}>\n {renderList()}\n </WindowScroller>\n );\n }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/List/index.tsx"],"names":["React","forwardRef","useCallback","useContext","useMemo","FixedSizeList","useFontSize","useForwardedRef","useSafeAreaInset","useSize","useTheme","useIsMinWidth","WindowScroller","useRWLoadNext","LayoutContext","List","itemCount","itemHeight","threshold","overscanCount","height","heightProp","paddingTop","paddingBottom","style","onLoadNext","itemRenderer","rest","ref","listRef","mergedListRef","size","fontSize","document","body","hasNavigation","hasPageHeader","theme","isMinMd","safeAreaInset","itemSize","paddingTopSize","pageHeaderHeight","paddingBottomSize","navigationTabHeight","bottom","loadNextHandler","windowScrollHandler","top","current","scrollTo","InnerElement","innerStyle","innerRest","innerElementRef","parseFloat","displayName","listChildren","childrenStyle","childrenRest","toString","renderList","scrollOffset","undefined","default"],"mappings":"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","sourcesContent":["import React, {\n CSSProperties,\n forwardRef,\n useCallback,\n useContext,\n useMemo,\n} from 'react';\nimport {\n FixedSizeList,\n ListChildComponentProps,\n ListProps as RWListProps,\n} from 'react-window';\nimport {\n useFontSize,\n useForwardedRef,\n useSafeAreaInset,\n useSize,\n} from '@os-design/utils';\nimport { useTheme } from '@os-design/theming';\nimport { useIsMinWidth } from '@os-design/media';\nimport WindowScroller, { ScrollPosition } from './WindowScroller';\nimport useRWLoadNext from './utils/useRWLoadNext';\nimport LayoutContext from '../Layout/LayoutContext';\n\nexport interface ListProps extends Partial<RWListProps> {\n /**\n * Total number of items in the list.\n */\n itemCount: number;\n /**\n * The item height in em.\n * @default 4\n */\n itemHeight?: number;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The height of the list in px.\n * @default undefined\n */\n height?: number;\n /**\n * The top padding in em.\n * @default 0\n */\n paddingTop?: number;\n /**\n * The bottom padding in em.\n * @default 0\n */\n paddingBottom?: number;\n /**\n * The inline css style.\n */\n style?: CSSProperties;\n /**\n * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The callback to render items.\n * @default () => null\n */\n itemRenderer?: React.FC<ListChildComponentProps>;\n}\n\n/**\n * Virtualized list.\n * Used the react-window library.\n */\nconst List = forwardRef<FixedSizeList, ListProps>(\n (\n {\n itemCount,\n itemHeight = 4,\n threshold = 10,\n overscanCount = 10,\n height: heightProp,\n paddingTop = 0,\n paddingBottom = 0,\n style = {},\n onLoadNext = () => {},\n itemRenderer = () => null,\n ...rest\n },\n ref\n ) => {\n const [listRef, mergedListRef] = useForwardedRef(ref);\n const size = useSize();\n const fontSize = useFontSize(document.body);\n const { hasNavigation, hasPageHeader } = useContext(LayoutContext);\n const { theme } = useTheme();\n const isMinMd = useIsMinWidth('md');\n const safeAreaInset = useSafeAreaInset();\n\n const itemSize = useMemo(\n () => itemHeight * fontSize,\n [itemHeight, fontSize]\n );\n\n const paddingTopSize = useMemo(\n () =>\n ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) +\n paddingTop) *\n fontSize,\n [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]\n );\n\n const paddingBottomSize = useMemo(\n () =>\n ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) +\n paddingBottom) *\n fontSize +\n safeAreaInset.bottom,\n [\n hasNavigation,\n theme.navigationTabHeight,\n isMinMd,\n paddingBottom,\n fontSize,\n safeAreaInset.bottom,\n ]\n );\n\n const height = useMemo(\n () => heightProp || size.height,\n [heightProp, size.height]\n );\n\n const loadNextHandler = useRWLoadNext({\n itemCount,\n threshold,\n itemSize,\n paddingTop: paddingTopSize,\n height,\n onLoadNext,\n });\n\n const windowScrollHandler = useCallback(\n ({ top }: ScrollPosition) => {\n // Set the scroll position to the list\n if (listRef.current) listRef.current.scrollTo(top);\n loadNextHandler(top);\n },\n [listRef, loadNextHandler]\n );\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const InnerElement = forwardRef<HTMLDivElement, any>(\n ({ style: innerStyle, ...innerRest }, innerElementRef) => (\n <div\n ref={innerElementRef}\n style={{\n ...innerStyle,\n height: `${\n parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize\n }px`,\n }}\n {...innerRest}\n />\n )\n );\n InnerElement.displayName = 'InnerElement';\n\n const listChildren = useCallback<RWListProps['children']>(\n ({ style: childrenStyle, ...childrenRest }) =>\n itemRenderer({\n style: {\n ...childrenStyle,\n top: `${\n parseFloat(\n childrenStyle.top ? childrenStyle.top.toString() : '0'\n ) + paddingTopSize\n }px`,\n },\n ...childrenRest,\n }),\n [itemRenderer, paddingTopSize]\n );\n\n const renderList = useCallback(\n () => (\n <FixedSizeList\n ref={mergedListRef}\n itemCount={itemCount}\n width='100%'\n height={height}\n itemSize={itemSize}\n style={heightProp ? style : { ...style, height: '100% important!' }}\n overscanCount={overscanCount}\n onScroll={\n heightProp\n ? ({ scrollOffset }) => loadNextHandler(scrollOffset)\n : undefined\n }\n innerElementType={InnerElement}\n {...rest}\n >\n {listChildren}\n </FixedSizeList>\n ),\n [\n InnerElement,\n height,\n heightProp,\n itemCount,\n itemSize,\n listChildren,\n loadNextHandler,\n mergedListRef,\n overscanCount,\n rest,\n style,\n ]\n );\n\n if (heightProp) {\n return renderList();\n }\n\n return (\n <WindowScroller onScroll={windowScrollHandler}>\n {renderList()}\n </WindowScroller>\n );\n }\n);\n\nList.displayName = 'List';\n\nexport { default as WindowScroller } from './WindowScroller';\nexport { default as useRWLoadNext } from './utils/useRWLoadNext';\n\nexport default List;\n"],"file":"index.js"}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { FixedSizeList,
|
|
3
|
-
export interface ListProps {
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import { FixedSizeList, ListChildComponentProps, ListProps as RWListProps } from 'react-window';
|
|
3
|
+
export interface ListProps extends Partial<RWListProps> {
|
|
4
4
|
itemCount: number;
|
|
5
|
-
itemData?: any;
|
|
6
5
|
itemHeight?: number;
|
|
7
6
|
threshold?: number;
|
|
8
7
|
overscanCount?: number;
|
|
9
8
|
height?: number;
|
|
10
9
|
paddingTop?: number;
|
|
11
10
|
paddingBottom?: number;
|
|
11
|
+
style?: CSSProperties;
|
|
12
12
|
onLoadNext?: () => void;
|
|
13
13
|
itemRenderer?: React.FC<ListChildComponentProps>;
|
|
14
|
-
outerRef?: FixedSizeListProps['outerRef'];
|
|
15
|
-
innerRef?: FixedSizeListProps['innerRef'];
|
|
16
14
|
}
|
|
17
15
|
declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<FixedSizeList<any>>>;
|
|
18
16
|
export { default as WindowScroller } from './WindowScroller';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AACf,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,SAAS,IAAI,WAAW,EACzB,MAAM,cAAc,CAAC;AAatB,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,WAAW,CAAC;IAIrD,SAAS,EAAE,MAAM,CAAC;IAKlB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,aAAa,CAAC,EAAE,MAAM,CAAC;IAIvB,KAAK,CAAC,EAAE,aAAa,CAAC;IAKtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAKxB,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;CAClD;AAMD,QAAA,MAAM,IAAI,sFA4JT,CAAC;AAIF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjE,eAAe,IAAI,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.133",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"react": ">=18",
|
|
57
57
|
"react-dom": ">=18"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "afc4b29b0cb3c9bd7cff9032a44d2bc958550792"
|
|
60
60
|
}
|