@pisell/materials 3.2.31 → 3.3.0

package/es/components/pisellCardList/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
+import { PisellContextType } from '../pisell-config-provider/context';
+import { PisellWalletPassCardProps } from '../pisellWalletPassCard';
+export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
+    platform?: PisellContextType['platform'];
+    /** 当用户查看完所有记录时，底部会显示此消息 */
+    endMessage?: React.ReactNode;
+    /** 加载下次数据时的加载站位 */
+    loader?: React.ReactNode;
+    /** 是否有更多数据 */
+    hasMore: boolean;
+    /** 加载更多数据回调 */
+    loadMoreData?: () => Promise<void>;
+    /** 当前list数据 */
+    data: PisellWalletPassCardProps[];
+    /** list空数据时展示内容 */
+    empty?: React.ReactNode;
+    /** 是否展示空状态 */
+    showEmpty?: boolean;
+    /** 是否展示卡片名称 */
+    showName?: boolean;
+    /** 是否展示店铺名称 */
+    showStoreName?: boolean;
+    /** 是否展示核销金额 */
+    showRedeem?: boolean;
+    /** 是否展示余额 */
+    showBalance?: boolean;
+    /** 是否展示编码 */
+    showCode?: boolean;
+    /** 是否展示到期时间 */
+    showValidDate?: boolean;
+    /** 是否展示详情按钮 */
+    showDetail?: boolean;
+    /** 是否展示二维码 */
+    showQrCode?: boolean;
+    /** 是否展示封面图 */
+    showCover?: boolean;
+    /** 是否余额货币单位 */
+    showBalanceSymbol?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: PisellCardListProps) => JSX.Element>;
+export default _default;

package/es/components/pisellCheckboxGroup/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellCheckboxGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+declare type PisellCheckboxGroupValue = string | string[] | any;
+export interface PisellCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    platform?: PisellContextType['platform'];
+    gap?: number;
+    padding?: number;
+    options: PisellCheckboxGroupOption[];
+    onChange?: (value: PisellCheckboxGroupValue, item: PisellCheckboxGroupOption) => void;
+    value?: PisellCheckboxGroupValue;
+    renderOption?: (option: PisellCheckboxGroupOption, active: boolean) => React.ReactNode;
+    rowKey?: string;
+    mode?: 'multiple' | 'single';
+    iconPosition?: 'left' | 'right' | 'hide';
+    optionClassName?: string;
+    optionActiveClassName?: string;
+}
+/**
+ * @title: PisellCheckboxGroup
+ * @description: 选中组件
+ * @param {PisellCheckboxGroupProps} props
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-08-16 10:34
+ */
+declare const PisellCheckboxGroup: (props: PisellCheckboxGroupProps) => JSX.Element;
+export default PisellCheckboxGroup;

package/es/components/pisellEmpty/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmptyProps } from 'antd';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellEmptyProps extends EmptyProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 额外内容描述 */
+    extraDescription?: React.ReactNode;
+    /** 额外内容描述 */
+    icon?: React.ReactNode;
+    /** 自定义底部额外操作区域 */
+    footer?: React.ReactNode;
+    [key: string]: any;
+    /** 最大宽度 */
+    maxWidth?: number;
+}
+declare const PisellEmpty: (props: PisellEmptyProps) => JSX.Element;
+export default PisellEmpty;

package/es/components/pisellInformationEntry/Scan/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index.less';
 export interface ScanProps {
     onChange: (val: string) => void;

package/es/components/pisellInformationEntry/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export declare type EntryModeType = {
+    /**
+     * 录入模式名称
+     * scanCode: 扫码录入
+     * input: 手动录入
+     * scanner: 扫码枪录入
+     * nfc: NFC录入
+     */
+    type: 'scanCode' | 'input' | 'scanner' | 'nfc';
+    /**
+     * 录入模式文案 没有使用默认文案
+     */
+    name?: string;
+};
+export interface PisellInformationEntryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 录入模式 */
+    entryModes: EntryModeType[];
+    /** 标题文案 */
+    title?: React.ReactNode;
+    /** 搜索框描述文案 */
+    searchDescribe?: React.ReactNode;
+    /** 录入信息值改变 */
+    onChange?: (val: string) => void;
+}
+declare const PisellInformationEntry: (props: PisellInformationEntryProps) => JSX.Element;
+export default PisellInformationEntry;

package/es/components/pisellInput/components/Copy/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps, ButtonProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 export interface CopyProps extends InputProps {

package/es/components/pisellInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from '../pisell-config-provider/context';
 declare const PisellInput: {

package/es/components/pisellText/components/Amount/index.js

@@ -20,7 +20,7 @@ var Amount = function Amount(props) {
       useThousandsSeparator: useThousandsSeparator,
       hideDecimalForWholeNumbers: hideDecimalForWholeNumbers
     });
-  }, [value, precision, showCurrencySymbol, useThousandsSeparator, hideDecimalForWholeNumbers]);
+  }, [value, precision, showCurrencySymbol, useThousandsSeparator, hideDecimalForWholeNumbers, config === null || config === void 0 ? void 0 : config.symbol]);
   return /*#__PURE__*/React.createElement("span", others, amount);
 };
 export default Amount;

package/es/components/pisellWalletPassCard/index.d.ts

@@ -0,0 +1,55 @@
+import './index.less';
+export interface PisellWalletPassCardProps {
+    id?: number;
+    /** 商品名称 */
+    name: string;
+    /** 二维码 */
+    qrCode: string;
+    /** 共享店铺名称 */
+    storeName: string;
+    /** 余额 */
+    balance?: number;
+    /** 识别码编号 */
+    code: string;
+    /** 有效期 */
+    validDate: string;
+    /** 使用金额 */
+    redeem?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 禁用原因 */
+    disabledReason?: string;
+    /** 是否展示禁用原因 */
+    showDisabledReason?: boolean;
+    /** 封面图 */
+    cover?: string;
+    /** 余额标题文案 */
+    balanceTitle?: string;
+    /** 使用金额标题文案 */
+    redeemTitle?: string;
+    /** 是否选中 */
+    active?: boolean;
+    /** 是否展示商品名称 */
+    showName?: boolean;
+    /** 是否展示共享店铺名称 */
+    showStoreName?: boolean;
+    /** 是否展示使用金额 */
+    showRedeem?: boolean;
+    /** 是否展示余额 */
+    showBalance?: boolean;
+    /** 是否展示识别码编号 */
+    showCode?: boolean;
+    /** 是否展示有效期 */
+    showValidDate?: boolean;
+    /** 是否展示右上角详情按钮 */
+    showDetail?: boolean;
+    /** 是否展示qrCode */
+    showQrCode?: boolean;
+    /** 是否展示封面 */
+    showCover?: boolean;
+    /** 是否展示余额货币符号 */
+    showBalanceSymbol?: boolean;
+    [key: string]: any;
+}
+declare const PisellWalletPassCard: (props: PisellWalletPassCardProps) => JSX.Element;
+export default PisellWalletPassCard;

package/es/components/productCard/components/Time/components/Like/index.js

@@ -7,20 +7,24 @@ var Like = function Like(_ref) {
   var status = _ref.status,
     onLike = _ref.onLike,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    isShowChangeResource = _ref.isShowChangeResource;
   var url = status === 'like' ? likeHeart : likeHideHeart;
-  return /*#__PURE__*/React.createElement("img", {
+  var handleClick = function handleClick(e) {
+    if (!onLike) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    onLike === null || onLike === void 0 || onLike(status === 'like' ? 'common' : 'like');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick,
+    className: "pisell-lowcode-product-card-like-wrap ".concat(isShowChangeResource ? 'pisell-lowcode-change-resource-like-wrap' : '')
+  }, /*#__PURE__*/React.createElement("img", {
     style: style,
     src: url,
-    className: classNames('like-icon', className),
-    onClick: function onClick(e) {
-      if (!onLike) {
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      onLike === null || onLike === void 0 || onLike(status === 'like' ? 'common' : 'like');
-    }
-  });
+    className: classNames('like-icon', className)
+  }));
 };
 export default Like;

package/es/components/productCard/components/Time/components/Like/index.less

@@ -1,6 +1,27 @@
-.like-icon {
-  width: 18px;
-  height: 18px;
-  object-fit: contain;
+.pisell-lowcode-product-card-like-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
+
+  .like-icon {
+    width: 18px;
+    height: 18px;
+    object-fit: contain;
+  }
+}
+
+.pisell-lowcode-change-resource-like-wrap {
+  display: flex;
+  width: 44px;
+  height: 44px;
+  padding: 10px 14px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid var(--Gray-300, #d0d5dd);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  .like-icon {
+    margin-right: 0 !important;
+  }
 }

package/es/components/productCard/components/Time/components/SelectHolder/index.js

@@ -4,9 +4,10 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 React, { useEffect, useState } from 'react';
-import { Select, Divider, Button } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select, Divider } from 'antd';
+import { locales } from '@pisell/utils';
+import Iconfont from "../../../../../iconfont";
 import "./index.less";
 var SelectHolder = function SelectHolder(_ref) {
   var lists = _ref.lists,
@@ -14,7 +15,12 @@ var SelectHolder = function SelectHolder(_ref) {
     _onChange = _ref.onChange,
     holderMode = _ref.holderMode,
     isShowAddHolderButton = _ref.isShowAddHolderButton,
-    onAddHolder = _ref.onAddHolder;
+    onAddHolder = _ref.onAddHolder,
+    addHolderButtonText = _ref.addHolderButtonText,
+    onClearHolder = _ref.onClearHolder,
+    isErrorHolder = _ref.isErrorHolder,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedValue = _useState2[0],
@@ -36,14 +42,25 @@ var SelectHolder = function SelectHolder(_ref) {
     e.stopPropagation();
     onAddHolder();
   };
-  console.log(lists, isShowAddHolderButton, 'select-holder');
+  console.log(lists, isShowAddHolderButton, addHolderButtonText, 'select-holder');
+  var isError = useMemo(function () {
+    if (!selectedValue && isErrorHolder) return true;
+  }, [selectedValue, isErrorHolder]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "pisell-lowcode-product-card-select-holder"
+    className: "pisell-lowcode-product-card-select-holder ".concat(isError ? 'pisell-lowcode-product-card-select-holder-error' : '')
   }, /*#__PURE__*/React.createElement(Select, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
     mode: holderMode,
     size: "large",
     showSearch: true,
+    allowClear: allowClear,
+    onClear: function onClear() {
+      return _onChange('');
+    },
     value: selectedValue,
+    placeholder: locales.getText('pisell2.product.card.add.holder.placeholder')(''),
     onChange: function onChange(val) {
       setSelectedValue(val);
       var item = lists.find(function (d) {
@@ -62,15 +79,40 @@ var SelectHolder = function SelectHolder(_ref) {
         style: {
           margin: '8px 0'
         }
-      }), /*#__PURE__*/React.createElement(Button, {
-        type: "text",
-        icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+      }), /*#__PURE__*/React.createElement("div", {
         onClick: addItem,
+        className: "select-holder-add-btn-wrap",
+        style: {
+          display: 'flex',
+          alignContent: 'center',
+          padding: '4px 10px 10px 8px',
+          gap: '8px',
+          flex: '1 0 0',
+          color: 'var(--Primary-600, #7f56d9)',
+          fontSize: '14px',
+          fontWeight: 600,
+          lineHeight: '20px',
+          cursor: 'pointer'
+        }
+      }, /*#__PURE__*/React.createElement(Iconfont, {
+        type: "pisell2-plus-circle",
+        style: {
+          fontSize: '20px'
+        }
+      }), /*#__PURE__*/React.createElement("span", {
         style: {
-          width: '100%'
+          flex: 1,
+          display: 'inline-block',
+          maxWidth: '100%',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          verticalAlign: 'middle'
         }
-      }, "Add item")) : null);
+      }, locales.getText('pisell2.product.card.add.holder.button.text')(addHolderButtonText)))) : null);
     }
-  }));
+  }), isError ? /*#__PURE__*/React.createElement("div", {
+    className: "select-holder-error"
+  }, locales.getText('pisell2.product.card.add.holder.placeholder')(addHolderButtonText)) : null);
 };
 export default SelectHolder;

package/es/components/productCard/components/Time/components/SelectHolder/index.less

@@ -1,10 +1,35 @@
 .pisell-lowcode-product-card-select-holder {
   .pisell-lowcode-select {
-    min-width: 140px;
-    max-width: 100%;
-    width: auto;
+    width: 100%;
     .pisell-lowcode-select-selector {
       border-radius: 50px;
     }
   }
+
+  .select-holder-add-btn-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 12px 10px 12px 8px;
+    gap: 8px;
+    flex: 1 0 0;
+    color: var(--Primary-600, #7f56d9);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .select-holder-error {
+    color: var(--Error-600, #d92d20);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}
+
+.pisell-lowcode-product-card-select-holder-error {
+  .pisell-lowcode-select-selector {
+    border: 1px solid var(--Error-600, #d92d20) !important;
+  }
 }

package/es/components/productCard/components/Time/components/SelectResource/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["lists", "value", "onChange"];
+var _excluded = ["lists", "value", "onChange", "resourceMode", "allowClear", "onClearResource", "maxLength", "isErrorResource", "resourceErrorText"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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."); }
@@ -8,13 +8,23 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import AlertTriangle from '@pisell/icon/es/AlertTriangle';
+import { locales } from '@pisell/utils';
 import { Select } from 'antd';
+import { isArr } from '@pisell/utils';
+import "./index.less";
 var SelectResource = function SelectResource(_ref) {
   var lists = _ref.lists,
     value = _ref.value,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
+    resourceMode = _ref.resourceMode,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    onClearResource = _ref.onClearResource,
+    maxLength = _ref.maxLength,
+    isErrorResource = _ref.isErrorResource,
+    resourceErrorText = _ref.resourceErrorText,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -23,6 +33,12 @@ var SelectResource = function SelectResource(_ref) {
   useEffect(function () {
     setSelectedValue(value);
   }, [value]);
+  var resourceMap = useMemo(function () {
+    return (lists || []).reduce(function (acc, item) {
+      acc[item.id] = item;
+      return acc;
+    }, {});
+  }, [lists]);
 
   /**
    * @title: 渲染下拉框
@@ -51,20 +67,52 @@ var SelectResource = function SelectResource(_ref) {
       }) : null));
     });
   }, [lists]);
-  return /*#__PURE__*/React.createElement(Select, {
+  var handleChange = useCallback(function (val) {
+    // 检查是否超出最大长度限制
+    if (['multiple', 'tags'].includes(resourceMode) && maxLength) {
+      if (value && value.length >= maxLength && val.length > value.length) {
+        return;
+      }
+    }
+    setSelectedValue(val);
+    if (props.isParallelResource) {
+      var valueArray = isArr(val) ? val : [val];
+      return onChange({
+        value: valueArray,
+        options: valueArray.map(function (v) {
+          return resourceMap[v];
+        }),
+        resourceMode: resourceMode,
+        props: props
+      });
+    }
+    var item = resourceMap[val];
+    onChange(item);
+  }, [resourceMode, maxLength, value, onChange, props, resourceMap]);
+  var isError = useMemo(function () {
+    if (!selectedValue && isErrorResource) return true;
+  }, [selectedValue, isErrorResource]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-product-card-select-resource ".concat(isError ? 'pisell-lowcode-product-card-select-resource-error' : '')
+  }, /*#__PURE__*/React.createElement(Select, {
+    mode: resourceMode,
     size: "large",
     showSearch: true,
+    allowClear: allowClear,
+    onClear: function onClear() {
+      return onChange('');
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
     style: {
       flex: 1
     },
     value: selectedValue,
-    onChange: function onChange(val) {
-      setSelectedValue(val);
-      var item = lists.find(function (d) {
-        return d.id === val;
-      });
-      _onChange(item);
-    }
-  }, renderOptions());
+    placeholder: locales.getText('pisell2.product.card.add.holder.placeholder')(''),
+    onChange: handleChange
+  }, renderOptions()), isError ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-product-select-resource-error"
+  }, locales.getText('pisell2.product.card.add.holder.placeholder')(resourceErrorText)) : null);
 };
 export default SelectResource;

package/es/components/productCard/components/Time/components/SelectResource/index.less

@@ -0,0 +1,20 @@
+.pisell-lowcode-product-card-select-resource {
+  width: 100%;
+  .pisell-lowcode-select {
+    width: 100%;
+  }
+
+  .pisell-lowcode-product-select-resource-error {
+    color: var(--Error-600, #d92d20);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+}
+
+.pisell-lowcode-product-card-select-resource-error {
+  .pisell-lowcode-select-selector {
+    border: 1px solid var(--Error-600, #d92d20) !important;
+  }
+}