@kne/table-page 0.1.4 → 0.1.6

package/dist/index.modern.js

@@ -18,7 +18,6 @@ import findLastIndex from 'lodash/findLastIndex';
 import isEqual from 'lodash/isEqual';
 import { useDebouncedCallback } from 'use-debounce';
 import { ReactSortable } from 'react-sortablejs';
-import set from 'lodash/set';
 import cloneDeep from 'lodash/cloneDeep';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import filterZhCN from '@kne/react-filter/dist/locale/zh-CN';
@@ -1336,6 +1335,20 @@ const useSort = (props = {}) => {
 };
 useSort.sortDataSource = sortDataSource;
 
+const getColumnConfig = (config, columnName, field, defaultValue) => {
+  const columnConfig = config == null ? void 0 : config[columnName];
+  if (columnConfig != null && columnConfig[field] !== undefined) {
+    return columnConfig[field];
+  }
+  const legacyValue = get(config, `${columnName}.${field}`);
+  return legacyValue === undefined ? defaultValue : legacyValue;
+};
+const setColumnConfig = (config, columnName, updates) => {
+  return Object.assign({}, config, {
+    [columnName]: Object.assign({}, config == null ? void 0 : config[columnName], updates)
+  });
+};
+
 var configStyle = {"cell-resize-bar":"kne-table-page_PNaAP","table-changer-setting":"kne-table-page_B0U-O","is-active":"kne-table-page_vHrQo","table-config-header":"kne-table-page_Zp8MN","table-config-header-title":"kne-table-page_Pc6jR","columns-control-content":"kne-table-page_saJmr","columns-control-content-title":"kne-table-page_YmHni","columns-control-content-scroller":"kne-table-page_rgqWB","columns-control-sortable-list":"kne-table-page_JRcBW","columns-control-content-footer":"kne-table-page_nLwW1","columns-control-content-input":"kne-table-page_9qyJs","columns-control-content-list":"kne-table-page_Sslzr","columns-control-content-item":"kne-table-page_7CamD","is-drag":"kne-table-page_X18rq","columns-control-content-item-icon":"kne-table-page_Eab-e","columns-control-overlay":"kne-table-page_eT4HV","header-col":"kne-table-page_bjDly","header-cell-inner":"kne-table-page_9FKgD"};
 
 const locale$1 = {
@@ -1408,9 +1421,9 @@ const ColumnsControlContent = withLocale(({
       if (item.fixed === true || item.fixed === 'left') {
         return 'leftFixedColumns';
       }
-      return get(config, `${item.name}.visible`) !== true && item.hidden || get(config, `${item.name}.visible`) === false ? 'hiddenColumns' : 'visibleColumns';
+      return getColumnConfig(config, item.name, 'visible') !== true && item.hidden || getColumnConfig(config, item.name, 'visible') === false ? 'hiddenColumns' : 'visibleColumns';
     })), (result, value, key) => {
-      result[key] = value.sort((a, b) => get(config, `${a.name}.rank`, 0) - get(config, `${b.name}.rank`, 0));
+      result[key] = value.sort((a, b) => getColumnConfig(config, a.name, 'rank', 0) - getColumnConfig(config, b.name, 'rank', 0));
     }, {});
   }, [columns, config]);
   const sortableVisibleColumns = useMemo(() => {
@@ -1422,10 +1435,14 @@ const ColumnsControlContent = withLocale(({
     const newConfig = cloneDeep(config);
     const columnsList = [].concat(columnsState.leftFixedColumns, columnsState.visibleColumns, columnsState.rightFixedColumns);
     (columnsState.hiddenColumns || []).forEach(col => {
-      set(newConfig, `${col.name}.visible`, false);
+      Object.assign(newConfig, setColumnConfig(newConfig, col.name, {
+        visible: false
+      }));
     });
     columnsList.forEach((col, index) => {
-      set(newConfig, `${col.name}.rank`, index + 1);
+      Object.assign(newConfig, setColumnConfig(newConfig, col.name, {
+        rank: index + 1
+      }));
     });
     onChange(newConfig);
   };
@@ -1768,8 +1785,8 @@ const useTableConfig = ({
     }
   }, [name, _controllerOpen, _tableServerApis]);
   const visibleColumns = useMemo(() => {
-    return columns.filter(col => !(get(config, `${col.name}.visible`) === false || get(config, `${col.name}.visible`) !== true && col.hidden === true)).sort((a, b) => {
-      const computedIndex = item => get(config, `${item.name}.rank`, 0) + (item.fixed === 'left' || item.fixed === true ? -10000 : 0) + (item.fixed === 'right' ? 10000 : 0);
+    return columns.filter(col => !(getColumnConfig(config, col.name, 'visible') === false || getColumnConfig(config, col.name, 'visible') !== true && col.hidden === true)).sort((a, b) => {
+      const computedIndex = item => getColumnConfig(config, item.name, 'rank', 0) + (item.fixed === 'left' || item.fixed === true ? -10000 : 0) + (item.fixed === 'right' ? 10000 : 0);
       return computedIndex(a) - computedIndex(b);
     });
   }, [columns, config]);
@@ -1783,7 +1800,7 @@ const useTableConfig = ({
       const {
         width
       } = getColumnSize(col);
-      const contentWidth = get(config, `${col.name}.width`) || width;
+      const contentWidth = getColumnConfig(config, col.name, 'width') || width;
       return sum + withConfigColumnExtra(contentWidth, index, columnCount, _controllerOpen);
     }, 0);
   }, [visibleColumns, config, columnCount, _controllerOpen]);
@@ -1806,7 +1823,7 @@ const useTableConfig = ({
       min,
       max
     } = getColumnSize(column);
-    const currentWidth = Math.min(Math.max(get(config, `${column.name}.width`) || width, min), max);
+    const currentWidth = Math.min(Math.max(getColumnConfig(config, column.name, 'width') || width, min), max);
     return {
       currentWidth,
       min,
@@ -3080,29 +3097,47 @@ TableView.useSelectedRow = useSelectedRow;
 TableView.useSort = useSort;
 TableView.sortDataSource = useSort.sortDataSource;
 
-var style$1 = {"table-page":"kne-table-page_ut9rJ","table-content":"kne-table-page_dxN6N","table-with-toolbar":"kne-table-page_sf06r","has-summary":"kne-table-page_IRdzb","table-in-toolbar":"kne-table-page_sawIT","pagination":"kne-table-page_DSTEf","total_text":"kne-table-page_pJhKr","floating-scrollbar":"kne-table-page_iu8E1","floating-scrollbar-thumb":"kne-table-page_RjZsu","is-moving":"kne-table-page_y-4Ou"};
+var style$1 = {"table-page":"kne-table-page_ut9rJ","table-content":"kne-table-page_dxN6N","table-with-toolbar":"kne-table-page_sf06r","has-summary":"kne-table-page_IRdzb","table-in-toolbar":"kne-table-page_sawIT","pagination":"kne-table-page_DSTEf","total_text":"kne-table-page_pJhKr","floating-scrollbar":"kne-table-page_iu8E1","floating-scrollbar-embedded":"kne-table-page_PIv-C","floating-scrollbar-thumb":"kne-table-page_RjZsu","is-moving":"kne-table-page_y-4Ou"};
 
 const BAR_HEIGHT = 15;
 const THUMB_MARGIN = 2;
 const computeBarMetrics = (scrollEl, viewportState, getPortalContainer) => {
   const rect = scrollEl.getBoundingClientRect();
   const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
-  const useContainerScroll = !isDocumentScrollContainer(portalContainer);
-  const viewport = getViewportRect();
-  const anchorRect = useContainerScroll ? portalContainer.getBoundingClientRect() : viewport;
+  const useEmbeddedPlacement = !isDocumentScrollContainer(portalContainer);
   const trackWidth = rect.width;
   const thumbWidth = Math.max(trackWidth * scrollEl.clientWidth / scrollEl.scrollWidth - THUMB_MARGIN * 2, 24);
   const maxThumbOffset = trackWidth - thumbWidth - THUMB_MARGIN * 2;
   const scrollRatio = scrollEl.scrollWidth > scrollEl.clientWidth ? scrollEl.scrollLeft / (scrollEl.scrollWidth - scrollEl.clientWidth) : 0;
+  const visible = shouldShowFloatingScrollbar(scrollEl, viewportState, getPortalContainer);
+  if (useEmbeddedPlacement) {
+    const containerRect = portalContainer.getBoundingClientRect();
+    return {
+      placement: 'embedded',
+      offsetLeft: Math.round(rect.left - containerRect.left),
+      width: Math.round(trackWidth),
+      thumbWidth,
+      thumbLeft: THUMB_MARGIN + maxThumbOffset * scrollRatio,
+      visible
+    };
+  }
+  const viewport = getViewportRect();
   return {
-    left: rect.left,
-    width: trackWidth,
-    bottom: window.innerHeight - anchorRect.bottom,
+    placement: 'fixed',
+    left: Math.round(rect.left),
+    width: Math.round(trackWidth),
+    bottom: window.innerHeight - viewport.bottom,
     thumbWidth,
     thumbLeft: THUMB_MARGIN + maxThumbOffset * scrollRatio,
-    visible: shouldShowFloatingScrollbar(scrollEl, viewportState, getPortalContainer)
+    visible
   };
 };
+const metricsEqual = (prev, next) => {
+  if (!prev || !next) {
+    return prev === next;
+  }
+  return prev.placement === next.placement && prev.visible === next.visible && prev.width === next.width && prev.thumbWidth === next.thumbWidth && prev.thumbLeft === next.thumbLeft && (prev.placement === 'embedded' ? prev.offsetLeft === next.offsetLeft : prev.left === next.left && prev.bottom === next.bottom);
+};
 const FloatingScrollBar = ({
   metrics,
   onThumbDrag,
@@ -3137,10 +3172,18 @@ const FloatingScrollBar = ({
   if (!(metrics != null && metrics.visible)) {
     return null;
   }
-  const portalTarget = document.body;
+  const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+  const useEmbeddedPlacement = metrics.placement === 'embedded';
+  const portalTarget = useEmbeddedPlacement && portalContainer ? portalContainer : document.body;
   return /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
-    className: classnames(style$1['floating-scrollbar'], 'table-page-floating-scrollbar'),
-    style: {
+    className: classnames(style$1['floating-scrollbar'], 'table-page-floating-scrollbar', {
+      [style$1['floating-scrollbar-embedded']]: useEmbeddedPlacement
+    }),
+    style: useEmbeddedPlacement ? {
+      marginLeft: metrics.offsetLeft,
+      width: metrics.width,
+      height: BAR_HEIGHT
+    } : {
       left: metrics.left,
       width: metrics.width,
       height: BAR_HEIGHT,
@@ -3172,6 +3215,7 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
   const containerRef = useRef(null);
   const scrollElRef = useRef(null);
   const viewportStateRef = useRef(null);
+  const metricsRef = useRef(null);
   const setContainerRef = useRefCallback(node => {
     containerRef.current = node;
     if (typeof forwardedRef === 'function') {
@@ -3183,10 +3227,16 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
   const updateMetrics = useRefCallback(() => {
     const scrollEl = scrollElRef.current;
     if (!scrollEl) {
+      metricsRef.current = null;
       setMetrics(null);
       return;
     }
-    setMetrics(computeBarMetrics(scrollEl, viewportStateRef.current, getPortalContainer));
+    const nextMetrics = computeBarMetrics(scrollEl, viewportStateRef.current, getPortalContainer);
+    if (metricsEqual(metricsRef.current, nextMetrics)) {
+      return;
+    }
+    metricsRef.current = nextMetrics;
+    setMetrics(nextMetrics);
   });
   const handleThumbDrag = useRefCallback(deltaX => {
     const scrollEl = scrollElRef.current;
@@ -3207,6 +3257,7 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
     if (!_enabled) {
       scrollElRef.current = null;
       viewportStateRef.current = null;
+      metricsRef.current = null;
       setMetrics(null);
       return undefined;
     }
@@ -3217,6 +3268,8 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
     let scrollEl = null;
     let unobserveViewport = null;
     let contentResizeObserver = null;
+    const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
+    const useEmbeddedPlacement = !isDocumentScrollContainer(portalContainer);
     const detachScrollEl = () => {
       var _contentResizeObserve;
       unobserveViewport == null || unobserveViewport();
@@ -3238,10 +3291,12 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
       detachScrollEl();
       scrollEl = nextScrollEl;
       scrollElRef.current = scrollEl;
-      unobserveViewport = observeViewportIntersection(scrollEl, state => {
-        viewportStateRef.current = state;
-        updateMetrics();
-      });
+      if (!useEmbeddedPlacement) {
+        unobserveViewport = observeViewportIntersection(scrollEl, state => {
+          viewportStateRef.current = state;
+          updateMetrics();
+        });
+      }
       scrollEl.addEventListener('scroll', updateMetrics, {
         passive: true
       });
@@ -3258,16 +3313,38 @@ const HorizontalScroller = /*#__PURE__*/forwardRef(({
     const containerResizeObserver = new ResizeObserver(onLayoutChange);
     containerResizeObserver.observe(root);
     onLayoutChange();
-    const portalContainer = typeof getPortalContainer === 'function' ? getPortalContainer() : null;
-    if (!isDocumentScrollContainer(portalContainer)) {
+    const onWindowChange = () => {
+      if (!useEmbeddedPlacement) {
+        updateMetrics();
+      }
+    };
+    if (!useEmbeddedPlacement) {
+      var _window$visualViewpor, _window$visualViewpor2;
+      window.addEventListener('scroll', onWindowChange, true);
+      window.addEventListener('resize', onWindowChange);
+      (_window$visualViewpor = window.visualViewport) == null || _window$visualViewpor.addEventListener('resize', onWindowChange);
+      (_window$visualViewpor2 = window.visualViewport) == null || _window$visualViewpor2.addEventListener('scroll', onWindowChange);
+    }
+    if (useEmbeddedPlacement && portalContainer) {
       portalContainer.addEventListener('scroll', updateMetrics, {
         passive: true
       });
+      window.addEventListener('resize', updateMetrics);
     }
     return () => {
       detachScrollEl();
       containerResizeObserver.disconnect();
-      portalContainer == null || portalContainer.removeEventListener('scroll', updateMetrics);
+      if (!useEmbeddedPlacement) {
+        var _window$visualViewpor3, _window$visualViewpor4;
+        window.removeEventListener('scroll', onWindowChange, true);
+        window.removeEventListener('resize', onWindowChange);
+        (_window$visualViewpor3 = window.visualViewport) == null || _window$visualViewpor3.removeEventListener('resize', onWindowChange);
+        (_window$visualViewpor4 = window.visualViewport) == null || _window$visualViewpor4.removeEventListener('scroll', onWindowChange);
+      }
+      if (useEmbeddedPlacement && portalContainer) {
+        portalContainer.removeEventListener('scroll', updateMetrics);
+        window.removeEventListener('resize', updateMetrics);
+      }
     };
   }, [_enabled, updateMetrics, getPortalContainer]);
   return /*#__PURE__*/jsxs(Fragment, {