@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

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,32 +0,0 @@
-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' ? 'secondary' : 'primary',
-        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,120 +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);
-        }
-    }, [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]);
-    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 };