@arcblock/ux 2.1.21 → 2.1.24

package/lib/Datatable/index.js

@@ -11,12 +11,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _muiDatatables = _interopRequireWildcard(require("mui-datatables"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
+var _get = _interopRequireDefault(require("lodash/get"));
+
 var _Empty = _interopRequireDefault(require("../Empty"));
 
 var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
@@ -106,14 +108,17 @@ function ReDatatable(_ref2) {
     }
 
     const {
-      setCellHeaderProps
+      setCellHeaderProps,
+      setCellProps
     } = tempObj.options;
 
-    tempObj.options.setCellHeaderProps = columnMeta => {
-      let cellProps = {}; // Complementing width while inheriting old setCellHeaderProps
+    tempObj.options.setCellHeaderProps = function () {
+      let cellProps = {
+        className: ''
+      }; // Complementing width while inheriting old setCellHeaderProps
 
       if (setCellHeaderProps && !setCellHeaderProps.__innerFunc) {
-        cellProps = setCellHeaderProps(columnMeta) || {};
+        cellProps = _objectSpread(_objectSpread({}, cellProps), setCellHeaderProps(...arguments) || {});
       }
 
       if (loading || disabled) {
@@ -126,17 +131,42 @@ function ReDatatable(_ref2) {
         cellProps.width = tempObj.width;
       }
 
+      if (tempObj.align) {
+        cellProps.className = "pc-align-".concat(tempObj.align);
+      }
+
       return cellProps;
     }; // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
 
 
     tempObj.options.setCellHeaderProps.__innerFunc = 1;
+
+    if (tempObj.align || tempObj.style) {
+      tempObj.options.setCellProps = function () {
+        let cellProps = {
+          className: ''
+        }; // Complementing width while inheriting old setCellHeaderProps
+
+        if (setCellProps && !setCellProps.__innerFunc) {
+          cellProps = _objectSpread(_objectSpread({}, cellProps), setCellProps(...arguments) || {});
+        }
+
+        if (tempObj.align) {
+          cellProps.className = "pc-align-".concat(tempObj.align);
+        }
+
+        return cellProps;
+      };
+
+      tempObj.options.setCellProps.__innerFunc = 1;
+    }
+
     return tempObj;
   }); // Fixing object-type structures
 
   const data = originData.map(e => {
     if (!Array.isArray(e) && (0, _isObject.default)(e)) {
-      return keys.map(key => e[key]);
+      return keys.map(key => (0, _get.default)(e, key));
     }
 
     return e;
@@ -303,10 +333,12 @@ function ReDatatable(_ref2) {
   });
 }
 
+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:right;}}}}.MuiTableCell-body{&.pc-align-center{text-align:center;}&.pc-align-right{text-align:right;}}"]);
+
 const TableContainer = _styledComponents.default.div.withConfig({
   displayName: "Datatable__TableContainer",
   componentId: "sc-1ju12vq-0"
-})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}&.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.action.hover);
+})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}[class*='MUIDataTableBodyCell-simpleCell']{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:100%;margin-left:0;text-align:center;}}}", "{[class*='responsiveSimple']{td.MuiTableCell-body{display:flex;padding-right:0;> div{width:auto;flex:1;&:first-child{flex:0;padding-right:16px;}}}}}", "{", "}", "{[class*='responsiveSimple']{", "}}&.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, props => props.theme.palette.action.hover);
 
 const FilterLine = _styledComponents.default.div.withConfig({
   displayName: "Datatable__FilterLine",

package/lib/Layout/dashboard/index.js

@@ -155,7 +155,7 @@ Dashboard.defaultProps = {
 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.21",
+  "version": "2.1.24",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "ee49a5560e16fa5791cef6ab0cc5930c4f1c2cf5",
+  "gitHead": "d299e6578893a3b09be4d0e4421bd2c9cd45eb71",
   "dependencies": {
-    "@arcblock/icons": "^2.1.21",
-    "@arcblock/react-hooks": "^2.1.21",
+    "@arcblock/icons": "^2.1.24",
+    "@arcblock/react-hooks": "^2.1.24",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Datatable/index.js

@@ -2,9 +2,10 @@
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
 import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvide, useDatatableContext } from './DatatableContext';
@@ -66,13 +67,19 @@ function ReDatatable({
       tempObj.options = {};
     }
 
-    const { setCellHeaderProps } = tempObj.options;
-    tempObj.options.setCellHeaderProps = (columnMeta) => {
-      let cellProps = {};
+    const { setCellHeaderProps, setCellProps } = tempObj.options;
+
+    tempObj.options.setCellHeaderProps = (...args) => {
+      let cellProps = {
+        className: '',
+      };
 
       // Complementing width while inheriting old setCellHeaderProps
       if (setCellHeaderProps && !setCellHeaderProps.__innerFunc) {
-        cellProps = setCellHeaderProps(columnMeta) || {};
+        cellProps = {
+          ...cellProps,
+          ...(setCellHeaderProps(...args) || {}),
+        };
       }
 
       if (loading || disabled) {
@@ -83,19 +90,46 @@ function ReDatatable({
         cellProps.width = tempObj.width;
       }
 
+      if (tempObj.align) {
+        cellProps.className = `pc-align-${tempObj.align}`;
+      }
+
       return cellProps;
     };
 
     // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
     tempObj.options.setCellHeaderProps.__innerFunc = 1;
 
+    if (tempObj.align || tempObj.style) {
+      tempObj.options.setCellProps = (...args) => {
+        let cellProps = {
+          className: '',
+        };
+
+        // Complementing width while inheriting old setCellHeaderProps
+        if (setCellProps && !setCellProps.__innerFunc) {
+          cellProps = {
+            ...cellProps,
+            ...(setCellProps(...args) || {}),
+          };
+        }
+
+        if (tempObj.align) {
+          cellProps.className = `pc-align-${tempObj.align}`;
+        }
+
+        return cellProps;
+      };
+      tempObj.options.setCellProps.__innerFunc = 1;
+    }
+
     return tempObj;
   });
 
   // Fixing object-type structures
   const data = originData.map((e) => {
     if (!Array.isArray(e) && isObject(e)) {
-      return keys.map((key) => e[key]);
+      return keys.map((key) => get(e, key));
     }
     return e;
   });
@@ -229,6 +263,41 @@ function ReDatatable({
   );
 }
 
+const alignCss = 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: right;
+        }
+      }
+    }
+  }
+  .MuiTableCell-body {
+    &.pc-align-center {
+      text-align: center;
+    }
+    &.pc-align-right {
+      text-align: right;
+    }
+  }
+`;
+
 const TableContainer = styled.div`
   height: 100%;
   > .MuiPaper-root {
@@ -244,6 +313,38 @@ const TableContainer = styled.div`
       margin-left: -100%;
       text-align: center;
     }
+    [class*='MUIDataTableBodyCell-simpleCell'] {
+      [class*='MUIDataTableBody-emptyTitle'] {
+        padding-left: 16px;
+        width: 100%;
+        margin-left: 0;
+        text-align: center;
+      }
+    }
+  }
+  ${(props) => props.theme.breakpoints.down('sm')} {
+    [class*='responsiveSimple'] {
+      td.MuiTableCell-body {
+        display: flex;
+        padding-right: 0;
+        > div {
+          width: auto;
+          flex: 1;
+          &:first-child {
+            flex: 0;
+            padding-right: 16px;
+          }
+        }
+      }
+    }
+  }
+  ${(props) => props.theme.breakpoints.up('md')} {
+    ${alignCss}
+  }
+  ${(props) => props.theme.breakpoints.up('sm')} {
+    [class*='responsiveSimple'] {
+      ${alignCss}
+    }
   }
   &.datatable-stripped {
     .MuiTableBody-root {

package/src/Layout/dashboard/index.js

@@ -104,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;