@pisell/materials 6.0.18 → 6.0.20

package/es/components/pisellAnchor/index.less

@@ -0,0 +1,197 @@
+.pisell-anchor-containers {
+  // display: flex;
+  // align-items: center;
+  // background-color: #fff;
+  // height: 40px;
+  .pisell-lowcode-anchor-wrapper {
+    &::before {
+      content: '';
+      display: none;
+    }
+    .pisell-lowcode-anchor {
+      height: 40px;
+      border-bottom: none !important;
+      background-color: #fff;
+
+      .pisell-lowcode-anchor-ink {
+        display: none;
+      }
+
+      .pisell-lowcode-anchor-link {
+        height: 100%;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+
+        &-title {
+          color: var(--Gray-900, #101828);
+          font-family: Inter;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 40px;
+        }
+      }
+
+      .pisell-lowcode-anchor-link-active {
+        border-radius: 100px;
+        background: var(--theme-color, #7f56d9);
+        height: 40px;
+
+        .pisell-lowcode-anchor-link-title {
+          color: var(--White, #fff);
+          line-height: 40px;
+        }
+      }
+    }
+  }
+  .pisell-anchor-scroll {
+    height: 40px;
+    flex: 1;
+    overflow-x: auto;
+
+    // 隐藏滚动条 - Firefox
+    scrollbar-width: none;
+
+    // 隐藏滚动条 - IE and Edge
+    -ms-overflow-style: none;
+
+    // 隐藏滚动条 - Chrome, Safari, Opera
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .pisell-anchor-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: 16px;
+
+    .scroll-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      background: white;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover:not(.disabled) {
+        color: #1890ff;
+        border-color: #1890ff;
+      }
+
+      &.disabled {
+        color: #d9d9d9;
+        cursor: not-allowed;
+        background: #f5f5f5;
+      }
+    }
+  }
+}
+
+.pisell-anchor-tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  color: #0d1619;
+  cursor: default;
+  position: relative;
+
+  .pisell-anchor-tabs-btn-left,
+  .pisell-anchor-tabs-btn-right {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0.8) 100%);
+    cursor: pointer;
+    transition: width 300ms ease;
+    user-select: none;
+
+    .pisell-anchor-tabs-btn-icon {
+      width: 24px;
+      height: 24px;
+      background: #f1f1f1;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #262626;
+      font-size: 20px;
+    }
+  }
+
+  .pisell-anchor-tabs-btn-left {
+    left: 0;
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-anchor-tabs-btn-right {
+    right: 0;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, #fff 70%);
+  }
+
+  .pisell-anchor-tabs-content {
+    flex: 1;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    padding: 0;
+    gap: 16px;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .pisell-anchor-tabs-tab {
+      flex: 0 0 auto;
+      padding: 0 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.3s;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      border-radius: 100px;
+
+      &:hover:not(.pisell-anchor-tabs-tab-active) {
+        color: var(--theme-color, #7f56d9);
+      }
+
+      &.pisell-anchor-tabs-tab-active {
+        color: #fff;
+        font-weight: 600;
+        background-color: var(--theme-color, #7f56d9);
+      }
+
+      .pisell-anchor-tabs-tab-content {
+        line-height: 24px;
+      }
+    }
+  }
+}
+
+.pisell-anchor {
+  border-bottom: 1px solid #EAECF0;
+
+  &.pisell-anchor-no-border {
+    border-bottom: none;
+  }
+}

package/es/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -67,9 +67,22 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       onAddPage === null || onAddPage === void 0 || onAddPage(item);
     }
   }, []);
+  var tagTextMap = useMemo(function () {
+    return {
+      base: {
+        text: getText('pisell-lowcode-navigation-menu-tag-base'),
+        color: '#7f56d9'
+      },
+      pisellV1: {
+        text: getText('pisell-lowcode-navigation-menu-tag-pisell1'),
+        color: '#ee837a'
+      }
+    };
+  }, []);
 
   // 自定义渲染菜单项
   var renderMenuItem = useCallback(function (itemProps) {
+    var _tagTextMap$item$sour, _tagTextMap$item$sour2;
     var item = itemProps.item;
     var _item$allowEdit = item.allowEdit,
       allowEdit = _item$allowEdit === void 0 ? true : _item$allowEdit,
@@ -96,10 +109,13 @@ var PisellNavigationMenu = function PisellNavigationMenu(_ref) {
       className: "pisell-lowcode-navigation-menu-item-title"
     }, item.title), /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-description"
-    }, item.description, !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
+    }, item.description, item.source && /*#__PURE__*/React.createElement(PisellTags, {
+      type: "pill_color",
+      color: (_tagTextMap$item$sour = tagTextMap[item.source]) === null || _tagTextMap$item$sour === void 0 ? void 0 : _tagTextMap$item$sour.color
+    }, ((_tagTextMap$item$sour2 = tagTextMap[item.source]) === null || _tagTextMap$item$sour2 === void 0 ? void 0 : _tagTextMap$item$sour2.text) || ""), !item.isGroup && item.version && /*#__PURE__*/React.createElement(PisellTags, {
       type: "pill_color",
       color: "success"
-    }, item.version)))), /*#__PURE__*/React.createElement("div", {
+    }, "v", item.version)))), /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-navigation-menu-item-action-wrap"
     }, allowEdit && /*#__PURE__*/React.createElement(Button, {
       type: "text",

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+interface PisellQrcodeProps {
+    size?: number;
+    platform: 'pc' | 'h5' | 'ipad';
+    value: string;
+    className: string;
+}
+declare const PisellQrcode: React.FC<PisellQrcodeProps>;
+export default PisellQrcode;

package/es/components/pisellQrcode/index.js

@@ -0,0 +1,70 @@
+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 React, { useEffect, useState, useRef } from 'react';
+import { QRCode, Button, Divider } from 'antd';
+import classNames from 'classnames';
+import PisellModal from "./../pisellModal";
+import { getText } from "../../locales/index";
+import "./index.less";
+var PisellQrcode = function PisellQrcode(props) {
+  var size = props.size,
+    platform = props.platform,
+    _props$value = props.value,
+    value = _props$value === void 0 ? '' : _props$value,
+    className = props.className; // 裁剪形状
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  var modalRef = useRef(null);
+  useEffect(function () {
+    if (open) {}
+  }, [open]);
+  var modalProps = {
+    title: getText('pisellQrcode-qrcode'),
+    platform: platform,
+    onCancel: function onCancel() {
+      return setOpen(false);
+    },
+    open: open,
+    footer: null,
+    mobileModalHeight: 'auto',
+    className: classNames('pisell-qrcode-modal'),
+    bodyStyle: {
+      padding: 0
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-qrcode-wrapper', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(QRCode, {
+    size: size,
+    value: value,
+    bordered: false
+  })), /*#__PURE__*/React.createElement(PisellModal, modalProps, /*#__PURE__*/React.createElement(QRCode, {
+    size: 200,
+    value: value,
+    style: {
+      marginTop: 24
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    className: classNames('pisell-qrcode-modal-value')
+  }, value), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setOpen(false);
+    },
+    className: classNames('pisell-qrcode-modal-button')
+  }, getText('pisellQrcode-done'))));
+};
+export default PisellQrcode;

package/es/components/pisellQrcode/index.less

@@ -0,0 +1,41 @@
+.pisell-qrcode-wrapper {
+}
+
+.pisell-qrcode-modal {
+  .pisell-lowcode-modal-content {
+    padding: 0;
+    .pisell-lowcode-modal-body {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      flex-direction: column;
+      .pisell-qrcode-modal-value {
+        color: var(--Gray-500, #667085);
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        margin: 20px 0 24px;
+      }
+      .pisell-lowcode-divider {
+        margin: 0;
+      }
+      .pisell-qrcode-modal-button {
+        margin: 24px;
+
+        color: var(--Base-White, #fff);
+
+        font-family: Inter;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+
+        width: calc(100% - 48px);
+        box-sizing: border-box;
+        background-color: var(--theme-color, #7f56d9);
+      }
+    }
+  }
+}

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import './index.less';
 export interface PisellStatisticListProps extends React.HTMLAttributes<HTMLDivElement> {
+    isHasBorder?: boolean;
     backgroundColors?: string[];
     labelColor?: string;
     valueColor?: string;
     data: {
         label: string;
         value: string;
+        isLink?: boolean;
+        link?: string;
         tip?: string;
         children?: {
             label: string;

package/es/components/pisellStatisticList/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["backgroundColors", "labelColor", "valueColor", "data"];
+var _excluded = ["isHasBorder", "backgroundColors", "labelColor", "valueColor", "data"];
 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 _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; }
@@ -9,7 +9,9 @@ import Iconfont from "../iconfont";
 import "./index.less";
 var defaultColors = ['rgba(224, 79, 22, 0.20)', 'rgba(202, 133, 4, 0.20)', 'rgba(127, 86, 217, 0.22)', 'rgba(7, 148, 85, 0.20)', 'rgba(21, 112, 239, 0.23)'];
 var PisellStatisticList = function PisellStatisticList(props) {
-  var _props$backgroundColo = props.backgroundColors,
+  var _props$isHasBorder = props.isHasBorder,
+    isHasBorder = _props$isHasBorder === void 0 ? true : _props$isHasBorder,
+    _props$backgroundColo = props.backgroundColors,
     backgroundColors = _props$backgroundColo === void 0 ? defaultColors : _props$backgroundColo,
     _props$labelColor = props.labelColor,
     labelColor = _props$labelColor === void 0 ? '#fff' : _props$labelColor,
@@ -21,10 +23,15 @@ var PisellStatisticList = function PisellStatisticList(props) {
     className: "pisell-lowcode-statistic-list-wrap"
   }, others), data.map(function (item, index) {
     var _item$children;
+    var _item$isLink = item.isLink,
+      isLink = _item$isLink === void 0 ? false : _item$isLink,
+      _item$link = item.link,
+      link = _item$link === void 0 ? '' : _item$link;
     return /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-statistic-list-item",
       style: {
-        background: backgroundColors[index % backgroundColors.length]
+        background: backgroundColors[index % backgroundColors.length],
+        border: isHasBorder ? 'border: 1px solid var(--Gray-600, #475467)' : 'none'
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: "pisell-lowcode-statistic-list-item-label",
@@ -44,7 +51,12 @@ var PisellStatisticList = function PisellStatisticList(props) {
       style: {
         color: valueColor
       }
-    }, item.value), !!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) && /*#__PURE__*/React.createElement(Row, {
+    }, isLink && link ? /*#__PURE__*/React.createElement("a", {
+      href: "javascript:void(0);",
+      onClick: function onClick() {
+        location.replace(item.link);
+      }
+    }, item.value || '-') : item.value || '-'), !!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) && /*#__PURE__*/React.createElement(Row, {
       className: "pisell-lowcode-statistic-list-item-children-wrap"
     }, item.children.map(function (child) {
       return /*#__PURE__*/React.createElement(Col, {
@@ -60,7 +72,7 @@ var PisellStatisticList = function PisellStatisticList(props) {
         style: {
           color: valueColor
         }
-      }, child.value));
+      }, child.value || ''));
     })));
   }));
 };

package/es/components/pisellStatisticList/index.less

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: 16px;
   .pisell-lowcode-statistic-list-item {
-    padding: 16px;
+    padding: 16px 16px 16px 0;
     border-radius: 8px;
     border: 1px solid var(--Gray-600, #475467);
     .pisell-lowcode-statistic-list-item-label {

package/es/components/pisellText/components/Amount/index.d.ts

@@ -13,6 +13,8 @@ export interface AmountProps extends React.HTMLAttributes<HTMLSpanElement> {
     useThousandsSeparator?: boolean;
     /** 整数位隐藏小数 指的是如果价格为整数，后面的".00" 将被省略以节省页面空间 */
     hideDecimalForWholeNumbers?: boolean;
+    /** 货币符号 */
+    symbol?: string;
 }
 declare const Amount: (props: AmountProps) => JSX.Element;
 export default Amount;

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

@@ -1,4 +1,4 @@
-var _excluded = ["value", "precision", "showCurrencySymbol", "useThousandsSeparator", "hideDecimalForWholeNumbers"];
+var _excluded = ["value", "precision", "showCurrencySymbol", "useThousandsSeparator", "hideDecimalForWholeNumbers", "symbol"];
 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, { useMemo } from 'react';
@@ -10,10 +10,11 @@ var Amount = function Amount(props) {
     showCurrencySymbol = props.showCurrencySymbol,
     useThousandsSeparator = props.useThousandsSeparator,
     hideDecimalForWholeNumbers = props.hideDecimalForWholeNumbers,
+    symbol = props.symbol,
     others = _objectWithoutProperties(props, _excluded);
   var config = usePisellConfig();
   var amount = useMemo(function () {
-    return formatAmountWithOptions(value, (config === null || config === void 0 ? void 0 : config.symbol) || "", {
+    return formatAmountWithOptions(value, symbol || (config === null || config === void 0 ? void 0 : config.symbol) || "", {
       precision: precision,
       showCurrencySymbol: showCurrencySymbol,
       useThousandsSeparator: useThousandsSeparator,

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

@@ -1,6 +1,6 @@
 import './index.less';
 export interface PisellWalletPassCardProps {
-    id: number;
+    id?: number;
     /** 商品名称 */
     name: string;
     /** 二维码 */
@@ -8,19 +8,19 @@ export interface PisellWalletPassCardProps {
     /** 共享店铺名称 */
     storeName: string;
     /** 余额 */
-    balance: number;
+    balance?: number;
     /** 识别码编号 */
     code: string;
     /** 有效期 */
     validDate: string;
     /** 使用金额 */
-    redeem: number;
+    redeem?: number;
     /** 是否禁用 */
     disabled?: boolean;
     /** 禁用原因 */
     disabledReason?: string;
     /** 是否展示禁用原因 */
-    showDisabledReason?: string;
+    showDisabledReason?: boolean;
     /** 封面图 */
     cover?: string;
     /** 余额标题文案 */