@os-design/core - npm Package Compare versions

Comparing version 0.0.73 to 0.0.74

lib/Header/index.js

@@ -26,2 +26,3 @@ "use strict";
   border-bottom: 1px solid ${p.theme.colorBorder};
+  z-index: 101;
 `;
@@ -28,0 +29,0 @@ const sidebarIndent = (p) => p.sidebarIndent && core_1.css `

lib/index.d.ts

@@ -15,3 +15,3 @@ export { default as Alert } from './Alert';
 export { default as List } from './List';
-export { default as ListItem } from './List/ListItem';
+export { default as ListItem } from './ListItem';
 export { default as LogoContainer } from './LogoContainer';
@@ -39,2 +39,3 @@ export { default as message } from './message';
 export * from './List';
+export * from './ListItem';
 export * from './LogoContainer';
@@ -41,0 +42,0 @@ export * from './Modal';

lib/index.js

@@ -34,3 +34,3 @@ "use strict";
 exports.List = List_1.default;
-var ListItem_1 = require("./List/ListItem");
+var ListItem_1 = require("./ListItem");
 exports.ListItem = ListItem_1.default;
@@ -69,2 +69,3 @@ var LogoContainer_1 = require("./LogoContainer");
 __export(require("./List"));
+__export(require("./ListItem"));
 __export(require("./LogoContainer"));
@@ -71,0 +72,0 @@ __export(require("./Modal"));

lib/List/index.d.ts

@@ -5,3 +5,7 @@ import React from 'react';
     itemCount: number;
+    itemHeight?: number;
     threshold?: number;
+    overscanCount?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
     loadNext?: () => void;
@@ -8,0 +12,0 @@ itemRenderer?: React.FC<ListChildComponentProps>;

lib/List/index.js

@@ -15,51 +15,40 @@ "use strict";
 const react_window_1 = require("react-window");
+const styled_1 = __importDefault(require("@os-design/styled"));
 const utils_1 = require("@os-design/utils");
-const styled_1 = __importDefault(require("@os-design/styled"));
-const ListContainer = styled_1.default.div `
-  height: 100%;
-  
+const WindowScroller_1 = __importDefault(require("./WindowScroller"));
+const useResizedItemHeight_1 = __importDefault(require("./utils/useResizedItemHeight"));
+const OuterContainer = styled_1.default.div `
   // Set the bottom border between list items
-  & > div > div > div:not(:last-of-type) {
-    border-bottom: 1px solid rgba(0,0,0,0.05);
+  & > div > div:not(:last-of-type) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
   }
 `;
 const List = props => {
-    const { threshold = 10, loadNext = () => undefined, itemRenderer = () => null, } = props;
-    const containerRef = react_1.useRef(null);
-    const [containerHeight, setContainerHeight] = react_1.useState(0);
-    const [itemHeight, setItemHeight] = react_1.useState(0);
-    react_1.useEffect(() => {
-        const getItemHeight = () => {
-            const { clientWidth } = document.body;
-            if (clientWidth < utils_1.minBreakpoints.md)
-                return 60;
-            if (clientWidth < utils_1.minBreakpoints.xxl)
-                return 80;
-            return 90;
-        };
-        const resizeHandler = () => {
-            if (!containerRef.current)
-                return;
-            const { clientHeight } = containerRef.current;
-            if (clientHeight !== containerHeight)
-                setContainerHeight(clientHeight);
-            const nextItemHeight = getItemHeight();
-            if (itemHeight !== nextItemHeight)
-                setItemHeight(nextItemHeight);
-        };
-        const throttledResizeHandler = utils_1.throttling(resizeHandler, 100);
-        throttledResizeHandler();
-        window.addEventListener('resize', throttledResizeHandler);
-        return () => window.removeEventListener('resize', throttledResizeHandler);
-    }, [containerHeight, itemHeight]);
+    const { itemHeight = 60, threshold = 10, overscanCount = 10, paddingTop = 0, paddingBottom = 0, loadNext = () => undefined, itemRenderer = () => null, } = props;
+    const size = utils_1.useWindowSize();
+    const resizedItemHeight = useResizedItemHeight_1.default(itemHeight);
+    const listRef = react_1.useRef(null);
     const scrollHandler = (p) => {
-        const clientHeight = containerRef.current ? containerRef.current.clientHeight : 0;
-        const maxScrollTopBeforeLoad = (props.itemCount - threshold) * itemHeight - clientHeight;
-        if (p.scrollOffset > maxScrollTopBeforeLoad)
+        if (listRef.current)
+            listRef.current.scrollTo(p.scrollTop);
+        const maxItemBeforeLoad = props.itemCount - threshold;
+        const maxScrollTopBeforeLoad = maxItemBeforeLoad * resizedItemHeight + paddingTop - size.height;
+        if (p.scrollTop > maxScrollTopBeforeLoad)
             loadNext();
     };
-    return (react_1.default.createElement(ListContainer, { ref: containerRef },
-        react_1.default.createElement(react_window_1.FixedSizeList, { width: '100%', height: containerHeight, itemSize: itemHeight, itemCount: props.itemCount, onScroll: scrollHandler }, itemRenderer)));
+    const innerElementType = react_1.forwardRef(({ style, ...rest }, ref) => (react_1.default.createElement("div", Object.assign({ ref: ref, style: {
+            ...style,
+            height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`,
+        } }, rest))));
+    const outerElementType = react_1.forwardRef((p, ref) => (react_1.default.createElement(OuterContainer, Object.assign({ ref: ref }, p))));
+    return (react_1.default.createElement(WindowScroller_1.default, { onScroll: scrollHandler },
+        react_1.default.createElement(react_window_1.FixedSizeList, { ref: listRef, width: '100%', height: size.height, itemSize: resizedItemHeight, itemCount: props.itemCount, style: { height: '100% important!' }, overscanCount: overscanCount, innerElementType: innerElementType, outerElementType: outerElementType }, ({ style, ...rest }) => (itemRenderer({
+            style: {
+                ...style,
+                top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTop}px`,
+            },
+            ...rest,
+        })))));
 };
 exports.default = List;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@os-design/core",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "license": "MIT",
@@ -20,7 +20,10 @@ "main": "lib/index.js",
     "@emotion/core": "^10.0.22",
+    "@n8tb1t/use-scroll-position": "^1.0.43",
     "@os-design/icons": "^0.0.18",
     "@os-design/styled": "^0.0.8",
-    "@os-design/utils": "^0.0.10",
+    "@os-design/utils": "^0.0.11",
     "@types/facepaint": "^1.2.1",
     "facepaint": "^1.2.1",
+    "react-measure": "^2.3.0",
+    "react-virtualized": "^9.21.2",
     "react-window": "^1.8.5"
@@ -34,5 +37,6 @@ },
     "@os-design/theming": "^0.0.8",
+    "@types/react-measure": "^2.0.5",
     "@types/react-window": "^1.8.1"
   },
-  "gitHead": "4672f2c0c0919594d1339ecec7bda97fb0809076"
+  "gitHead": "0ca64c9b6f5c437bebf48326253c916ae4bdc679"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

275833

increased by2.97%

Number of package files

290

increased by4.32%

Lines of code

3363

increased by2.75%

Worsened metrics

Dependency count

12

increased by33.33%

Dev dependency count

3

increased by50%

Dependency changes

• + Added@n8tb1t/use-scroll-position@^1.0.43

• + Addedreact-measure@^2.3.0

• + Addedreact-virtualized@^9.21.2

• + Added@n8tb1t/use-scroll-position@1.0.47(transitive)

• + Added@os-design/utils@0.0.11(transitive)

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.11(transitive)

• + Addedclsx@1.2.1(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddom-helpers@5.2.1(transitive)

• + Addedget-node-dimensions@1.2.2(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-measure@2.5.2(transitive)

• + Addedreact-virtualized@9.22.5(transitive)

• + Addedresize-observer-polyfill@1.5.1(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@os-design/utils@0.0.10(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-type@4.0.0(transitive)

• Updated@os-design/utils@^0.0.11