@pisell/private-materials 6.4.62 → 6.4.64

package/lib/plus/clinetSearch/index.js

@@ -66,7 +66,7 @@ var ClientSearch = (0, import_react.forwardRef)(
       (_a2 = addClientRef.current) == null ? void 0 : _a2.reset();
     };
     const renderListHeader = () => {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "client-search-list-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 110 } }, import_utils.locales.getText("pisell2.text.client-search.name")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 110 } }, import_utils.locales.getText("pisell2.text.client-search.register-time")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 120 } }, import_utils.locales.getText("pisell2.text.client-search.phone")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 135 } }, import_utils.locales.getText("pisell2.text.client-search.email")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 120 } }, import_utils.locales.getText("pisell2.text.client-search.membership")));
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "client-search-list-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 180 } }, import_utils.locales.getText("pisell2.text.client-search.name")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 110 } }, import_utils.locales.getText("pisell2.text.client-search.register-time")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 125 } }, import_utils.locales.getText("pisell2.text.client-search.membership")), /* @__PURE__ */ import_react.default.createElement("div", { className: "header-item", style: { width: 180 } }, import_utils.locales.getText("pisell2.text.client-search.contact-info")));
     };
     const renderResults = (searchResults) => {
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (searchResults == null ? void 0 : searchResults.length) ? renderListHeader() : null, /* @__PURE__ */ import_react.default.createElement(
@@ -111,7 +111,7 @@ var ClientSearch = (0, import_react.forwardRef)(
             {
               dataSource: searchResults,
               renderItem: (item, index) => {
-                var _a2, _b2;
+                var _a2, _b2, _c2, _d, _e, _f, _g, _h;
                 const membershipText = (_b2 = (_a2 = item.latest_wallet_detail) == null ? void 0 : _a2.wallet) == null ? void 0 : _b2.name;
                 return /* @__PURE__ */ import_react.default.createElement(
                   import_antd.List.Item,
@@ -126,10 +126,7 @@ var ClientSearch = (0, import_react.forwardRef)(
                       onClick: () => onRowClick == null ? void 0 : onRowClick(item, index || 0),
                       style: { cursor: "pointer" }
                     },
-                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 110 } }, /* @__PURE__ */ import_react.default.createElement(import_clientName.default, { dataSource: item })),
-                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 110 } }, (0, import_dayjs.default)(item.created_at).format("YYYY-MM-DD") || "-"),
-                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 120 } }, item.phone || "-"),
-                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 135 } }, /* @__PURE__ */ import_react.default.createElement(
+                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 180 } }, /* @__PURE__ */ import_react.default.createElement(import_clientName.default, { dataSource: item }), /* @__PURE__ */ import_react.default.createElement("div", null, item.phone || "-"), /* @__PURE__ */ import_react.default.createElement(
                       "div",
                       {
                         style: {
@@ -140,7 +137,8 @@ var ClientSearch = (0, import_react.forwardRef)(
                       },
                       item.email || "-"
                     )),
-                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 120 } }, membershipText && (translationOriginal == null ? void 0 : translationOriginal(membershipText)) ? /* @__PURE__ */ import_react.default.createElement(
+                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 110 } }, (0, import_dayjs.default)(item.created_at).format("YYYY-MM-DD") || "-"),
+                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 125 } }, membershipText && (translationOriginal == null ? void 0 : translationOriginal(membershipText)) ? /* @__PURE__ */ import_react.default.createElement(
                       import_antd.Tag,
                       {
                         color: "gold",
@@ -156,7 +154,18 @@ var ClientSearch = (0, import_react.forwardRef)(
                         }
                       },
                       translationOriginal == null ? void 0 : translationOriginal(membershipText)
-                    ) : "-")
+                    ) : "-"),
+                    /* @__PURE__ */ import_react.default.createElement("div", { className: "item-cell", style: { width: 180 } }, /* @__PURE__ */ import_react.default.createElement(import_clientName.default, { dataSource: (_c2 = item == null ? void 0 : item.contacts_info) == null ? void 0 : _c2.value }), ((_f = (_e = (_d = item == null ? void 0 : item.contacts_info) == null ? void 0 : _d.value) == null ? void 0 : _e.phone) == null ? void 0 : _f.phone) || "-", /* @__PURE__ */ import_react.default.createElement(
+                      "div",
+                      {
+                        style: {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        }
+                      },
+                      ((_h = (_g = item == null ? void 0 : item.contacts_info) == null ? void 0 : _g.value) == null ? void 0 : _h.email) || "-"
+                    ))
                   )
                 );
               }

package/lib/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/lib/plus/clinetSearch/locales.js

@@ -41,7 +41,7 @@ var locales_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",
@@ -54,7 +54,8 @@ var locales_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": "如未注册游客则留空",
@@ -87,7 +88,8 @@ var locales_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": "如未註冊遊客則留空",
@@ -120,6 +122,7 @@ var locales_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/lib/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/lib/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/lib/plus/contactInfo/components/Avatar/index.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/contactInfo/components/Avatar/index.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  default: () => Avatar_default
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("../../utils");
+var import__ = require("../../index");
+var import__2 = require("../../index.less");
+var Avatar = (props) => {
+  const { config, name, cover } = props;
+  const { useTextAvatar, children } = config || {};
+  if (useTextAvatar) {
+    const text = children || (0, import_utils.getAvatarText)(name);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { className: `${import__.PREFIX}__avatar`, ...config || {} }, text));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import__.PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellAvatar,
+    {
+      className: `${import__.PREFIX}__avatar`,
+      ...config || {},
+      src: cover || ""
+    }
+  ));
+};
+var Avatar_default = Avatar;

package/lib/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/lib/plus/contactInfo/components/SwipeAction/index.js

@@ -0,0 +1,373 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/contactInfo/components/SwipeAction/index.tsx
+var SwipeAction_exports = {};
+__export(SwipeAction_exports, {
+  SwipeAction: () => SwipeAction
+});
+module.exports = __toCommonJS(SwipeAction_exports);
+var import_web = require("@react-spring/web");
+var import_use_gesture_react = require("@use-gesture/react/dist/use-gesture-react.cjs");
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+function withNativeProps(props, element) {
+  const p = {
+    ...element.props
+  };
+  if (props.className) {
+    p.className = props.className + (element.props.className ? ` ${element.props.className}` : "");
+  }
+  if (props.style) {
+    p.style = {
+      ...props.style,
+      ...element.props.style
+    };
+  }
+  return import_react.default.cloneElement(element, p);
+}
+function nearest(arr, target) {
+  return arr.reduce((prev, curr) => {
+    return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
+  });
+}
+function mergeProps(a, b) {
+  return {
+    ...a,
+    ...b
+  };
+}
+function withStopPropagation(events, element) {
+  if (!events.includes("click")) {
+    return element;
+  }
+  const onClick = (e) => {
+    var _a, _b;
+    e.stopPropagation();
+    (_b = (_a = element.props).onClick) == null ? void 0 : _b.call(_a, e);
+  };
+  return import_react.default.cloneElement(element, {
+    ...element.props,
+    onClick
+  });
+}
+var Button = ({
+  children,
+  className,
+  style,
+  onClick
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className,
+      style: {
+        border: "none",
+        background: (style == null ? void 0 : style["--background-color"]) || "transparent",
+        ...style
+      },
+      onClick
+    },
+    children
+  );
+};
+var classPrefix = `pisell-custom-swipe-action`;
+var defaultProps = {
+  rightActions: [],
+  leftActions: [],
+  closeOnTouchOutside: true,
+  closeOnAction: true,
+  stopPropagation: []
+};
+var SwipeAction = (0, import_react.forwardRef)(
+  (p, ref) => {
+    const props = mergeProps(defaultProps, p);
+    const rootRef = (0, import_react.useRef)(null);
+    const leftRef = (0, import_react.useRef)(null);
+    const rightRef = (0, import_react.useRef)(null);
+    const [containerHeight, setContainerHeight] = (0, import_react.useState)(0);
+    function getWidth(ref2) {
+      const element = ref2.current;
+      if (!element) return 0;
+      return element.offsetWidth;
+    }
+    function getHeight(ref2) {
+      const element = ref2.current;
+      if (!element) return 0;
+      return element.offsetHeight;
+    }
+    function getLeftWidth() {
+      return getWidth(leftRef);
+    }
+    function getRightWidth() {
+      return getWidth(rightRef);
+    }
+    function getRootHeight() {
+      return getHeight(rootRef);
+    }
+    const [{ x }, api] = (0, import_web.useSpring)(
+      () => ({
+        x: 0,
+        config: { tension: 200, friction: 30 }
+      }),
+      []
+    );
+    const draggingRef = (0, import_react.useRef)(false);
+    const dragCancelRef = (0, import_react.useRef)(null);
+    function forceCancelDrag() {
+      var _a;
+      (_a = dragCancelRef.current) == null ? void 0 : _a.call(dragCancelRef);
+      draggingRef.current = false;
+    }
+    const bind = (0, import_use_gesture_react.useDrag)(
+      (state) => {
+        var _a;
+        dragCancelRef.current = state.cancel;
+        if (!state.intentional) return;
+        if (state.down) {
+          draggingRef.current = true;
+        }
+        if (!draggingRef.current) return;
+        const [offsetX] = state.offset;
+        if (state.last) {
+          const leftWidth = getLeftWidth();
+          const rightWidth = getRightWidth();
+          let 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;
+          }
+          const targetX = nearest([-rightWidth, 0, leftWidth], position);
+          api.start({
+            x: targetX
+          });
+          if (targetX !== 0) {
+            (_a = p.onActionsReveal) == null ? void 0 : _a.call(p, targetX > 0 ? "left" : "right");
+          }
+          window.setTimeout(() => {
+            draggingRef.current = false;
+          });
+        } else {
+          api.start({
+            x: offsetX,
+            immediate: true
+          });
+        }
+      },
+      {
+        from: () => [x.get(), 0],
+        bounds: () => {
+          const leftWidth = getLeftWidth();
+          const rightWidth = getRightWidth();
+          return {
+            left: -rightWidth,
+            right: leftWidth
+          };
+        },
+        axis: "x",
+        preventScroll: true,
+        pointer: { touch: true },
+        triggerAllEvents: true
+      }
+    );
+    const close = () => {
+      var _a;
+      api.start({
+        x: 0
+      });
+      forceCancelDrag();
+      (_a = props.onClose) == null ? void 0 : _a.call(props);
+    };
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      show: (side = "right") => {
+        var _a;
+        if (side === "right") {
+          api.start({
+            x: -getRightWidth()
+          });
+        } else if (side === "left") {
+          api.start({
+            x: getLeftWidth()
+          });
+        }
+        (_a = p.onActionsReveal) == null ? void 0 : _a.call(p, side);
+      },
+      close
+    }));
+    (0, import_react.useEffect)(() => {
+      const updateHeight = () => {
+        const height = getRootHeight();
+        setContainerHeight(height);
+      };
+      updateHeight();
+      const resizeObserver = new ResizeObserver(updateHeight);
+      if (rootRef.current) {
+        resizeObserver.observe(rootRef.current);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (!props.closeOnTouchOutside) return;
+      function handle(e) {
+        if (e.target && props.escapeDom) {
+          const container = document.querySelector(props.escapeDom);
+          if (container == null ? void 0 : container.contains(e.target)) return;
+        }
+        if (x.get() === 0) {
+          return;
+        }
+        const root = rootRef.current;
+        if (root && !root.contains(e.target)) {
+          close();
+        }
+      }
+      if ("ontouchstart" in window) {
+        document.addEventListener("touchstart", handle);
+      } else {
+        document.addEventListener("mousedown", handle);
+      }
+      return () => {
+        document.removeEventListener("touchstart", handle);
+        document.removeEventListener("mousedown", handle);
+      };
+    }, [props.closeOnTouchOutside, props.escapeDom]);
+    const getRightContainerClass = () => {
+      const baseClass = `${classPrefix}-actions ${classPrefix}-actions-right`;
+      if (containerHeight > 180) {
+        return `${baseClass} ${classPrefix}-height-large`;
+      } else if (containerHeight > 120) {
+        return `${baseClass} ${classPrefix}-height-medium`;
+      }
+      return `${baseClass} ${classPrefix}-height-small`;
+    };
+    const getRightActionButtonClass = () => {
+      if (containerHeight > 180) {
+        return `${classPrefix}-action-height-large`;
+      } else if (containerHeight > 120) {
+        return `${classPrefix}-action-height-medium`;
+      }
+      return `${classPrefix}-action-height-small`;
+    };
+    function renderAction(action, isRightAction = false) {
+      const color = action.color ?? "light";
+      const _style = action.style || {};
+      const buttonClass = isRightAction ? `${classPrefix}-action-button ${getRightActionButtonClass()}` : `${classPrefix}-action-button`;
+      return /* @__PURE__ */ import_react.default.createElement(
+        Button,
+        {
+          key: action.key,
+          className: buttonClass,
+          style: {
+            "--background-color": colorRecord[color] ?? color,
+            ..._style
+          },
+          onClick: (e) => {
+            var _a, _b;
+            if (props.closeOnAction) {
+              close();
+            }
+            (_a = action.onClick) == null ? void 0 : _a.call(action, e);
+            (_b = props.onAction) == null ? void 0 : _b.call(props, action, e);
+          }
+        },
+        action.text
+      );
+    }
+    return withNativeProps(
+      props,
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: classPrefix,
+          ...bind(),
+          ref: rootRef,
+          onClickCapture: (e) => {
+            if (draggingRef.current) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_web.animated.div, { className: `${classPrefix}-track`, style: { x } }, withStopPropagation(
+          props.stopPropagation,
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: `${classPrefix}-actions ${classPrefix}-actions-left`,
+              ref: leftRef
+            },
+            props.leftActions.map((action) => renderAction(action, false))
+          )
+        ), /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${classPrefix}-content`,
+            onClickCapture: (e) => {
+              if (x.goal !== 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                close();
+              }
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_web.animated.div,
+            {
+              style: {
+                pointerEvents: x.to(
+                  (v) => v !== 0 && x.goal !== 0 ? "none" : "auto"
+                )
+              }
+            },
+            props.children
+          )
+        ), withStopPropagation(
+          props.stopPropagation,
+          /* @__PURE__ */ import_react.default.createElement("div", { className: getRightContainerClass(), ref: rightRef }, props.rightActions.map((action) => renderAction(action, true)))
+        ))
+      )
+    );
+  }
+);
+var colorRecord = {
+  light: "#ccc",
+  weak: "#999",
+  primary: "#1677ff",
+  success: "#00b578",
+  warning: "#ff8f1f",
+  danger: "#ff3141"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SwipeAction
+});