@arcblock/ux 2.12.55 → 2.12.57

package/lib/Datatable/CustomToolbar.js

@@ -32,6 +32,7 @@ export default function CustomToolbar(props) {
   const toolbarId = useRef(Math.random().toString(32).slice(2));
   const [searchOpened, setSearchOpened] = useState(false);
   const {
+    customPreButtons,
     customButtons,
     loading,
     disabled
@@ -129,12 +130,12 @@ export default function CustomToolbar(props) {
       }
     });
   }
-  const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
+  const showMore = [...customPreButtons, !hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
   const allPops = [];
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode
-  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
+  const toolbarButtons = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     if (/*#__PURE__*/isValidElement(e)) {
       return e;
     }
@@ -189,7 +190,7 @@ export default function CustomToolbar(props) {
   });
 
   // The toolbar menu in the mobile to replace toolbarButtons
-  const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
+  const menuItems = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
     let content;
     if (/*#__PURE__*/isValidElement(e)) {

package/lib/Datatable/DatatableContext.js

@@ -10,12 +10,15 @@ function DatatableProvider({
   children
 }) {
   const [customButtons, setCustomButtons] = useState([]);
+  const [customPreButtons, setCustomPreButtons] = useState([]);
   const [loading, setLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [filterLabel, setFilterLabel] = useState('Filter');
   const value = {
     customButtons,
     setCustomButtons,
+    customPreButtons,
+    setCustomPreButtons,
     filterLabel,
     setFilterLabel,
     loading,

package/lib/Datatable/index.d.ts

@@ -29,6 +29,7 @@ export type DataTableProps = {
     } & import("mui-datatables").MUIDataTableOptions;
     style?: import("react").CSSProperties;
     customButtons?: Array<DataTableCustomButton>;
+    customPreButtons?: Array<DataTableCustomButton>;
     onChange?: (state: DataTableState, action: string) => void | Promise<void>;
     loading?: false | true;
     disabled?: false | true;

package/lib/Datatable/index.js

@@ -48,6 +48,7 @@ import { styled } from '../Theme';
  *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
+ *  customPreButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
  *  loading?: false | true,
  *  disabled?: false | true,
@@ -166,6 +167,7 @@ function ReDataTable({
   options,
   // The options object is usually a property supported by mui-datatable
   style,
+  customPreButtons,
   customButtons,
   onChange,
   loading,
@@ -181,6 +183,7 @@ function ReDataTable({
 }) {
   const oldState = useRef(null);
   const {
+    setCustomPreButtons,
     setCustomButtons,
     setFilterLabel,
     setLoading,
@@ -271,6 +274,7 @@ function ReDataTable({
     return e;
   });
   useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
   useEffect(() => setLoading(loading), [loading]);
   useEffect(() => setDisabled(disabled), [disabled]);
   let emptyEl;
@@ -435,6 +439,7 @@ ReDataTable.propTypes = {
   locale: PropTypes.string,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
+  customPreButtons: PropTypes.array,
   customButtons: PropTypes.array,
   onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   stripped: PropTypes.bool,
@@ -451,6 +456,7 @@ ReDataTable.defaultProps = {
   locale: 'en',
   loading: false,
   disabled: false,
+  customPreButtons: [],
   customButtons: [],
   onChange: '',
   stripped: false,

package/lib/PoweredByArcBlock/index.d.ts

@@ -1,5 +1,6 @@
 import { type TypographyProps, type LinkProps } from '@mui/material';
 export interface PoweredByArcBlockProps extends TypographyProps {
     linkProps?: LinkProps;
+    showExtra?: boolean;
 }
-export default function PoweredByArcBlock({ linkProps, ...props }: PoweredByArcBlockProps): import("react/jsx-runtime").JSX.Element;
+export default function PoweredByArcBlock({ linkProps, showExtra, ...props }: PoweredByArcBlockProps): import("react/jsx-runtime").JSX.Element;

package/lib/PoweredByArcBlock/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, Typography } from '@mui/material';
 export default function PoweredByArcBlock({
   linkProps,
+  showExtra,
   ...props
 }) {
   return /*#__PURE__*/_jsxs(Typography, {
@@ -18,6 +19,6 @@ export default function PoweredByArcBlock({
       underline: "hover",
       ...linkProps,
       children: "Blocklet Technology"
-    }), ", the decentralized web engine."]
+    }), showExtra ? ', the decentralized web engine.' : null]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.55",
+  "version": "2.12.57",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,12 +70,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "33f46387b9d5664d83854183a51b9c7e6641c6bf",
+  "gitHead": "3777c011368654b134e493f4a854df15d249caa5",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.55",
-    "@arcblock/nft-display": "^2.12.55",
-    "@arcblock/react-hooks": "^2.12.55",
+    "@arcblock/icons": "^2.12.57",
+    "@arcblock/nft-display": "^2.12.57",
+    "@arcblock/react-hooks": "^2.12.57",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/roboto": "^5.2.5",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Datatable/CustomToolbar.jsx

@@ -32,7 +32,7 @@ export default function CustomToolbar(props) {
   const isMobile = useMobile();
   const toolbarId = useRef(Math.random().toString(32).slice(2));
   const [searchOpened, setSearchOpened] = useState(false);
-  const { customButtons, loading, disabled } = useDatatableContext();
+  const { customPreButtons, customButtons, loading, disabled } = useDatatableContext();
 
   const {
     data,
@@ -136,13 +136,14 @@ export default function CustomToolbar(props) {
     });
   }
 
-  const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter((e) => !!e).length > 1 && isMobile;
+  const showMore =
+    [...customPreButtons, !hidePrint, ...defaultButtons, ...customButtons].filter((e) => !!e).length > 1 && isMobile;
 
   const allPops = [];
 
   // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
   // The right-hand button of the form toolbar in desktop mode
-  const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
+  const toolbarButtons = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     if (isValidElement(e)) {
       return e;
     }
@@ -198,7 +199,7 @@ export default function CustomToolbar(props) {
   });
 
   // The toolbar menu in the mobile to replace toolbarButtons
-  const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
+  const menuItems = [...customPreButtons, ...defaultButtons, ...customButtons].map((e, index) => {
     const popId = getPopId(index);
 
     let content;

package/src/Datatable/DatatableContext.jsx

@@ -7,6 +7,7 @@ const { Provider } = DatatableContext;
 // eslint-disable-next-line react/prop-types
 function DatatableProvider({ children }) {
   const [customButtons, setCustomButtons] = useState([]);
+  const [customPreButtons, setCustomPreButtons] = useState([]);
   const [loading, setLoading] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [filterLabel, setFilterLabel] = useState('Filter');
@@ -14,6 +15,8 @@ function DatatableProvider({ children }) {
   const value = {
     customButtons,
     setCustomButtons,
+    customPreButtons,
+    setCustomPreButtons,
     filterLabel,
     setFilterLabel,
     loading,

package/src/Datatable/index.jsx

@@ -47,6 +47,7 @@ import { styled } from '../Theme';
  *  options?: { searchDebounceTime?: number } & import('mui-datatables').MUIDataTableOptions,
  *  style?: import('react').CSSProperties,
  *  customButtons?: Array<DataTableCustomButton>,
+ *  customPreButtons?: Array<DataTableCustomButton>,
  *  onChange?: (state: DataTableState, action: string) => void | Promise<void>,
  *  loading?: false | true,
  *  disabled?: false | true,
@@ -166,6 +167,7 @@ function ReDataTable({
   locale,
   options, // The options object is usually a property supported by mui-datatable
   style,
+  customPreButtons,
   customButtons,
   onChange,
   loading,
@@ -180,7 +182,7 @@ function ReDataTable({
   ...rest
 }) {
   const oldState = useRef(null);
-  const { setCustomButtons, setFilterLabel, setLoading, setDisabled } = useDatatableContext();
+  const { setCustomPreButtons, setCustomButtons, setFilterLabel, setLoading, setDisabled } = useDatatableContext();
 
   const disabledCellStyle = {
     cursor: 'not-allowed',
@@ -276,6 +278,7 @@ function ReDataTable({
   });
 
   useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
   useEffect(() => setLoading(loading), [loading]);
   useEffect(() => setDisabled(disabled), [disabled]);
 
@@ -420,6 +423,7 @@ ReDataTable.propTypes = {
   locale: PropTypes.string,
   loading: PropTypes.bool,
   disabled: PropTypes.bool,
+  customPreButtons: PropTypes.array,
   customButtons: PropTypes.array,
   onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   stripped: PropTypes.bool,
@@ -437,6 +441,7 @@ ReDataTable.defaultProps = {
   locale: 'en',
   loading: false,
   disabled: false,
+  customPreButtons: [],
   customButtons: [],
   onChange: '',
   stripped: false,

package/src/PoweredByArcBlock/index.tsx

@@ -2,9 +2,10 @@ import { Link, Typography, type TypographyProps, type LinkProps } from '@mui/mat
 
 export interface PoweredByArcBlockProps extends TypographyProps {
   linkProps?: LinkProps;
+  showExtra?: boolean;
 }
 
-export default function PoweredByArcBlock({ linkProps, ...props }: PoweredByArcBlockProps) {
+export default function PoweredByArcBlock({ linkProps, showExtra, ...props }: PoweredByArcBlockProps) {
   return (
     <Typography {...props}>
       Powered by{' '}
@@ -15,7 +16,7 @@ export default function PoweredByArcBlock({ linkProps, ...props }: PoweredByArcB
       <Link href="https://www.blocklet.io" target="_blank" underline="hover" {...linkProps}>
         Blocklet Technology
       </Link>
-      , the decentralized web engine.
+      {showExtra ? ', the decentralized web engine.' : null}
     </Typography>
   );
 }