@arcblock/ux 2.1.39 → 2.1.42

package/lib/Datatable/TableSearch.js

@@ -43,7 +43,7 @@ function TableSearch(_ref) {
     searchPlaceholder,
     searchAlwaysOpen
   } = options;
-  const [inputExpand, setInputExpand] = (0, _react.useState)(searchOpen || false);
+  const [inputExpand, setInputExpand] = (0, _react.useState)(!!searchText || searchOpen || false);
   const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
   const inputTimer = (0, _react.useRef)(null);
   const {

package/lib/Datatable/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Datatable;
+exports.getDurableData = void 0;
 
 var _react = require("react");
 
@@ -31,7 +32,7 @@ var _DatatableContext = require("./DatatableContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped", "verticalKeyWidth", "hideTableHeader", "components", "emptyNode"];
+const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped", "verticalKeyWidth", "hideTableHeader", "components", "emptyNode", "durable", "durableKeys"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -80,7 +81,9 @@ function ReDatatable(_ref2) {
     verticalKeyWidth,
     hideTableHeader,
     components,
-    emptyNode
+    emptyNode,
+    durable,
+    durableKeys
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
@@ -284,43 +287,55 @@ function ReDatatable(_ref2) {
   }
 
   (0, _react.useEffect)(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+  const durableData = getDurableData(durable);
 
-  const opts = _objectSpread({
+  const opts = _objectSpread(_objectSpread(_objectSpread({
     selectableRows: 'none',
     textLabels,
     rowsPerPage: 10,
     rowsPerPageOptions: [10, 20, 50]
-  }, options);
+  }, durableData), options), {}, {
+    // Wrap the more friendly onChange callback by listening to onTableChange,
+    // which will only be triggered when the table key state changes
+    onTableChange: (action, tableState) => {
+      if (action === 'propsUpdate') {
+        return;
+      }
 
-  if (onChange) {
-    Object.assign(opts, {
-      serverSide: true,
-      // Wrap the more friendly onChange callback by listening to onTableChange,
-      // which will only be triggered when the table key state changes
-      onTableChange: (action, tableState) => {
-        if (action === 'propsUpdate') {
-          return;
-        }
+      const state = {
+        count: tableState.count,
+        page: tableState.page,
+        rowsPerPage: tableState.rowsPerPage,
+        searchText: tableState.searchText,
+        sortOrder: tableState.sortOrder,
+        //
+        filterList: tableState.filterList
+      };
 
-        const state = {
-          count: tableState.count,
-          page: tableState.page,
-          rowsPerPage: tableState.rowsPerPage,
-          searchText: tableState.searchText,
-          sortOrder: tableState.sortOrder,
-          //
-          filterList: tableState.filterList
-        };
-        const stateStr = JSON.stringify(state);
-
-        if (stateStr === oldState.current) {
-          return;
-        }
+      if (durable) {
+        const needSaveState = {};
+        durableKeys.forEach(key => {
+          needSaveState[key] = state[key];
+        });
+        localStorage.setItem("datatable-durable-".concat(durable), JSON.stringify(needSaveState));
+      }
+
+      const stateStr = JSON.stringify(state);
+
+      if (stateStr === oldState.current) {
+        return;
+      }
+
+      oldState.current = stateStr;
 
-        oldState.current = stateStr;
+      if (onChange) {
         onChange(state, action);
       }
-    });
+    }
+  });
+
+  if (onChange) {
+    opts.serverSide = true;
   }
 
   const props = _objectSpread(_objectSpread({
@@ -361,7 +376,9 @@ ReDatatable.propTypes = {
   verticalKeyWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   hideTableHeader: _propTypes.default.bool,
   components: _propTypes.default.object,
-  emptyNode: _propTypes.default.node
+  emptyNode: _propTypes.default.node,
+  durable: _propTypes.default.string,
+  durableKeys: _propTypes.default.array
 };
 ReDatatable.defaultProps = {
   options: {},
@@ -375,8 +392,27 @@ ReDatatable.defaultProps = {
   verticalKeyWidth: '',
   hideTableHeader: false,
   components: {},
-  emptyNode: ''
+  emptyNode: '',
+  durable: '',
+  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder']
 };
+
+const getDurableData = key => {
+  const durableKey = "datatable-durable-".concat(key);
+  let localData = localStorage[durableKey];
+
+  if (localData) {
+    try {
+      localData = JSON.parse(localData);
+    } catch (err) {
+      console.error("parse durable data error (key:".concat(key, ") => "), err);
+    }
+  }
+
+  return localData || {};
+};
+
+exports.getDurableData = getDurableData;
 const alignCss = (0, _styledComponents.css)([".MuiTableCell-head{[class*='MUIDataTableHeadCell-toolButton']{width:100%;> [class*='MUIDataTableHeadCell-sortAction']{width:100%;}}&.pc-align-center{text-align:center;[class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction']{justify-content:center;}}&.pc-align-right{text-align:right;[class*='MUIDataTableHeadCell-toolButton']{margin-right:0;padding-right:0;& > [class*='MUIDataTableHeadCell-sortAction']{justify-content:flex-end;}}}}.MuiTableCell-body{&.pc-align-center{text-align:center;}&.pc-align-right{text-align:right;}}"]);
 
 const TableContainer = _styledComponents.default.div.withConfig({

package/lib/Header/header.js

@@ -98,7 +98,7 @@ Header.propTypes = {
   // brand 右侧的内容区域, 可显示一个 badge 或 tag
   brandAddon: _propTypes.default.node,
   // brand 下方的描述
-  description: _propTypes.default.string,
+  description: _propTypes.default.node,
   children: _propTypes.default.node,
   // 右侧区域, 可以放置 icons/actions/login 等
   addons: _propTypes.default.node,

package/lib/NavMenu/style.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const NavMenuBase = _styledComponents.default.nav.withConfig({
   displayName: "style__NavMenuBase",
   componentId: "sc-2g7isz-0"
-})(["background-color:", ";font-size:14px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;height:22px;max-height:22px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
+})(["background-color:", ";font-size:16px;ul{list-style:none;margin:0;padding:0;}.navmenu-item,.navmenu-sub{display:flex;align-items:center;}a{color:inherit;}.navmenu-item,.navmenu-sub{color:", ";}.navmenu-item--active,.navmenu-item:hover,.navmenu-sub--opened{color:", ";}.navmenu-item{position:relative;cursor:pointer;transition:color 0.2s ease-in-out;a{text-decoration:none;white-space:nowrap;}a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.navmenu-sub{position:relative;cursor:pointer;}.navmenu-item-icon,.navmenu-sub-icon,.navmenu-sub-expand-icon{display:flex;line-height:1;}.navmenu-item-icon,.navmenu-sub-icon{margin-right:4px;}.navmenu-item-icon > *,.navmenu-sub-icon > *{width:auto;height:22px;max-height:22px;font-size:1.5em;}.navmenu-sub-expand-icon{margin-left:8px;> *{width:0.8em;height:0.8em;transition:transform 0.2s ease-in-out;}}"], props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
 
 const HorizontalStyle = (0, _styledComponents.default)(NavMenuBase).withConfig({
   displayName: "style__HorizontalStyle",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.39",
+  "version": "2.1.42",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "ef7f78300191acb94bc9a2e590ac7a2c54193bde",
+  "gitHead": "077fc503a95b41c9fe5d8dab0bc8d50300105e46",
   "dependencies": {
-    "@arcblock/icons": "^2.1.39",
-    "@arcblock/react-hooks": "^2.1.39",
+    "@arcblock/icons": "^2.1.42",
+    "@arcblock/react-hooks": "^2.1.42",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Datatable/TableSearch.js

@@ -11,7 +11,7 @@ import { useDatatableContext } from './DatatableContext';
 
 export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
   const { searchOpen, searchPlaceholder, searchAlwaysOpen } = options;
-  const [inputExpand, setInputExpand] = useState(searchOpen || false);
+  const [inputExpand, setInputExpand] = useState(!!searchText || searchOpen || false);
   const [innerSearchText, setInnerSearchText] = useState('');
   const inputTimer = useRef(null);
   const { loading } = useDatatableContext();

package/src/Datatable/index.js

@@ -42,6 +42,8 @@ function ReDatatable({
   hideTableHeader,
   components,
   emptyNode,
+  durable,
+  durableKeys,
   ...rest
 }) {
   const oldState = useRef(null);
@@ -216,39 +218,53 @@ function ReDatatable({
 
   useEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
 
+  const durableData = getDurableData(durable);
+
   const opts = {
     selectableRows: 'none',
     textLabels,
     rowsPerPage: 10,
     rowsPerPageOptions: [10, 20, 50],
+    ...durableData,
     ...options,
+    // Wrap the more friendly onChange callback by listening to onTableChange,
+    // which will only be triggered when the table key state changes
+    onTableChange: (action, tableState) => {
+      if (action === 'propsUpdate') {
+        return;
+      }
+      const state = {
+        count: tableState.count,
+        page: tableState.page,
+        rowsPerPage: tableState.rowsPerPage,
+        searchText: tableState.searchText,
+        sortOrder: tableState.sortOrder, //
+        filterList: tableState.filterList,
+      };
+
+      if (durable) {
+        const needSaveState = {};
+
+        durableKeys.forEach((key) => {
+          needSaveState[key] = state[key];
+        });
+
+        localStorage.setItem(`datatable-durable-${durable}`, JSON.stringify(needSaveState));
+      }
+
+      const stateStr = JSON.stringify(state);
+      if (stateStr === oldState.current) {
+        return;
+      }
+      oldState.current = stateStr;
+      if (onChange) {
+        onChange(state, action);
+      }
+    },
   };
 
   if (onChange) {
-    Object.assign(opts, {
-      serverSide: true,
-      // Wrap the more friendly onChange callback by listening to onTableChange,
-      // which will only be triggered when the table key state changes
-      onTableChange: (action, tableState) => {
-        if (action === 'propsUpdate') {
-          return;
-        }
-        const state = {
-          count: tableState.count,
-          page: tableState.page,
-          rowsPerPage: tableState.rowsPerPage,
-          searchText: tableState.searchText,
-          sortOrder: tableState.sortOrder, //
-          filterList: tableState.filterList,
-        };
-        const stateStr = JSON.stringify(state);
-        if (stateStr === oldState.current) {
-          return;
-        }
-        oldState.current = stateStr;
-        onChange(state, action);
-      },
-    });
+    opts.serverSide = true;
   }
 
   const props = {
@@ -290,6 +306,8 @@ ReDatatable.propTypes = {
   hideTableHeader: PropTypes.bool,
   components: PropTypes.object,
   emptyNode: PropTypes.node,
+  durable: PropTypes.string,
+  durableKeys: PropTypes.array,
 };
 
 ReDatatable.defaultProps = {
@@ -305,6 +323,21 @@ ReDatatable.defaultProps = {
   hideTableHeader: false,
   components: {},
   emptyNode: '',
+  durable: '',
+  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
+};
+
+export const getDurableData = (key) => {
+  const durableKey = `datatable-durable-${key}`;
+  let localData = localStorage[durableKey];
+  if (localData) {
+    try {
+      localData = JSON.parse(localData);
+    } catch (err) {
+      console.error(`parse durable data error (key:${key}) => `, err);
+    }
+  }
+  return localData || {};
 };
 
 const alignCss = css`

package/src/Header/header.js

@@ -41,7 +41,7 @@ Header.propTypes = {
   // brand 右侧的内容区域, 可显示一个 badge 或 tag
   brandAddon: PropTypes.node,
   // brand 下方的描述
-  description: PropTypes.string,
+  description: PropTypes.node,
   children: PropTypes.node,
   // 右侧区域, 可以放置 icons/actions/login 等
   addons: PropTypes.node,

package/src/NavMenu/style.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const NavMenuBase = styled.nav`
   background-color: ${(props) => props.$bgColor};
-  font-size: 14px;
+  font-size: 16px;
   ul {
     list-style: none;
     margin: 0;