@arcblock/ux 2.1.40 → 2.1.43

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); }
 
@@ -55,6 +56,24 @@ function Datatable(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
   });
 }
+
+const fixCellProp = (tempObj, cellProps) => {
+  const cellStyle = {};
+
+  if (tempObj.align) {
+    cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
+  }
+
+  if (tempObj.verticalKeyAlign) {
+    cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
+  }
+
+  if (tempObj.minWidth) {
+    cellStyle.minWidth = tempObj.minWidth;
+  }
+
+  cellProps.style = Object.assign({}, cellProps.style, cellStyle);
+};
 /**
  * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
  * @param {Array} props.customButtons Custom buttons for toolbar
@@ -80,7 +99,9 @@ function ReDatatable(_ref2) {
     verticalKeyWidth,
     hideTableHeader,
     components,
-    emptyNode
+    emptyNode,
+    durable,
+    durableKeys
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
@@ -144,14 +165,7 @@ function ReDatatable(_ref2) {
         cellProps.width = tempObj.width;
       }
 
-      if (tempObj.align) {
-        cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
-      }
-
-      if (tempObj.verticalKeyAlign) {
-        cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
-      }
-
+      fixCellProp(tempObj, cellProps);
       return cellProps;
     }; // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
 
@@ -168,14 +182,7 @@ function ReDatatable(_ref2) {
           cellProps = _objectSpread(_objectSpread({}, cellProps), setCellProps(...arguments) || {});
         }
 
-        if (tempObj.align) {
-          cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
-        }
-
-        if (tempObj.verticalKeyAlign) {
-          cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
-        }
-
+        fixCellProp(tempObj, cellProps);
         return cellProps;
       };
 
@@ -284,43 +291,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);
 
-        oldState.current = stateStr;
+      if (stateStr === oldState.current) {
+        return;
+      }
+
+      oldState.current = stateStr;
+
+      if (onChange) {
         onChange(state, action);
       }
-    });
+    }
+  });
+
+  if (onChange) {
+    opts.serverSide = true;
   }
 
   const props = _objectSpread(_objectSpread({
@@ -361,7 +380,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 +396,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/lib/RelativeTime/index.js

@@ -27,7 +27,7 @@ var _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["value", "locale", "withoutSuffix", "from", "to"];
+const _excluded = ["value", "locale", "withoutSuffix", "from", "to", "type"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -78,7 +78,8 @@ function RelativeTime(_ref) {
     locale,
     withoutSuffix,
     from,
-    to
+    to,
+    type
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -87,20 +88,29 @@ function RelativeTime(_ref) {
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
-  let innerContent;
+  let relativeString;
 
   if (from) {
-    innerContent = (0, _dayjs.default)(value).locale(localeOption).from(from, withoutSuffix);
+    relativeString = (0, _dayjs.default)(value).locale(localeOption).from(from, withoutSuffix);
   } else if (to) {
-    innerContent = (0, _dayjs.default)(value).locale(localeOption).to(to, withoutSuffix);
+    relativeString = (0, _dayjs.default)(value).locale(localeOption).to(to, withoutSuffix);
   } else {
-    innerContent = (0, _dayjs.default)(value).locale(localeOption).fromNow(withoutSuffix);
+    relativeString = (0, _dayjs.default)(value).locale(localeOption).fromNow(withoutSuffix);
+  }
+
+  const absoluteString = (0, _Util.formatToDatetime)(value, {
+    locale: localeOption
+  });
+  let innerContent = relativeString;
+  let popContent = absoluteString;
+
+  if (type === 'absolute') {
+    innerContent = absoluteString;
+    popContent = relativeString;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-    title: (0, _Util.formatToDatetime)(value, {
-      locale: localeOption
-    }),
+    title: popContent,
     placement: "top-end",
     enterTouchDelay: 0,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, rest), {}, {
@@ -114,11 +124,13 @@ RelativeTime.propTypes = {
   locale: _propTypes.default.string,
   withoutSuffix: _propTypes.default.bool,
   from: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  type: _propTypes.default.string
 };
 RelativeTime.defaultProps = {
   locale: 'en',
   withoutSuffix: false,
   from: '',
-  to: ''
+  to: '',
+  type: 'relative'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.40",
+  "version": "2.1.43",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a5a95afc20fc56c089c46c81dda7e8ff4b48744a",
+  "gitHead": "a9cd5a9d9c5e58bba3a4adbf13069ebc37120515",
   "dependencies": {
-    "@arcblock/icons": "^2.1.40",
-    "@arcblock/react-hooks": "^2.1.40",
+    "@arcblock/icons": "^2.1.43",
+    "@arcblock/react-hooks": "^2.1.43",
     "@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

@@ -20,6 +20,24 @@ export default function Datatable({ ...props }) {
   );
 }
 
+const fixCellProp = (tempObj, cellProps) => {
+  const cellStyle = {};
+
+  if (tempObj.align) {
+    cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
+  }
+
+  if (tempObj.verticalKeyAlign) {
+    cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
+  }
+
+  if (tempObj.minWidth) {
+    cellStyle.minWidth = tempObj.minWidth;
+  }
+
+  cellProps.style = Object.assign({}, cellProps.style, cellStyle);
+};
+
 /**
  * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
  * @param {Array} props.customButtons Custom buttons for toolbar
@@ -42,6 +60,8 @@ function ReDatatable({
   hideTableHeader,
   components,
   emptyNode,
+  durable,
+  durableKeys,
   ...rest
 }) {
   const oldState = useRef(null);
@@ -100,13 +120,7 @@ function ReDatatable({
         cellProps.width = tempObj.width;
       }
 
-      if (tempObj.align) {
-        cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
-      }
-
-      if (tempObj.verticalKeyAlign) {
-        cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
-      }
+      fixCellProp(tempObj, cellProps);
 
       return cellProps;
     };
@@ -128,13 +142,7 @@ function ReDatatable({
           };
         }
 
-        if (tempObj.align) {
-          cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
-        }
-
-        if (tempObj.verticalKeyAlign) {
-          cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
-        }
+        fixCellProp(tempObj, cellProps);
 
         return cellProps;
       };
@@ -216,39 +224,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 +312,8 @@ ReDatatable.propTypes = {
   hideTableHeader: PropTypes.bool,
   components: PropTypes.object,
   emptyNode: PropTypes.node,
+  durable: PropTypes.string,
+  durableKeys: PropTypes.array,
 };
 
 ReDatatable.defaultProps = {
@@ -305,6 +329,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;

package/src/RelativeTime/index.js

@@ -34,25 +34,35 @@ dayjs.updateLocale('zh-cn', {
 });
 setDateTool(dayjs);
 
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, ...rest }) {
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, ...rest }) {
   if (!value) {
     return '-';
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
 
-  let innerContent;
+  let relativeString;
 
   if (from) {
-    innerContent = dayjs(value).locale(localeOption).from(from, withoutSuffix);
+    relativeString = dayjs(value).locale(localeOption).from(from, withoutSuffix);
   } else if (to) {
-    innerContent = dayjs(value).locale(localeOption).to(to, withoutSuffix);
+    relativeString = dayjs(value).locale(localeOption).to(to, withoutSuffix);
   } else {
-    innerContent = dayjs(value).locale(localeOption).fromNow(withoutSuffix);
+    relativeString = dayjs(value).locale(localeOption).fromNow(withoutSuffix);
+  }
+
+  const absoluteString = formatToDatetime(value, { locale: localeOption });
+
+  let innerContent = relativeString;
+  let popContent = absoluteString;
+
+  if (type === 'absolute') {
+    innerContent = absoluteString;
+    popContent = relativeString;
   }
 
   return (
-    <Tooltip title={formatToDatetime(value, { locale: localeOption })} placement="top-end" enterTouchDelay={0}>
+    <Tooltip title={popContent} placement="top-end" enterTouchDelay={0}>
       <span {...rest}>{innerContent}</span>
     </Tooltip>
   );
@@ -64,6 +74,7 @@ RelativeTime.propTypes = {
   withoutSuffix: PropTypes.bool,
   from: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.string,
 };
 
 RelativeTime.defaultProps = {
@@ -71,4 +82,5 @@ RelativeTime.defaultProps = {
   withoutSuffix: false,
   from: '',
   to: '',
+  type: 'relative',
 };