@arcblock/ux 2.5.39 → 2.5.41

package/lib/Datatable/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Datatable;
+exports.default = DataTable;
 exports.getDurableData = void 0;
 
 var _react = require("react");
@@ -56,10 +56,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function Datatable(_ref) {
-  let props = Object.assign({}, _ref);
+/**
+ * @typedef {{
+ *  icon: import('react').ReactElement,
+ *  title: string,
+ * }} DataTableCustomButton
+ */
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  label: string,
+ *  width?: number,
+ *  options?: {
+ *    filter?: boolean,
+ *    sort?: boolean,
+ *    customBodyRender?: (value: any) => import('react').ReactElement,
+ *    customBodyRenderLite?: (index: number) => import('react').ReactElement
+ *  } & import('mui-datatables').MUIDataTableColumnOptions
+ * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
+ */
+
+/**
+ * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
+ */
+
+/**
+ * @typedef {{
+ *  data: Array<object | number[] | string[]>,
+ *  columns: Array<DataTableColumn>,
+ *  locale?: string,
+ *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  style?: import('react').CSSProperties,
+ *  customButtons?: Array<DataTableCustomButton>,
+ *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
+ *  loading?: boolean,
+ *  disabled?: boolean,
+ *  stripped?: boolean,
+ *  verticalKeyWidth?: number | string,
+ *  hideTableHeader?: boolean,
+ *  components?: import('react').ReactElement,
+ *  emptyNode?: import('react').ReactElement,
+ *  durable?: string,
+ *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
+ * } & import('mui-datatables').MUIDataTableProps} DataTableProps
+ */
+
+/**
+ * @description
+ * @export
+ * @param {DataTableProps} props
+ * @return {import('react').ReactComponentElement}
+ */
+function DataTable(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDataTable, _objectSpread({}, props))
   });
 }
 
@@ -89,7 +140,7 @@ const fixCellProp = (tempObj, cellProps) => {
  */
 
 
-function ReDatatable(_ref2) {
+function ReDataTable(_ref) {
   let {
     data: originData,
     columns: originColumns,
@@ -108,8 +159,8 @@ function ReDatatable(_ref2) {
     emptyNode,
     durable,
     durableKeys
-  } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   const oldState = (0, _react.useRef)(null);
   const {
@@ -372,7 +423,7 @@ function ReDatatable(_ref2) {
   });
 }
 
-ReDatatable.propTypes = {
+ReDataTable.propTypes = {
   data: _propTypes.default.array.isRequired,
   columns: _propTypes.default.array.isRequired,
   options: _propTypes.default.object,
@@ -390,7 +441,7 @@ ReDatatable.propTypes = {
   durable: _propTypes.default.string,
   durableKeys: _propTypes.default.array
 };
-ReDatatable.defaultProps = {
+ReDataTable.defaultProps = {
   options: {},
   style: {},
   locale: 'en',

package/lib/SessionManager/index.js

@@ -105,7 +105,7 @@ const getSourceProvider = user => {
 };
 
 function SessionManager(_ref) {
-  var _session$user, _session$user$avatar, _session$user3, _session$user4;
+  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user5;
 
   let {
     session,
@@ -228,7 +228,9 @@ function SessionManager(_ref) {
         args[_key] = arguments[_key];
       }
 
-      logoutOAuth(session, ...args).then(() => {
+      logoutOAuth({
+        session
+      }, ...args).then(() => {
         onLogout(...args);
       }).catch(err => {
         console.error(err);
@@ -355,9 +357,21 @@ function SessionManager(_ref) {
                     size: "small"
                   })
                 })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
-                responsive: false,
-                children: walletDid || session.user.email
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "session-manager-id-list",
+                children: [walletDid && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "session-manager-id-item",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                    responsive: false,
+                    children: walletDid
+                  })
+                }), (session === null || session === void 0 ? void 0 : (_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "session-manager-id-item",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                    responsive: false,
+                    children: session.user.email
+                  })
+                })]
               })]
             }), Array.isArray(menu) && menu.map((menuItem, index) => {
               const {
@@ -508,7 +522,7 @@ SessionManager.defaultProps = {
   dark: false,
   size: 24
 };
-const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref3 => {
+const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    width: 280px;\n  }\n  .session-manager-user {\n    font-size: 12px;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 24px 24px 10px;\n  }\n  .session-manager-user-name {\n    font-size: 20px;\n    color: ", ";\n    font-weight: bold;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .session-manager-id-item {\n    position: relative;\n    padding-left: 8px;\n    /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n    &:first-of-type:last-of-type {\n      padding-left: 0;\n      &:before,\n      &:after {\n        content: unset;\n      }\n    }\n    &:before {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      width: 6px;\n      height: 1px;\n      background-color: #aeaeae;\n    }\n    &:not(:last-of-type):after {\n      position: absolute;\n      content: '';\n      left: 0px;\n      top: 50%;\n      height: 100%;\n      width: 1px;\n      background-color: #aeaeae;\n    }\n  }\n  .session-manager-menu-item {\n    padding: 18.5px 24px;\n    color: #777;\n    font-size: 16px;\n    &:hover {\n      background-color: #fbfbfb;\n    }\n  }\n  .session-manager-menu-icon {\n    color: #999;\n    margin-right: 16px;\n  }\n"])), _ref3 => {
   let {
     theme
   } = _ref3;

package/lib/SplitButton/index.js

@@ -144,5 +144,5 @@ SplitButton.defaultProps = {
   menuButtonProps: {}
 };
 SplitButton.Item = _MenuItem.default;
-const StyledButtonGroup = (0, _Theme.styled)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-child {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
+const StyledButtonGroup = (0, _Theme.styled)(_ButtonGroup.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > .MuiButtonBase-root:last-of-type {\n    min-width: 2em;\n    padding-left: 0;\n    padding-right: 0;\n  }\n"])));
 const StyledPopper = (0, _Theme.styled)(_Popper.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  .MuiList-root {\n    padding: 4px 0;\n  }\n  .MuiListItem-root {\n    padding-top: 4px;\n    padding-bottom: 4px;\n  }\n"])), props => props.theme.zIndex.tooltip);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.39",
+  "version": "2.5.41",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -45,11 +45,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "04d1c08b749669f4c109c74459d51df49bf361a0",
+  "gitHead": "28cc23a804e4a687a1dc60acc5171b025446cbd5",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.39",
-    "@arcblock/react-hooks": "^2.5.39",
+    "@arcblock/icons": "^2.5.41",
+    "@arcblock/react-hooks": "^2.5.41",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Datatable/index.js

@@ -10,14 +10,66 @@ import clsx from 'clsx';
 import CircularProgress from '@mui/material/CircularProgress';
 import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
-import { DatatableProvider, useDatatableContext } from './DatatableContext';
+import { DatatableProvider as DataTableProvider, useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
 
-export default function Datatable({ ...props }) {
+/**
+ * @typedef {{
+ *  icon: import('react').ReactElement,
+ *  title: string,
+ * }} DataTableCustomButton
+ */
+
+/**
+ * @typedef {{
+ *  name: string,
+ *  label: string,
+ *  width?: number,
+ *  options?: {
+ *    filter?: boolean,
+ *    sort?: boolean,
+ *    customBodyRender?: (value: any) => import('react').ReactElement,
+ *    customBodyRenderLite?: (index: number) => import('react').ReactElement
+ *  } & import('mui-datatables').MUIDataTableColumnOptions
+ * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
+ */
+
+/**
+ * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
+ */
+
+/**
+ * @typedef {{
+ *  data: Array<object | number[] | string[]>,
+ *  columns: Array<DataTableColumn>,
+ *  locale?: string,
+ *  options?: import('mui-datatables').MUIDataTableOptions,
+ *  style?: import('react').CSSProperties,
+ *  customButtons?: Array<DataTableCustomButton>,
+ *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
+ *  loading?: boolean,
+ *  disabled?: boolean,
+ *  stripped?: boolean,
+ *  verticalKeyWidth?: number | string,
+ *  hideTableHeader?: boolean,
+ *  components?: import('react').ReactElement,
+ *  emptyNode?: import('react').ReactElement,
+ *  durable?: string,
+ *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
+ * } & import('mui-datatables').MUIDataTableProps} DataTableProps
+ */
+
+/**
+ * @description
+ * @export
+ * @param {DataTableProps} props
+ * @return {import('react').ReactComponentElement}
+ */
+export default function DataTable(props) {
   return (
-    <DatatableProvider>
-      <ReDatatable {...props} />
-    </DatatableProvider>
+    <DataTableProvider>
+      <ReDataTable {...props} />
+    </DataTableProvider>
   );
 }
 
@@ -46,7 +98,7 @@ const fixCellProp = (tempObj, cellProps) => {
  * @param {Boolean} props.loading For dynamic data, usually used with onChange
  * @returns
  */
-function ReDatatable({
+function ReDataTable({
   data: originData,
   columns: originColumns,
   locale,
@@ -298,7 +350,7 @@ function ReDatatable({
   );
 }
 
-ReDatatable.propTypes = {
+ReDataTable.propTypes = {
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
   options: PropTypes.object,
@@ -317,7 +369,7 @@ ReDatatable.propTypes = {
   durableKeys: PropTypes.array,
 };
 
-ReDatatable.defaultProps = {
+ReDataTable.defaultProps = {
   options: {},
   style: {},
   locale: 'en',

package/src/SessionManager/index.jsx

@@ -143,7 +143,7 @@ function SessionManager({
   }
   function _onLogout() {
     session.logout((...args) => {
-      logoutOAuth(session, ...args)
+      logoutOAuth({ session }, ...args)
         .then(() => {
           onLogout(...args);
         })
@@ -255,7 +255,18 @@ function SessionManager({
                       />
                     )}
                   </div>
-                  <DidAddress responsive={false}>{walletDid || session.user.email}</DidAddress>
+                  <div className="session-manager-id-list">
+                    {walletDid && (
+                      <div className="session-manager-id-item">
+                        <DidAddress responsive={false}>{walletDid}</DidAddress>
+                      </div>
+                    )}
+                    {session?.user?.email && (
+                      <div className="session-manager-id-item">
+                        <DidAddress responsive={false}>{session.user.email}</DidAddress>
+                      </div>
+                    )}
+                  </div>
                 </div>
                 {Array.isArray(menu) &&
                   menu.map((menuItem, index) => {
@@ -442,6 +453,36 @@ const StyledPopper = styled(Popper)`
     align-items: center;
     justify-content: space-between;
   }
+  .session-manager-id-item {
+    position: relative;
+    padding-left: 8px;
+    /* HACK: 当前元素既是第一个，也是最后一个，即只有一个同级元素 */
+    &:first-of-type:last-of-type {
+      padding-left: 0;
+      &:before,
+      &:after {
+        content: unset;
+      }
+    }
+    &:before {
+      position: absolute;
+      content: '';
+      left: 0px;
+      top: 50%;
+      width: 6px;
+      height: 1px;
+      background-color: #aeaeae;
+    }
+    &:not(:last-of-type):after {
+      position: absolute;
+      content: '';
+      left: 0px;
+      top: 50%;
+      height: 100%;
+      width: 1px;
+      background-color: #aeaeae;
+    }
+  }
   .session-manager-menu-item {
     padding: 18.5px 24px;
     color: #777;

package/src/SplitButton/index.js

@@ -88,7 +88,7 @@ SplitButton.defaultProps = {
 SplitButton.Item = MenuItem;
 
 const StyledButtonGroup = styled(ButtonGroup)`
-  > .MuiButtonBase-root:last-child {
+  > .MuiButtonBase-root:last-of-type {
     min-width: 2em;
     padding-left: 0;
     padding-right: 0;