@arcblock/ux 2.1.15 → 2.1.18

package/lib/Layout/dashboard-legacy/index.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Dashboard;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactHelmet = _interopRequireDefault(require("react-helmet"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
+
+var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
+
+var _sidebar = _interopRequireDefault(require("./sidebar"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+var _Footer = _interopRequireDefault(require("../../Footer"));
+
+const _excluded = ["children", "title", "brand", "description", "brandAddon", "headerAddon", "images", "links", "prefix", "fullWidth", "contentLayout", "className", "homeUrl", "logo"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "dashboard-legacy__Wrapper",
+  componentId: "sc-z8z10v-0"
+})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.dashboard__footer{padding-left:30px;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
+
+function Dashboard(_ref) {
+  let {
+    children,
+    title,
+    brand,
+    description,
+    brandAddon,
+    headerAddon,
+    images,
+    links,
+    prefix,
+    fullWidth,
+    contentLayout,
+    className,
+    homeUrl,
+    logo
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const breakpoint = 960;
+  const {
+    width
+  } = (0, _useWindowSize.default)();
+  const [drawerMode, setDrawerMode] = (0, _react.useState)(width >= breakpoint ? 'permanent' : 'temporary');
+  const [drawerOpen, setDrawerOpen] = (0, _react.useState)(drawerMode === 'permanent');
+  (0, _react.useEffect)(() => {
+    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
+    setDrawerMode(newMode);
+    setDrawerOpen(newMode !== 'temporary');
+  }, [width]);
+
+  const onToggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+
+  const isFullWidth = fullWidth || contentLayout === 'row';
+  return /*#__PURE__*/_react.default.createElement(Wrapper, Object.assign({
+    className: "dashboard ".concat(className)
+  }, rest), /*#__PURE__*/_react.default.createElement(_reactHelmet.default, {
+    title: "".concat(title, "-").concat(brand)
+  }), /*#__PURE__*/_react.default.createElement(_header.default, {
+    className: "dashboard__header",
+    onToggleMenu: onToggleDrawer,
+    brand: brand,
+    brandAddon: brandAddon,
+    description: description,
+    addons: headerAddon,
+    homeUrl: homeUrl,
+    logo: logo
+  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    display: "flex",
+    className: "dashboard__body"
+  }, /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+    variant: drawerMode,
+    className: "drawer",
+    classes: {
+      paper: 'drawerPaper'
+    },
+    open: drawerOpen,
+    onClose: onToggleDrawer,
+    ModalProps: {
+      disablePortal: true,
+      keepMounted: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(_sidebar.default, {
+    className: "dashboard__sidebar",
+    images: images,
+    links: links,
+    prefix: prefix,
+    logo: logo
+  })), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: "dashboard__main"
+  }, /*#__PURE__*/_react.default.createElement(_Container.default, {
+    maxWidth: isFullWidth ? false : 'lg',
+    className: "dashboard__content"
+  }, children), /*#__PURE__*/_react.default.createElement(_Footer.default, {
+    className: "dashboard__footer"
+  }))));
+}
+
+Dashboard.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  title: _propTypes.default.string,
+  brand: _propTypes.default.string.isRequired,
+  links: _propTypes.default.array.isRequired,
+  images: _propTypes.default.object.isRequired,
+  brandAddon: _propTypes.default.object,
+  description: _propTypes.default.any.isRequired,
+  headerAddon: _propTypes.default.any,
+  prefix: _propTypes.default.string,
+  // 兼容旧版的设置，新版使用 fullWidth 进行设置
+  contentLayout: _propTypes.default.oneOf(['row', 'column']),
+  fullWidth: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  homeUrl: _propTypes.default.string,
+  logo: _propTypes.default.any
+};
+Dashboard.defaultProps = {
+  title: 'Home',
+  contentLayout: 'column',
+  headerAddon: null,
+  brandAddon: null,
+  prefix: '/images',
+  fullWidth: false,
+  className: '',
+  homeUrl: '/',
+  logo: null
+};

package/lib/Layout/dashboard-legacy/sidebar.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _withTheme = _interopRequireDefault(require("@mui/styles/withTheme"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+
+var _colors = require("@mui/material/colors");
+
+var _image = _interopRequireDefault(require("../../Icon/image"));
+
+var _Logo = _interopRequireDefault(require("../../Logo"));
+
+const _excluded = ["location", "theme", "images", "links", "prefix", "addons", "logo"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function Sidebar(_ref) {
+  let {
+    location,
+    theme,
+    images,
+    links,
+    prefix,
+    addons,
+    logo
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const isSelected = (url, name) => {
+    const pattern = new RegExp("/".concat(name));
+    return pattern.test(location.pathname);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(MenuItems, rest, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
+    to: "/",
+    className: "sidebar-logo"
+  }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
+    showText: false,
+    size: 20
+  })), links.map(_ref2 => {
+    let {
+      url,
+      name,
+      title,
+      showBadge
+    } = _ref2;
+    const selected = isSelected(url, name);
+    return /*#__PURE__*/_react.default.createElement(MenuItem, {
+      component: _reactRouterDom.Link,
+      key: url,
+      selected: selected,
+      to: url
+    }, /*#__PURE__*/_react.default.createElement(_image.default, {
+      name: images[name],
+      size: 36,
+      color: selected ? '#00c2c4' : theme.typography.color.main,
+      prefix: prefix,
+      showBadge: showBadge
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      component: "span",
+      className: "menu-title"
+    }, title));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }), addons);
+}
+
+Sidebar.propTypes = {
+  location: _propTypes.default.object.isRequired,
+  theme: _propTypes.default.object.isRequired,
+  images: _propTypes.default.object.isRequired,
+  links: _propTypes.default.array.isRequired,
+  prefix: _propTypes.default.string,
+  addons: _propTypes.default.any,
+  logo: _propTypes.default.any
+};
+Sidebar.defaultProps = {
+  prefix: '/images',
+  addons: null,
+  logo: null
+};
+
+const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({
+  displayName: "sidebar__MenuItems",
+  componentId: "sc-gtwxx4-0"
+})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('md')));
+
+const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
+const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "sidebar__MenuItem",
+  componentId: "sc-gtwxx4-1"
+})(["&&{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;color:", ";}}"], props => props.selected ? gradient : '', props => props.selected ? _colors.teal.A700 : 'transparent', gradient, _colors.teal.A700, props => props.theme.palette.text.primary);
+
+var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
+
+exports.default = _default;

package/lib/NavMenu/nav-menu.js

@@ -189,7 +189,7 @@ function Item(_ref2) {
     if (active) {
       activate(id);
     }
-  }, []);
+  }, [active]);
 
   const handleClick = () => {
     onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -214,8 +214,6 @@ Item.propTypes = {
   id: _propTypes.default.string,
   icon: _propTypes.default.element,
   label: _propTypes.default.node,
-  // 未显式指定各个 item#id 时, 不方便设置 NavMenu#defaultActiveId, 此时可以给 item 指定 active, 表示 nav menu 默认激活该 item
-  // (仅在初始化时有效, 后续更新无效)
   active: _propTypes.default.bool,
   onClick: _propTypes.default.func
 };

package/package.json

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

package/src/Datatable/TableSearch.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -16,6 +16,10 @@ export default function TableSearch({
   onSearchOpen,
 }) {
   const [inputMode, setInputMode] = useState(false);
+  const [innerSearchText, setInnerSearchText] = useState('');
+  const inputTimer = useRef(null);
+
+  const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
     setInputMode(true);
@@ -23,7 +27,16 @@ export default function TableSearch({
   };
 
   const onChange = event => {
-    searchTextUpdate(event.currentTarget.value);
+    const { value } = event.currentTarget;
+    if (searchDebounceTime) {
+      clearTimeout(inputTimer.current);
+      setInnerSearchText(value);
+      inputTimer.current = setTimeout(() => {
+        searchTextUpdate(value);
+      }, searchDebounceTime);
+    } else {
+      searchTextUpdate(value);
+    }
   };
 
   const clickClose = () => {
@@ -56,7 +69,7 @@ export default function TableSearch({
             variant="standard"
             spacing={2}
             onChange={onChange}
-            value={searchText || ''}
+            value={searchDebounceTime ? innerSearchText : searchText || ''}
             autoFocus
           />
         )}

package/src/Datatable/index.js

@@ -4,6 +4,7 @@ import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
 import styled from 'styled-components';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
+import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvide, useDatatableContext } from './DatatableContext';
 
@@ -103,7 +104,10 @@ function ReDatatable({
   useEffect(() => setDisabled(disabled), [disabled]);
 
   let textLabels = {
-    body: { noMatch: 'Sorry, no matching records found', toolTip: 'Sort' },
+    body: {
+      noMatch: <Empty>Sorry, no matching records found</Empty>,
+      toolTip: 'Sort',
+    },
     pagination: {
       next: 'Next Page',
       previous: 'Previous Page',
@@ -125,7 +129,7 @@ function ReDatatable({
 
   if (locale === 'zh') {
     textLabels = {
-      body: { noMatch: '对不起，没有找到匹配的记录', toolTip: '排序' },
+      body: { noMatch: <Empty>对不起，没有找到匹配的记录</Empty>, toolTip: '排序' },
       pagination: {
         next: '下一页',
         previous: '上一页',

package/src/Header/header.js

@@ -32,9 +32,10 @@ function Header({ logo, brand, brandAddon, description, children, addons, prepen
 }
 
 Header.propTypes = {
+  // logo img/svg, 可以包裹一个 a 标签
   logo: PropTypes.node,
-  // 相当于 Title
-  brand: PropTypes.string,
+  // 相当于 Title, 可以包裹一个 a 标签
+  brand: PropTypes.node,
   // brand 右侧的内容区域, 可显示一个 badge 或 tag
   brandAddon: PropTypes.node,
   // brand 下方的描述
@@ -58,7 +59,7 @@ Header.defaultProps = {
 
 const Root = styled.div`
   position: relative;
-  z-index: ${props => props.$theme.zIndex.drawer + 1};
+  z-index: ${props => props.$theme.zIndex.appBar};
   font-size: 14px;
   background: ${props => props.$theme.palette.common.white};
   .header-container {
@@ -95,10 +96,15 @@ const Root = styled.div`
     flex-direction: column;
     flex-shrink: 0;
     margin-right: 16px;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
     .header-brand-title {
       display: flex;
       align-items: center;
       h2 {
+        margin: 0;
         font-size: 16px;
       }
       .header-brand-addon {

package/src/Header/responsive-header.js

@@ -49,7 +49,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
         <Drawer
           open={drawerOpen}
           onClose={() => setDrawerOpen(false)}
-          ModalProps={{ disablePortal: true, keepMounted: true }}>
+          ModalProps={{ disablePortal: false, keepMounted: true }}>
           <Sidebar>
             <div className="header-sidebar-head">
               <div className="header-sidebar-logo">{logo}</div>