@mezzanine-ui/react 0.13.9 → 0.13.11

package/Table/sorting/TableSortingIcon.js

@@ -6,24 +6,24 @@ 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 { sorting, } = useContext(TableContext) || {};
-    const { dataIndex, } = column;
-    /** styling */
-    const currentType = (dataIndex === (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);
-        }, style: currentIconStyle.style }));
-});
+const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
+    const { className, column, ...rest } = props;
+    const { sorting, } = useContext(TableContext) || {};
+    const { dataIndex, } = column;
+    /** styling */
+    const currentType = (dataIndex === (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);
+        }, style: currentIconStyle.style }));
+});
 var TableSortingIcon$1 = TableSortingIcon;
 
 export { TableSortingIcon$1 as default };

package/Table/sorting/useTableSorting.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-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>>, "dataIndex" | "sorter" | "onSorted">) => void, {
-    readonly sortedOn: string;
-    readonly sortedType: SortedType;
-    readonly onResetAll: () => void;
-    readonly setDataSource: import("react").Dispatch<import("react").SetStateAction<TableDataSource[]>>;
-}];
+/// <reference types="react" />
+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>>, "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

@@ -5,109 +5,109 @@ 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 { dataIndex, sorter, onSorted } = opts;
-        const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
-        const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
-        const onMappingSources = (sources) => {
-            setDataSource(sources);
-            onSorted === null || onSorted === void 0 ? void 0 : onSorted(dataIndex, 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 dataIndex
-                    setSortedOn(dataIndex);
-                    // getting new source instance (when switch between sorter, should use origin dataSource)
-                    let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
-                    if (typeof sorter === 'function') {
-                        // 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 }];
+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 { dataIndex, sorter, onSorted } = opts;
+        const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
+        const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
+        const onMappingSources = (sources) => {
+            setDataSource(sources);
+            onSorted === null || onSorted === void 0 ? void 0 : onSorted(dataIndex, 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 dataIndex
+                    setSortedOn(dataIndex);
+                    // getting new source instance (when switch between sorter, should use origin dataSource)
+                    let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
+                    if (typeof sorter === 'function') {
+                        // 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 +1,10 @@
-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;
-};
+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

@@ -3,48 +3,48 @@ 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,
-    };
+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 +1,5 @@
-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];
+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 +1,19 @@
 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];
+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 };