@arcblock/ux 2.13.35 → 2.13.37

package/lib/Tabs/index.d.ts

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

package/lib/Tabs/index.js

@@ -21,6 +21,7 @@ function CardTabs({
   tabs,
   current,
   onChange,
+  iconPosition,
   ...rest
 }) {
   return /*#__PURE__*/_jsx(MuiTabs, {
@@ -74,7 +75,8 @@ function CardTabs({
       className: classes.tab,
       value: x.value,
       label: x.label,
-      icon: x.icon
+      icon: x.icon,
+      iconPosition: iconPosition
     }, x.value))
   });
 }
@@ -82,6 +84,7 @@ function LineTabs({
   tabs,
   current,
   onChange,
+  iconPosition,
   ...rest
 }) {
   return /*#__PURE__*/_jsx(MuiTabs, {
@@ -140,7 +143,8 @@ function LineTabs({
       className: classes.tab,
       value: x.value,
       label: x.label,
-      icon: x.icon
+      icon: x.icon,
+      iconPosition: iconPosition
     }, x.value))
   });
 }
@@ -149,6 +153,7 @@ export default function Tabs({
   current,
   onChange,
   variant,
+  iconPosition,
   ...rest
 }) {
   if (variant === 'card') {
@@ -156,7 +161,8 @@ export default function Tabs({
       ...rest,
       tabs: tabs,
       current: current,
-      onChange: onChange
+      onChange: onChange,
+      iconPosition: iconPosition
     });
   }
   if (variant === 'line') {
@@ -164,7 +170,8 @@ export default function Tabs({
       ...rest,
       tabs: tabs,
       current: current,
-      onChange: onChange
+      onChange: onChange,
+      iconPosition: iconPosition
     });
   }
   return /*#__PURE__*/_jsx(StyledMuiTabs, {
@@ -179,7 +186,8 @@ export default function Tabs({
       className: classes.tab,
       value: x.value,
       label: x.label,
-      icon: x.icon
+      icon: x.icon,
+      iconPosition: iconPosition
     }, x.value))
   });
 }

package/lib/VerificationCode/index.d.ts

@@ -0,0 +1,9 @@
+import type { SxProps } from '@mui/material';
+export declare const VERIFY_CODE_LENGTH = 6;
+export default function VerificationCode({ length, code, onChange, onComplete, sx, }: {
+    length?: number;
+    code: string;
+    onChange?: (_code: string) => void;
+    onComplete?: (_code: string) => void;
+    sx?: SxProps;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/VerificationCode/index.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, TextField } from '@mui/material';
+import trim from 'lodash/trim';
+import noop from 'lodash/noop';
+import { mergeSx } from '../Util/style';
+export const VERIFY_CODE_LENGTH = 6;
+export default function VerificationCode({
+  length = VERIFY_CODE_LENGTH,
+  code,
+  onChange = noop,
+  onComplete = noop,
+  sx
+}) {
+  useEffect(() => {
+    if (code.length === length) {
+      onComplete?.(code);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [code, length]);
+  return /*#__PURE__*/_jsx(Box, {
+    sx: mergeSx({
+      width: '100%',
+      maxWidth: 360,
+      display: 'flex',
+      justifyContent: 'space-between',
+      gap: 1.5
+    }, sx),
+    children: [...Array(length)].map((_, index) => /*#__PURE__*/_jsx(TextField, {
+      id: `code-input-${index}`
+      // eslint-disable-next-line react/no-array-index-key
+      ,
+
+      value: trim(code[index]) || '',
+      type: "number",
+      inputProps: {
+        maxLength: 1,
+        sx: {
+          textAlign: 'center',
+          fontSize: '1.5rem',
+          '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+            WebkitAppearance: 'none',
+            margin: 0
+          }
+        },
+        autoComplete: 'off',
+        pattern: '[0-9]',
+        inputMode: 'numeric'
+      },
+      onChange: e => {
+        const newCode = code.split('');
+        newCode[index] = e.target.value;
+        onChange?.(newCode.join(''));
+        if (e.target.value && index < 5) {
+          document.getElementById(`code-input-${index + 1}`)?.focus();
+        }
+      },
+      onKeyDown: e => {
+        if (e.key === 'Backspace' && !trim(code[index]) && index > 0) {
+          document.getElementById(`code-input-${index - 1}`)?.focus();
+        }
+      },
+      required: true,
+      autoComplete: "off"
+    }, `code-input-${index}`))
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.35",
+  "version": "2.13.37",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "0637c76e4c1036802b2fef273f785cc9bf00edd0",
+  "gitHead": "68ffad141209821dc8d24962e4f4930a8d5ccd77",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.35",
-    "@arcblock/nft-display": "^2.13.35",
-    "@arcblock/react-hooks": "^2.13.35",
+    "@arcblock/icons": "^2.13.37",
+    "@arcblock/nft-display": "^2.13.37",
+    "@arcblock/react-hooks": "^2.13.37",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.35",
+    "@blocklet/theme": "^2.13.37",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps } from '@mui/material';
+import { Tabs as MuiTabs, Tab as MuiTab, type TabsProps as MuiTabsProps, type TabProps } from '@mui/material';
 
 import { styled } from '../Theme';
 
@@ -24,9 +24,10 @@ interface CardTabsProps extends Omit<MuiTabsProps, 'onChange'> {
   tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
   current: any;
   onChange: (value: string) => void;
+  iconPosition?: TabProps['iconPosition'];
 }
 
-function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
+function CardTabs({ tabs, current, onChange, iconPosition, ...rest }: CardTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
@@ -76,7 +77,14 @@ function CardTabs({ tabs, current, onChange, ...rest }: CardTabsProps) {
         ...rest.sx,
       }}>
       {tabs.map((x) => (
-        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon} />
+        <MuiTab
+          className={classes.tab}
+          key={x.value}
+          value={x.value}
+          label={x.label}
+          icon={x.icon}
+          iconPosition={iconPosition}
+        />
       ))}
     </MuiTabs>
   );
@@ -86,9 +94,10 @@ interface LineTabsProps extends Omit<MuiTabsProps, 'onChange'> {
   tabs: { value: any; label: React.ReactNode; icon?: string | React.ReactElement }[];
   current: any;
   onChange: (value: string) => void;
+  iconPosition?: TabProps['iconPosition'];
 }
 
-function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
+function LineTabs({ tabs, current, onChange, iconPosition, ...rest }: LineTabsProps) {
   return (
     <MuiTabs
       scrollButtons="auto"
@@ -146,7 +155,14 @@ function LineTabs({ tabs, current, onChange, ...rest }: LineTabsProps) {
         ...rest.sx,
       }}>
       {tabs.map((x) => (
-        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon} />
+        <MuiTab
+          className={classes.tab}
+          key={x.value}
+          value={x.value}
+          label={x.label}
+          icon={x.icon}
+          iconPosition={iconPosition}
+        />
       ))}
     </MuiTabs>
   );
@@ -157,15 +173,16 @@ interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'onChange'> {
   current: any;
   onChange: (value: string) => void;
   variant?: 'card' | 'line' | MuiTabsProps['variant'];
+  iconPosition?: TabProps['iconPosition'];
 }
 
-export default function Tabs({ tabs, current, onChange, variant, ...rest }: TabsProps) {
+export default function Tabs({ tabs, current, onChange, variant, iconPosition, ...rest }: TabsProps) {
   if (variant === 'card') {
-    return <CardTabs {...rest} tabs={tabs} current={current} onChange={onChange} />;
+    return <CardTabs {...rest} tabs={tabs} current={current} onChange={onChange} iconPosition={iconPosition} />;
   }
 
   if (variant === 'line') {
-    return <LineTabs {...rest} tabs={tabs} current={current} onChange={onChange} />;
+    return <LineTabs {...rest} tabs={tabs} current={current} onChange={onChange} iconPosition={iconPosition} />;
   }
 
   return (
@@ -178,7 +195,14 @@ export default function Tabs({ tabs, current, onChange, variant, ...rest }: Tabs
       {...rest}
       className={[classes.tabs, rest.className || ''].join(' ')}>
       {tabs.map((x) => (
-        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon} />
+        <MuiTab
+          className={classes.tab}
+          key={x.value}
+          value={x.value}
+          label={x.label}
+          icon={x.icon}
+          iconPosition={iconPosition}
+        />
       ))}
     </StyledMuiTabs>
   );

package/src/VerificationCode/index.tsx

@@ -0,0 +1,81 @@
+import { useEffect } from 'react';
+import { Box, TextField } from '@mui/material';
+import type { SxProps } from '@mui/material';
+import trim from 'lodash/trim';
+import noop from 'lodash/noop';
+import { mergeSx } from '../Util/style';
+
+export const VERIFY_CODE_LENGTH = 6;
+
+export default function VerificationCode({
+  length = VERIFY_CODE_LENGTH,
+  code,
+  onChange = noop,
+  onComplete = noop,
+  sx,
+}: {
+  length?: number;
+  code: string;
+  onChange?: (_code: string) => void;
+  onComplete?: (_code: string) => void;
+  sx?: SxProps;
+}) {
+  useEffect(() => {
+    if (code.length === length) {
+      onComplete?.(code);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [code, length]);
+  return (
+    <Box
+      sx={mergeSx(
+        {
+          width: '100%',
+          maxWidth: 360,
+          display: 'flex',
+          justifyContent: 'space-between',
+          gap: 1.5,
+        },
+        sx
+      )}>
+      {[...Array(length)].map((_, index) => (
+        <TextField
+          id={`code-input-${index}`}
+          // eslint-disable-next-line react/no-array-index-key
+          key={`code-input-${index}`}
+          value={trim(code[index]) || ''}
+          type="number"
+          inputProps={{
+            maxLength: 1,
+            sx: {
+              textAlign: 'center',
+              fontSize: '1.5rem',
+              '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+                margin: 0,
+              },
+            },
+            autoComplete: 'off',
+            pattern: '[0-9]',
+            inputMode: 'numeric',
+          }}
+          onChange={(e) => {
+            const newCode = code.split('');
+            newCode[index] = e.target.value;
+            onChange?.(newCode.join(''));
+            if (e.target.value && index < 5) {
+              document.getElementById(`code-input-${index + 1}`)?.focus();
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Backspace' && !trim(code[index]) && index > 0) {
+              document.getElementById(`code-input-${index - 1}`)?.focus();
+            }
+          }}
+          required
+          autoComplete="off"
+        />
+      ))}
+    </Box>
+  );
+}