@arcblock/ux 2.13.70 → 3.0.1

package/lib/PhoneInput/index.js

@@ -1,239 +1,187 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
-import { Box, TextField, Typography } from '@mui/material';
-import { parsePhoneNumber } from 'awesome-phonenumber';
-import { defaultCountries, usePhoneInput, parseCountry } from 'react-international-phone';
-import CountrySelect from './country-select';
-import { mergeSx } from '../Util/style';
-export function validatePhoneNumber(phone, iso2, dialCode = '') {
-  // 如果没有输入电话号码，返回false
-  if (!phone) return false;
-
-  // 如果去除所有格式化字符后，只剩下区号，则认为只有区号
-  const cleanedPhone = phone.replace(/[\s\-()]+/g, '');
-  const phoneDialCode = dialCode || getDialCodeByCountry(iso2);
-  // 这表示电话号码只有区号部分
-  if (getDialCodeWithoutPlus(phoneDialCode) === getDialCodeWithoutPlus(cleanedPhone)) {
-    return true; // 如果只有区号，则视为有效
-  }
-
-  // 否则使用validator进行完整校验
-  const pn = parsePhoneNumber(phone, {
-    regionCode: iso2
-  });
-  const cleanedParsedPhone = pn.number?.input.replace(/[\s\-()]+/g, '');
-  return pn.valid && (pn.type === 'mobile' || pn.type === 'fixed-line-or-mobile') && cleanedParsedPhone === pn.number?.e164;
+import { jsxs as $, jsx as m } from "react/jsx-runtime";
+import { useMemo as P, useState as F, useCallback as k } from "react";
+import { Box as I, Typography as A, TextField as L } from "@mui/material";
+import { parsePhoneNumber as w } from "awesome-phonenumber";
+import { defaultCountries as f, parseCountry as p, usePhoneInput as R } from "react-international-phone";
+import V from "./country-select.js";
+import { mergeSx as q } from "../Util/style.js";
+function W(e, t, n = "") {
+  var c, h;
+  if (!e) return !1;
+  const r = e.replace(/[\s\-()]+/g, ""), u = n || v(t);
+  if (g(u) === g(r))
+    return !0;
+  const a = w(e, { regionCode: t }), d = (c = a.number) == null ? void 0 : c.input.replace(/[\s\-()]+/g, "");
+  return a.valid && (a.type === "mobile" || a.type === "fixed-line-or-mobile") && d === ((h = a.number) == null ? void 0 : h.e164);
 }
-
-// 从带区号的电话号码中提取纯号码部分
-function extractPhoneWithoutCode(phone, dialCode) {
-  if (!phone) return '';
-  // 先去除区号
-  const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
-  // 去除非数字字符，但保留括号
-  return phoneWithoutCode;
+function x(e, t) {
+  return e ? e.replace(new RegExp(`^\\+${t}`), "") : "";
 }
-
-// 添加区号到纯号码
-function addCountryCodeToPhone(phone, dialCode) {
-  if (!phone) return `+${dialCode}`;
-  return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
+function b(e, t) {
+  return e ? e.startsWith("+") ? e : `+${t}${e}` : `+${t}`;
 }
-
-// 获取不带+号的区号
-function getDialCodeWithoutPlus(dialCode) {
-  return dialCode.replace(/^\+/, '');
+function g(e) {
+  return e.replace(/^\+/, "");
 }
-
-// 根据ISO2国家代码获取国家信息
-function getCountryInfoByIso2(iso2, property) {
-  // 查找对应的国家数据
-  const countryItem = defaultCountries.find(country => parseCountry(country).iso2 === iso2);
-  if (!countryItem) {
-    return undefined;
-  }
-
-  // 解析国家信息并返回请求的属性
-  return parseCountry(countryItem)[property];
+function B(e, t) {
+  const n = f.find((r) => p(r).iso2 === e);
+  if (n)
+    return p(n)[t];
 }
-
-// 根据ISO2国家代码获取区号
-export function getDialCodeByCountry(iso2) {
-  return getCountryInfoByIso2(iso2, 'dialCode') || '';
+function v(e) {
+  return B(e, "dialCode") || "";
 }
-
-// 根据ISO2国家代码获取国家名称
-export function getCountryNameByCountry(iso2) {
-  return getCountryInfoByIso2(iso2, 'name') || '';
+function U(e) {
+  return B(e, "name") || "";
 }
-
-// 根据手机号识别国家，返回国家的 iso2 码
-// 如果手机号带有区号，通过 parsePhoneNumber 识别
-// 如果手机号不带区号，通过碰撞识别
-export function detectCountryFromPhone(phoneNumber) {
+function X(e) {
   try {
-    if (!phoneNumber) return undefined;
-
-    // 如果已经带了+号，尝试从前缀匹配
-    if (phoneNumber.startsWith('+')) {
-      const parsedPhone = parsePhoneNumber(phoneNumber);
-      if (parsedPhone.valid) {
-        return parsedPhone.regionCode.toLowerCase();
+    if (!e) return;
+    if (e.startsWith("+")) {
+      const t = w(e);
+      if (t.valid)
+        return t.regionCode.toLowerCase();
+      for (const n of f) {
+        const r = p(n);
+        if (e.startsWith(`+${r.dialCode}`) && W(e, r.dialCode, r.iso2))
+          return r.iso2;
       }
-      for (const country of defaultCountries) {
-        const parsed = parseCountry(country);
-        if (phoneNumber.startsWith(`+${parsed.dialCode}`)) {
-          const phoneWithCode = phoneNumber;
-          // 验证该号码是否有效
-          if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
-            return parsed.iso2;
-          }
-        }
+    } else
+      for (const t of f) {
+        const n = p(t), r = `+${n.dialCode}${e}`;
+        if (W(r, n.dialCode, n.iso2))
+          return n.iso2;
       }
-    } else {
-      for (const country of defaultCountries) {
-        const parsed = parseCountry(country);
-        const phoneWithCode = `+${parsed.dialCode}${phoneNumber}`;
-        if (validatePhoneNumber(phoneWithCode, parsed.dialCode, parsed.iso2)) {
-          return parsed.iso2;
-        }
-      }
-    }
-    return undefined;
+    return;
   } catch {
-    return undefined;
+    return;
   }
 }
-export default function PhoneInput({
-  value = {
-    country: 'us',
-    phone: ''
-  },
-  onChange,
-  placeholder = 'Enter phone number',
-  countryDisplayOptions = {},
-  preview = false,
-  allowDial = true,
-  ...props
+function Y({
+  value: e = { country: "us", phone: "" },
+  onChange: t,
+  placeholder: n = "Enter phone number",
+  countryDisplayOptions: r = {},
+  preview: u = !1,
+  allowDial: a = !0,
+  ...d
 }) {
-  // 创建国家代码映射表，避免重复解析
-  const countryMap = useMemo(() => {
-    const map = new Map();
-    defaultCountries.forEach(country => {
-      const parsed = parseCountry(country);
-      map.set(parsed.iso2, parsed);
-    });
-    return map;
-  }, []);
-  const [previewValue, setPreviewValue] = useState(value);
-  const handleValueChange = useCallback(data => {
-    if (!preview && onChange) {
-      const newValue = {
-        ...value,
-        ...data
-      };
-      const countryData = countryMap.get(newValue.country);
-      if (countryData) {
-        newValue.phone = addCountryCodeToPhone(newValue.phone, getDialCodeWithoutPlus(countryData.dialCode));
+  const c = P(() => {
+    const o = /* @__PURE__ */ new Map();
+    return f.forEach((i) => {
+      const s = p(i);
+      o.set(s.iso2, s);
+    }), o;
+  }, []), [h, M] = F(e), E = k(
+    (o) => {
+      if (!u && t) {
+        const i = {
+          ...e,
+          ...o
+        }, s = c.get(i.country);
+        s && (i.phone = b(i.phone, g(s.dialCode))), t(i);
       }
-      onChange(newValue);
-    }
-  }, [onChange, preview, value, countryMap]);
-
-  // 获取当前国家的区号（不带+号）
-  const currentDialCode = useMemo(() => {
-    const countryData = countryMap.get(value.country);
-    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
-  }, [value.country, countryMap]);
-
-  // 使用 react-international-phone 的 hook
-  const {
-    phone,
-    country,
-    handlePhoneValueChange,
-    setCountry
-  } = usePhoneInput({
-    defaultCountry: value.country,
-    value: extractPhoneWithoutCode(value.phone, currentDialCode),
-    countries: defaultCountries,
-    disableDialCodeAndPrefix: true,
-    onChange: data => {
-      const newData = {
-        ...data,
-        phone: previewValue.country !== data.country && !data.phone ? extractPhoneWithoutCode(value.phone, currentDialCode) : data.phone
+    },
+    [t, u, e, c]
+  ), C = P(() => {
+    const o = c.get(e.country);
+    return o ? g(o.dialCode) : "";
+  }, [e.country, c]), { phone: l, country: y, handlePhoneValueChange: S, setCountry: T } = R({
+    defaultCountry: e.country,
+    value: x(e.phone, C),
+    countries: f,
+    disableDialCodeAndPrefix: !0,
+    onChange: (o) => {
+      const i = {
+        ...o,
+        phone: h.country !== o.country && !o.phone ? x(e.phone, C) : o.phone
       };
-      setPreviewValue(newData);
-      handleValueChange(newData);
+      M(i), E(i);
     }
-  });
-
-  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
-  const displayPhone = useMemo(() => phone || extractPhoneWithoutCode(value.phone, currentDialCode), [phone, value.phone, currentDialCode]);
-
-  // 处理国家变更
-  const onCountryChange = newCountry => {
-    if (preview) return;
-    setCountry(newCountry);
+  }), D = P(
+    () => l || x(e.phone, C),
+    [l, e.phone, C]
+  ), j = (o) => {
+    u || T(o);
   };
-
-  // 预览模式
-  if (preview) {
-    const phoneWithCode = addCountryCodeToPhone(phone, getDialCodeByCountry(country));
-    const isValid = phone && validatePhoneNumber(phoneWithCode, country);
-    const canDial = allowDial && isValid;
-    return /*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      component: canDial ? 'a' : 'div',
-      href: canDial ? `tel:${phone}` : undefined,
-      ...(canDial ? {
-        'aria-label': `Call ${phone}`,
-        title: `Call ${phone}`,
-        rel: 'nofollow',
-        itemProp: 'telephone'
-      } : {}),
-      sx: {
-        textDecoration: 'none',
-        color: 'inherit',
-        cursor: canDial ? 'pointer' : 'default',
-        '&:hover': {
-          opacity: canDial ? 0.8 : 1
-        }
-      },
-      children: [/*#__PURE__*/_jsx(CountrySelect, {
-        value: country,
-        preview: preview
-      }), /*#__PURE__*/_jsx(Typography, {
+  if (u) {
+    const o = b(l, v(y)), i = l && W(o, y), s = a && i;
+    return /* @__PURE__ */ $(
+      I,
+      {
+        component: s ? "a" : "div",
+        href: s ? `tel:${l}` : void 0,
+        ...s ? {
+          "aria-label": `Call ${l}`,
+          title: `Call ${l}`,
+          rel: "nofollow",
+          itemProp: "telephone"
+        } : {},
         sx: {
-          ml: 0.5
+          display: "flex",
+          alignItems: "center",
+          textDecoration: "none",
+          color: "inherit",
+          cursor: s ? "pointer" : "default",
+          "&:hover": {
+            opacity: s ? 0.8 : 1
+          }
         },
-        children: displayPhone
-      })]
-    });
+        children: [
+          /* @__PURE__ */ m(V, { value: y, preview: u }),
+          /* @__PURE__ */ m(A, { sx: { ml: 0.5 }, children: D })
+        ]
+      }
+    );
   }
-  // 编辑模式
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: 0.5,
-    children: [/*#__PURE__*/_jsx(CountrySelect, {
-      value: country,
-      onChange: onCountryChange,
-      preview: false,
-      selectCountryProps: countryDisplayOptions
-    }), /*#__PURE__*/_jsx(TextField, {
-      ...props,
-      value: displayPhone,
-      onChange: handlePhoneValueChange,
-      placeholder: placeholder,
-      className: "phone-input",
-      sx: mergeSx({
-        '& .MuiInputBase-input': {
-          padding: 1
-        }
-      }, props.sx // 这里传入的可能是一个数组或一个对象
-      ),
-      InputProps: props.InputProps ?? {}
-    })]
-  });
-}
+  return /* @__PURE__ */ $(
+    I,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 0.5
+      },
+      children: [
+        /* @__PURE__ */ m(
+          V,
+          {
+            value: y,
+            onChange: j,
+            preview: !1,
+            selectCountryProps: r
+          }
+        ),
+        /* @__PURE__ */ m(
+          L,
+          {
+            ...d,
+            value: D,
+            onChange: S,
+            placeholder: n,
+            className: "phone-input",
+            sx: q(
+              {
+                "& .MuiInputBase-input": {
+                  padding: 1
+                }
+              },
+              d.sx
+              // 这里传入的可能是一个数组或一个对象
+            ),
+            slotProps: {
+              input: d.InputProps ?? {}
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Y as default,
+  X as detectCountryFromPhone,
+  U as getCountryNameByCountry,
+  v as getDialCodeByCountry,
+  W as validatePhoneNumber
+};

package/lib/PoweredByArcBlock/index.d.ts

@@ -1,4 +1,4 @@
-import type { LinkProps, TypographyProps } from '@mui/material';
+import { LinkProps, TypographyProps } from '@mui/material';
 export interface PoweredByArcBlockProps extends TypographyProps {
     linkProps?: LinkProps;
     showExtra?: boolean;

package/lib/PoweredByArcBlock/index.js

@@ -1,22 +1,16 @@
-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, {
-    ...props,
-    children: ["Powered by", ' ', /*#__PURE__*/_jsx(Link, {
-      href: "https://www.arcblock.io",
-      target: "_blank",
-      ...linkProps,
-      children: "ArcBlock"
-    }), "'s", ' ', /*#__PURE__*/_jsx(Link, {
-      href: "https://www.blocklet.io",
-      target: "_blank",
-      ...linkProps,
-      children: "Blocklet Technology"
-    }), showExtra ? ', the decentralized web engine.' : null]
-  });
-}
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Typography as n, Link as t } from "@mui/material";
+function a({ linkProps: e, showExtra: o, ...l }) {
+  return /* @__PURE__ */ c(n, { ...l, children: [
+    "Powered by",
+    " ",
+    /* @__PURE__ */ r(t, { href: "https://www.arcblock.io", target: "_blank", ...e, children: "ArcBlock" }),
+    "'s",
+    " ",
+    /* @__PURE__ */ r(t, { href: "https://www.blocklet.io", target: "_blank", ...e, children: "Blocklet Technology" }),
+    o ? ", the decentralized web engine." : null
+  ] });
+}
+export {
+  a as default
+};

package/lib/PricingTable/PricingPlan.js

@@ -1,57 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Card from '@mui/material/Card';
-import Button from '@mui/material/Button';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
-import { styled } from '../Theme';
-function PricingPlan({
-  plan
-}) {
-  return /*#__PURE__*/_jsxs(PlanCard, {
-    $shadow: true,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "card-header",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "title",
-        children: plan.name
-      })
-    }), /*#__PURE__*/_jsxs(CardContent, {
-      className: "card-content",
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "plan-content",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "plan-pricing",
-          children: /*#__PURE__*/_jsx(Typography, {
-            component: "h2",
-            variant: "h5",
-            className: "price-number",
-            children: plan.price
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: "plan-services",
-          children: plan.featureList.map(line => /*#__PURE__*/_jsx(Typography, {
-            component: "p",
-            variant: "body1",
-            align: "center",
-            children: line
-          }, line))
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        className: "plan-actions",
-        children: plan.showButton && /*#__PURE__*/_jsx(Button, {
-          fullWidth: true,
-          variant: "outlined",
-          color: "primary",
-          component: "a",
-          href: plan.buttonLink,
-          children: plan.buttonText
-        })
-      })]
-    })]
-  });
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { Card as a, CardContent as o, Typography as r, Button as c } from "@mui/material";
+import { styled as l } from "../Theme/index.js";
+function f({ plan: e }) {
+  return /* @__PURE__ */ t(s, { $shadow: !0, children: [
+    /* @__PURE__ */ n("div", { className: "card-header", children: /* @__PURE__ */ n("div", { className: "title", children: e.name }) }),
+    /* @__PURE__ */ t(o, { className: "card-content", children: [
+      /* @__PURE__ */ t("div", { className: "plan-content", children: [
+        /* @__PURE__ */ n("div", { className: "plan-pricing", children: /* @__PURE__ */ n(r, { component: "h2", variant: "h5", className: "price-number", children: e.price }) }),
+        /* @__PURE__ */ n("div", { className: "plan-services", children: e.featureList.map((i) => /* @__PURE__ */ n(r, { component: "p", variant: "body1", align: "center", children: i }, i)) })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "plan-actions", children: e.showButton && /* @__PURE__ */ n(c, { fullWidth: !0, variant: "outlined", color: "primary", component: "a", href: e.buttonLink, children: e.buttonText }) })
+    ] })
+  ] });
 }
-export default PricingPlan;
-const PlanCard = styled(Card)`
+const s = l(a)`
   height: 500px;
   display: flex;
   flex-direction: column;
@@ -60,7 +22,7 @@ const PlanCard = styled(Card)`
   }
 
   && {
-    ${props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)'}
+    ${(e) => e.$shadow ? "" : "box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)"}
   }
 
   .card-header {
@@ -116,4 +78,7 @@ const PlanCard = styled(Card)`
   .plan-actions {
     width: 100%;
   }
-`;
+`;
+export {
+  f as default
+};

package/lib/PricingTable/PricingTable.stories.d.ts

@@ -0,0 +1,8 @@
+export function BasicUse(): import("react/jsx-runtime").JSX.Element;
+export namespace BasicUse {
+    let storyName: string;
+}
+declare namespace _default {
+    let title: string;
+}
+export default _default;

package/lib/PricingTable/index.d.ts

@@ -1,4 +1,4 @@
-import { type PricingPlanProps } from './PricingPlan';
+import { PricingPlanProps } from './PricingPlan';
 export interface PricingTableProps {
     plans?: Array<PricingPlanProps['plan']>;
 }

package/lib/PricingTable/index.js

@@ -1,43 +1,37 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Grid from '@mui/material/Grid';
-import PricingPlan from './PricingPlan';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-function PricingTable({
-  plans = []
-}) {
-  if (plans && plans.length > 0) {
-    return /*#__PURE__*/_jsx(Div, {
-      variant: "even",
-      children: /*#__PURE__*/_jsx(Grid, {
-        container: true,
-        spacing: 2,
-        justifyContent: "center",
-        children: plans.map((x, index) =>
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        _jsx(Grid, {
-          item: true,
+import { jsx as e } from "react/jsx-runtime";
+import { Grid as n } from "@mui/material";
+import a from "./PricingPlan.js";
+import { styled as m } from "../Theme/index.js";
+import { withDeprecated as o } from "../Util/deprecate.js";
+function d({ plans: i = [] }) {
+  return i && i.length > 0 ? /* @__PURE__ */ e(f, { variant: "even", children: /* @__PURE__ */ e(
+    n,
+    {
+      container: !0,
+      spacing: 2,
+      sx: {
+        justifyContent: "center"
+      },
+      children: i.map((t, r) => /* @__PURE__ */ e(
+        n,
+        {
           className: "plan-item",
-          xs: 12,
-          sm: 6,
-          md: 3,
-          children: /*#__PURE__*/_jsx(PricingPlan, {
-            plan: x
-          })
-        }, index))
-      })
-    });
-  }
-  return null;
+          size: {
+            xs: 12,
+            sm: 6,
+            md: 3
+          },
+          children: /* @__PURE__ */ e(a, { plan: t })
+        },
+        r
+      ))
+    }
+  ) }) : null;
 }
-export default withDeprecated(PricingTable, {
-  name: 'PricingTable'
-});
-const Div = styled('div')`
+const g = o(d, { name: "PricingTable" }), f = m("div")`
   padding: 100px 0;
   text-align: center;
-  background-color: ${props => props.variant === 'even' ? '#fbfbfb' : '#ffffff'};
+  background-color: ${(i) => i.variant === "even" ? "#fbfbfb" : "#ffffff"};
   @media (max-width: 320px) {
     padding: 50px 0;
   }
@@ -46,4 +40,7 @@ const Div = styled('div')`
       margin-bottom: 30px;
     }
   }
-`;
+`;
+export {
+  g as default
+};

package/lib/QRCode/QRCode.stories.d.ts

@@ -0,0 +1,13 @@
+export { default as Basic } from './demo/basic';
+export { default as WithImage } from './demo/with-image';
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+}
+export default _default;