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

package/Table/editable/TableEditRenderWrapper.d.ts

@@ -1,7 +0,0 @@
-import { TableColumnBase, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface EditableBodyCellProps extends NativeElementPropsWithoutKeyAndRef<'div'>, TableColumnBase<TableRecord<unknown>> {
-    rowData: TableDataSource;
-}
-declare function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }: EditableBodyCellProps): import("react/jsx-runtime").JSX.Element;
-export default TableEditRenderWrapper;

package/Table/editable/TableEditRenderWrapper.js

@@ -1,16 +0,0 @@
-'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useContext } from 'react';
-import { TableComponentContext } from '../TableContext.js';
-
-function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }) {
-    var _a;
-    const { bodyCell: BodyCell } = useContext(TableComponentContext) || {};
-    const customProps = (_a = setCellProps === null || setCellProps === void 0 ? void 0 : setCellProps(rowData)) !== null && _a !== void 0 ? _a : {};
-    if (typeof BodyCell === 'function') {
-        return (jsx(BodyCell, { ...customProps, ...rest, dataIndex: dataIndex, editable: editable, rowData: rowData, children: children }));
-    }
-    return jsx(Fragment, { children: children });
-}
-
-export { TableEditRenderWrapper as default };

package/Table/expandable/TableExpandable.d.ts

@@ -1,27 +0,0 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface TableExpandableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * whether is expandable or not
-     * @default true
-     */
-    expandable?: boolean;
-    /**
-     * whether is expanded or not
-     */
-    expanded?: boolean;
-    /**
-     * Invoked by expanded status changed.
-     */
-    onExpand?(status: boolean): void;
-    /**
-     * toggle expanded
-     */
-    setExpanded?(e: boolean): void;
-    /**
-     * show icon or not
-     * @default true
-     */
-    showIcon?: boolean;
-}
-declare const TableExpandable: import("react").ForwardRefExoticComponent<TableExpandableProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableExpandable;

package/Table/expandable/TableExpandable.js

@@ -1,24 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import { ChevronDownIcon } from '@mezzanine-ui/icons';
-import Icon from '../../Icon/Icon.js';
-import cx from 'clsx';
-
-const TableExpandable = forwardRef(function TableExpandable(props, ref) {
-    const { className, expandable = true, expanded, onExpand, setExpanded, showIcon = true, ...rest } = props;
-    const onClick = () => {
-        if (expandable) {
-            const nextStatus = !expanded;
-            setExpanded === null || setExpanded === void 0 ? void 0 : setExpanded(nextStatus);
-            if (onExpand) {
-                onExpand(nextStatus);
-            }
-        }
-    };
-    return (jsx("div", { ...rest, ref: ref, className: cx(tableClasses.collapseAction, className), children: jsx("div", { className: tableClasses.icon, children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
-                    [tableClasses.iconClickable]: expandable,
-                }), color: expandable ? 'brand' : 'neutral-faint', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
-});
-
-export { TableExpandable as default };

package/Table/pagination/TablePagination.d.ts

@@ -1,10 +0,0 @@
-import { RefObject } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface TablePaginationProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * body scroll ref
-     */
-    bodyRef: RefObject<HTMLDivElement | null>;
-}
-declare const TablePagination: import("react").ForwardRefExoticComponent<TablePaginationProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TablePagination;

package/Table/pagination/TablePagination.js

@@ -1,26 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import { TableContext } from '../TableContext.js';
-import { useTablePagination } from './useTablePagination.js';
-import Pagination from '../../Pagination/Pagination.js';
-import cx from 'clsx';
-
-const TablePagination = forwardRef(function TablePagination(props, ref) {
-    var _a;
-    const { className, bodyRef, ...rest } = props;
-    const { pagination } = useContext(TableContext) || {};
-    const { current: currentPageProp, onChange: onChangePageProp, total, options: paginationOptions = {}, } = pagination || {};
-    const [currentPage, setCurrentPage] = useTablePagination({
-        bodyRef,
-        current: currentPageProp,
-        onChange: onChangePageProp,
-    });
-    const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, jumperButtonText, jumperHintText, jumperInputPlaceholder, onChangePageSize, pageSize: pageSizeProp, pageSizeLabel, pageSizeOptions, pageSizeUnit, renderPageSizeOptionName, renderPaginationSummary, showJumper, showPageSizeOptions, siblingCount, } = paginationOptions;
-    const currentStartCount = pageSizeProp * (currentPage - 1) + 1;
-    const currentEndCount = Math.min(pageSizeProp * currentPage, total);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.pagination, className), children: [jsx("span", { className: tableClasses.paginationIndicator, children: (_a = renderPaginationSummary === null || renderPaginationSummary === void 0 ? void 0 : renderPaginationSummary(currentStartCount, currentEndCount)) !== null && _a !== void 0 ? _a : `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), jsx("div", { className: tableClasses.paginationActions, children: jsx(Pagination, { boundaryCount: boundaryCount, buttonText: jumperButtonText, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, hintText: jumperHintText, inputPlaceholder: jumperInputPlaceholder, onChange: setCurrentPage, onChangePageSize: onChangePageSize, pageSize: pageSizeProp, pageSizeLabel: pageSizeLabel, pageSizeOptions: pageSizeOptions, pageSizeUnit: pageSizeUnit, renderPageSizeOptionName: renderPageSizeOptionName, showJumper: showJumper, showPageSizeOptions: showPageSizeOptions, siblingCount: siblingCount, total: total }) })] }));
-});
-
-export { TablePagination as default };

package/Table/pagination/useTablePagination.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from 'react';
-import { TablePagination } from '@mezzanine-ui/core/table';
-export interface UseTablePagination {
-    bodyRef: RefObject<HTMLDivElement | null>;
-    current?: TablePagination['current'];
-    onChange?: TablePagination['onChange'];
-}
-export declare function useTablePagination(props: UseTablePagination): readonly [number, (c: number) => void];

package/Table/pagination/useTablePagination.js

@@ -1,30 +0,0 @@
-'use client';
-import { useContext } from 'react';
-import { useControlValueState } from '../../Form/useControlValueState.js';
-import { useLastCallback } from '../../hooks/useLastCallback.js';
-import { TableContext } from '../TableContext.js';
-
-const equalityFn = (a, b) => a === b;
-function useTablePagination(props) {
-    const { bodyRef, current: currentProp, onChange: onChangeProp } = props;
-    const { sorting } = useContext(TableContext) || {};
-    const [current, setCurrent] = useControlValueState({
-        defaultValue: 1,
-        equalityFn,
-        value: currentProp,
-    });
-    const onChange = useLastCallback((newCurrent) => {
-        var _a, _b;
-        if (!equalityFn(current, newCurrent)) {
-            setCurrent(newCurrent);
-            /** reset body scroll position when page changed */
-            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
-            /** reset sorting status */
-            (_b = sorting === null || sorting === void 0 ? void 0 : sorting.onResetAll) === null || _b === void 0 ? void 0 : _b.call(sorting);
-        }
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newCurrent);
-    });
-    return [current, onChange];
-}
-
-export { useTablePagination };

package/Table/refresh/TableRefresh.d.ts

@@ -1,10 +0,0 @@
-import { MouseEvent } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface TableRefreshProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
-    /**
-     * callback when button is clicked
-     */
-    onClick?(e: MouseEvent): void;
-}
-declare const TableRefresh: import("react").ForwardRefExoticComponent<TableRefreshProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableRefresh;

package/Table/refresh/TableRefresh.js

@@ -1,22 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useCallback } from 'react';
-import cx from 'clsx';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import { ResetIcon } from '@mezzanine-ui/icons';
-import { TableContext } from '../TableContext.js';
-import Button from '../../Button/Button.js';
-import Icon from '../../Icon/Icon.js';
-
-const TableRefresh = forwardRef(function TableRefresh(props, ref) {
-    const { className, children, onClick, ...rest } = props;
-    const { setLoading } = useContext(TableContext) || {};
-    const onRefreshClicked = useCallback((e) => {
-        e.stopPropagation();
-        setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [onClick, setLoading]);
-    return (jsx("div", { ref: ref, className: cx(tableClasses.refresh, className), ...rest, children: jsx(Button, { onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }), children: children || '重新整理' }) }));
-});
-
-export { TableRefresh as default };

package/Table/rowSelection/TableRowSelection.d.ts

@@ -1,18 +0,0 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface TableRowSelectionProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * row key to control checkbox
-     */
-    rowKey: string;
-    /**
-     * show dropdown icon or not
-     * @default false
-     */
-    showDropdownIcon?: boolean;
-    /**
-     * function to get check status
-     */
-    setChecked?(c: boolean): void;
-}
-declare const TableRowSelection: import("react").ForwardRefExoticComponent<TableRowSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableRowSelection;

package/Table/rowSelection/TableRowSelection.js

@@ -1,93 +0,0 @@
-'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useCallback, useMemo, useEffect, useState } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import xor from 'lodash/xor';
-import { MoreVerticalIcon } from '@mezzanine-ui/icons';
-import { TableContext, TableDataContext } from '../TableContext.js';
-import { SELECTED_ALL_KEY } from './useTableRowSelection.js';
-import Checkbox from '../../Checkbox/Checkbox.js';
-import Menu from '../../Menu/Menu.js';
-import MenuItem from '../../Menu/MenuItem.js';
-import Dropdown from '../../Dropdown/Dropdown.js';
-import Icon from '../../Icon/Icon.js';
-import cx from 'clsx';
-
-const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
-    var _a, _b, _c;
-    const { rowKey, setChecked, showDropdownIcon, ...rest } = props;
-    const { rowSelection, expanding } = useContext(TableContext) || {};
-    const { dataSource = [] } = useContext(TableDataContext) || {};
-    /** checkbox methods/state */
-    const onSelected = useCallback(() => {
-        rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange(rowKey);
-    }, [rowSelection, rowKey]);
-    const checkboxStatus = useMemo(() => {
-        var _a, _b;
-        const selectedRowKeys = (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
-        if (!selectedRowKeys.length)
-            return 'none';
-        const validDataSource = xor((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys) !== null && _b !== void 0 ? _b : [], dataSource.map((d) => (d.id || d.key)));
-        if (selectedRowKeys.length === validDataSource.length)
-            return 'all';
-        return 'indeterminate';
-    }, [
-        rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys,
-        rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys,
-        dataSource,
-    ]);
-    const selfChecked = useMemo(() => { var _a; return ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : []).some((key) => key === rowKey); }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, rowKey]);
-    /** checkbox props */
-    const isHeaderCheckbox = rowKey === SELECTED_ALL_KEY;
-    const checked = isHeaderCheckbox ? checkboxStatus === 'all' : selfChecked;
-    const indeterminate = isHeaderCheckbox
-        ? checkboxStatus === 'indeterminate'
-        : false;
-    const name = isHeaderCheckbox ? '選擇全部' : '選擇';
-    /** parent callbacks */
-    useEffect(() => {
-        setChecked === null || setChecked === void 0 ? void 0 : setChecked(checked);
-    }, [checked, setChecked]);
-    /** If expandable icon existed, it will affect row selection styling (only when dropdown icon is hidden) */
-    const hiddenIconWithExpandableStyle = useMemo(() => {
-        if (!expanding || showDropdownIcon)
-            return {};
-        return {
-            host: {
-                paddingRight: 0,
-            },
-            icon: {
-                width: 0,
-            },
-        };
-    }, [showDropdownIcon, expanding]);
-    /** menu */
-    const [open, toggleOpen] = useState(false);
-    const isMenuAllowOpen = checked || indeterminate;
-    const onIconClicked = useCallback((evt) => {
-        evt.stopPropagation();
-        if (isMenuAllowOpen)
-            toggleOpen((prev) => !prev);
-    }, [isMenuAllowOpen]);
-    const onMenuItemClicked = (evt, action) => {
-        var _a;
-        evt.stopPropagation();
-        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, rowSelection.selectedRowKeys);
-        toggleOpen(false);
-    };
-    const actionMenu = (jsx(Menu, { size: "medium", children: ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) !== null && _a !== void 0 ? _a : []).map((action) => (jsx(MenuItem, { className: action.className, onClick: (evt) => onMenuItemClicked(evt, action), children: action.text }, action.key))) }));
-    return (jsxs("div", { ref: ref, ...rest, className: tableClasses.selections, style: hiddenIconWithExpandableStyle.host, children: [jsx(Checkbox, { checked: checked, disabled: ((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys) === null || _b === void 0 ? void 0 : _b.length)
-                    ? rowSelection.disabledRowKeys.includes(rowKey)
-                    : false, indeterminate: indeterminate, inputProps: {
-                    name,
-                }, onChange: onSelected, size: "medium" }), ((_c = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) === null || _c === void 0 ? void 0 : _c.length) ? (jsx("div", { className: tableClasses.icon, style: hiddenIconWithExpandableStyle.icon, children: showDropdownIcon ? (jsx(Dropdown, { menu: actionMenu, onClose: () => toggleOpen(false), popperProps: {
-                        open,
-                        options: {
-                            placement: 'bottom-start',
-                        },
-                    }, children: (dropdownRef) => (jsx(Icon, { ref: dropdownRef, className: cx(tableClasses.icon, {
-                            [tableClasses.iconClickable]: isMenuAllowOpen,
-                        }), color: isMenuAllowOpen ? 'brand' : 'neutral-faint', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
-});
-
-export { TableRowSelection as default };

package/Table/rowSelection/useTableRowSelection.d.ts

@@ -1,6 +0,0 @@
-import { TableRowSelection, TableDataSource } from '@mezzanine-ui/core/table';
-export declare const SELECTED_ALL_KEY = "MZN-TABLE-ROW-SELECTION-ALL";
-export interface UseTableRowSelection extends Omit<TableRowSelection, 'actions'> {
-    dataSource: TableDataSource[];
-}
-export declare function useTableRowSelection(props: UseTableRowSelection): readonly [string[], (v: string) => void];

package/Table/rowSelection/useTableRowSelection.js

@@ -1,53 +0,0 @@
-import xor from 'lodash/xor';
-import { useControlValueState } from '../../Form/useControlValueState.js';
-import { useLastCallback } from '../../hooks/useLastCallback.js';
-
-const equalityFn = (a, b) => {
-    const sortedA = a.sort();
-    const sortedB = b.sort();
-    return (sortedA.length === sortedB.length &&
-        sortedA.every((v, idx) => v === sortedB[idx]));
-};
-const SELECTED_ALL_KEY = 'MZN-TABLE-ROW-SELECTION-ALL';
-function useTableRowSelection(props) {
-    const { selectedRowKey: selectedRowKeyProp, onChange: onChangeProp, disabledRowKeys = [], dataSource, } = props;
-    const [selectedRowKey, setSelectedRowKey] = useControlValueState({
-        defaultValue: [],
-        equalityFn,
-        value: selectedRowKeyProp,
-    });
-    const onChange = useLastCallback((rowKey) => {
-        if (!dataSource.length)
-            return;
-        const allSourceKeys = dataSource.map((source) => (source.key || source.id));
-        const validSourceKeys = xor(disabledRowKeys, allSourceKeys);
-        let nextSelectedRowKey = selectedRowKey;
-        if (rowKey === SELECTED_ALL_KEY) {
-            if (equalityFn(selectedRowKey, validSourceKeys)) {
-                nextSelectedRowKey = [];
-            }
-            else {
-                nextSelectedRowKey = validSourceKeys;
-            }
-        }
-        else {
-            const existedRowKeyIdx = selectedRowKey.findIndex((key) => key === rowKey);
-            if (~existedRowKeyIdx) {
-                nextSelectedRowKey = [
-                    ...selectedRowKey.slice(0, existedRowKeyIdx),
-                    ...selectedRowKey.slice(existedRowKeyIdx + 1),
-                ];
-            }
-            else {
-                nextSelectedRowKey = [...selectedRowKey, rowKey];
-            }
-        }
-        setSelectedRowKey(nextSelectedRowKey);
-        if (onChangeProp) {
-            onChangeProp(nextSelectedRowKey);
-        }
-    });
-    return [selectedRowKey, onChange];
-}
-
-export { SELECTED_ALL_KEY, useTableRowSelection };

package/Table/sorting/TableSortingIcon.d.ts

@@ -1,10 +0,0 @@
-import { TableColumn, TableRecord } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface TableSortingIconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
-    /**
-     * current table column
-     */
-    column: TableColumn<TableRecord<unknown>>;
-}
-declare const TableSortingIcon: import("react").ForwardRefExoticComponent<TableSortingIconProps & import("react").RefAttributes<HTMLElement>>;
-export default TableSortingIcon;

package/Table/sorting/TableSortingIcon.js

@@ -1,33 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useContext } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
-import { ArrowRightIcon } from '@mezzanine-ui/icons';
-import { TableContext } from '../TableContext.js';
-import Icon from '../../Icon/Icon.js';
-import cx from 'clsx';
-
-const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
-    const { className, column, ...rest } = props;
-    const uniqueId = useMemo(() => `${crypto.getRandomValues(new Uint32Array(5))[0]}`, []);
-    const { sorting } = useContext(TableContext) || {};
-    const { key = uniqueId } = column;
-    /** styling */
-    const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
-    const currentIconStyle = useMemo(() => ({
-        color: currentType === 'none' ? 'neutral' : 'neutral-strong',
-        style: {
-            transform: `rotate(${90 * (currentType === 'asc' ? -1 : 1)}deg)`,
-        },
-    }), [currentType]);
-    return (jsx(Icon, { ...rest, ref: ref, className: cx(tableClasses.icon, tableClasses.iconClickable, className), color: currentIconStyle.color, icon: ArrowRightIcon, onClick: (evt) => {
-            var _a;
-            evt.stopPropagation();
-            (_a = sorting === null || sorting === void 0 ? void 0 : sorting.onSort) === null || _a === void 0 ? void 0 : _a.call(sorting, {
-                ...column,
-                key,
-            });
-        }, style: currentIconStyle.style }));
-});
-
-export { TableSortingIcon as default };

package/Table/sorting/useTableSorting.d.ts

@@ -1,11 +0,0 @@
-import { TableDataSource, TableColumn, TableRecord } from '@mezzanine-ui/core/table';
-export interface UseTableSorting {
-    dataSource: TableDataSource[];
-}
-export type SortedType = 'desc' | 'asc' | 'none';
-export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "key" | "dataIndex" | "sorter" | "onSorted">) => void, {
-    readonly sortedOn: string;
-    readonly sortedType: SortedType;
-    readonly onResetAll: () => void;
-    readonly setDataSource: import("react").Dispatch<import("react").SetStateAction<TableDataSource[]>>;
-}];

package/Table/sorting/useTableSorting.js

@@ -1,121 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import isEqual from 'lodash/isEqual';
-import get from 'lodash/get';
-import { useControlValueState } from '../../Form/useControlValueState.js';
-import { useLastCallback } from '../../hooks/useLastCallback.js';
-import { usePreviousValue } from '../../hooks/usePreviousValue.js';
-
-const sortSource = (prev, cur) => {
-    const prevKey = (prev.key || prev.id);
-    const curKey = (cur.key || cur.id);
-    if (prevKey < curKey)
-        return -1;
-    if (prevKey > curKey)
-        return 1;
-    return 0;
-};
-/**
- * @NOTE deepCompare = true 時，會深度比較 dataSource 順序是否有不同
- * @NOTE deepCompare = false（預設），則是為了內部排序可以讓 useControlValueState 認為是一樣的 dataSource
- * useControlValueState 會強制把 return value 和傳入的 value 做同步，當有不一樣時就會自動 sync
- * 所以無論如何用 setDataSource 都不會有改變
- */
-const equalityFn = (a, b, deepCompare = false) => {
-    const aTemp = a.slice(0);
-    const bTemp = b.slice(0);
-    const sortedA = deepCompare ? aTemp : aTemp.sort(sortSource);
-    const sortedB = deepCompare ? bTemp : bTemp.sort(sortSource);
-    const mappedAKeys = sortedA.map((s) => (s.key || s.id));
-    const mappedBKeys = sortedB.map((s) => (s.key || s.id));
-    const isShallowEqual = mappedAKeys.length === mappedBKeys.length &&
-        mappedAKeys.every((v, idx) => v === mappedBKeys[idx]);
-    if (isShallowEqual) {
-        // we need to do deep compare to sync dataSources
-        return sortedA.every((v, idx) => isEqual(v, sortedB[idx]));
-    }
-    // since shallow equal checked that array is different, so we don't need do deep compare
-    return false;
-};
-function useTableSorting(props) {
-    const { dataSource: dataSourceProp } = props;
-    const [sortedOn, setSortedOn] = useState('');
-    const [sortedType, setSortedType] = useState('none');
-    const [dataSource, setDataSource] = useControlValueState({
-        defaultValue: [],
-        equalityFn,
-        /** @NOTE 只有當 dataSource 傳入時，並且使用了 table 提供的 sorting，才需要完全同步 dataSource */
-        value: dataSourceProp.length && sortedOn ? dataSourceProp : undefined,
-    });
-    const prevDataSourceProps = usePreviousValue(dataSourceProp);
-    useEffect(() => {
-        /**
-         * @NOTE 條件1: 如果一開始就有傳入值，則直接同步 dataSource
-         * @NOTE 條件2: 深度比較舊 dataSourceProp 跟新的是否有不同，如果有則同步
-         */
-        if (!dataSource.length ||
-            !equalityFn(prevDataSourceProps, dataSourceProp, true)) {
-            setDataSource(dataSourceProp);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [prevDataSourceProps, dataSourceProp]);
-    const getNextSortedType = useCallback((currentType) => {
-        // none -> desc -> asc -> none
-        if (currentType === 'none')
-            return 'desc';
-        if (currentType === 'desc')
-            return 'asc';
-        return 'none';
-    }, []);
-    const onReset = useCallback(() => setSortedOn(''), []);
-    const onResetAll = useCallback(() => {
-        setSortedOn('');
-        setSortedType('none');
-    }, []);
-    const onChange = useLastCallback((opts) => {
-        const { key = '', dataIndex, sorter, onSorted } = opts;
-        const isChosenFromOneToAnother = sortedOn && key !== sortedOn;
-        const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
-        const onMappingSources = (sources) => {
-            setDataSource(sources);
-            onSorted === null || onSorted === void 0 ? void 0 : onSorted(key, nextSortedType);
-        };
-        // only apply changes when column sorter is given
-        if (typeof sorter === 'function' || typeof onSorted === 'function') {
-            // should update next sorted type first
-            setSortedType(nextSortedType);
-            switch (nextSortedType) {
-                case 'desc':
-                case 'asc': {
-                    // update current working key
-                    setSortedOn(key);
-                    // getting new source instance (when switch between sorter, should use origin dataSource)
-                    let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
-                    if (typeof sorter === 'function') {
-                        console.warn('When using a `sorter` function, please provide the `dataIndex` to make sure it worked as expected.');
-                        // sort by given sorter
-                        newSource = newSource.sort((a, b) => 
-                        // reverse result when sorted type is ascending
-                        sorter(get(a, dataIndex || ''), get(b, dataIndex || '')) *
-                            (nextSortedType === 'asc' ? -1 : 1));
-                    }
-                    // map back the data source
-                    onMappingSources(newSource);
-                    break;
-                }
-                case 'none':
-                default: {
-                    onReset();
-                    onMappingSources(dataSourceProp);
-                    break;
-                }
-            }
-        }
-    });
-    return [
-        dataSource,
-        onChange,
-        { sortedOn, sortedType, onResetAll, setDataSource },
-    ];
-}
-
-export { useTableSorting };

package/Table/useTableFetchMore.d.ts

@@ -1,10 +0,0 @@
-import { TableFetchMore, TableDataSource } from '@mezzanine-ui/core/table';
-export interface UseTableFetchMore extends TableFetchMore {
-    dataSource: TableDataSource[];
-    disabled?: boolean;
-}
-export declare function useTableFetchMore(props: UseTableFetchMore): {
-    readonly fetchMore: (() => void) | undefined;
-    readonly isFetching: boolean;
-    readonly isReachEnd: boolean;
-};

package/Table/useTableFetchMore.js

@@ -1,50 +0,0 @@
-import { useMemo, useEffect } from 'react';
-import { useControlValueState } from '../Form/useControlValueState.js';
-import { useLastCallback } from '../hooks/useLastCallback.js';
-import { usePreviousValue } from '../hooks/usePreviousValue.js';
-
-const equalityFn = (a, b) => a === b;
-function useTableFetchMore(props) {
-    const { callback: callbackProp, dataSource, disabled = false, isReachEnd: isReachEndProp, isFetching: isFetchingProp, } = props;
-    /** reach end indicator */
-    const [isReachEnd] = useControlValueState({
-        defaultValue: false,
-        equalityFn,
-        value: isReachEndProp,
-    });
-    /** fetching indicator */
-    const [isFetching, setFetching] = useControlValueState({
-        defaultValue: false,
-        equalityFn,
-        value: isFetchingProp,
-    });
-    const onFetching = useLastCallback((newState) => {
-        if (!equalityFn(isFetching, newState))
-            setFetching(newState);
-    });
-    /** fetchMore called */
-    const onFetchMore = useLastCallback(() => {
-        if (!isFetching && !isReachEnd) {
-            callbackProp();
-            onFetching(true);
-        }
-        if (isReachEnd)
-            onFetching(false);
-    });
-    const fetchMore = callbackProp && !disabled ? onFetchMore : undefined;
-    /** check source length and reset states */
-    const prevSourceLength = usePreviousValue(dataSource.length);
-    const currentSourceLength = useMemo(() => dataSource.length, [dataSource.length]);
-    useEffect(() => {
-        if (prevSourceLength !== currentSourceLength) {
-            onFetching(false);
-        }
-    }, [prevSourceLength, currentSourceLength, onFetching]);
-    return {
-        fetchMore,
-        isFetching,
-        isReachEnd,
-    };
-}
-
-export { useTableFetchMore };

package/Table/useTableLoading.d.ts

@@ -1,5 +0,0 @@
-export declare const SELECTED_ALL_KEY = "MZN-TABLE-ROW-SELECTION-ALL";
-export interface UseTableLoading {
-    loading?: boolean;
-}
-export declare function useTableLoading(props: UseTableLoading): readonly [boolean, (l: boolean) => void];

package/Table/useTableLoading.js

@@ -1,19 +0,0 @@
-import { useControlValueState } from '../Form/useControlValueState.js';
-import { useLastCallback } from '../hooks/useLastCallback.js';
-
-const equalityFn = (a, b) => a === b;
-function useTableLoading(props) {
-    const { loading: loadingProp } = props;
-    const [loading, setLoading] = useControlValueState({
-        defaultValue: false,
-        equalityFn,
-        value: loadingProp,
-    });
-    const onChange = useLastCallback((isLoading) => {
-        if (!equalityFn(loading, isLoading))
-            setLoading(isLoading);
-    });
-    return [loading, onChange];
-}
-
-export { useTableLoading };