@pisell/private-materials 6.4.62 → 6.4.63

package/es/plus/clinetSearch/index.js

@@ -55,7 +55,7 @@ var ClientSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: "header-item",
       style: {
-        width: 110
+        width: 180
       }
     }, locales.getText('pisell2.text.client-search.name')), /*#__PURE__*/React.createElement("div", {
       className: "header-item",
@@ -65,19 +65,14 @@ var ClientSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, locales.getText('pisell2.text.client-search.register-time')), /*#__PURE__*/React.createElement("div", {
       className: "header-item",
       style: {
-        width: 120
-      }
-    }, locales.getText('pisell2.text.client-search.phone')), /*#__PURE__*/React.createElement("div", {
-      className: "header-item",
-      style: {
-        width: 135
+        width: 125
       }
-    }, locales.getText('pisell2.text.client-search.email')), /*#__PURE__*/React.createElement("div", {
+    }, locales.getText('pisell2.text.client-search.membership')), /*#__PURE__*/React.createElement("div", {
       className: "header-item",
       style: {
-        width: 120
+        width: 180
       }
-    }, locales.getText('pisell2.text.client-search.membership')));
+    }, locales.getText('pisell2.text.client-search.contact-info')));
   };
 
   // 自定义结果展示组件
@@ -119,7 +114,7 @@ var ClientSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React.createElement(List, {
       dataSource: searchResults,
       renderItem: function renderItem(item, index) {
-        var _latest_wallet_detail;
+        var _latest_wallet_detail, _item$contacts_info, _item$contacts_info2, _item$contacts_info3;
         var membershipText = (_latest_wallet_detail = item.latest_wallet_detail) === null || _latest_wallet_detail === void 0 || (_latest_wallet_detail = _latest_wallet_detail.wallet) === null || _latest_wallet_detail === void 0 ? void 0 : _latest_wallet_detail.name;
         return /*#__PURE__*/React.createElement(List.Item, {
           key: item.id,
@@ -135,26 +130,11 @@ var ClientSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, /*#__PURE__*/React.createElement("div", {
           className: "item-cell",
           style: {
-            width: 110
+            width: 180
           }
         }, /*#__PURE__*/React.createElement(ClientName, {
           dataSource: item
-        })), /*#__PURE__*/React.createElement("div", {
-          className: "item-cell",
-          style: {
-            width: 110
-          }
-        }, dayjs(item.created_at).format('YYYY-MM-DD') || '-'), /*#__PURE__*/React.createElement("div", {
-          className: "item-cell",
-          style: {
-            width: 120
-          }
-        }, item.phone || '-'), /*#__PURE__*/React.createElement("div", {
-          className: "item-cell",
-          style: {
-            width: 135
-          }
-        }, /*#__PURE__*/React.createElement("div", {
+        }), /*#__PURE__*/React.createElement("div", null, item.phone || '-'), /*#__PURE__*/React.createElement("div", {
           style: {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
@@ -163,7 +143,12 @@ var ClientSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, item.email || '-')), /*#__PURE__*/React.createElement("div", {
           className: "item-cell",
           style: {
-            width: 120
+            width: 110
+          }
+        }, dayjs(item.created_at).format('YYYY-MM-DD') || '-'), /*#__PURE__*/React.createElement("div", {
+          className: "item-cell",
+          style: {
+            width: 125
           }
         }, membershipText && translationOriginal !== null && translationOriginal !== void 0 && translationOriginal(membershipText) ? /*#__PURE__*/React.createElement(Tag, {
           color: "gold",
@@ -177,7 +162,20 @@ var ClientSearch = /*#__PURE__*/forwardRef(function (_ref, ref) {
             borderRadius: 16,
             marginRight: 0
           }
-        }, translationOriginal === null || translationOriginal === void 0 ? void 0 : translationOriginal(membershipText)) : '-')));
+        }, translationOriginal === null || translationOriginal === void 0 ? void 0 : translationOriginal(membershipText)) : '-'), /*#__PURE__*/React.createElement("div", {
+          className: "item-cell",
+          style: {
+            width: 180
+          }
+        }, /*#__PURE__*/React.createElement(ClientName, {
+          dataSource: item === null || item === void 0 || (_item$contacts_info = item.contacts_info) === null || _item$contacts_info === void 0 ? void 0 : _item$contacts_info.value
+        }), (item === null || item === void 0 || (_item$contacts_info2 = item.contacts_info) === null || _item$contacts_info2 === void 0 || (_item$contacts_info2 = _item$contacts_info2.value) === null || _item$contacts_info2 === void 0 || (_item$contacts_info2 = _item$contacts_info2.phone) === null || _item$contacts_info2 === void 0 ? void 0 : _item$contacts_info2.phone) || '-', /*#__PURE__*/React.createElement("div", {
+          style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }
+        }, (item === null || item === void 0 || (_item$contacts_info3 = item.contacts_info) === null || _item$contacts_info3 === void 0 || (_item$contacts_info3 = _item$contacts_info3.value) === null || _item$contacts_info3 === void 0 ? void 0 : _item$contacts_info3.email) || '-'))));
       }
     }))));
   };

package/es/plus/clinetSearch/locales.d.ts

@@ -31,6 +31,7 @@ declare const _default: {
         'pisell2.text.client-search.phone': string;
         'pisell2.text.client-search.email': string;
         'pisell2.text.client-search.membership': string;
+        'pisell2.text.client-search.contact-info': string;
     };
     'zh-CN': {
         'pisell2.text.leave-empty-for-walk-in': string;
@@ -64,6 +65,7 @@ declare const _default: {
         'pisell2.text.client-search.phone': string;
         'pisell2.text.client-search.email': string;
         'pisell2.text.client-search.membership': string;
+        'pisell2.text.client-search.contact-info': string;
     };
     'zh-HK': {
         'pisell2.text.leave-empty-for-walk-in': string;
@@ -97,6 +99,7 @@ declare const _default: {
         'pisell2.text.client-search.phone': string;
         'pisell2.text.client-search.email': string;
         'pisell2.text.client-search.membership': string;
+        'pisell2.text.client-search.contact-info': string;
     };
 };
 export default _default;

package/es/plus/clinetSearch/locales.js

@@ -17,7 +17,7 @@ export default {
     'pisell2.text.save': 'Save',
     'pisell2.text.save-and-select': 'Save and select',
     'pisell2.text.no-results-found': 'No results found.',
-    'pisell2.text.create-new-client': 'Create new client',
+    'pisell2.text.create-new-client': 'Create new customer',
     'pisell2.text.result-found': 'Result found',
     'pisell2.text.personnel-list': 'Personnel list',
     'pisell2.text.load-more': 'Load more',
@@ -30,7 +30,8 @@ export default {
     'pisell2.text.client-search.register-time': 'Registration Time',
     'pisell2.text.client-search.phone': 'Phone Number',
     'pisell2.text.client-search.email': 'Email Address',
-    'pisell2.text.client-search.membership': 'Membership'
+    'pisell2.text.client-search.membership': 'Membership',
+    'pisell2.text.client-search.contact-info': 'Contact info'
   },
   'zh-CN': {
     'pisell2.text.leave-empty-for-walk-in': '如未注册游客则留空',
@@ -63,7 +64,8 @@ export default {
     'pisell2.text.client-search.register-time': '注册时间',
     'pisell2.text.client-search.phone': '电话号码',
     'pisell2.text.client-search.email': '邮箱',
-    'pisell2.text.client-search.membership': '会员'
+    'pisell2.text.client-search.membership': '会员',
+    'pisell2.text.client-search.contact-info': '联系信息'
   },
   'zh-HK': {
     'pisell2.text.leave-empty-for-walk-in': '如未註冊遊客則留空',
@@ -96,6 +98,7 @@ export default {
     'pisell2.text.client-search.register-time': '註冊時間',
     'pisell2.text.client-search.phone': '電話號碼',
     'pisell2.text.client-search.email': '電郵地址',
-    'pisell2.text.client-search.membership': '會員'
+    'pisell2.text.client-search.membership': '會員',
+    'pisell2.text.client-search.contact-info': '聯繫信息'
   }
 };

package/es/plus/clinetSearch/types.d.ts

@@ -10,6 +10,18 @@ export interface ClientData {
     nickname: string;
     shop_id: number;
     updated_at: string;
+    contacts_info: {
+        value: {
+            first_name?: string;
+            last_name?: string;
+            phone?: {
+                phone?: string;
+                country_calling_code?: string;
+                country_code?: string;
+            };
+            email?: string;
+        };
+    };
 }
 export interface ClientSearchProps {
     dataSource?: any;

package/es/plus/contactInfo/components/Avatar/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AvatarConfig } from '../../types';
+import '../../index.less';
+interface AvatarProps {
+    config?: AvatarConfig;
+    name: string;
+    cover?: string;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/es/plus/contactInfo/components/Avatar/index.js

@@ -0,0 +1,30 @@
+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 { PisellAvatar } from '@pisell/materials';
+import { getAvatarText } from "../../utils";
+import { PREFIX } from "../../index";
+import "../../index.less";
+var Avatar = function Avatar(props) {
+  var config = props.config,
+    name = props.name,
+    cover = props.cover;
+  var _ref = config || {},
+    useTextAvatar = _ref.useTextAvatar,
+    children = _ref.children;
+  if (useTextAvatar) {
+    var text = children || getAvatarText(name);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__avatar-wrapper")
+    }, /*#__PURE__*/React.createElement(PisellAvatar, _extends({
+      className: "".concat(PREFIX, "__avatar")
+    }, config || {}), text));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__avatar-wrapper")
+  }, /*#__PURE__*/React.createElement(PisellAvatar, _extends({
+    className: "".concat(PREFIX, "__avatar")
+  }, config || {}, {
+    src: cover || ''
+  })));
+};
+export default Avatar;

package/es/plus/contactInfo/components/SwipeAction/index.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+declare type NativeProps<S extends string = never> = {
+    className?: string;
+    style?: React.CSSProperties & Partial<Record<S, string>>;
+};
+declare type PropagationEvent = 'click';
+import './index.less';
+declare type SideType = 'left' | 'right';
+export declare type SwipeActionRef = {
+    close: () => void;
+    show: (side?: SideType) => void;
+};
+declare type ActionColor = 'light' | 'weak' | 'primary' | 'success' | 'warning' | 'danger';
+export declare type Action = {
+    key: string | number;
+    text: ReactNode;
+    color?: ActionColor | string;
+    onClick?: (e: React.MouseEvent) => void;
+    style?: React.CSSProperties;
+};
+export declare type SwipeActionProps = {
+    rightActions?: Action[];
+    leftActions?: Action[];
+    onAction?: (action: Action, e: React.MouseEvent) => void;
+    closeOnTouchOutside?: boolean;
+    closeOnAction?: boolean;
+    children: ReactNode;
+    stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: SideType) => void;
+    onClose?: () => void;
+    escapeDom?: string;
+} & NativeProps<'--background'>;
+export declare const SwipeAction: React.ForwardRefExoticComponent<{
+    rightActions?: Action[] | undefined;
+    leftActions?: Action[] | undefined;
+    onAction?: ((action: Action, e: React.MouseEvent) => void) | undefined;
+    closeOnTouchOutside?: boolean | undefined;
+    closeOnAction?: boolean | undefined;
+    children: ReactNode;
+    stopPropagation?: "click"[] | undefined;
+    onActionsReveal?: ((side: SideType) => void) | undefined;
+    onClose?: (() => void) | undefined;
+    escapeDom?: string | undefined;
+} & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;
+export {};

package/es/plus/contactInfo/components/SwipeAction/index.js

@@ -0,0 +1,360 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react/dist/use-gesture-react.cjs';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+// 本地实现的工具函数和类型
+
+// withNativeProps 工具函数
+function withNativeProps(props, element) {
+  var p = _objectSpread({}, element.props);
+  if (props.className) {
+    p.className = props.className + (element.props.className ? " ".concat(element.props.className) : '');
+  }
+  if (props.style) {
+    p.style = _objectSpread(_objectSpread({}, props.style), element.props.style);
+  }
+  return /*#__PURE__*/React.cloneElement(element, p);
+}
+
+// nearest 工具函数
+function nearest(arr, target) {
+  return arr.reduce(function (prev, curr) {
+    return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
+  });
+}
+
+// mergeProps 工具函数
+function mergeProps(a, b) {
+  return _objectSpread(_objectSpread({}, a), b);
+}
+
+// withStopPropagation 工具函数
+function withStopPropagation(events, element) {
+  if (!events.includes('click')) {
+    return element;
+  }
+  var onClick = function onClick(e) {
+    var _element$props$onClic, _element$props;
+    e.stopPropagation();
+    (_element$props$onClic = (_element$props = element.props).onClick) === null || _element$props$onClic === void 0 || _element$props$onClic.call(_element$props, e);
+  };
+  return /*#__PURE__*/React.cloneElement(element, _objectSpread(_objectSpread({}, element.props), {}, {
+    onClick: onClick
+  }));
+}
+
+// Button 组件实现
+
+var Button = function Button(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement("button", {
+    className: className,
+    style: _objectSpread({
+      border: 'none',
+      background: (style === null || style === void 0 ? void 0 : style['--background-color']) || 'transparent'
+    }, style),
+    onClick: onClick
+  }, children);
+};
+import "./index.less";
+var classPrefix = "pisell-custom-swipe-action";
+var defaultProps = {
+  rightActions: [],
+  leftActions: [],
+  closeOnTouchOutside: true,
+  closeOnAction: true,
+  stopPropagation: []
+};
+export var SwipeAction = /*#__PURE__*/forwardRef(function (p, ref) {
+  var props = mergeProps(defaultProps, p);
+  var rootRef = useRef(null);
+  var leftRef = useRef(null);
+  var rightRef = useRef(null);
+
+  // 添加容器高度状态
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerHeight = _useState2[0],
+    setContainerHeight = _useState2[1];
+  function getWidth(ref) {
+    var element = ref.current;
+    if (!element) return 0;
+    return element.offsetWidth;
+  }
+
+  // 添加获取高度的函数
+  function getHeight(ref) {
+    var element = ref.current;
+    if (!element) return 0;
+    return element.offsetHeight;
+  }
+  function getLeftWidth() {
+    return getWidth(leftRef);
+  }
+  function getRightWidth() {
+    return getWidth(rightRef);
+  }
+
+  // 添加获取根容器高度的函数
+  function getRootHeight() {
+    return getHeight(rootRef);
+  }
+  var _useSpring = useSpring(function () {
+      return {
+        x: 0,
+        config: {
+          tension: 200,
+          friction: 30
+        }
+      };
+    }, []),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
+    x = _useSpring2[0].x,
+    api = _useSpring2[1];
+  var draggingRef = useRef(false);
+  var dragCancelRef = useRef(null);
+  function forceCancelDrag() {
+    var _dragCancelRef$curren;
+    (_dragCancelRef$curren = dragCancelRef.current) === null || _dragCancelRef$curren === void 0 || _dragCancelRef$curren.call(dragCancelRef);
+    draggingRef.current = false;
+  }
+  var bind = useDrag(function (state) {
+    dragCancelRef.current = state.cancel;
+    if (!state.intentional) return;
+    if (state.down) {
+      draggingRef.current = true;
+    }
+    if (!draggingRef.current) return;
+    var _state$offset = _slicedToArray(state.offset, 1),
+      offsetX = _state$offset[0];
+    if (state.last) {
+      var leftWidth = getLeftWidth();
+      var rightWidth = getRightWidth();
+      var position = offsetX + state.velocity[0] * state.direction[0] * 50;
+      if (offsetX > 0) {
+        position = Math.max(0, position);
+      } else if (offsetX < 0) {
+        position = Math.min(0, position);
+      } else {
+        position = 0;
+      }
+      var targetX = nearest([-rightWidth, 0, leftWidth], position);
+      api.start({
+        x: targetX
+      });
+      if (targetX !== 0) {
+        var _p$onActionsReveal;
+        (_p$onActionsReveal = p.onActionsReveal) === null || _p$onActionsReveal === void 0 || _p$onActionsReveal.call(p, targetX > 0 ? 'left' : 'right');
+      }
+      window.setTimeout(function () {
+        draggingRef.current = false;
+      });
+    } else {
+      api.start({
+        x: offsetX,
+        immediate: true
+      });
+    }
+  }, {
+    from: function from() {
+      return [x.get(), 0];
+    },
+    bounds: function bounds() {
+      var leftWidth = getLeftWidth();
+      var rightWidth = getRightWidth();
+      return {
+        left: -rightWidth,
+        right: leftWidth
+      };
+    },
+    axis: 'x',
+    preventScroll: true,
+    pointer: {
+      touch: true
+    },
+    triggerAllEvents: true
+  });
+  var close = function close() {
+    var _props$onClose;
+    api.start({
+      x: 0
+    });
+    forceCancelDrag();
+    (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      show: function show() {
+        var _p$onActionsReveal2;
+        var side = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'right';
+        if (side === 'right') {
+          api.start({
+            x: -getRightWidth()
+          });
+        } else if (side === 'left') {
+          api.start({
+            x: getLeftWidth()
+          });
+        }
+        (_p$onActionsReveal2 = p.onActionsReveal) === null || _p$onActionsReveal2 === void 0 || _p$onActionsReveal2.call(p, side);
+      },
+      close: close
+    };
+  });
+
+  // 添加高度检测的 useEffect
+  useEffect(function () {
+    var updateHeight = function updateHeight() {
+      var height = getRootHeight();
+      setContainerHeight(height);
+    };
+
+    // 组件挂载后检测高度
+    updateHeight();
+
+    // 监听窗口大小变化
+    var resizeObserver = new ResizeObserver(updateHeight);
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  useEffect(function () {
+    if (!props.closeOnTouchOutside) return;
+    function handle(e) {
+      // 检查点击的元素或其祖先元素是否有特定 class
+      if (e.target && props.escapeDom) {
+        var container = document.querySelector(props.escapeDom);
+        if (container !== null && container !== void 0 && container.contains(e.target)) return;
+      }
+      if (x.get() === 0) {
+        return;
+      }
+      var root = rootRef.current;
+      if (root && !root.contains(e.target)) {
+        close();
+      }
+    }
+    if ('ontouchstart' in window) {
+      document.addEventListener('touchstart', handle);
+    } else {
+      document.addEventListener('mousedown', handle);
+    }
+    return function () {
+      document.removeEventListener('touchstart', handle);
+      document.removeEventListener('mousedown', handle);
+    };
+  }, [props.closeOnTouchOutside, props.escapeDom]);
+
+  // 根据容器高度获取右侧容器的 class 名称
+  var getRightContainerClass = function getRightContainerClass() {
+    var baseClass = "".concat(classPrefix, "-actions ").concat(classPrefix, "-actions-right");
+    if (containerHeight > 180) {
+      return "".concat(baseClass, " ").concat(classPrefix, "-height-large");
+    } else if (containerHeight > 120) {
+      return "".concat(baseClass, " ").concat(classPrefix, "-height-medium");
+    }
+    return "".concat(baseClass, " ").concat(classPrefix, "-height-small");
+  };
+
+  // 根据容器高度获取右侧按钮的 class 名称
+  var getRightActionButtonClass = function getRightActionButtonClass() {
+    if (containerHeight > 180) {
+      return "".concat(classPrefix, "-action-height-large");
+    } else if (containerHeight > 120) {
+      return "".concat(classPrefix, "-action-height-medium");
+    }
+    return "".concat(classPrefix, "-action-height-small");
+  };
+  function renderAction(action) {
+    var _action$color, _colorRecord$color;
+    var isRightAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var color = (_action$color = action.color) !== null && _action$color !== void 0 ? _action$color : 'light';
+    var _style = action.style || {};
+
+    // 为右侧按钮添加基于高度的 class
+    var buttonClass = isRightAction ? "".concat(classPrefix, "-action-button ").concat(getRightActionButtonClass()) : "".concat(classPrefix, "-action-button");
+    return /*#__PURE__*/React.createElement(Button, {
+      key: action.key,
+      className: buttonClass,
+      style: _objectSpread({
+        '--background-color': (_colorRecord$color = colorRecord[color]) !== null && _colorRecord$color !== void 0 ? _colorRecord$color : color
+      }, _style),
+      onClick: function onClick(e) {
+        var _action$onClick, _props$onAction;
+        if (props.closeOnAction) {
+          close();
+        }
+        (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, e);
+        (_props$onAction = props.onAction) === null || _props$onAction === void 0 || _props$onAction.call(props, action, e);
+      }
+    }, action.text);
+  }
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", _extends({
+    className: classPrefix
+  }, bind(), {
+    ref: rootRef,
+    onClickCapture: function onClickCapture(e) {
+      if (draggingRef.current) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+  }), /*#__PURE__*/React.createElement(animated.div, {
+    className: "".concat(classPrefix, "-track"),
+    style: {
+      x: x
+    }
+  }, withStopPropagation(props.stopPropagation, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-actions ").concat(classPrefix, "-actions-left"),
+    ref: leftRef
+  }, props.leftActions.map(function (action) {
+    return renderAction(action, false);
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-content"),
+    onClickCapture: function onClickCapture(e) {
+      if (x.goal !== 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      }
+    }
+  }, /*#__PURE__*/React.createElement(animated.div, {
+    style: {
+      pointerEvents: x.to(function (v) {
+        return v !== 0 && x.goal !== 0 ? 'none' : 'auto';
+      })
+    }
+  }, props.children)), withStopPropagation(props.stopPropagation, /*#__PURE__*/React.createElement("div", {
+    className: getRightContainerClass(),
+    ref: rightRef
+  }, props.rightActions.map(function (action) {
+    return renderAction(action, true);
+  }))))));
+});
+var colorRecord = {
+  light: '#ccc',
+  weak: '#999',
+  primary: '#1677ff',
+  success: '#00b578',
+  warning: '#ff8f1f',
+  danger: '#ff3141'
+};