@arcblock/ux 3.0.16 → 3.0.19

package/lib/Tabs/index.d.ts

@@ -9,6 +9,7 @@ interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
     onChange: (value: string) => void;
     variant?: 'card' | 'line' | MuiTabsProps['variant'];
     iconPosition?: TabProps['iconPosition'];
+    enableTabClick?: boolean;
 }
-export default function Tabs({ tabs, current, onChange, variant, iconPosition, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function Tabs({ tabs, current, onChange, variant, iconPosition, enableTabClick, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Tabs/index.js

@@ -1,25 +1,32 @@
-import { jsx as l } from "react/jsx-runtime";
-import { Tabs as u, Tab as c } from "@mui/material";
-import { styled as p } from "../Theme/index.js";
-const d = "index", s = {
-  tabs: `${d}-tabs`,
-  tab: `${d}-tab`
-}, m = p(u)(({ theme: e }) => ({
-  [`& .${s.tabs}`]: {},
-  [`& .${s.tab}`]: {
+import { jsx as r } from "react/jsx-runtime";
+import { Tabs as c, Tab as d } from "@mui/material";
+import { styled as m } from "../Theme/index.js";
+const b = "index", u = {
+  tabs: `${b}-tabs`,
+  tab: `${b}-tab`
+}, v = m(c)(({ theme: t }) => ({
+  [`& .${u.tabs}`]: {},
+  [`& .${u.tab}`]: {
     fontSize: "0.875rem",
-    [e.breakpoints.up("md")]: {
+    [t.breakpoints.up("md")]: {
       fontSize: "1rem"
     }
   }
 }));
-function v({ tabs: e, current: t, onChange: r, iconPosition: n = void 0, ...o }) {
-  return /* @__PURE__ */ l(
-    u,
+function f({
+  tabs: t,
+  current: n,
+  onChange: e,
+  iconPosition: s = void 0,
+  enableTabClick: l = !1,
+  ...o
+}) {
+  return /* @__PURE__ */ r(
+    c,
     {
       scrollButtons: "auto",
-      value: t,
-      onChange: (a, i) => r(i),
+      value: n,
+      onChange: (a, i) => !l && e(i),
       ...o,
       variant: "scrollable",
       sx: {
@@ -63,27 +70,35 @@ function v({ tabs: e, current: t, onChange: r, iconPosition: n = void 0, ...o })
         },
         ...o.sx
       },
-      children: e.map((a) => /* @__PURE__ */ l(
-        c,
+      children: t.map((a) => /* @__PURE__ */ r(
+        d,
         {
-          className: s.tab,
+          className: u.tab,
           value: a.value,
           label: a.label,
           icon: a.icon,
-          iconPosition: n
+          iconPosition: s,
+          onClick: () => l && e(a.value)
         },
         a.value
       ))
     }
   );
 }
-function f({ tabs: e, current: t, onChange: r, iconPosition: n = void 0, ...o }) {
-  return /* @__PURE__ */ l(
-    u,
+function y({
+  tabs: t,
+  current: n,
+  onChange: e,
+  iconPosition: s = void 0,
+  enableTabClick: l = !1,
+  ...o
+}) {
+  return /* @__PURE__ */ r(
+    c,
     {
       scrollButtons: "auto",
-      value: t,
-      onChange: (a, i) => r(i),
+      value: n,
+      onChange: (a, i) => !l && e(i),
       ...o,
       variant: "scrollable",
       sx: {
@@ -132,14 +147,15 @@ function f({ tabs: e, current: t, onChange: r, iconPosition: n = void 0, ...o })
         },
         ...o.sx
       },
-      children: e.map((a) => /* @__PURE__ */ l(
-        c,
+      children: t.map((a) => /* @__PURE__ */ r(
+        d,
         {
-          className: s.tab,
+          className: u.tab,
           value: a.value,
           label: a.label,
           icon: a.icon,
-          iconPosition: n
+          iconPosition: s,
+          onClick: () => l && e(a.value)
         },
         a.value
       ))
@@ -147,31 +163,53 @@ function f({ tabs: e, current: t, onChange: r, iconPosition: n = void 0, ...o })
   );
 }
 function T({
-  tabs: e,
-  current: t,
-  onChange: r,
-  variant: n = void 0,
-  iconPosition: o = void 0,
+  tabs: t,
+  current: n,
+  onChange: e,
+  variant: s = void 0,
+  iconPosition: l = void 0,
+  enableTabClick: o = !1,
   ...a
 }) {
-  return n === "card" ? /* @__PURE__ */ l(v, { ...a, tabs: e, current: t, onChange: r, iconPosition: o }) : n === "line" ? /* @__PURE__ */ l(f, { ...a, tabs: e, current: t, onChange: r, iconPosition: o }) : /* @__PURE__ */ l(
-    m,
+  return s === "card" ? /* @__PURE__ */ r(
+    f,
+    {
+      ...a,
+      tabs: t,
+      current: n,
+      enableTabClick: o,
+      onChange: e,
+      iconPosition: l
+    }
+  ) : s === "line" ? /* @__PURE__ */ r(
+    y,
+    {
+      ...a,
+      tabs: t,
+      current: n,
+      enableTabClick: o,
+      onChange: e,
+      iconPosition: l
+    }
+  ) : /* @__PURE__ */ r(
+    v,
     {
       scrollButtons: "auto",
       variant: "scrollable",
-      value: t,
-      onChange: (i, b) => r(b),
+      value: n,
+      onChange: (i, p) => !o && e(p),
       indicatorColor: "primary",
       ...a,
-      className: [s.tabs, a.className || ""].join(" "),
-      children: e.map((i) => /* @__PURE__ */ l(
-        c,
+      className: [u.tabs, a.className || ""].join(" "),
+      children: t.map((i) => /* @__PURE__ */ r(
+        d,
         {
-          className: s.tab,
+          className: u.tab,
           value: i.value,
           label: i.label,
           icon: i.icon,
-          iconPosition: o
+          iconPosition: l,
+          onClick: () => o && e(i.value)
         },
         i.value
       ))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.0.16",
+  "version": "3.0.19",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -60,16 +60,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "b7aaaae0a729d3f600eef2a7c7d479182e15fd4d",
+  "gitHead": "c7886f76502bc62236cc1dd28aa26c050a702d1c",
   "dependencies": {
-    "@arcblock/bridge": "3.0.16",
+    "@arcblock/bridge": "3.0.19",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.0.16",
-    "@arcblock/nft-display": "3.0.16",
-    "@arcblock/react-hooks": "3.0.16",
+    "@arcblock/icons": "3.0.19",
+    "@arcblock/nft-display": "3.0.19",
+    "@arcblock/react-hooks": "3.0.19",
     "@blocklet/js-sdk": "^1.16.45",
-    "@blocklet/theme": "3.0.16",
+    "@blocklet/theme": "3.0.19",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",

package/src/Tabs/index.tsx

@@ -25,14 +25,22 @@ interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
   current: any;
   onChange: (value: string) => void;
   iconPosition?: TabProps['iconPosition'];
+  enableTabClick?: boolean;
 }
 
-function CardTabs({ tabs, current, onChange, iconPosition = undefined, ...rest }: CardTabsProps) {
+function CardTabs({
+  tabs,
+  current,
+  onChange,
+  iconPosition = undefined,
+  enableTabClick = false,
+  ...rest
+}: CardTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
       value={current}
-      onChange={(_, newValue) => onChange(newValue)}
+      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
       {...rest}
       variant="scrollable"
       sx={{
@@ -84,6 +92,7 @@ function CardTabs({ tabs, current, onChange, iconPosition = undefined, ...rest }
           label={x.label}
           icon={x.icon}
           iconPosition={iconPosition}
+          onClick={() => enableTabClick && onChange(x.value)}
         />
       ))}
     </MuiTabs>
@@ -95,14 +104,22 @@ interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
   current: any;
   onChange: (value: string) => void;
   iconPosition?: TabProps['iconPosition'];
+  enableTabClick?: boolean;
 }
 
-function LineTabs({ tabs, current, onChange, iconPosition = undefined, ...rest }: LineTabsProps) {
+function LineTabs({
+  tabs,
+  current,
+  onChange,
+  iconPosition = undefined,
+  enableTabClick = false,
+  ...rest
+}: LineTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
       value={current}
-      onChange={(_, newValue) => onChange(newValue)}
+      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
       {...rest}
       variant="scrollable"
       sx={{
@@ -162,6 +179,7 @@ function LineTabs({ tabs, current, onChange, iconPosition = undefined, ...rest }
           label={x.label}
           icon={x.icon}
           iconPosition={iconPosition}
+          onClick={() => enableTabClick && onChange(x.value)}
         />
       ))}
     </MuiTabs>
@@ -174,6 +192,7 @@ interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
   onChange: (value: string) => void;
   variant?: 'card' | 'line' | MuiTabsProps['variant'];
   iconPosition?: TabProps['iconPosition'];
+  enableTabClick?: boolean; // 是否启用点击切换 tab，默认不启用，启用后，当前 tab 处于活跃状态下点击 tab 也会触发 onChange 事件，
 }
 
 export default function Tabs({
@@ -182,14 +201,33 @@ export default function Tabs({
   onChange,
   variant = undefined,
   iconPosition = undefined,
+  enableTabClick = false,
   ...rest
 }: TabsProps) {
   if (variant === 'card') {
-    return <CardTabs {...rest} tabs={tabs} current={current} onChange={onChange} iconPosition={iconPosition} />;
+    return (
+      <CardTabs
+        {...rest}
+        tabs={tabs}
+        current={current}
+        enableTabClick={enableTabClick}
+        onChange={onChange}
+        iconPosition={iconPosition}
+      />
+    );
   }
 
   if (variant === 'line') {
-    return <LineTabs {...rest} tabs={tabs} current={current} onChange={onChange} iconPosition={iconPosition} />;
+    return (
+      <LineTabs
+        {...rest}
+        tabs={tabs}
+        current={current}
+        enableTabClick={enableTabClick}
+        onChange={onChange}
+        iconPosition={iconPosition}
+      />
+    );
   }
 
   return (
@@ -197,7 +235,7 @@ export default function Tabs({
       scrollButtons="auto"
       variant="scrollable"
       value={current}
-      onChange={(_, newValue) => onChange(newValue)}
+      onChange={(_, newValue) => !enableTabClick && onChange(newValue)}
       indicatorColor="primary"
       {...rest}
       className={[classes.tabs, rest.className || ''].join(' ')}>
@@ -209,6 +247,7 @@ export default function Tabs({
           label={x.label}
           icon={x.icon}
           iconPosition={iconPosition}
+          onClick={() => enableTabClick && onChange(x.value)}
         />
       ))}
     </StyledMuiTabs>