@mezzanine-ui/react 0.12.9 → 0.13.1

package/Table/useTableScroll.js

@@ -1,141 +1,239 @@
-import { useRef, useContext, useState, useCallback, useMemo, useEffect } from 'react';
-import { TableContext, TableDataContext } from './TableContext.js';
-import { usePreviousValue } from '../hooks/usePreviousValue.js';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 
+const HEADER_DEFAULT_HEIGHT = 40; // px
+const SCROLL_BAR_MIN_START_AT = 4; // px
+const SCROLL_BAR_MAX_END_SPACING = 16; // px
+const FETCH_MORE_TRIGGER_AT_BOTTOM = 46; // px
+const SCROLL_BAR_DISPLAY_TIMES = 1500; // ms
+const defaultScrollBarTrackStyle = {
+    position: 'absolute',
+    right: 0,
+    top: `${HEADER_DEFAULT_HEIGHT}px`,
+    width: 12,
+    height: 0,
+    opacity: '0',
+    transition: '0.1s opacity ease-in',
+    backgroundColor: '#F2F2F2',
+};
 const defaultScrollBarStyle = {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'flex-start',
     position: 'absolute',
     right: 0,
-    top: 0,
+    top: `${SCROLL_BAR_MIN_START_AT}px`,
     width: 10,
     height: 0,
     borderRadius: 10,
+    transform: 'translate3d(0, 0, 0)',
     outline: 'none',
     opacity: '0',
     transition: '0.1s opacity ease-in',
     backgroundColor: 'transparent',
 };
-const SCROLL_BAR_MIN_START_AT = 4; // px
-const SCROLL_BAR_MAX_END_SPACING = 16; // px
-const FETCH_MORE_TRIGGER_AT_BOTTOM = 46; // px
-const SCROLL_BAR_DISPLAY_TIMES = 1000; // ms
-function useTableScroll() {
-    const bodyRef = useRef(null);
+function useTableScroll(props) {
+    const { onFetchMore, loading, scrollBarSize = 4, } = props;
+    const scrollRef = useRef(null);
+    const tableRef = useRef(null);
+    const scrollBarTrackRef = useRef(null);
     const scrollBarRef = useRef(null);
     const scrollBarDisplayTimer = useRef();
-    const { fetchMore, loading, scrollBarSize = 4, } = useContext(TableContext) || {};
-    const { dataSource = [], } = useContext(TableDataContext) || {};
     const [scrollBarHeight, setScrollBarHeight] = useState(0);
     const [pointerOffset, setPointerOffset] = useState(0);
+    const [isHorizontalScrolling, toggleIsHorizontalScrolling] = useState(false);
     /** set scroll bar callback */
     const onSetScrollBarHeight = useCallback(() => {
-        if (!bodyRef.current)
+        /** @NOTE Scroll bar 高度為可視區域的百分比 */
+        if (!scrollRef.current)
             return;
-        const { scrollHeight, clientHeight: tableHeight, } = bodyRef.current;
-        const nextHeight = Math.max((tableHeight - SCROLL_BAR_MAX_END_SPACING) * (tableHeight / scrollHeight), tableHeight / 10);
+        const { scrollHeight, clientHeight: tableHeight, } = scrollRef.current;
+        const bodyHeight = scrollHeight - HEADER_DEFAULT_HEIGHT;
+        const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
+        const nextHeight = Math.max((viewAreaHeight - (SCROLL_BAR_MAX_END_SPACING * 2)) * (viewAreaHeight / bodyHeight), tableHeight / 10);
         setScrollBarHeight(nextHeight);
     }, []);
     /** display/hide scroll bar */
     const onHideScrollBar = useCallback(() => {
         if (!scrollBarRef.current)
             return;
-        scrollBarRef.current.style.opacity = '0';
-        scrollBarRef.current.style.pointerEvents = 'none';
+        if (scrollBarDisplayTimer.current) {
+            window.clearTimeout(scrollBarDisplayTimer.current);
+        }
+        scrollBarDisplayTimer.current = window.setTimeout(() => {
+            if (scrollBarRef.current) {
+                scrollBarRef.current.style.opacity = '0';
+                scrollBarRef.current.style.pointerEvents = 'none';
+            }
+            if (scrollBarTrackRef.current) {
+                scrollBarTrackRef.current.style.opacity = '0';
+                scrollBarTrackRef.current.style.pointerEvents = 'none';
+            }
+        }, SCROLL_BAR_DISPLAY_TIMES);
     }, []);
     const onDisplayScrollBar = useCallback(() => {
-        if (!scrollBarRef.current || !bodyRef.current)
+        if (!scrollBarRef.current || !scrollRef.current || !scrollBarTrackRef.current)
+            return;
+        /** 觸控螢幕不需要 scroll bar */
+        const isTouchEnabled = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+        /** firefox 的滾軸只能同時顯示 or 取消，所以乾脆就用原生的（除非能單獨關掉直向的滾軸，只顯示橫向的才行） */
+        const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+        if (isTouchEnabled || isFirefox)
             return;
+        scrollBarRef.current.style.opacity = '1';
+        scrollBarRef.current.style.pointerEvents = 'auto';
+        scrollBarTrackRef.current.style.opacity = '1';
+        scrollBarTrackRef.current.style.pointerEvents = 'auto';
         if (scrollBarDisplayTimer.current) {
             window.clearTimeout(scrollBarDisplayTimer.current);
         }
-        scrollBarRef.current.style.opacity = '1';
-        scrollBarRef.current.style.pointerEvents = 'auto';
-        scrollBarDisplayTimer.current = window.setTimeout(() => onHideScrollBar(), SCROLL_BAR_DISPLAY_TIMES);
     }, []);
-    /** reset scroll bar height when sources changed */
-    const prevSourceLength = usePreviousValue(dataSource.length);
-    const currentSourceLength = useMemo(() => dataSource.length, [dataSource.length]);
-    useEffect(() => {
-        // first initial render
-        onSetScrollBarHeight();
+    const resetPointerOffset = useCallback(() => setPointerOffset(0), []);
+    /** scroll bar style reset when mouse leave */
+    const onScrollBarLeave = useCallback(() => {
+        if (scrollBarRef.current) {
+            scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize}px`;
+        }
+        resetPointerOffset();
+    }, []);
+    /** when use mouse to drag scroll bar, get cursor position */
+    const onScrollBarMouseDown = useCallback(({ clientY }) => {
+        const { current: scrollBar } = scrollBarRef;
+        if (!scrollBar)
+            return;
+        const { top: initScrollBarTop } = scrollBar.getBoundingClientRect();
+        setPointerOffset(clientY - initScrollBarTop);
     }, []);
+    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), []);
+    /** 偵測 table 高度是否發生變化，有的話就要重新計算 scroll bar 長度 */
     useEffect(() => {
-        if (prevSourceLength !== currentSourceLength) {
-            onSetScrollBarHeight();
+        const { current: table } = tableRef;
+        function resizing() {
+            window.requestAnimationFrame(onSetScrollBarHeight);
         }
-    }, [prevSourceLength, currentSourceLength]);
-    /** set the scroll bar default position */
-    useEffect(() => {
-        if (!scrollBarRef.current || !bodyRef.current)
-            return;
-        scrollBarRef.current.style.top = `${SCROLL_BAR_MIN_START_AT}px`;
+        if (table) {
+            const observer = new ResizeObserver(resizing);
+            observer.observe(table);
+            return () => {
+                observer.disconnect();
+            };
+        }
+        return () => { };
     }, []);
     useEffect(() => {
-        const { current: body } = bodyRef;
+        const { current: body } = scrollRef;
         const { current: scrollBar } = scrollBarRef;
-        if (!body || !scrollBar)
+        const { current: scrollBarTrack } = scrollBarTrackRef;
+        if (!body || !scrollBar || !scrollBarTrack)
             return;
+        /** 游標在滾軸上長按並移動 */
         function onMouseMove({ clientY }) {
-            const { scrollTop, scrollHeight, clientHeight: tableHeight, } = body;
+            const { scrollHeight, clientHeight: tableHeight, } = body;
             if (!pointerOffset)
                 return;
             // keep scroll bar display when moving
             window.requestAnimationFrame(onDisplayScrollBar);
             const { top: tableTop, } = body.getBoundingClientRect();
-            const nextScrollBarTop = (clientY - tableTop - pointerOffset) + scrollTop;
-            const maxScrollBarTop = scrollHeight - scrollBarHeight - SCROLL_BAR_MAX_END_SPACING;
-            const clampScrollBarTop = Math.min(Math.max(nextScrollBarTop, SCROLL_BAR_MIN_START_AT), // min boundary
-            maxScrollBarTop);
-            scrollBar.style.setProperty('top', `${clampScrollBarTop}px`);
-            body.scrollTop = (((scrollHeight - tableHeight) * (clampScrollBarTop)) /
-                (scrollHeight - scrollBarHeight));
+            /** Table 最大滾動距離 */
+            const maxScrollDistance = scrollHeight - tableHeight;
+            /** 游標在 scroll bar 上的位置 */
+            const scrollBarCurrentPosition = clientY - (tableTop + HEADER_DEFAULT_HEIGHT) - pointerOffset;
+            /** 可視區域高度 */
+            const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
+            /** 最大滑動距離 */
+            const maxScrollBarDistance = viewAreaHeight - scrollBarHeight - SCROLL_BAR_MAX_END_SPACING;
+            /** 計算出來的距離 */
+            const clampScrollBarTop = Math.min(Math.max(scrollBarCurrentPosition, 0), // min boundary
+            maxScrollBarDistance);
+            scrollBar.style.setProperty('transform', `translate3d(0, ${clampScrollBarTop}px, 0)`);
+            body.scrollTop = ((clampScrollBarTop * maxScrollDistance) / maxScrollBarDistance);
+        }
+        /** 在滾軸滑軌上點擊，直接滾動到指定位置上 */
+        function onMouseClick({ clientY }) {
+            if (!scrollBar)
+                return;
+            const { scrollHeight, clientHeight: tableHeight, } = body;
+            // keep scroll bar display when moving
+            window.requestAnimationFrame(onDisplayScrollBar);
+            const { top: tableTop, } = body.getBoundingClientRect();
+            /** Table 最大滾動距離 */
+            const maxScrollDistance = scrollHeight - tableHeight;
+            /** 游標在 Track 上的位置 */
+            const scrollBarCurrentPosition = clientY - (tableTop + HEADER_DEFAULT_HEIGHT) - (scrollBarHeight / 2);
+            /** 可視區域高度 */
+            const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
+            /** 最大滑動距離 */
+            const maxScrollBarDistance = viewAreaHeight - scrollBarHeight - SCROLL_BAR_MAX_END_SPACING;
+            /** 計算出來的距離 */
+            const clampScrollBarTop = Math.min(Math.max(scrollBarCurrentPosition, 0), // min boundary
+            maxScrollBarDistance);
+            scrollBar.style.setProperty('transform', `translate3d(0, ${clampScrollBarTop}px, 0)`);
+            body.scrollTop = ((clampScrollBarTop * maxScrollDistance) / maxScrollBarDistance);
+        }
+        /** 游標移動到滾軸/滑軌上方時 */
+        function onMouseOver() {
+            scrollBar.style.setProperty('transition', '0s');
+            onDisplayScrollBar();
+        }
+        /** 游標移開滾軸/滑軌上方時 */
+        function onMouseLeave() {
+            scrollBar.style.setProperty('transition', '0.1s');
+            onHideScrollBar();
         }
         scrollBar.addEventListener('mousemove', onMouseMove, false);
+        scrollBar.addEventListener('mouseover', onMouseOver, false);
+        scrollBar.addEventListener('mouseleave', onMouseLeave, false);
+        scrollBarTrack.addEventListener('mousemove', onMouseMove, false);
+        scrollBarTrack.addEventListener('mouseover', onMouseOver, false);
+        scrollBarTrack.addEventListener('mouseleave', onMouseLeave, false);
+        scrollBarTrack.addEventListener('click', onMouseClick, false);
         return () => {
             scrollBar.removeEventListener('mousemove', onMouseMove, false);
+            scrollBar.removeEventListener('mouseover', onMouseOver, false);
+            scrollBar.removeEventListener('mouseleave', onMouseLeave, false);
+            scrollBarTrack.removeEventListener('mousemove', onMouseMove, false);
+            scrollBarTrack.removeEventListener('mouseover', onMouseOver, false);
+            scrollBarTrack.removeEventListener('mouseleave', onMouseLeave, false);
+            scrollBarTrack.removeEventListener('click', onMouseClick, false);
         };
-    }, [scrollBarHeight, pointerOffset, onDisplayScrollBar]);
-    const resetPointerOffset = useCallback(() => setPointerOffset(0), []);
+    }, [scrollBarHeight, pointerOffset, onDisplayScrollBar, onHideScrollBar]);
     /** scroll bar fatter when mouse enter */
     const onScrollBarEnter = useCallback(() => {
         if (scrollBarRef.current) {
             scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize + 6}px`;
         }
     }, []);
-    /** scroll bar style reset when mouse leave */
-    const onScrollBarLeave = useCallback(() => {
-        if (scrollBarRef.current) {
-            scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize}px`;
-        }
-        resetPointerOffset();
-    }, []);
-    /** when use mouse to drag scroll bar, get cursor position */
-    const onScrollBarMouseDown = useCallback(({ target, clientY }) => {
-        if (!target)
-            return;
-        const { top: initScrollBarTop } = target.getBoundingClientRect();
-        setPointerOffset(clientY - initScrollBarTop);
-    }, []);
-    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), []);
     /** scroll table directly */
     const setScrollBarTop = useCallback(() => {
-        if (bodyRef.current) {
-            const { clientHeight: tableHeight, scrollTop, scrollHeight, } = bodyRef.current;
+        if (scrollRef.current) {
+            const { clientHeight: tableHeight, scrollTop, scrollHeight, } = scrollRef.current;
             /** @NOTE don't apply scroll change when use pointer dragging */
             if (scrollBarRef.current && !pointerOffset) {
-                scrollBarRef.current.style.top = `${(scrollTop * (tableHeight - scrollBarHeight - SCROLL_BAR_MAX_END_SPACING)) /
-                    (scrollHeight - tableHeight) + scrollTop + SCROLL_BAR_MIN_START_AT}px`;
+                const bodyHeight = scrollHeight - HEADER_DEFAULT_HEIGHT;
+                const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
+                const distance = Math.max((viewAreaHeight * Math.max((scrollTop / bodyHeight), 0)), 0);
+                scrollBarRef.current.style.transform = `translate3d(0, ${distance}px, 0)`;
+            }
+            if (scrollBarTrackRef.current) {
+                scrollBarTrackRef.current.style.height = `${tableHeight - HEADER_DEFAULT_HEIGHT}px`;
             }
         }
     }, [scrollBarHeight, pointerOffset]);
-    const onScroll = useCallback(() => {
-        window.requestAnimationFrame(onDisplayScrollBar);
+    const onScroll = useCallback((scrollTarget) => {
+        /** 使用者開始橫向滾動 */
+        if (scrollTarget.target.scrollLeft) {
+            toggleIsHorizontalScrolling(true);
+        }
+        else {
+            toggleIsHorizontalScrolling(false);
+        }
         if (loading)
             return;
-        if (bodyRef.current) {
-            const { clientHeight, scrollTop, scrollHeight, } = bodyRef.current;
+        if (scrollRef.current) {
+            const { clientHeight, scrollTop, scrollHeight, } = scrollRef.current;
+            /** 如果不需要滾動，則不需要觸發 */
+            if (clientHeight >= scrollHeight)
+                return;
+            window.requestAnimationFrame(onDisplayScrollBar);
             /** @Note safari specific bug fix for scroll bouncing */
             const belowBottom = scrollTop > (scrollHeight - clientHeight);
             if (belowBottom)
@@ -143,28 +241,40 @@ function useTableScroll() {
             window.requestAnimationFrame(setScrollBarTop);
             /** trigger fetchMore when scrolling */
             if ((scrollHeight - (scrollTop + clientHeight)) < FETCH_MORE_TRIGGER_AT_BOTTOM) {
-                fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.onFetchMore();
+                onFetchMore === null || onFetchMore === void 0 ? void 0 : onFetchMore();
             }
         }
-    }, [loading, setScrollBarTop, onDisplayScrollBar, fetchMore]);
+        window.requestAnimationFrame(onHideScrollBar);
+    }, [loading, setScrollBarTop, onDisplayScrollBar, onFetchMore, onHideScrollBar]);
     const scrollBarStyle = useMemo(() => ({
         ...defaultScrollBarStyle,
         height: `${scrollBarHeight}px`,
     }), [scrollBarHeight]);
+    const scrollBarTrackStyle = useMemo(() => {
+        var _a, _b;
+        return ({
+            ...defaultScrollBarTrackStyle,
+            height: `${(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0}px`,
+        });
+    }, [scrollBarHeight]);
     /** composing result */
-    const tableBody = {
-        ref: bodyRef,
+    const tableScrollContainer = {
+        ref: scrollRef,
+        target: tableRef,
         onScroll,
     };
     const scrollElement = {
         ref: scrollBarRef,
+        trackRef: scrollBarTrackRef,
+        scrollBarSize,
         onMouseDown: onScrollBarMouseDown,
         onMouseUp: onScrollBarMouseUp,
         onMouseEnter: onScrollBarEnter,
         onMouseLeave: onScrollBarLeave,
         style: scrollBarStyle,
+        trackStyle: scrollBarTrackStyle,
     };
-    return [tableBody, scrollElement];
+    return [tableScrollContainer, scrollElement, isHorizontalScrolling];
 }
 
 export { useTableScroll as default };

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './utils/getElement';
 export * from './utils/jsx-types';
 export * from './utils/general';
 export * from './utils/scroll-lock';
+export * from './utils/array-move';
 export * from './hooks/useClickAway';
 export * from './hooks/useComposeRefs';
 export * from './hooks/useDocumentEscapeKeyDown';
@@ -51,7 +52,7 @@ export { AccordionProps, AccordionSummaryProps, AccordionSummary, AccordionDetai
 export { BadgeContainerProps, BadgeContainer, BadgeProps, default as Badge, } from './Badge';
 export { CardProps, CardActionsProps, CardActions, default as Card, } from './Card';
 export { EmptyProps, default as Empty, } from './Empty';
-export { TableProps, TableRefreshProps, TableRefresh, default as Table, } from './Table';
+export { TableProps, TableRefreshProps, TableRefresh, useTableDraggable, useTableScroll, default as Table, } from './Table';
 export { TagSize, TagProps, default as Tag, } from './Tag';
 export { usePagination, PaginationItemProps, PaginationItemType, PaginationItem, PaginationJumperProps, PaginationJumper, PaginationPageSizeProps, PaginationPageSize, PaginationProps, default as Pagination, } from './Pagination';
 export { TreeNodeProp, TreeNodeData, TreeNodeEntity, TreeNodeEntities, TreeNodeRefsShape, TreeNodeRefs, TreeExpandControl, uniqueArray, toggleValue, toggleValueWithStatusControl, traverseTree, UseTreeExpandedValueProps, useTreeExpandedValue, GetTreeNodeEntitiesProps, getTreeNodeEntities, TreeNodeElementProps, TreeNodeProps, TreeNode, TreeNodeListElementProps, TreeNodeListProps, TreeNodeList, TreeProps, default as Tree, } from './Tree';

package/index.js

@@ -1,6 +1,7 @@
 export { composeRefs } from './utils/composeRefs.js';
 export { getElement } from './utils/getElement.js';
 export { allowBodyScroll, lockBodyScroll } from './utils/scroll-lock.js';
+export { arrayMove } from './utils/array-move.js';
 export { useClickAway } from './hooks/useClickAway.js';
 export { useComposeRefs } from './hooks/useComposeRefs.js';
 export { useDocumentEscapeKeyDown } from './hooks/useDocumentEscapeKeyDown.js';
@@ -23,6 +24,7 @@ export { useSelectValueControl } from './Form/useSelectValueControl.js';
 export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
 export { IconButton } from './Button/index.js';
 export { default as Typography } from './Typography/Typography.js';
+export { default as useTableScroll } from './Table/useTableScroll.js';
 export { default as useModalContainer } from './Modal/useModalContainer.js';
 export { default as Transition } from './Transition/Transition.js';
 export { default as ConfigProvider } from './Provider/ConfigProvider.js';
@@ -57,6 +59,7 @@ export { default as CardActions } from './Card/CardActions.js';
 export { default as Card } from './Card/Card.js';
 export { default as Empty } from './Empty/Empty.js';
 export { default as TableRefresh } from './Table/refresh/TableRefresh.js';
+export { useTableDraggable } from './Table/draggable/useTableDraggable.js';
 export { default as Table } from './Table/Table.js';
 export { default as Tag } from './Tag/Tag.js';
 export { usePagination } from './Pagination/usePagination.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.12.9",
+  "version": "0.13.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,13 +31,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.12.9",
-    "@mezzanine-ui/icons": "^0.12.9",
-    "@mezzanine-ui/system": "^0.12.9",
+    "@mezzanine-ui/core": "^0.13.1",
+    "@mezzanine-ui/icons": "^0.13.1",
+    "@mezzanine-ui/system": "^0.13.1",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
+    "react-beautiful-dnd": "^13.1.1",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.4.1"
@@ -49,6 +50,7 @@
     "@types/lodash": "^4.14.188",
     "@types/moment": "^2.13.0",
     "@types/react": "^18.0.25",
+    "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.0.8",
     "@types/react-test-renderer": "^18.0.0",
     "chromatic": "^6.11.4",

package/utils/array-move.d.ts

@@ -0,0 +1 @@
+export declare function arrayMove(arr: any[], old_index: number, new_index: number): any[];

package/utils/array-move.js

@@ -0,0 +1,13 @@
+function arrayMove(arr, old_index, new_index) {
+    const temp = arr.slice(0);
+    if (new_index >= temp.length) {
+        let k = new_index - temp.length + 1;
+        while ((k -= 1)) {
+            temp.push();
+        }
+    }
+    temp.splice(new_index, 0, temp.splice(old_index, 1)[0]);
+    return temp;
+}
+
+export { arrayMove };