@pisell/materials 2.2.13 → 2.2.14

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AlertProps } from 'antd';
+import './index.less';
+export interface PisellAlertProps extends AlertProps {
+    /** 是否展示忽略按钮 */
+    showDismiss?: boolean;
+    /** 忽略按钮内容 */
+    dismiss?: React.ReactNode;
+    /** 是否展示行为按钮 */
+    showView?: boolean;
+    /** 行为按钮内容 */
+    view?: React.ReactNode;
+    /** 行为按钮点击事件 */
+    onViewClick?: (e: any) => void;
+}
+/**
+ * PisellAlert警告提示组件
+ * @param props
+ * @constructor
+ */
+declare const PisellAlert: (props: PisellAlertProps) => false | React.JSX.Element;
+export default PisellAlert;

package/es/components/pisellAlert/index.js

@@ -0,0 +1,73 @@
+var _excluded = ["message", "description", "type", "showIcon", "icon", "closable", "className", "showDismiss", "dismiss", "showView", "view", "onViewClick"];
+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."); }
+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, { useState } from 'react';
+import { Alert } from 'antd';
+import classNames from 'classnames';
+import IconFont from "../iconfont";
+import "./index.less";
+var iconMap = {
+  success: 'pisell2-check-circle',
+  warning: 'pisell2-alert-circle',
+  error: 'pisell2-alert-circle',
+  info: 'pisell2-alert-circle'
+};
+
+/**
+ * PisellAlert警告提示组件
+ * @param props
+ * @constructor
+ */
+var PisellAlert = function PisellAlert(props) {
+  var message = props.message,
+    description = props.description,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'success' : _props$type,
+    showIcon = props.showIcon,
+    icon = props.icon,
+    closable = props.closable,
+    className = props.className,
+    showDismiss = props.showDismiss,
+    dismiss = props.dismiss,
+    showView = props.showView,
+    view = props.view,
+    onViewClick = props.onViewClick,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  return visible && /*#__PURE__*/React.createElement(Alert, _extends({}, others, {
+    icon: /*#__PURE__*/React.createElement("div", {
+      className: "pisell-alert-type-icon"
+    }, icon || /*#__PURE__*/React.createElement(IconFont, {
+      type: iconMap[type]
+    })),
+    message: message,
+    description: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, description), (showDismiss || showView) && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-alert-action-wrap"
+    }, showDismiss && /*#__PURE__*/React.createElement("span", {
+      className: "pisell-action-item pisell-action-dismiss",
+      onClick: function onClick(e) {
+        var _props$onClose;
+        setVisible(false);
+        props === null || props === void 0 ? void 0 : (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props, e);
+      }
+    }, dismiss), showView && /*#__PURE__*/React.createElement("span", {
+      className: "pisell-action-item pisell-action-view",
+      onClick: onViewClick
+    }, view))),
+    type: type,
+    showIcon: showIcon,
+    closable: closable,
+    className: classNames(className, 'pisell-alert-wrap')
+  }));
+};
+export default PisellAlert;

package/es/components/pisellAlert/index.less

@@ -0,0 +1,149 @@
+.pisell-alert-wrap {
+  border-radius: 12px;
+  padding: 16px;
+  position: relative;
+  .pisell-lowcode-alert-close-icon {
+    font-size: 18px;
+    padding: 9px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    color: inherit;
+    .anticon-close {
+      color: inherit;
+    }
+  }
+  .pisell-alert-type-icon {
+    font-size: 20px;
+    top: 4px;
+    margin-right: 16px;
+    &:before {
+      position: absolute;
+      content: '';
+      width: 28px;
+      height: 28px;
+      border-radius: 20px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: inherit;
+      opacity: 0.3;
+      z-index: 2;
+      top: -4px;
+      left: -4px;
+    }
+    &:after {
+      position: absolute;
+      z-index: 2;
+      content: '';
+      width: 36px;
+      height: 36px;
+      border-radius: 20px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: inherit;
+      opacity: 0.1;
+      top: -8px;
+      left: -8px;
+    }
+  }
+  .pisell-lowcode-alert-message {
+    color: inherit;
+    font-weight: 600;
+  }
+  .pisell-lowcode-alert-description {
+    color: inherit;
+  }
+  .pisell-alert-action-wrap {
+    margin-top: 12px;
+    display: flex;
+    gap: 12px;
+    .pisell-action-item {
+      cursor: pointer;
+      font-weight: 600;
+    }
+  }
+}
+
+.pisell-lowcode-alert-success {
+  border: 1px solid var(--Success-600, #079455);
+  background: var(--Success-25, #f6fef9);
+  color: var(--Success-700, #067647);
+  .pisell-alert-type-icon {
+    color: #079455;
+    line-height: 1;
+    position: relative;
+  }
+  .pisell-alert-action-wrap {
+    .pisell-action-item.pisell-action-dismiss {
+      color: var(--Success-600, #079455);
+    }
+  }
+  .pisell-lowcode-alert-close-icon {
+    .anticon-close {
+      color: #17B26A;
+    }
+  }
+}
+
+.pisell-lowcode-alert-info {
+  border: 1px solid var(--Blue-300, #84caff);
+  background: var(--Blue-50, #eff8ff);
+  color: var(--Blue-700, #175CD3);
+  .pisell-alert-type-icon {
+    color: #1570ef;
+    line-height: 1;
+    position: relative;
+  }
+  .pisell-alert-action-wrap {
+    .pisell-action-item.pisell-action-dismiss {
+      color: var(--Blue-600, #1570EF);
+    }
+  }
+  .pisell-lowcode-alert-close-icon {
+    .anticon-close {
+      color: #2E90FA
+    }
+  }
+}
+
+.pisell-lowcode-alert-warning {
+  border: 1px solid var(--Warning-300, #fec84b);
+  background: var(--Warning-25, #fffcf5);
+  color: var(--Warning-700, #B54708);
+  .pisell-alert-type-icon {
+    color: #dc6803;
+    line-height: 1;
+    position: relative;
+  }
+  .pisell-alert-action-wrap {
+    .pisell-action-item.pisell-action-dismiss {
+      color: var(--Warning-600, #DC6803);
+    }
+  }
+  .pisell-lowcode-alert-close-icon {
+    .anticon-close {
+      color: #F79009
+    }
+  }
+}
+
+.pisell-lowcode-alert-error {
+  border: 1px solid var(--Error-300, #fda29b);
+  background: var(--Error-25, #fffbfa);
+  color: var(--Error-700, #B42318);
+  .pisell-alert-type-icon {
+    color: #d92d20;
+    line-height: 1;
+    position: relative;
+  }
+  .pisell-alert-action-wrap {
+    .pisell-action-item.pisell-action-dismiss {
+      color: var(--Error-600, #D92D20);
+    }
+  }
+  .pisell-lowcode-alert-close-icon {
+    .anticon-close {
+      color: #F04438
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CardProps } from 'antd';
+import './index.less';
+export interface PisellCardProps extends CardProps {
+}
+/**
+ * Pisell 卡片容器组件
+ * @param props
+ * @constructor
+ */
+declare const PisellCard: (props: PisellCardProps) => React.JSX.Element;
+export default PisellCard;

package/es/components/pisellCard/index.js

@@ -0,0 +1,16 @@
+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 { Card } from 'antd';
+import classNames from 'classnames';
+import "./index.less";
+/**
+ * Pisell 卡片容器组件
+ * @param props
+ * @constructor
+ */
+var PisellCard = function PisellCard(props) {
+  return /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+    className: classNames('pisell-card-wrap', props.className)
+  }));
+};
+export default PisellCard;

package/es/components/pisellCard/index.less

@@ -0,0 +1,9 @@
+.pisell-card-wrap {
+  border-radius: 12px;
+  .pisell-lowcode-card-body {
+    padding: 16px;
+  }
+  &:hover {
+    background: var(--Gray-50, #F9FAFB);
+  }
+}

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) => React.JSX.Element>;
+export default _default;

package/es/components/pisellCardList/index.js

@@ -0,0 +1,72 @@
+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, { memo } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { Skeleton } from 'antd';
+import PisellCheckboxGroup from "../pisellCheckboxGroup";
+import PisellWalletPassCard from "../pisellWalletPassCard";
+import PisellEmpty from "../pisellEmpty";
+/**
+ * 卡列表组件
+ * @param props
+ * @constructor
+ */
+var PisellCardList = function PisellCardList(props) {
+  var data = 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,
+    empty = props.empty,
+    showEmpty = props.showEmpty,
+    showBalanceSymbol = props.showBalanceSymbol;
+  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"
+  }, data.length ? /*#__PURE__*/React.createElement(PisellCheckboxGroup, {
+    options: data,
+    value: value,
+    mode: mode,
+    rowKey: "id",
+    gap: 12,
+    onChange: onChange,
+    iconPosition: "hide",
+    renderOption: function renderOption(item, active) {
+      return /*#__PURE__*/React.createElement(PisellWalletPassCard, _extends({}, item, {
+        active: active,
+        showName: showName || (item === null || item === void 0 ? void 0 : item.showName),
+        showBalance: showBalance || (item === null || item === void 0 ? void 0 : item.showBalance),
+        showCode: showCode || (item === null || item === void 0 ? void 0 : item.showCode),
+        showCover: showCover || (item === null || item === void 0 ? void 0 : item.showCover),
+        showDetail: showDetail || (item === null || item === void 0 ? void 0 : item.showDetail),
+        showQrCode: showQrCode || (item === null || item === void 0 ? void 0 : item.showQrCode),
+        showRedeem: showRedeem || (item === null || item === void 0 ? void 0 : item.showRedeem),
+        showStoreName: showStoreName || (item === null || item === void 0 ? void 0 : item.showStoreName),
+        showValidDate: showValidDate || (item === null || item === void 0 ? void 0 : item.showValidDate),
+        showBalanceSymbol: showBalanceSymbol || (item === null || item === void 0 ? void 0 : item.showBalanceSymbol)
+      }));
+    }
+  }) : showEmpty && (empty || /*#__PURE__*/React.createElement(PisellEmpty, null)));
+};
+export default /*#__PURE__*/memo(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,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) => React.JSX.Element;
+export default PisellCheckboxGroup;