@pisell/materials 1.0.363 → 1.0.365

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

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

package/es/components/pisellCard/index.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import classNames from 'classnames';
+import QRCode from "../qrcode";
+import Iconfont from "../iconfont";
+import Amount from "../pisellText/components/Amount";
+
+// @ts-ignore
+import bg from "./bg.jpeg";
+import "./index.less";
+var PisellCard = function PisellCard(props) {
+  var id = props.id,
+    code = props.code,
+    qrCode = props.qrCode,
+    balance = props.balance,
+    disabledReason = props.disabledReason,
+    name = props.name,
+    storeName = props.storeName,
+    redeem = props.redeem,
+    validDate = props.validDate,
+    disabled = props.disabled,
+    active = props.active,
+    cover = props.cover,
+    _props$showCover = props.showCover,
+    showCover = _props$showCover === void 0 ? true : _props$showCover,
+    _props$showDetail = props.showDetail,
+    showDetail = _props$showDetail === void 0 ? true : _props$showDetail,
+    _props$showBalance = props.showBalance,
+    showBalance = _props$showBalance === void 0 ? true : _props$showBalance,
+    _props$showRedeem = props.showRedeem,
+    showRedeem = _props$showRedeem === void 0 ? true : _props$showRedeem,
+    _props$showName = props.showName,
+    showName = _props$showName === void 0 ? true : _props$showName,
+    _props$showCode = props.showCode,
+    showCode = _props$showCode === void 0 ? true : _props$showCode,
+    _props$showStoreName = props.showStoreName,
+    showStoreName = _props$showStoreName === void 0 ? true : _props$showStoreName,
+    _props$showValidDate = props.showValidDate,
+    showValidDate = _props$showValidDate === void 0 ? true : _props$showValidDate,
+    _props$showQrCode = props.showQrCode,
+    showQrCode = _props$showQrCode === void 0 ? true : _props$showQrCode;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-card', {
+      'pisell-card-disabled': disabled
+    }),
+    style: showCover ? {
+      backgroundImage: "url('".concat(cover || bg, "')")
+    } : {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-name-wrap"
+  }, /*#__PURE__*/React.createElement("span", null, showName && name), showDetail && /*#__PURE__*/React.createElement("span", null, "Detail")), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-store-name"
+  }, showStoreName && storeName), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-amount-wrap"
+  }, showRedeem && !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-amount-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-amount-item-label"
+  }, "Redeem"), /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    useThousandsSeparator: true,
+    value: redeem
+  })), showBalance && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-amount-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-amount-item-label"
+  }, "Balance", disabled ? ': ' : ''), /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    useThousandsSeparator: true,
+    value: balance
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-code-wrap"
+  }, /*#__PURE__*/React.createElement("div", null, showCode && /*#__PURE__*/React.createElement("div", null, code), showValidDate && /*#__PURE__*/React.createElement("div", null, "Valid to ", validDate)), showQrCode && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-qr-code"
+  }, /*#__PURE__*/React.createElement(QRCode, {
+    value: qrCode,
+    size: 60
+  }))), (disabled || disabledReason) && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-card-warn-message"
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    className: "pisell-card-icon",
+    type: "pisell2-alert-circle"
+  }), /*#__PURE__*/React.createElement("span", null, disabledReason)));
+};
+export default PisellCard;

package/es/components/pisellCard/index.less

@@ -0,0 +1,89 @@
+.pisell-card {
+  padding: 16px;
+  color: var(--Gray-900, #101828);
+  font-size: 14px;
+  font-style: normal;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  background-size: cover;
+  height: 190px;
+  .pisell-card-name-wrap {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .pisell-card-store-name {
+    height: 20px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px; /* 150% */
+    margin-bottom: 22px;
+  }
+  .pisell-card-amount-wrap {
+    display: flex;
+    margin-bottom: 4px;
+    .pisell-card-amount-item {
+      display: flex;
+      flex-direction: column;
+      margin-right: 16px;
+      .pisell-card-amount-item-label {
+        color: var(--Gray-500, #667085);
+        font-weight: 400;
+        line-height: 20px;
+        height: 20px;
+      }
+      .pisell-card-amount-item-value {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 30px;
+      }
+    }
+  }
+  .pisell-card-code-wrap {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .pisell-card-qr-code {
+      position: absolute;
+      top: -16px;
+      right: -6px;
+    }
+  }
+  .pisell-lowcode-qrcode {
+    padding: 6px;
+  }
+  .pisell-card-warn-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    background: var(--Warning-200, #FEDF89);
+    display: flex;
+    padding: 10px 16px;
+    color: var(--Gray-900, #101828);
+    font-weight: 600;
+    line-height: 20px;
+    .pisell-card-icon {
+      font-size: 20px;
+      color: #DC6803;
+      margin-right: 6px;
+    }
+  }
+}
+.pisell-card-disabled {
+  color: var(--Gray-500, #667085);
+  padding-bottom: 36px;
+  .pisell-card-amount-wrap {
+    .pisell-card-amount-item {
+      flex-direction: row;
+      align-items: center;
+      .pisell-card-amount-item-value {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
+import { PisellContextType } from '../pisell-config-provider/context';
+import { PisellCardProps } from "../pisellCard";
+export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
+    platform?: PisellContextType['platform'];
+    endMessage?: React.ReactNode;
+    loader?: React.ReactNode;
+    hasMore: boolean;
+    loadMoreData?: () => Promise<void>;
+    data: PisellCardProps[];
+    showName?: boolean;
+    showStoreName?: boolean;
+    showRedeem?: boolean;
+    showBalance?: boolean;
+    showCode?: boolean;
+    showValidDate?: boolean;
+    showDetail?: boolean;
+    showQrCode?: boolean;
+    showCover?: boolean;
+}
+declare const PisellCardList: (props: PisellCardListProps) => React.JSX.Element;
+export default PisellCardList;

package/es/components/pisellCardList/index.js

@@ -0,0 +1,104 @@
+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); }
+import React from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { Skeleton } from 'antd';
+import PisellCheckboxGroup from "../pisellCheckboxGroup";
+import PisellCard from "../pisellCard";
+var mockList = [{
+  id: 1,
+  name: '张三',
+  qrCode: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLRpBpr.png',
+  storeName: '张三的店铺',
+  balance: 100,
+  code: 'Walletpass code',
+  validDate: '2022-01-01',
+  redeem: 1000,
+  disabled: false,
+  disabledReason: '',
+  cover: ''
+}, {
+  id: 2,
+  name: '张三',
+  qrCode: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLRpBpr.png',
+  storeName: '张三的店铺',
+  balance: 100,
+  code: 'Walletpass code',
+  validDate: '2022-01-01',
+  redeem: 1000,
+  disabled: true,
+  disabledReason: 'Used maximum amount',
+  cover: ''
+}, {
+  id: 3,
+  name: '张三',
+  qrCode: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLRpBpr.png',
+  storeName: '张三的店铺',
+  balance: 100,
+  code: 'Walletpass code',
+  validDate: '2022-01-01',
+  redeem: 1000,
+  disabled: false,
+  disabledReason: '',
+  cover: ''
+}];
+var PisellCardList = function PisellCardList(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? mockList : _props$data,
+    _props$loadMoreData = props.loadMoreData,
+    loadMoreData = _props$loadMoreData === void 0 ? function () {} : _props$loadMoreData,
+    endMessage = props.endMessage,
+    loader = props.loader,
+    hasMore = props.hasMore,
+    onChange = props.onChange,
+    value = props.value,
+    mode = props.mode,
+    showName = props.showName,
+    showCode = props.showCode,
+    showCover = props.showCover,
+    showDetail = props.showDetail,
+    showBalance = props.showBalance,
+    showRedeem = props.showRedeem,
+    showQrCode = props.showQrCode,
+    showStoreName = props.showStoreName,
+    showValidDate = props.showValidDate;
+  return /*#__PURE__*/React.createElement(InfiniteScroll, {
+    dataLength: data.length,
+    next: loadMoreData,
+    hasMore: hasMore,
+    loader: loader || /*#__PURE__*/React.createElement(Skeleton, {
+      paragraph: {
+        rows: 3
+      },
+      active: true
+    }),
+    endMessage: endMessage,
+    scrollableTarget: "scrollableDiv"
+  }, /*#__PURE__*/React.createElement(PisellCheckboxGroup
+  // platform="h5"
+  , {
+    options: data,
+    value: value,
+    mode: mode,
+    rowKey: "id",
+    className: "payment-list",
+    gap: 12,
+    onChange: onChange,
+    iconPosition: "hide",
+    optionClassName: 'payment-item',
+    renderOption: function renderOption(item, active) {
+      return /*#__PURE__*/React.createElement(PisellCard, _extends({}, item, {
+        active: active,
+        showName: showName,
+        showBalance: showBalance,
+        showCode: showCode,
+        showCover: showCover,
+        showDetail: showDetail,
+        showQrCode: showQrCode,
+        showRedeem: showRedeem,
+        showStoreName: showStoreName,
+        showValidDate: showValidDate
+      }));
+    }
+  }));
+};
+export default PisellCardList;

package/es/components/pisellCardList/index.less

@@ -0,0 +1,75 @@
+.pisell-card {
+  padding: 16px;
+  color: var(--Gray-900, #101828);
+  font-size: 14px;
+  font-style: normal;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  .pisell-card-name-wrap {
+    display: flex;
+    justify-content: space-between;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .pisell-card-store-name {
+    height: 20px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px; /* 150% */
+  }
+  .pisell-card-amount-wrap {
+    display: flex;
+    margin-bottom: 4px;
+    .pisell-card-amount-item {
+      display: flex;
+      flex-direction: column;
+      margin-right: 16px;
+      .pisell-card-amount-item-label {
+        color: var(--Gray-500, #667085);
+        font-weight: 400;
+        line-height: 20px;
+        height: 20px;
+      }
+      .pisell-card-amount-item-value {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 30px;
+      }
+    }
+  }
+  .pisell-card-code-wrap {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .pisell-card-qr-code {
+      position: absolute;
+      top: -16px;
+      right: 0;
+    }
+  }
+  .pisell-lowcode-qrcode {
+    padding: 6px;
+  }
+  .pisell-card-warn-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    background: var(--Warning-200, #FEDF89);
+    display: flex;
+    padding: 6px 16px;
+    color: var(--Warning-900, #7A2E0E);
+    font-weight: 400;
+    line-height: 20px;
+    .pisell-card-icon {
+      font-size: 20px;
+      color: #7A2E0E;
+      margin-right: 2px;
+    }
+  }
+}
+.pisell-card-disabled {
+  color: var(--Gray-500, #667085);
+  padding-bottom: 36px;
+}

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

@@ -0,0 +1,26 @@
+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) => void;
+    value?: PisellCheckboxGroupValue;
+    renderOption?: (option: PisellCheckboxGroupOption, active: boolean) => React.ReactNode;
+    rowKey?: string;
+    mode?: 'multiple' | 'single';
+    iconPosition?: 'left' | 'right' | 'hide';
+    optionClassName?: string;
+    optionActiveClassName?: string;
+}
+declare const PisellCheckboxGroup: (props: PisellCheckboxGroupProps) => React.JSX.Element;
+export default PisellCheckboxGroup;

package/es/components/pisellCheckboxGroup/index.js

@@ -0,0 +1,144 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["platform", "gap", "style", "options", "onChange", "value", "renderOption", "padding", "rowKey", "mode", "iconPosition", "optionClassName", "optionActiveClassName"];
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+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, { useEffect, useMemo } from 'react';
+import usePisellConfig from "../pisell-config-provider/hooks/usePisellConfig";
+import classNames from 'classnames';
+import { Checkbox, Radio } from 'antd';
+import { isNumber } from '@pisell/utils';
+import { changeArray } from '@pisell/utils';
+import "./index.less";
+import { useState } from 'react';
+import PisellRow from "../pisellRow";
+import { mockList } from "./mock";
+var PisellCheckboxGroup = function PisellCheckboxGroup(props) {
+  var config = usePisellConfig();
+  var platform = props.platform,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? 10 : _props$gap,
+    style = props.style,
+    _props$options = props.options,
+    options = _props$options === void 0 ? mockList : _props$options,
+    onChange = props.onChange,
+    value = props.value,
+    _props$renderOption = props.renderOption,
+    renderOption = _props$renderOption === void 0 ? function (option, active) {
+      return option.label;
+    } : _props$renderOption,
+    _props$padding = props.padding,
+    padding = _props$padding === void 0 ? 0 : _props$padding,
+    _props$rowKey = props.rowKey,
+    rowKey = _props$rowKey === void 0 ? 'value' : _props$rowKey,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'multiple' : _props$mode,
+    _props$iconPosition = props.iconPosition,
+    iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
+    optionClassName = props.optionClassName,
+    optionActiveClassName = props.optionActiveClassName,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    _value = _useState2[0],
+    set_value = _useState2[1];
+
+  // 当value 发生变化时, 将外部value 处理成内部value
+  useEffect(function () {
+    initValue();
+  }, [value]);
+
+  /**
+   * @title: 转换value到内部
+   * @description:
+   * @return {*}
+   * @Author: zhiwei.Wang
+   * @Date: 2024-01-30 16:45
+   */
+  var initValue = function initValue() {
+    var _val = value;
+    if (!value) {
+      _val = [];
+    } else {
+      if (!Array.isArray(value)) {
+        _val = [value];
+      }
+    }
+    set_value(_val);
+  };
+
+  // 样式
+  var _style = useMemo(function () {
+    var gapVal = isNumber(gap) ? gap + 'px' : gap;
+    var paddingVal = isNumber(padding) ? padding + 'px' : padding;
+    var obj = _objectSpread({
+      gap: gapVal,
+      padding: paddingVal
+    }, style);
+    return obj;
+  }, [style, gap, padding]);
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  var _onChange = function _onChange(val) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(mode === 'single' ? val[0] : val);
+  };
+
+  /**
+   * @title: 选择
+   * @description:
+   * @param {any} item
+   * @return {*}
+   * @Author: zhiwei.Wang
+   * @Date: 2024-01-30 16:46
+   */
+  var handleSelectItem = function handleSelectItem(item) {
+    var newVal = [item];
+    if (mode === 'multiple') {
+      newVal = changeArray(_value, item, 'this');
+    }
+    _onChange(newVal);
+    set_value(newVal);
+  };
+
+  // 根据mode 切换不同的组件
+  var CheckBoxItem = mode === 'multiple' ? Checkbox : Radio;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: classNames('pisell-checkbox-group', rest.className),
+    style: _style
+  }), options.map(function (option) {
+    var active = _value.includes(option[rowKey]);
+    return /*#__PURE__*/React.createElement(PisellRow, {
+      className: classNames('pisell-checkbox-group-item', optionClassName, _defineProperty({
+        'pisell-checkbox-group-item-active': active
+      }, optionActiveClassName, active)),
+      key: option[rowKey],
+      gap: 10,
+      onClick: function onClick() {
+        handleSelectItem(option[rowKey]);
+      },
+      leftContent: iconPosition === 'left' && /*#__PURE__*/React.createElement(CheckBoxItem, {
+        checked: active,
+        className: "pisell-checkbox-group-item-checkbox"
+      }),
+      rightContent: iconPosition === 'right' && /*#__PURE__*/React.createElement(CheckBoxItem, {
+        checked: active,
+        className: "pisell-checkbox-group-item-checkbox"
+      }),
+      centerContent: renderOption === null || renderOption === void 0 ? void 0 : renderOption(option, active),
+      centerContentFill: true
+    });
+  }));
+};
+export default PisellCheckboxGroup;

package/es/components/pisellCheckboxGroup/index.less

@@ -0,0 +1,36 @@
+.pisell-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .pisell-checkbox-group-item {
+    width: 100%;
+    cursor: pointer;
+    border-radius: 12px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 12px;
+      border: 1px solid var(--Gray-200, #EAECF0);
+      z-index: 2;
+    }
+
+    &.pisell-checkbox-group-item-active {
+      &::before {
+        border-width: 2px;
+        border-color: var(--theme-color);
+      }
+
+    }
+  }
+}
+
+.pisell-checkbox-group-item-checkbox {
+  margin: 0;
+}

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

@@ -0,0 +1,4 @@
+export declare const mockList: {
+    label: string;
+    value: string;
+}[];

package/es/components/pisellCheckboxGroup/mock.js

@@ -0,0 +1,16 @@
+export var mockList = [{
+  label: "Option 1",
+  value: "1"
+}, {
+  label: "Option 2",
+  value: "2"
+}, {
+  label: "Option 3",
+  value: "3"
+}, {
+  label: "Option 4",
+  value: "4"
+}, {
+  label: "Option 5",
+  value: "5"
+}];

package/es/components/pisellContainer/components/Portal/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PisellContextType } from "../../../pisell-config-provider/context";
+export interface PortalProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    children?: React.ReactNode;
+    container: HTMLElement | null;
+}
+declare const Portal: React.FC<PortalProps>;
+export default Portal;

package/es/components/pisellContainer/components/Portal/index.js

@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom';
+var Portal = function Portal(props) {
+  var children = props.children,
+    container = props.container;
+  return /*#__PURE__*/ReactDOM.createPortal(children, container || document.body);
+};
+export default Portal;

package/es/components/pisellContainer/containers.d.ts

@@ -0,0 +1 @@
+export declare const containers: Record<string, any>;