@arcblock/ux 2.13.70 → 3.0.0

package/lib/PhoneInput/country-select.js

@@ -1,164 +1,116 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, forwardRef, useState } from 'react';
-import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
-import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
-import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
-import { mergeSx } from '../Util/style';
-
-// 定义组件类型
-
-// 实现组件
-const CountrySelectInner = /*#__PURE__*/forwardRef(({
-  value,
-  onChange,
-  sx = {},
-  selectCountryProps,
-  preview = false,
-  valueField = 'iso2',
-  ...rest
-}, ref) => {
-  const {
-    hideFlag = true,
-    hideDialCode = false
-  } = selectCountryProps || {};
-  const [searchQuery, setSearchQuery] = useState('');
-  const countryDetail = useMemo(() => {
-    const item = defaultCountries.find(v => v[1] === value);
-    return value && item ? parseCountry(item) : {
-      name: '',
-      iso2: '',
-      dialCode: ''
-    };
-  }, [value]);
-  const filteredCountries = useMemo(() => {
-    if (!searchQuery) return defaultCountries;
-    const query = searchQuery.toLowerCase();
-    return defaultCountries.filter(country => {
-      const parsed = parseCountry(country);
-      return parsed.name.toLowerCase().includes(query) || parsed.iso2.toLowerCase().includes(query) || parsed.dialCode.includes(query);
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { useState as O, useMemo as x } from "react";
+import { Box as C, Typography as a, Select as z, TextField as j, MenuItem as k } from "@mui/material";
+import { defaultCountries as u, parseCountry as c, FlagEmoji as y } from "react-international-phone";
+import P from "@arcblock/icons/lib/ArrowDown";
+import { mergeSx as F } from "../Util/style.js";
+function L({
+  ref: w,
+  value: i,
+  onChange: s,
+  sx: I = {},
+  selectCountryProps: M,
+  preview: p = !1,
+  valueField: S = "iso2",
+  ...m
+}) {
+  const { hideFlag: h = !0, hideDialCode: f = !1 } = M || {}, [n, b] = O(""), r = x(() => {
+    const e = u.find((t) => t[1] === i);
+    return i && e ? c(e) : { name: "", iso2: "", dialCode: "" };
+  }, [i]), v = x(() => {
+    if (!n) return u;
+    const e = n.toLowerCase();
+    return u.filter((t) => {
+      const d = c(t);
+      return d.name.toLowerCase().includes(e) || d.iso2.toLowerCase().includes(e) || d.dialCode.includes(e);
     });
-  }, [searchQuery]);
-  const renderCountryContent = /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    alignItems: "center",
-    flexWrap: "nowrap",
-    gap: 0.5,
-    sx: {
-      cursor: preview ? 'default' : 'pointer'
-    },
-    children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
-      iso2: value,
-      style: {
-        display: 'flex',
-        width: 24,
-        color: 'inherit'
-      }
-    }), /*#__PURE__*/_jsx(Typography, {
-      component: "span",
+  }, [n]), g = /* @__PURE__ */ l(
+    C,
+    {
       sx: {
-        lineHeight: 1.5
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "nowrap",
+        gap: 0.5,
+        cursor: p ? "default" : "pointer"
       },
-      children: hideDialCode ? countryDetail?.name : `+${countryDetail?.dialCode}`
-    })]
-  });
-  if (preview) {
-    return renderCountryContent;
-  }
-  return /*#__PURE__*/_jsxs(Select, {
-    ...rest,
-    ref: ref,
-    MenuProps: {
-      style: {
-        maxHeight: 400,
-        top: 2,
-        zIndex: 9999
+      children: [
+        h ? null : /* @__PURE__ */ o(y, { iso2: i, style: { display: "flex", width: 24, color: "inherit" } }),
+        /* @__PURE__ */ o(a, { component: "span", sx: { lineHeight: 1.5 }, children: f ? r == null ? void 0 : r.name : `+${r == null ? void 0 : r.dialCode}` })
+      ]
+    }
+  );
+  return p ? g : /* @__PURE__ */ l(
+    z,
+    {
+      ...m,
+      ref: w,
+      MenuProps: {
+        style: { maxHeight: 400, top: 2, zIndex: 9999 },
+        // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        ...m.MenuProps ?? {}
       },
-      // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      ...(rest.MenuProps ?? {})
-    },
-    sx: mergeSx({
-      '&.Mui-focused:has(div[aria-expanded="false"])': {
-        fieldset: {
-          display: 'block'
-        }
-      },
-      '.MuiSelect-select': {
-        padding: 1,
-        paddingRight: '24px !important'
-      },
-      svg: {
-        right: 4,
-        top: 10
-      },
-      '&:hover': {
-        'fieldset.MuiOutlinedInput-notchedOutline': {
-          borderColor: 'divider'
-        }
-      },
-      'fieldset.MuiOutlinedInput-notchedOutline': {
-        borderColor: 'divider'
-      },
-      '.MuiMenuItem-root': {
-        justifyContent: 'flex-start'
-      }
-    }, sx),
-    value: value,
-    onChange: e => onChange?.(e.target.value)
-    // eslint-disable-next-line react/no-unstable-nested-components
-    ,
-    IconComponent: props => /*#__PURE__*/_jsx(ArrowDownwardIcon, {
-      ...props,
-      width: 20,
-      height: 20
-    }),
-    renderValue: () => renderCountryContent,
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        p: 1,
-        position: 'sticky',
-        top: 0,
-        bgcolor: 'background.paper',
-        zIndex: 1
-      },
-      children: /*#__PURE__*/_jsx(TextField, {
-        size: "small",
-        fullWidth: true,
-        placeholder: "Search country...",
-        value: searchQuery,
-        onChange: e => setSearchQuery(e.target.value),
-        onClick: e => e.stopPropagation(),
-        onKeyDown: e => e.stopPropagation()
-      })
-    }), filteredCountries.map(c => {
-      const parsed = parseCountry(c);
-      return /*#__PURE__*/_jsxs(MenuItem, {
-        value: parsed[valueField],
-        children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
-          iso2: parsed.iso2,
-          style: {
-            marginRight: 8,
-            width: 24
+      sx: F(
+        {
+          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: "block" } },
+          ".MuiSelect-select": { padding: 1, paddingRight: "24px !important" },
+          svg: { right: 4, top: 10 },
+          "&:hover": {
+            "fieldset.MuiOutlinedInput-notchedOutline": {
+              borderColor: "divider"
+            }
+          },
+          "fieldset.MuiOutlinedInput-notchedOutline": {
+            borderColor: "divider"
+          },
+          ".MuiMenuItem-root": { justifyContent: "flex-start" }
+        },
+        I
+      ),
+      value: i,
+      onChange: (e) => s == null ? void 0 : s(e.target.value),
+      IconComponent: (e) => /* @__PURE__ */ o(P, { ...e, width: 20, height: 20 }),
+      renderValue: () => g,
+      children: [
+        /* @__PURE__ */ o(C, { sx: { p: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ o(
+          j,
+          {
+            size: "small",
+            fullWidth: !0,
+            placeholder: "Search country...",
+            value: n,
+            onChange: (e) => b(e.target.value),
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation()
           }
-        }), /*#__PURE__*/_jsx(Typography, {
-          marginRight: 1,
-          children: parsed.name
-        }), hideDialCode ? null : /*#__PURE__*/_jsxs(Typography, {
-          color: "gray",
-          children: ["(+", parsed.dialCode, ")"]
-        })]
-      }, parsed.iso2);
-    })]
-  });
-});
-
-// 正确导出泛型组件
-const CountrySelect = CountrySelectInner;
-export default CountrySelect;
+        ) }),
+        v.map((e) => {
+          const t = c(e);
+          return /* @__PURE__ */ l(k, { value: t[S], children: [
+            h ? null : /* @__PURE__ */ o(y, { iso2: t.iso2, style: { marginRight: 8, width: 24 } }),
+            /* @__PURE__ */ o(
+              a,
+              {
+                sx: {
+                  marginRight: 1
+                },
+                children: t.name
+              }
+            ),
+            f ? null : /* @__PURE__ */ l(a, { color: "gray", children: [
+              "(+",
+              t.dialCode,
+              ")"
+            ] })
+          ] }, t.iso2);
+        })
+      ]
+    }
+  );
+}
+const A = L;
+export {
+  A as default
+};