@pisell/private-materials 3.1.2 → 3.2.1

package/es/components/walletList/types/index.d.ts

@@ -0,0 +1,194 @@
+import React from 'react';
+export interface MultiLanguageName {
+    original: string;
+    'zh-CN': string;
+    'zh-HK': string;
+    en: string;
+    [key: string]: string;
+}
+export interface WalletMetadata {
+    name: MultiLanguageName;
+    welcomeText?: string | MultiLanguageName;
+    customerName?: string;
+    coverImage?: string;
+    icon?: string;
+    barcodetype: 'barCode' | 'orCode';
+    showcaseWalletPass?: ('rechargeable' | 'piont' | 'voucher' | 'discount')[];
+}
+export interface Shop {
+    id: number;
+    name: string;
+    default_url: string;
+}
+export interface Wallet {
+    id: string | null;
+    shop_id: string | null;
+    shop?: Shop;
+    status: string | null;
+    name: MultiLanguageName;
+    valid_for: {
+        type: string;
+        unit?: string;
+        unit_type?: string;
+        custom_date?: string;
+    };
+    metadata: WalletMetadata;
+    created_at: string | null;
+}
+export interface WalletPass {
+    id: string | null;
+    shop_id: string | null;
+    code: string;
+    status: string | null;
+    wallet_id: string | null;
+    customer_id: string | null;
+    expired_at: string | null;
+    created_at: string;
+    shop: Shop;
+    wallet: Wallet;
+    icon?: string;
+    isLogin?: boolean;
+    showIcon?: boolean;
+}
+export interface WalletBalance {
+    gift_card_balance: number;
+    point_card_balance: number;
+    voucher_count: number;
+    discount_card_count: number;
+}
+export interface WalletBalanceItem {
+    key: string;
+    label: string;
+    value: number;
+}
+export interface WalletCardItem {
+    key: string;
+    label: string;
+    hidden: boolean;
+    value?: number;
+}
+export interface State {
+    list: WalletPass[];
+    balance: WalletBalance | null;
+    loading: boolean;
+    error: Error | null;
+    authError?: boolean;
+    hasAttempted: boolean;
+    isLoggedIn?: boolean;
+}
+export interface Action {
+    type: string;
+    payload: Partial<State>;
+}
+export interface Balance {
+    gift_card_balance: number;
+    point_card_balance: number;
+    voucher_count: number;
+    discount_card_count: number;
+}
+export interface IWallList {
+    tag?: string;
+    sales_status?: string;
+    machine_search?: string;
+    createdDate?: string;
+    limit_status?: string;
+    relation_id?: string;
+    relation_type?: string;
+    customer_id?: string;
+    sort?: string;
+    order_by?: string;
+    used_status?: string;
+    num?: number;
+    skip?: number;
+}
+export interface WalletListProps {
+    globalState?: {
+        platform?: 'pc' | 'h5' | 'ipad';
+        mode?: 'dark' | 'light';
+        cardStyle?: 'normal' | 'full';
+        codeType?: 'barCode' | 'orCode';
+        codeDirection?: 'bottom' | 'top';
+        shopName?: boolean;
+        showWalletName?: boolean;
+        showShopName?: boolean;
+        cardNo?: string;
+        showCardNo?: boolean;
+        showCode?: boolean;
+        points?: boolean;
+        balance?: boolean;
+        coupon?: boolean;
+        pointsValue?: number;
+        balanceValue?: number;
+        couponValue?: number;
+        symbol?: string;
+        showIcon?: boolean;
+        iconImg?: string;
+        customBackgroundImage?: string;
+        walletName?: string;
+    };
+}
+export interface WalletCardProps {
+    platform?: 'pc' | 'h5' | 'ipad';
+    mode?: 'dark' | 'light';
+    cardStyle?: 'normal' | 'full';
+    codeType?: 'barCode' | 'orCode';
+    codeDirection?: 'bottom' | 'top';
+    shopName?: boolean;
+    showIcon?: boolean;
+    iconImg?: string;
+    showWalletName?: boolean;
+    showShopName?: boolean;
+    cardNo?: string;
+    showCardNo?: boolean;
+    showCode?: boolean;
+    points?: boolean;
+    balance?: boolean;
+    coupon?: boolean;
+    pointsValue?: number;
+    balanceValue?: number;
+    couponValue?: number;
+    isLogin?: boolean;
+    items: WalletCardItem[];
+}
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export interface WalletListContextType {
+    state: State;
+    dispatch: React.Dispatch<Action>;
+}
+export declare const DEFAULT_CARD_CONFIG: {
+    readonly mode: "light";
+    readonly cardStyle: "normal";
+    readonly codeDirection: "bottom";
+    readonly showShopName: true;
+    readonly showWalletName: true;
+    readonly showIcon: false;
+    readonly iconImg: "";
+    readonly showCardNo: true;
+    readonly showCode: true;
+    readonly points: true;
+    readonly balance: true;
+    readonly coupon: true;
+};
+export interface CarouselSettings {
+    className: string;
+    arrows: boolean;
+    infinite: boolean;
+    slidesToShow: number;
+    slidesToScroll: number;
+    centerMode: boolean;
+    centerPadding: string;
+    autoplay: boolean;
+    autoplaySpeed: number;
+    dots: boolean;
+    appendDots?: (dots: React.ReactNode) => React.ReactNode;
+    responsive?: Array<{
+        breakpoint: number;
+        settings: {
+            slidesToShow: number;
+            slidesToScroll: number;
+            centerPadding: string;
+        };
+    }>;
+}

package/es/components/walletList/types/index.js

@@ -0,0 +1,49 @@
+// 多语言名称接口
+
+// 钱包元数据接口
+
+// 商店接口
+
+// 钱包接口
+
+// 钱包卡片接口
+
+// 钱包余额接口
+
+// 钱包余额项接口
+
+// 卡片项接口
+
+// 应用状态接口
+
+// Redux Action接口
+
+// 余额接口
+
+// 钱包API接口参数
+
+// WalletList组件Props接口
+
+// WalletCard组件Props接口
+
+// Div Props接口
+
+// Context接口
+
+// 默认常量配置
+export var DEFAULT_CARD_CONFIG = {
+  mode: 'light',
+  cardStyle: 'normal',
+  codeDirection: 'bottom',
+  showShopName: true,
+  showWalletName: true,
+  showIcon: false,
+  iconImg: '',
+  showCardNo: true,
+  showCode: true,
+  points: true,
+  balance: true,
+  coupon: true
+};
+
+// 轮播图配置类型

package/es/components/workSpaceList/components/AppearanceEdit/Color.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './Color.less';
+interface ColorProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+}
+declare const Color: React.FC<ColorProps>;
+export default Color;

package/es/components/workSpaceList/components/AppearanceEdit/Color.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useControllableValue } from 'ahooks';
+import cs from 'classnames';
+import React, { useMemo } from 'react';
+import "./Color.less";
+var colorArr = ['#7F56D9', '#D92D20', '#DC6803', '#039855', '#3E4784', '#088AB2', '#444CE7', '#BA24D5', '#CA8504', '#475467'];
+var ColorItem = function ColorItem(props) {
+  var color = props.color,
+    active = props.active,
+    onClick = props.onClick;
+  var style = useMemo(function () {
+    return {
+      '--color-item-background-color': color
+    };
+  }, [color]);
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    className: cs('color-item', _defineProperty({}, 'color-item-active', active)),
+    style: style
+  });
+};
+var Color = function Color(props) {
+  var value = props.value,
+    onChange = props.onChange,
+    defaultValue = props.defaultValue;
+  var _useControllableValue = useControllableValue(props),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    state = _useControllableValue2[0],
+    setState = _useControllableValue2[1];
+  return /*#__PURE__*/React.createElement("div", null, colorArr.map(function (item) {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: item,
+      color: item,
+      active: state === item,
+      onClick: function onClick() {
+        return setState === null || setState === void 0 ? void 0 : setState(item);
+      }
+    });
+  }));
+};
+export default Color;

package/es/components/workSpaceList/components/AppearanceEdit/Color.less

@@ -0,0 +1,24 @@
+.color-item {
+  width: 28px;
+  height: 28px;
+  margin-right: 12px;
+  border-radius: 50%;
+  background-color: var(--color-item-background-color);
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+.color-item-active {
+  &:after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 3px solid var(--color-item-background-color);
+    left: -6px;
+    top: -6px;
+    box-sizing: border-box;
+  }
+}

package/es/components/workSpaceList/components/AppearanceEdit/IconPanel.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './IconPanel.less';
+interface IconPanel {
+    name: string;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (val: string) => void;
+}
+declare const IconPanel: React.FC<IconPanel>;
+export default IconPanel;

package/es/components/workSpaceList/components/AppearanceEdit/IconPanel.js

@@ -0,0 +1,80 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { iconMap, icons } from "./../AppearanceEdit/constants";
+import { SearchLg } from '@pisell/icon';
+import { Input } from '@pisell/materials';
+import { useControllableValue } from 'ahooks';
+import { Space } from 'antd';
+import cs from 'classnames';
+import { useState } from 'react';
+import "./IconPanel.less";
+
+// 面板
+
+var IconPanel = function IconPanel(props) {
+  var color = props.color,
+    name = props.name,
+    value = props.value;
+  var _useControllableValue = useControllableValue(props),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    state = _useControllableValue2[0],
+    setState = _useControllableValue2[1];
+  var _useState = useState(icons),
+    _useState2 = _slicedToArray(_useState, 2),
+    showIcons = _useState2[0],
+    setShowIcons = _useState2[1];
+  var onSearch = function onSearch(val) {
+    setShowIcons(icons.filter(function (item) {
+      return item.name.includes(val);
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+    bordered: false,
+    prefix: /*#__PURE__*/React.createElement(SearchLg, {
+      className: "search-icon"
+    }),
+    placeholder: "Search icons",
+    className: "search",
+    onPressEnter: function onPressEnter(e) {
+      var _e$target;
+      return onSearch === null || onSearch === void 0 ? void 0 : onSearch((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Space, {
+    size: 20,
+    wrap: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cs('icon-item-wrap', 'icon-item-text', _defineProperty({}, 'icon-item-wrap-active', !iconMap[value])),
+    style: !iconMap[value] ? {
+      background: color
+    } : {},
+    onClick: function onClick() {
+      return setState('');
+    }
+  }, name.slice(0, 2)), showIcons.map(function (item) {
+    var isActive = state === item.name;
+    var Icon = item.icon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cs('icon-item-wrap', _defineProperty({}, 'icon-item-wrap-active', isActive)),
+      style: isActive ? {
+        background: color
+      } : {},
+      onClick: function onClick() {
+        return setState(item.name);
+      },
+      key: item.name
+    }, /*#__PURE__*/React.createElement(Icon, {
+      style: {
+        fontSize: 20
+      }
+    }));
+  })));
+};
+export default IconPanel;

package/es/components/workSpaceList/components/AppearanceEdit/IconPanel.less

@@ -0,0 +1,19 @@
+.search {
+  margin-bottom: 20px;
+}
+.icon-item-wrap {
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-item-text {
+  padding: 0;
+}
+.icon-item-wrap-active {
+  color: #fff;
+}

package/es/components/workSpaceList/components/AppearanceEdit/constants.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IconItem {
+    name: string;
+    icon: React.ComponentType;
+}
+export declare const icons: IconItem[];
+export declare const iconMap: Record<string, React.ComponentType>;
+export {};

package/es/components/workSpaceList/components/AppearanceEdit/constants.js

@@ -0,0 +1,125 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Bank, BankNote02, Coins04, CoinsHand, CoinsSwap02, CreditCard02, Cryptocurrency01, CurrencyBitcoin, Diamond01, Gift01, ShoppingBag01 } from '@pisell/icon';
+
+// 定义图标项的接口
+
+// 添加类型注解
+export var icons = [{
+  name: 'bank',
+  icon: Bank
+},
+// {
+//   name: 'bank-note-01',
+//   icon: 'bank-note-01',
+// },
+{
+  name: 'bank-note-02',
+  icon: BankNote02
+},
+// {
+//   name: 'bank-note-03',
+//   icon: 'pisell2-bank-note-03',
+// },
+// {
+//   name: 'coins-01',
+//   icon: 'pisell2-coins-01',
+// },
+// {
+//   name: 'coins-02',
+//   icon: 'pisell2-coins-02',
+// },
+// {
+//   name: 'coins-03',
+//   icon: 'pisell2-coins-03',
+// },
+{
+  name: 'coins-04',
+  icon: Coins04
+}, {
+  name: 'coins-hand',
+  icon: CoinsHand
+},
+// {
+//   name: 'coins-stacked-01',
+//   icon: 'pisell2-coins-stacked-01',
+// },
+// {
+//   name: 'coins-stacked-02',
+//   icon: 'pisell2-coins-stacked-02',
+// },
+// {
+//   name: 'coins-stacked-04',
+//   icon: 'pisell2-coins-stacked-04',
+// },
+// {
+//   name: 'coins-swap-01',
+//   icon: 'pisell2-coins-swap-01',
+// },
+{
+  name: 'coins-swap-02',
+  icon: CoinsSwap02
+},
+// {
+//   name: 'credit-card-01',
+//   icon: 'pisell2-credit-card-01',
+// },
+{
+  name: 'credit-card-02',
+  icon: CreditCard02
+},
+// {
+//   name: 'credit-card-check',
+//   icon: 'pisell2-credit-card-check',
+// },
+// {
+//   name: 'credit-card-down',
+//   icon: 'pisell2-credit-card-down',
+// },
+// {
+//   name: 'credit-card-download',
+//   icon: 'pisell2-credit-card-download',
+// },
+{
+  name: 'cryptocurrency-01',
+  icon: Cryptocurrency01
+},
+// {
+//   name: 'cryptocurrency-03',
+//   icon: 'pisell2-cryptocurrency-03',
+// },
+{
+  name: 'currency-bitcoin',
+  icon: CurrencyBitcoin
+}, {
+  name: 'diamond-01',
+  icon: Diamond01
+}, {
+  name: 'gift-01',
+  icon: Gift01
+},
+// {
+//   name: 'piggy-bank-01',
+//   icon: 'pisell2-piggy-bank-01',
+// },
+// {
+//   name: 'receipt-check',
+//   icon: 'pisell2-receipt-check',
+// },
+// {
+//   name: 'scales-01',
+//   icon: 'pisell2-scales-01',
+// },
+{
+  name: 'shopping-bag-01',
+  icon: ShoppingBag01
+}];
+
+// 明确指定 iconMap 的类型
+export var iconMap = icons.reduce(function (p, c) {
+  return _objectSpread(_objectSpread({}, p), {}, _defineProperty({}, c.name, c.icon));
+}, {});

package/es/components/workSpaceList/components/AppearanceEdit/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.less';
+export interface AppearanceEditProps {
+    colorTitle?: string;
+    isShowName?: boolean;
+    style?: React.CSSProperties;
+    name?: string;
+    color?: string;
+    icon?: string;
+}
+export interface AppearanceEditRef {
+    getDetail: () => {
+        name: string;
+        color: string;
+        icon: string;
+    };
+}
+declare const _default: React.ForwardRefExoticComponent<AppearanceEditProps & React.RefAttributes<AppearanceEditRef>>;
+export default _default;

package/es/components/workSpaceList/components/AppearanceEdit/index.js

@@ -0,0 +1,77 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import Color from "./../AppearanceEdit/Color";
+import IconPanel from "./../AppearanceEdit/IconPanel";
+import { Input } from '@pisell/materials';
+import { Divider } from 'antd';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import "./index.less";
+var AppearanceEdit = function AppearanceEdit(props, ref) {
+  var colorTitle = props.colorTitle,
+    _props$isShowName = props.isShowName,
+    isShowName = _props$isShowName === void 0 ? true : _props$isShowName,
+    propsName = props.name,
+    propsColor = props.color,
+    propsIcon = props.icon,
+    style = props.style;
+  var inputRef = useRef(null);
+  var _useState = useState('Untitled Base'),
+    _useState2 = _slicedToArray(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var _useState3 = useState('#7F56D9'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    color = _useState4[0],
+    setColor = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    icon = _useState6[0],
+    setIcon = _useState6[1];
+  useEffect(function () {
+    propsName && setName(propsName);
+    propsColor && setColor(propsColor);
+    propsIcon && setIcon(propsIcon);
+  }, [propsName, propsColor, propsIcon]);
+  useEffect(function () {
+    var _inputRef$current;
+    inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus({
+      cursor: 'all'
+    });
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      getDetail: function getDetail() {
+        return {
+          name: name,
+          color: color,
+          icon: icon
+        };
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "appearance-edit-wrap",
+    style: style
+  }, isShowName && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+    value: name,
+    onChange: function onChange(e) {
+      return setName(e.target.value);
+    },
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement("div", null, colorTitle && /*#__PURE__*/React.createElement("div", {
+    className: "color-title"
+  }, colorTitle), /*#__PURE__*/React.createElement(Color, {
+    value: color,
+    onChange: setColor
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconPanel, {
+    value: icon,
+    onChange: setIcon,
+    color: color,
+    name: name
+  })));
+};
+export default /*#__PURE__*/forwardRef(AppearanceEdit);