@pisell/materials 1.0.469 → 1.0.471

package/es/components/{pisellWalletCard → walletCard}/index.js

@@ -11,26 +11,51 @@ import Iconfont from "./../iconfont";
 import useEngineContext from "../../hooks/useEngineContext";
 import Barcode from 'react-barcode';
 import { image } from '@pisell/utils';
+import Amount from "./../pisellText/components/Amount";
 import "./index.less";
 import classNames from 'classnames';
-var walletNumber = '123871283618273687123'; //钱包号
-var PisellWalletCard = function PisellWalletCard(props) {
+var WalletCard = function WalletCard(props) {
   var _context$appHelper;
-  var mode = props.mode,
-    cardStyle = props.cardStyle,
-    codeType = props.codeType,
-    icon = props.icon,
-    vipLevel = props.vipLevel,
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'dark' : _props$mode,
+    _props$cardStyle = props.cardStyle,
+    cardStyle = _props$cardStyle === void 0 ? 'normal' : _props$cardStyle,
+    _props$codeType = props.codeType,
+    codeType = _props$codeType === void 0 ? 'one' : _props$codeType,
+    _props$icon = props.icon,
+    icon = _props$icon === void 0 ? false : _props$icon,
+    _props$vipLevel = props.vipLevel,
+    vipLevel = _props$vipLevel === void 0 ? true : _props$vipLevel,
     _props$shopName = props.shopName,
-    shopName = _props$shopName === void 0 ? '店铺名称' : _props$shopName,
-    cardNo = props.cardNo,
-    codeDirection = props.codeDirection,
-    showCode = props.showCode,
-    points = props.points,
-    balance = props.balance,
-    coupon = props.coupon,
-    vouCher = props.vouCher,
-    discountCard = props.discountCard; // 裁剪形状
+    shopName = _props$shopName === void 0 ? '默认店铺名称' : _props$shopName,
+    _props$isShowShopName = props.isShowShopName,
+    isShowShopName = _props$isShowShopName === void 0 ? true : _props$isShowShopName,
+    _props$pointsValue = props.pointsValue,
+    pointsValue = _props$pointsValue === void 0 ? 0 : _props$pointsValue,
+    _props$balanceValue = props.balanceValue,
+    balanceValue = _props$balanceValue === void 0 ? 0 : _props$balanceValue,
+    _props$vouCherValue = props.vouCherValue,
+    vouCherValue = _props$vouCherValue === void 0 ? 0 : _props$vouCherValue,
+    _props$couponValue = props.couponValue,
+    couponValue = _props$couponValue === void 0 ? 0 : _props$couponValue,
+    _props$cardNo = props.cardNo,
+    cardNo = _props$cardNo === void 0 ? '' : _props$cardNo,
+    _props$isShowCardNo = props.isShowCardNo,
+    isShowCardNo = _props$isShowCardNo === void 0 ? true : _props$isShowCardNo,
+    _props$codeDirection = props.codeDirection,
+    codeDirection = _props$codeDirection === void 0 ? 'bottom' : _props$codeDirection,
+    _props$showCode = props.showCode,
+    showCode = _props$showCode === void 0 ? 'true' : _props$showCode,
+    _props$points = props.points,
+    points = _props$points === void 0 ? true : _props$points,
+    _props$balance = props.balance,
+    balance = _props$balance === void 0 ? true : _props$balance,
+    _props$coupon = props.coupon,
+    coupon = _props$coupon === void 0 ? true : _props$coupon,
+    _props$vouCher = props.vouCher,
+    vouCher = _props$vouCher === void 0 ? true : _props$vouCher,
+    _props$discountCard = props.discountCard,
+    discountCard = _props$discountCard === void 0 ? true : _props$discountCard; // 裁剪形状
   var context = useEngineContext();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -45,12 +70,12 @@ var PisellWalletCard = function PisellWalletCard(props) {
     return /*#__PURE__*/React.createElement(Flex, {
       justify: "center"
     }, codeType === 'one' ? /*#__PURE__*/React.createElement(Barcode, {
-      value: walletNumber,
+      value: cardNo,
       height: 114,
       width: 3
     }) : /*#__PURE__*/React.createElement(QRCode, {
       size: 250,
-      value: walletNumber,
+      value: cardNo,
       bordered: false
     }));
   };
@@ -81,7 +106,7 @@ var PisellWalletCard = function PisellWalletCard(props) {
     className: "pisell-wallet-card-header-icon"
   }, icon), vipLevel && /*#__PURE__*/React.createElement("p", {
     className: classNames('pisell-wallet-card-header-level-text')
-  }, "Level")), shopName && /*#__PURE__*/React.createElement("p", null, "Store name"), cardNo && /*#__PURE__*/React.createElement("p", null, "Wallet number")), /*#__PURE__*/React.createElement(Flex, {
+  }, "Level")), isShowShopName && /*#__PURE__*/React.createElement("p", null, shopName), isShowCardNo && /*#__PURE__*/React.createElement("p", null, cardNo)), /*#__PURE__*/React.createElement(Flex, {
     className: classNames('pisell-wallet-card-header-right')
   }, showCode && cardStyle === 'normal' && /*#__PURE__*/React.createElement(React.Fragment, null, codeType === 'one' ? /*#__PURE__*/React.createElement(Iconfont, {
     type: "pisell2-Barcode",
@@ -102,7 +127,23 @@ var PisellWalletCard = function PisellWalletCard(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     className: classNames('pisell-wallet-card-row'),
     justify: "space-around"
-  }, points && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Points"), /*#__PURE__*/React.createElement("p", null, 0)), balance && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Balance"), /*#__PURE__*/React.createElement("p", null, 0)), coupon && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Coupon"), /*#__PURE__*/React.createElement("p", null, 0)), vouCher && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "VouCher"), /*#__PURE__*/React.createElement("p", null, 0))), /*#__PURE__*/React.createElement(Flex, {
+  }, points && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Points"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    useThousandsSeparator: true,
+    value: pointsValue
+  }))), balance && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Balance"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    useThousandsSeparator: true,
+    value: balanceValue
+  }))), coupon && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Coupon"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    useThousandsSeparator: true,
+    value: couponValue
+  }))), vouCher && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "VouCher"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Amount, {
+    className: "pisell-card-amount-item-value",
+    useThousandsSeparator: true,
+    value: vouCherValue
+  })))), /*#__PURE__*/React.createElement(Flex, {
     className: classNames('pisell-wallet-card-row')
   }, discountCard && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Discount card"), /*#__PURE__*/React.createElement("p", null, 0))))), showCode && cardStyle === 'full' && /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-wallet-card-showCode')
@@ -117,4 +158,4 @@ var PisellWalletCard = function PisellWalletCard(props) {
     footer: null
   }, codeRender()));
 };
-export default PisellWalletCard;
+export default WalletCard;

package/es/index.d.ts

@@ -105,7 +105,7 @@ export { default as PisellWalletPassCard } from './components/pisellWalletPassCa
 export { default as PisellScan } from './components/pisellScan';
 export { default as PisellAlert } from './components/pisellAlert';
 export { default as PisellCard } from './components/pisellCard';
-export { default as PisellUploadCrop } from './components/pisellUploadCrop';
+export { default as CropPhoto } from './components/cropPhoto';
 export { default as PisellQrcode } from './components/pisellQrcode';
 export { default as PisellInformationEntry } from './components/pisellInformationEntry';
 export { default as usePisellConfig } from './components/pisell-config-provider/hooks/usePisellConfig';
@@ -119,8 +119,8 @@ export { default as PisellAdjustPrice } from './components/pisellAdjustPrice';
 export { default as PisellAdjustPriceInputNumber } from './components/pisellAdjustPrice/PisellAdjustPriceInputNumber';
 export { default as ProductCard } from './components/productCard';
 export { default as Collapse } from './components/collapse';
-export { default as PisellStatistic } from './components/pisellStatistic';
-export { default as PisellWalletCard } from './components/pisellWalletCard';
+export { default as CardMetricItem } from './components/cardMetricItem';
+export { default as WalletCard } from './components/walletCard';
 export { default as PisellUpload } from './components/pisellUpload';
 export { ColorPicker } from 'antd';
 export { default as DataSourceForm } from './components/dataSourceComponents/dataSourceForm';

package/es/index.js

@@ -132,7 +132,7 @@ export { default as PisellWalletPassCard } from "./components/pisellWalletPassCa
 export { default as PisellScan } from "./components/pisellScan";
 export { default as PisellAlert } from "./components/pisellAlert";
 export { default as PisellCard } from "./components/pisellCard";
-export { default as PisellUploadCrop } from "./components/pisellUploadCrop";
+export { default as CropPhoto } from "./components/cropPhoto";
 export { default as PisellQrcode } from "./components/pisellQrcode";
 export { default as PisellInformationEntry } from "./components/pisellInformationEntry";
 export { default as usePisellConfig } from "./components/pisell-config-provider/hooks/usePisellConfig";
@@ -146,8 +146,8 @@ export { default as PisellAdjustPrice } from "./components/pisellAdjustPrice";
 export { default as PisellAdjustPriceInputNumber } from "./components/pisellAdjustPrice/PisellAdjustPriceInputNumber";
 export { default as ProductCard } from "./components/productCard";
 export { default as Collapse } from "./components/collapse";
-export { default as PisellStatistic } from "./components/pisellStatistic";
-export { default as PisellWalletCard } from "./components/pisellWalletCard";
+export { default as CardMetricItem } from "./components/cardMetricItem";
+export { default as WalletCard } from "./components/walletCard";
 export { default as PisellUpload } from "./components/pisellUpload";
 export { ColorPicker } from 'antd';
 export { default as DataSourceForm } from "./components/dataSourceComponents/dataSourceForm";

package/es/locales/en-US.d.ts

@@ -113,6 +113,7 @@ declare const _default: {
     'pisell-input-copy': string;
     'pisell-empty-description-no-data': string;
     'pisell-information-entry-input-search': string;
+    'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
     'pisell-wallet-pass-card-redeem': string;

package/es/locales/en-US.js

@@ -138,6 +138,7 @@ export default {
   'pisell-empty-description-no-data': 'No Data',
   // 信息录入组件
   'pisell-information-entry-input-search': 'Search',
+  'pisell-information-entry-input-confirm': 'Confirm',
   'pisell-information-entry-scan-exit': 'Exit',
   // 钱包卡片组件
   'pisell-wallet-pass-card-detail': 'Detail',

package/es/locales/zh-CN.d.ts

@@ -113,6 +113,7 @@ declare const _default: {
     'pisell-input-copy': string;
     'pisell-empty-description-no-data': string;
     'pisell-information-entry-input-search': string;
+    'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
     'pisell-wallet-pass-card-redeem': string;

package/es/locales/zh-CN.js

@@ -138,6 +138,7 @@ export default {
   'pisell-empty-description-no-data': '暂无数据',
   // 信息录入组件
   'pisell-information-entry-input-search': '搜索',
+  'pisell-information-entry-input-confirm': '确认',
   'pisell-information-entry-scan-exit': '退出',
   // 钱包卡片组件
   'pisell-wallet-pass-card-detail': '详情',

package/es/locales/zh-TW.d.ts

@@ -113,6 +113,7 @@ declare const _default: {
     'pisell-input-copy': string;
     'pisell-empty-description-no-data': string;
     'pisell-information-entry-input-search': string;
+    'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
     'pisell-wallet-pass-card-redeem': string;

package/es/locales/zh-TW.js

@@ -138,6 +138,7 @@ export default {
   'pisell-empty-description-no-data': '暫無數據',
   // 信息录入组件
   'pisell-information-entry-input-search': '搜索',
+  'pisell-information-entry-input-confirm': '确认',
   'pisell-information-entry-scan-exit': '退出',
   // 钱包卡片组件
   'pisell-wallet-pass-card-detail': '詳情',

package/lib/components/buttonGroupPreview/index.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
 import type { MenuProps, ButtonProps } from 'antd';
 export interface ButtonGroupListItemProps {
-    id: string;
-    children?: string;
+    id?: string;
     isMore?: boolean;
     menuData?: MenuProps['items'];
     buttonProps?: ButtonProps;
-    updateButtonProps?: ButtonProps;
 }
 interface ButtonConfigProps {
     [id: string]: ButtonGroupListItemProps;
@@ -14,7 +12,8 @@ interface ButtonConfigProps {
 export declare type ButtonGroupListProps = ButtonGroupListItemProps[][];
 interface ButtonGroupPreviewProps {
     buttonConfig?: ButtonConfigProps;
-    buttonGroupList: ButtonGroupListProps;
+    buttonGroupList?: ButtonGroupListProps;
+    updateButtonProps?: ButtonGroupListItemProps;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonGroupPreviewProps & React.RefAttributes<any>>>;
 export default _default;

package/lib/components/buttonGroupPreview/index.js

@@ -33,6 +33,7 @@ __export(buttonGroupPreview_exports, {
 });
 module.exports = __toCommonJS(buttonGroupPreview_exports);
 var import_react = __toESM(require("react"));
+var import_button = __toESM(require("./../button"));
 var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
 var updateSourceData = ({
@@ -62,17 +63,14 @@ var ButtonGroupPreview = (0, import_react.forwardRef)(
         isMore = false,
         id = "",
         menuData = [],
-        children = "默认按钮名称",
-        buttonProps,
-        updateButtonProps = {}
+        buttonProps
       } = items;
-      const btnProps = { ...buttonProps, ...updateButtonProps };
-      return isMore ? /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: menuData } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, null, /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, null))) : /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Button,
+      const btnProps = { ...buttonProps, ...props.updateButtonProps };
+      return isMore ? /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: menuData } }, /* @__PURE__ */ import_react.default.createElement(import_button.default, null, /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, null))) : /* @__PURE__ */ import_react.default.createElement(
+        import_button.default,
         {
           key: id,
-          ...btnProps,
-          children: updateButtonProps.children || children
+          ...btnProps
         }
       );
     }))));

package/lib/components/cardMetricItem/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface PisellStatisticProps {
+    title: string;
+    number: string | number;
+    hint?: React.ReactNode;
+    tags?: React.ReactNode;
+    showCurrencySymbol?: boolean;
+    style?: any;
+}
+declare const CardMetricItem: (props: PisellStatisticProps) => React.JSX.Element;
+export default CardMetricItem;

package/lib/components/{pisellStatistic → cardMetricItem}/index.js

@@ -26,21 +26,50 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/pisellStatistic/index.tsx
-var pisellStatistic_exports = {};
-__export(pisellStatistic_exports, {
-  default: () => pisellStatistic_default
+// src/components/cardMetricItem/index.tsx
+var cardMetricItem_exports = {};
+__export(cardMetricItem_exports, {
+  default: () => cardMetricItem_default
 });
-module.exports = __toCommonJS(pisellStatistic_exports);
-var import_react = require("react");
+module.exports = __toCommonJS(cardMetricItem_exports);
+var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var import_hooks = require("../../hooks");
+var import_usePisellConfig = __toESM(require("./../pisell-config-provider/hooks/usePisellConfig"));
 var import_index = require("./index.less");
-var PisellStatistic = (props) => {
+var CardMetricItem = (props) => {
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
   }, []);
-  const { title = "", number, hint, tags } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)("pisell-statistic-wrap") }, /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)("pisell-statistic-hint") }, hint), /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)("pisell-statistic-tags") }, tags), /* @__PURE__ */ React.createElement(import_antd.Statistic, { title, value: number }));
+  const {
+    title = "",
+    number,
+    hint,
+    tags,
+    showCurrencySymbol = true,
+    style
+  } = props;
+  const config = (0, import_usePisellConfig.default)();
+  const amount = (0, import_react.useMemo)(() => {
+    return (0, import_utils.formatAmountWithOptions)(number, (config == null ? void 0 : config.symbol) || "", {
+      showCurrencySymbol
+    });
+  }, [number, showCurrencySymbol]);
+  const responsive = (0, import_hooks.useResponsive)();
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "pisell-statistic-wrap",
+        responsive === "pc" ? "pc" : "phone"
+      ),
+      style
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-statistic-hint") }, hint),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-statistic-tags") }, tags),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Statistic, { title, value: amount })
+  );
 };
-var pisellStatistic_default = PisellStatistic;
+var cardMetricItem_default = CardMetricItem;

package/lib/components/cardMetricItem/index.less

@@ -0,0 +1,38 @@
+.pisell-statistic-wrap {
+  position: relative;
+  padding: 24px;
+  border: 1px solid var(--Gray-200, #eaecf0);
+  border-radius: 12px;
+
+  &.pc {
+    width: fit-content;
+    min-width: 300px;
+  }
+
+  &.phone {
+    width: 100%;
+  }
+
+  .pisell-statistic-hint {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
+
+  .pisell-statistic-tags {
+    position: absolute;
+    right: 24px;
+    bottom: 30px;
+  }
+  .pisell-lowcode-statistic-content-value {
+    color: var(--Gray-900, #101828);
+
+    /* Display md/Semibold */
+    font-family: Inter;
+    font-size: 36px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 44px; /* 122.222% */
+    letter-spacing: -0.72px;
+  }
+}

package/lib/components/cropPhoto/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CropPhoto: React.FC;
+export default CropPhoto;

package/lib/components/{pisellUploadCrop → cropPhoto}/index.js

@@ -26,16 +26,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/pisellUploadCrop/index.tsx
-var pisellUploadCrop_exports = {};
-__export(pisellUploadCrop_exports, {
-  default: () => pisellUploadCrop_default
+// src/components/cropPhoto/index.tsx
+var cropPhoto_exports = {};
+__export(cropPhoto_exports, {
+  default: () => cropPhoto_default
 });
-module.exports = __toCommonJS(pisellUploadCrop_exports);
+module.exports = __toCommonJS(cropPhoto_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_antd_img_crop = __toESM(require("antd-img-crop"));
-var pisellUploadCrop = (props) => {
+var CropPhoto = (props) => {
   const { cropShape } = props;
   const [fileList, setFileList] = (0, import_react.useState)([]);
   const onChange = ({ fileList: newFileList }) => {
@@ -67,4 +67,4 @@ var pisellUploadCrop = (props) => {
     fileList.length < 5 && "+ Upload"
   ));
 };
-var pisellUploadCrop_default = pisellUploadCrop;
+var cropPhoto_default = CropPhoto;

package/lib/components/dataSourceComponents/dataSourceForm/provider/hooks/useJsonPrefixPath.d.ts

@@ -1,5 +1,2 @@
-declare const useJsonPrefixPath: () => {
-    path: (string | number)[];
-    level: number;
-};
+declare const useJsonPrefixPath: () => (string | number)[];
 export default useJsonPrefixPath;

package/lib/components/dataSourceComponents/fields/index.d.ts

@@ -12,12 +12,5 @@ declare const getFieldComponent: (fieldComponent: string) => import("react").FC<
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps>;
-}) | ((props: import("antd").SelectProps<any, import("antd/es/select").DefaultOptionType> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps & {
-    options?: any;
-    optionSourceType?: string | undefined;
-    labelField: string;
-    valueField: string;
-} & {
-    dataSource?: any;
-}) => import("react").JSX.Element) | import("react").FC<import("antd").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
+}) | import("react").FC<import("antd").SelectProps<any, import("antd/es/select").DefaultOptionType> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 export { getFieldComponent };

package/lib/components/pisellAnchor/index.d.ts

@@ -1,15 +1,9 @@
 import React from 'react';
-import { AnchorProps } from 'antd';
 import './index.less';
-export interface PisellAnchorProps extends AnchorProps {
-    items: any[];
-    direction: 'horizontal' | 'vertical';
-    scrollNumber: number;
+interface PisellAnchorProps {
+    items?: any[];
+    getContainer?: () => HTMLElement | Window;
+    className?: string;
 }
-/**
- * PisellAnchor锚点组件
- * @param props
- * @constructor
- */
-declare const PisellAnchor: (props: PisellAnchorProps) => React.JSX.Element;
+declare const PisellAnchor: React.FC<PisellAnchorProps>;
 export default PisellAnchor;

package/lib/components/pisellAnchor/index.js

@@ -34,69 +34,98 @@ __export(pisellAnchor_exports, {
 module.exports = __toCommonJS(pisellAnchor_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_ahooks = require("ahooks");
 var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
 var import_index = require("./index.less");
 var PisellAnchor = (props) => {
-  const [leftDisabled, setLeftDisabled] = (0, import_react.useState)(true);
-  const [rightDisabled, setRightDisabled] = (0, import_react.useState)(false);
-  const { items = [], direction, scrollNumber = 1 } = props;
-  const InnerProps = {
-    onChange: (key) => {
-      console.log(key);
-    },
-    getCurrentAnchor: () => {
-      if (items.length > 0) {
-        return items[0].href;
-      }
-      return "";
-    },
-    items
+  const { items = [], getContainer, className } = props;
+  const scrollRef = (0, import_react.useRef)(null);
+  const [canScrollLeft, setCanScrollLeft] = (0, import_react.useState)(false);
+  const [canScrollRight, setCanScrollRight] = (0, import_react.useState)(false);
+  const checkScroll = () => {
+    if (scrollRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
+      setCanScrollLeft(scrollLeft > 0);
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth);
+    }
   };
-  let itemsWidth = 0;
-  let containerWidth = 0;
-  const handleScroll = (e) => {
-    const left = e.target.scrollLeft;
-    console.log("滚动位置:", left);
-    setLeftDisabled(left === 0);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    document.body.id = "body";
+    checkScroll();
+    (_a = scrollRef.current) == null ? void 0 : _a.addEventListener("scroll", checkScroll);
+    return () => {
+      var _a2;
+      (_a2 = scrollRef.current) == null ? void 0 : _a2.removeEventListener("scroll", checkScroll);
+    };
+  }, []);
+  const handleScroll = (direction) => {
+    if (scrollRef.current) {
+      const scrollAmount = 50;
+      const newScrollLeft = scrollRef.current.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
+      scrollRef.current.scrollTo({
+        left: newScrollLeft,
+        behavior: "smooth"
+      });
+    }
   };
-  const debouncedScroll = (0, import_ahooks.useDebounceFn)(handleScroll, { wait: 1e3 });
-  const scrollToAnchor = ({ direction: direction2 }) => {
+  const smoothScroll = (targetElement) => {
+    const offsetTop = 40;
+    const startPosition = window.pageYOffset;
+    const targetPosition = targetElement.getBoundingClientRect().top + startPosition - offsetTop;
+    const distance = targetPosition - startPosition;
+    const duration = 800;
+    let start = null;
+    const animation = (currentTime) => {
+      if (start === null)
+        start = currentTime;
+      const timeElapsed = currentTime - start;
+      const progress = Math.min(timeElapsed / duration, 1);
+      const ease = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+      window.scrollTo(0, startPosition + distance * ease);
+      if (timeElapsed < duration) {
+        requestAnimationFrame(animation);
+      }
+    };
+    requestAnimationFrame(animation);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-wapper") }, /* @__PURE__ */ import_react.default.createElement(import_antd.Anchor, { direction: "horizontal", ...InnerProps }), /* @__PURE__ */ import_react.default.createElement(import_antd.Flex, { className: "pisell-anchor-control" }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Button,
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-container", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-anchor-scroll", ref: scrollRef }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Anchor,
     {
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null),
-      shape: "circle",
-      disabled: leftDisabled,
-      onClick: () => scrollToAnchor({ direction: "left" })
+      className: "pisell-lowcode-anchor",
+      getContainer,
+      items,
+      direction: "horizontal",
+      onClick: (e) => {
+        const targetElement = document.querySelector(e.href);
+        if (targetElement) {
+          smoothScroll(targetElement);
+        }
+      },
+      targetOffset: 40,
+      bounds: 40,
+      affix: false
     }
+  )), (canScrollRight || canScrollLeft) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-anchor-buttons" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      className: (0, import_classnames.default)("scroll-button", {
+        disabled: !canScrollLeft
+      }),
+      onClick: () => handleScroll("left"),
+      disabled: !canScrollLeft
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null)
   ), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Button,
     {
-      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null),
-      shape: "circle",
-      disabled: rightDisabled,
-      onClick: () => scrollToAnchor({ direction: "right" })
-    }
-  )), items.map((item) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        id: `${item.key}`,
-        className: (0, import_classnames.default)("pisell-anchor-content"),
-        style: {
-          width: "100vw",
-          height: "100vh",
-          textAlign: "center",
-          background: "rgba(0,255,0,0.02)"
-        }
-      },
-      "这是",
-      item.title,
-      "的内容"
-    );
-  }));
+      className: (0, import_classnames.default)("scroll-button", {
+        disabled: !canScrollRight
+      }),
+      onClick: () => handleScroll("right"),
+      disabled: !canScrollRight
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_icons.RightOutlined, null)
+  )));
 };
 var pisellAnchor_default = PisellAnchor;