@mezzanine-ui/react 1.0.0-alpha.0 → 1.0.0-beta.1

package/Table/useTableScroll.js

@@ -1,296 +0,0 @@
-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: `${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',
-};
-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(undefined);
-    const [scrollBarHeight, setScrollBarHeight] = useState(0);
-    const [pointerOffset, setPointerOffset] = useState(0);
-    const [isHorizontalScrolling, toggleIsHorizontalScrolling] = useState(false);
-    /** set scroll bar callback */
-    const onSetScrollBarHeight = useCallback(() => {
-        /** @NOTE Scroll bar 高度為可視區域的百分比 */
-        if (!scrollRef.current)
-            return;
-        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;
-        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 ||
-            !scrollRef.current ||
-            !scrollBarTrackRef.current)
-            return;
-        /** 觸控螢幕不需要 scroll bar */
-        const isTouchEnabled = 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);
-        }
-    }, []);
-    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();
-    }, [resetPointerOffset, scrollBarSize]);
-    /** 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(), [resetPointerOffset]);
-    /** 偵測 table 高度是否發生變化，有的話就要重新計算 scroll bar 長度 */
-    useEffect(() => {
-        const { current: table } = tableRef;
-        function resizing() {
-            window.requestAnimationFrame(onSetScrollBarHeight);
-        }
-        if (table) {
-            const observer = new ResizeObserver(resizing);
-            observer.observe(table);
-            return () => {
-                observer.disconnect();
-            };
-        }
-        return () => { };
-    }, [onSetScrollBarHeight]);
-    useEffect(() => {
-        const { current: body } = scrollRef;
-        const { current: scrollBar } = scrollBarRef;
-        const { current: scrollBarTrack } = scrollBarTrackRef;
-        if (!body || !scrollBar || !scrollBarTrack)
-            return;
-        /** 游標在滾軸上長按並移動 */
-        function onMouseMove({ clientY }) {
-            const { scrollHeight, clientHeight: tableHeight } = body;
-            if (!pointerOffset)
-                return;
-            // keep scroll bar display when moving
-            window.requestAnimationFrame(onDisplayScrollBar);
-            const { top: tableTop } = body.getBoundingClientRect();
-            /** 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, onHideScrollBar]);
-    /** scroll bar fatter when mouse enter */
-    const onScrollBarEnter = useCallback(() => {
-        if (scrollBarRef.current) {
-            scrollBarRef.current.childNodes[0].style.width =
-                `${scrollBarSize + 6}px`;
-        }
-    }, [scrollBarSize]);
-    /** scroll table directly */
-    const setScrollBarTop = useCallback(() => {
-        if (scrollRef.current) {
-            const { clientHeight: tableHeight, scrollTop, scrollHeight, } = scrollRef.current;
-            /** @NOTE don't apply scroll change when use pointer dragging */
-            if (scrollBarRef.current && !pointerOffset) {
-                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`;
-            }
-        }
-    }, [pointerOffset]);
-    const onScroll = useCallback((scrollTarget) => {
-        /** 使用者開始橫向滾動 */
-        if (scrollTarget.target.scrollLeft) {
-            toggleIsHorizontalScrolling(true);
-        }
-        else {
-            toggleIsHorizontalScrolling(false);
-        }
-        if (loading)
-            return;
-        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)
-                return;
-            window.requestAnimationFrame(setScrollBarTop);
-            /** trigger fetchMore when scrolling */
-            if (scrollHeight - (scrollTop + clientHeight) <
-                FETCH_MORE_TRIGGER_AT_BOTTOM) {
-                onFetchMore === null || onFetchMore === void 0 ? void 0 : onFetchMore();
-            }
-        }
-        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`,
-        });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [scrollBarHeight]);
-    /** composing result */
-    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 [tableScrollContainer, scrollElement, isHorizontalScrolling];
-}
-
-export { useTableScroll as default };

package/Tabs/Tab.d.ts

@@ -1,18 +0,0 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TabProps extends NativeElementPropsWithoutKeyAndRef<'button'> {
-    /**
-     * Whether the tab is active.
-     * Controlled by tabs.
-     */
-    active?: boolean;
-    /**
-     * Whether the tab is disabled
-     * @default false
-     */
-    disabled?: boolean;
-}
-/**
- * The react component for `mezzanine` tab.
- */
-declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
-export default Tab;

package/Tabs/Tab.js

@@ -1,16 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { tabsClasses } from '@mezzanine-ui/core/tabs';
-import cx from 'clsx';
-
-/**
- * The react component for `mezzanine` tab.
- */
-const Tab = forwardRef(function Tab(props, ref) {
-    const { active, children, className, disabled, ...rest } = props;
-    return (jsx("button", { ...rest, ref: ref, type: "button", "aria-disabled": disabled, className: cx(tabsClasses.tab, {
-            [tabsClasses.tabActive]: active,
-        }, className), disabled: disabled, children: children }));
-});
-
-export { Tab as default };

package/Tabs/TabPane.d.ts

@@ -1,14 +0,0 @@
-import { ReactElement } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { TabProps } from './Tab';
-export interface TabPaneProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * Only for tabs to control the tab pane.
-     */
-    tab: ReactElement<TabProps>;
-}
-/**
- * The react component for `mezzanine` tab pane.
- */
-declare const TabPane: import("react").ForwardRefExoticComponent<TabPaneProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TabPane;

package/Tabs/TabPane.js

@@ -1,19 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { tabsClasses } from '@mezzanine-ui/core/tabs';
-import cx from 'clsx';
-
-/**
- * The react component for `mezzanine` tab pane.
- */
-const TabPane = forwardRef(function TabPane(props, ref) {
-    const { children, className, 
-    /**
-     * Ignore it
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    tab, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(tabsClasses.pane, className), children: children }));
-});
-
-export { TabPane as default };

package/Tabs/Tabs.d.ts

@@ -1,39 +0,0 @@
-import { Key, MouseEvent, ReactElement, ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { TabPaneProps } from './TabPane';
-export type TabsChild = ReactElement<TabPaneProps>;
-export interface TabsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
-    /**
-     * Current TabPane's index
-     */
-    activeKey?: Key;
-    /**
-     * Actions on the right side of tabBar
-     */
-    actions?: ReactNode;
-    /**
-     * The tab panes in tabs
-     */
-    children: TabsChild | TabsChild[];
-    /**
-     * Initial active TabPane's key, if activeKey is not set.
-     */
-    defaultActiveKey?: Key;
-    /**
-     * The change event handler of Tabs
-     */
-    onChange?: (activeKey: Key) => void;
-    /**
-     * Callback executed when tab is clicked
-     */
-    onTabClick?: (key: Key, event: MouseEvent) => void;
-    /**
-     * The className of tabBar
-     */
-    tabBarClassName?: string;
-}
-/**
- * The react component for `mezzanine` tabs.
- */
-declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Tabs;

package/Tabs/Tabs.js

@@ -1,52 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, Children, cloneElement } from 'react';
-import { tabsClasses } from '@mezzanine-ui/core/tabs';
-import { ChevronLeftIcon, ChevronRightIcon } from '@mezzanine-ui/icons';
-import { useCustomControlValue } from '../Form/useCustomControlValue.js';
-import useTabsOverflow from './useTabsOverflow.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-
-/**
- * The react component for `mezzanine` tabs.
- */
-const Tabs = forwardRef(function Tabs(props, ref) {
-    const { activeKey: activeKeyProp, actions, children, className, defaultActiveKey = 0, onChange, onTabClick, tabBarClassName, ...rest } = props;
-    const tabsRef = useRef(null);
-    const [activeKey, setActiveKey] = useCustomControlValue({
-        defaultValue: defaultActiveKey,
-        onChange,
-        value: activeKeyProp,
-    });
-    const tabs = Children.map(children, (tabPane, index) => {
-        var _a;
-        const key = (_a = tabPane.key) !== null && _a !== void 0 ? _a : index;
-        const { tab } = tabPane.props;
-        const active = activeKey.toString() === key.toString();
-        return cloneElement(tab, {
-            key,
-            active,
-            onClick: (event) => {
-                if (!active) {
-                    setActiveKey(key);
-                }
-                if (onTabClick) {
-                    onTabClick(key, event);
-                }
-            },
-        });
-    });
-    let pane;
-    Children.forEach(children, (tabPane, index) => {
-        var _a;
-        const child = tabPane;
-        const key = (_a = child.key) !== null && _a !== void 0 ? _a : index;
-        if (activeKey.toString() === key.toString()) {
-            pane = child;
-        }
-    });
-    const { isOverflowing, isScrollToBegin, isScrollToEnd, scrollToLeft, scrollToRight, } = useTabsOverflow(tabsRef);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(tabsClasses.host, className), children: [jsxs("div", { className: cx(tabsClasses.tabBar, tabBarClassName), children: [jsxs("div", { className: tabsClasses.overflow, children: [isOverflowing && !isScrollToBegin && (jsx("button", { "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button", children: jsx(Icon, { icon: ChevronLeftIcon }) })), jsx("div", { ref: tabsRef, className: tabsClasses.tabs, children: tabs }), isOverflowing && !isScrollToEnd && (jsx("button", { "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button", children: jsx(Icon, { icon: ChevronRightIcon }) }))] }), actions] }), pane] }));
-});
-
-export { Tabs as default };

package/Tabs/index.d.ts

@@ -1,6 +0,0 @@
-export type { TabProps } from './Tab';
-export { default as Tab } from './Tab';
-export type { TabPaneProps } from './TabPane';
-export { default as TabPane } from './TabPane';
-export type { TabsChild, TabsProps } from './Tabs';
-export { default } from './Tabs';

package/Tabs/index.js

@@ -1,3 +0,0 @@
-export { default as Tab } from './Tab.js';
-export { default as TabPane } from './TabPane.js';
-export { default } from './Tabs.js';

package/Tabs/useTabsOverflow.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from 'react';
-export default function useTabsOverflow(tabsRef: RefObject<HTMLElement | null>): {
-    isOverflowing: boolean;
-    isScrollToBegin: boolean;
-    isScrollToEnd: boolean;
-    scrollToLeft: () => void;
-    scrollToRight: () => void;
-};

package/Tabs/useTabsOverflow.js

@@ -1,62 +0,0 @@
-import { useState, useEffect } from 'react';
-
-function useTabsOverflow(tabsRef) {
-    const [isOverflowing, setIsOverflowing] = useState(false);
-    const [scrollState, setScrollState] = useState('begin');
-    const isScrollToBegin = scrollState === 'begin';
-    const isScrollToEnd = scrollState === 'end';
-    function scrollToLeft() {
-        if (tabsRef.current) {
-            tabsRef.current.scrollTo(0, 0);
-        }
-    }
-    function scrollToRight() {
-        if (tabsRef.current) {
-            const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
-            tabsRef.current.scrollTo(offsetRight, 0);
-        }
-    }
-    useEffect(() => {
-        if (tabsRef.current) {
-            const handleOverflowingState = () => {
-                if (tabsRef.current) {
-                    setIsOverflowing(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
-                }
-            };
-            const handleScrollState = () => {
-                if (tabsRef.current) {
-                    const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
-                    if (tabsRef.current.scrollLeft === 0) {
-                        setScrollState('begin');
-                    }
-                    else if (tabsRef.current.scrollLeft >= offsetRight) {
-                        setScrollState('end');
-                    }
-                    else {
-                        setScrollState('middle');
-                    }
-                }
-            };
-            // init isOverflowing when mounting
-            handleOverflowingState();
-            window.addEventListener('resize', handleOverflowingState);
-            tabsRef.current.addEventListener('scroll', handleScrollState);
-            return () => {
-                const { current: tabsEl } = tabsRef;
-                if (tabsEl) {
-                    window.removeEventListener('resize', handleOverflowingState);
-                    tabsEl.removeEventListener('scroll', handleScrollState);
-                }
-            };
-        }
-    }, [tabsRef]);
-    return {
-        isOverflowing,
-        isScrollToBegin,
-        isScrollToEnd,
-        scrollToLeft,
-        scrollToRight,
-    };
-}
-
-export { useTabsOverflow as default };