@mezzanine-ui/react 0.12.6 → 0.12.8

package/Table/rowSelection/TableRowSelection.js

@@ -12,7 +12,7 @@ import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
 const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
-    var _a;
+    var _a, _b;
     const { rowKey, setChecked, showDropdownIcon, ...rest } = props;
     const { rowSelection, expanding, } = useContext(TableContext) || {};
     const { dataSource = [], } = useContext(TableDataContext) || {};
@@ -72,14 +72,14 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
     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: false, indeterminate: indeterminate, inputProps: {
                     name,
-                }, onChange: onSelected, size: "medium" }), jsx("div", { className: tableClasses.icon, style: hiddenIconWithExpandableStyle.icon, children: showDropdownIcon ? (jsx(Dropdown, { menu: actionMenu, onClose: () => toggleOpen(false), popperProps: {
+                }, onChange: onSelected, size: "medium" }), ((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) === null || _b === void 0 ? void 0 : _b.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 ? 'primary' : 'disabled', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })] }));
+                        }), color: isMenuAllowOpen ? 'primary' : 'disabled', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
 });
 var TableRowSelection$1 = TableRowSelection;
 

package/Table/sorting/useTableSorting.js

@@ -1,8 +1,9 @@
-import { useState, useCallback } from 'react';
+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);
@@ -13,9 +14,17 @@ const sortSource = (prev, cur) => {
         return 1;
     return 0;
 };
-const equalityFn = (a, b) => {
-    const sortedA = a.slice(0).sort(sortSource);
-    const sortedB = b.slice(0).sort(sortSource);
+/**
+ * @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 &&
@@ -34,8 +43,19 @@ function useTableSorting(props) {
     const [dataSource, setDataSource] = useControlValueState({
         defaultValue: [],
         equalityFn,
-        value: dataSourceProp,
+        /** @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')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.12.6",
-    "@mezzanine-ui/icons": "^0.12.6",
-    "@mezzanine-ui/system": "^0.12.6",
+    "@mezzanine-ui/core": "^0.12.8",
+    "@mezzanine-ui/icons": "^0.12.8",
+    "@mezzanine-ui/system": "^0.12.8",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",