@arcblock/ux 2.1.19 → 2.1.22

package/lib/Datatable/TableSearch.js

@@ -21,6 +21,8 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _DatatableContext = require("./DatatableContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,6 +39,9 @@ function TableSearch(_ref) {
   const [inputMode, setInputMode] = (0, _react.useState)(false);
   const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
   const inputTimer = (0, _react.useRef)(null);
+  const {
+    loading
+  } = (0, _DatatableContext.useDatatableContext)();
   const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
   const clickSearchIcon = () => {
@@ -63,6 +68,7 @@ function TableSearch(_ref) {
   const clickClose = () => {
     setInputMode(false);
     searchClose();
+    setInnerSearchText('');
     onSearchOpen(false);
   };
 
@@ -80,15 +86,20 @@ function TableSearch(_ref) {
         onClick: clickSearchIcon,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : ''),
-      children: inputMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      children: [inputMode && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         variant: "standard",
         spacing: 2,
         onChange: onChange,
         value: searchDebounceTime ? innerSearchText : searchText || '',
         autoFocus: true
-      })
+      }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        disabled: true,
+        variant: "standard",
+        spacing: 2,
+        value: searchDebounceTime ? innerSearchText : searchText || ''
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : ''),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {

package/lib/Layout/dashboard/index.js

@@ -36,7 +36,7 @@ var _sidebar = _interopRequireDefault(require("./sidebar"));
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["closeMenu"],
-      _excluded2 = ["children", "title", "headerProps", "links"],
+      _excluded2 = ["children", "title", "headerProps", "links", "fullWidth"],
       _excluded3 = ["legacy"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,7 +72,8 @@ function Dashboard(_ref2) {
     children,
     title,
     headerProps,
-    links
+    links,
+    fullWidth
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
@@ -124,10 +125,13 @@ function Dashboard(_ref2) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         className: "dashboard-main",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
-          className: "dashboard-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, _objectSpread(_objectSpread({
+          className: "dashboard-content"
+        }, fullWidth && {
+          maxWidth: false
+        }), {}, {
           children: children
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
           className: "dashboard-footer"
         })]
       })]
@@ -139,17 +143,19 @@ Dashboard.propTypes = {
   children: _propTypes.default.any.isRequired,
   title: _propTypes.default.string,
   links: _propTypes.default.array.isRequired,
-  headerProps: _propTypes.default.object
+  headerProps: _propTypes.default.object,
+  fullWidth: _propTypes.default.bool
 };
 Dashboard.defaultProps = {
   title: 'Home',
-  headerProps: {}
+  headerProps: {},
+  fullWidth: false
 };
 
 const Wrapper = _styledComponents.default.div.withConfig({
   displayName: "dashboard__Wrapper",
   componentId: "sc-arvc7q-0"
-})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;padding:0 24px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}.dashboard-footer{padding-left:30px;}"]);
+})(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}.dashboard-footer{padding-left:30px;}"]);
 
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "dashboard__StyledUxHeader",

package/lib/Layout/dashboard/sidebar.js

@@ -83,7 +83,7 @@ const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255
 const Root = _styledComponents.default.div.withConfig({
   displayName: "sidebar__Root",
   componentId: "sc-gaosgy-0"
-})(["display:flex;flex-direction:column;ul{list-style:none;margin:0;padding:0;}.layout-sidebar-link{display:flex;flex-direction:column;align-items:center;padding:16px 0;color:", ";text-decoration:none;&:hover,&.layout-sidebar-link--active{color:", ";background:", ";border-left-color:", ";}}.layout-sidebar-icon{display:inline-block;width:32px;height:32px;> img,> svg{width:32px;height:32px;}}.layout-sidebar-badge{position:relative;&:after{content:'';position:absolute;width:10px;height:10px;border-radius:10px;background-color:#fe4e44;right:-2px;top:0;box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1);}}.layout-sidebar-link-text{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;}"], props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
+})(["display:flex;flex-direction:column;ul{list-style:none;margin:0;padding:0;}.layout-sidebar-link{display:flex;flex-direction:column;align-items:center;padding:22px 24px;color:", ";text-decoration:none;&:hover,&.layout-sidebar-link--active{color:", ";background:", ";border-left-color:", ";}}.layout-sidebar-icon{display:inline-block;width:32px;height:32px;> img,> svg{width:32px;height:32px;}}.layout-sidebar-badge{position:relative;&:after{content:'';position:absolute;width:10px;height:10px;border-radius:10px;background-color:#fe4e44;right:-2px;top:0;box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 20px rgba(0,0,0,0.1);}}.layout-sidebar-link-text{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;}"], props => props.theme.palette.text.secondary, props => props.theme.palette.primary.main, gradient, _colors.teal.A700);
 
 var _default = Sidebar;
 exports.default = _default;

package/package.json

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

package/src/Datatable/TableSearch.js

@@ -6,11 +6,13 @@ import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
 import styled from 'styled-components';
+import { useDatatableContext } from './DatatableContext';
 
 export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
   const [inputMode, setInputMode] = useState(false);
   const [innerSearchText, setInnerSearchText] = useState('');
   const inputTimer = useRef(null);
+  const { loading } = useDatatableContext();
 
   const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
@@ -35,6 +37,7 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
   const clickClose = () => {
     setInputMode(false);
     searchClose();
+    setInnerSearchText('');
     onSearchOpen(false);
   };
 
@@ -57,7 +60,7 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
       )}
 
       <div className={`toolbar-search-area ${inputMode ? 'toolbar-btn-show' : ''}`}>
-        {inputMode && (
+        {inputMode && !loading && (
           <TextField
             variant="standard"
             spacing={2}
@@ -66,6 +69,15 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
             autoFocus
           />
         )}
+        {/* loading完成后没办法使用focus方法，所以改用两个 TextField */}
+        {loading && (
+          <TextField
+            disabled
+            variant="standard"
+            spacing={2}
+            value={searchDebounceTime ? innerSearchText : searchText || ''}
+          />
+        )}
       </div>
       <div className={`toolbar-search-close ${inputMode ? 'toolbar-btn-show' : ''}`}>
         <IconButton onClick={clickClose}>

package/src/Layout/dashboard/index.js

@@ -25,7 +25,7 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
   return <NavMenu {...rest} />;
 }
 
-function Dashboard({ children, title, headerProps, links, ...rest }) {
+function Dashboard({ children, title, headerProps, links, fullWidth, ...rest }) {
   const theme = useTheme();
   const location = useLocation();
   const navItems = useMemo(
@@ -66,7 +66,9 @@ function Dashboard({ children, title, headerProps, links, ...rest }) {
           </Box>
         </Hidden>
         <Box className="dashboard-main">
-          <Container className="dashboard-content">{children}</Container>
+          <Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
+            {children}
+          </Container>
           <Footer className="dashboard-footer" />
         </Box>
       </Box>
@@ -79,11 +81,13 @@ Dashboard.propTypes = {
   title: PropTypes.string,
   links: PropTypes.array.isRequired,
   headerProps: PropTypes.object,
+  fullWidth: PropTypes.bool,
 };
 
 Dashboard.defaultProps = {
   title: 'Home',
   headerProps: {},
+  fullWidth: false,
 };
 
 const Wrapper = styled.div`
@@ -100,7 +104,6 @@ const Wrapper = styled.div`
     box-sizing: border-box;
     flex: 0 0 auto;
     width: 104px;
-    padding: 0 24px;
     &:hover {
       overflow-y: auto;
     }

package/src/Layout/dashboard/sidebar.js

@@ -51,7 +51,7 @@ const Root = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 16px 0;
+    padding: 22px 24px;
     color: ${(props) => props.theme.palette.text.secondary};
     text-decoration: none;