@bifrostui/react 2.0.0-beta.10 → 2.0.0-beta.12

package/es/Select/Select.js

@@ -29,13 +29,32 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { CaretDownIcon, CaretUpIcon } from "@bifrostui/icons";
 import {
   getStylesAndLocation,
   isMini,
   throttle,
   useForkRef,
-  useUniqueId,
   useValue
 } from "@bifrostui/utils";
 import clsx from "clsx";
@@ -100,38 +119,36 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const isOpen = open !== void 0 ? open : internalOpen;
   const locatorRef = useRef(null);
   const rootRef = useForkRef(ref, locatorRef);
-  const ttId = useUniqueId();
-  const dataId = `${prefixCls}-tt-${ttId}`;
-  const updateOptionStyle = throttle(() => {
+  const optionContainerRef = useRef(null);
+  const optionMainRef = useRef(null);
+  const updateOptionStyle = () => __async(void 0, null, function* () {
     const curScrollRoot = scrollContainer();
-    if (!isMini && curScrollRoot) {
-      const result = getStylesAndLocation({
-        scrollRoot: curScrollRoot,
-        childrenRef: locatorRef,
-        arrowDirection: defaultPlacement,
-        arrowLocation: "none",
-        selector: `[data-id="${dataId}"]`,
-        offsetSpacing: 0
-      });
-      if (!result)
-        return;
-      const { styles, childrenStyle, newArrowDirection } = result;
-      setPlacement(newArrowDirection);
-      setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle.width }));
-    }
-  }, 100);
-  const changeOpen = (newOpen) => {
+    const result = yield getStylesAndLocation({
+      scrollRoot: curScrollRoot,
+      childrenRef: locatorRef,
+      tipRef: optionContainerRef,
+      arrowDirection: defaultPlacement,
+      arrowLocation: "none",
+      offsetSpacing: 0
+    });
+    if (!result)
+      return;
+    const { styles, childrenStyle, newArrowDirection } = result;
+    optionMainRef.current.style.transition = "none";
+    optionMainRef.current.style.transform = `translateY(${newArrowDirection === "bottom" ? "-100%" : "100%"})`;
+    setPlacement(newArrowDirection);
+    setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle == null ? void 0 : childrenStyle.width }));
+  });
+  const changeOpen = (newOpen) => __async(void 0, null, function* () {
     if (newOpen) {
-      updateOptionStyle();
-      setTimeout(() => {
-        setInternalOpen(newOpen);
-        onOpen == null ? void 0 : onOpen();
-      }, 100);
+      yield updateOptionStyle();
+      setInternalOpen(newOpen);
+      onOpen == null ? void 0 : onOpen();
     } else {
       onClose == null ? void 0 : onClose();
       setInternalOpen(newOpen);
     }
-  };
+  });
   const handleSelectClick = (e) => {
     if (disabled)
       return;
@@ -156,10 +173,11 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     [selectValue, onChange, setRenderValue]
   );
   useEffect(() => {
+    const resizeCb = throttle(updateOptionStyle, 100);
     if (!isMini) {
-      window.addEventListener("resize", updateOptionStyle);
+      window.addEventListener("resize", resizeCb);
       return () => {
-        window.removeEventListener("resize", updateOptionStyle);
+        window.removeEventListener("resize", resizeCb);
       };
     }
   }, []);
@@ -177,8 +195,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 150,
-          exit: 150
+          enter: 167,
+          exit: 167
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -192,7 +210,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          "data-id": dataId,
+          ref: optionContainerRef,
           style: optionStyle
         },
         /* @__PURE__ */ React.createElement(
@@ -201,11 +219,18 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
             in: isOpen,
             direction: placement === "bottom" ? "down" : "up",
             timeout: {
-              enter: 150,
-              exit: 150
+              enter: 167,
+              exit: 167
             }
           },
-          /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-main`) }, children)
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: clsx(`${prefixCls}-option-main`),
+              ref: optionMainRef
+            },
+            children
+          )
         )
       )
     );
@@ -233,9 +258,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
-    ), icon || defaultIcon),
-    isMini && renderOptions()
-  ), !isMini && /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
+    ), icon || defaultIcon)
+  ), /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
     Backdrop,
     __spreadProps(__spreadValues({
       open: isOpen,

package/es/Slider/Slider.js

@@ -50,7 +50,9 @@ import { GripperBarVerticalIcon } from "@bifrostui/icons";
 import {
   isMini,
   useForkRef,
-  useTouchEmulator,
+  emulateTouchStart,
+  emulateTouchMove,
+  emulateTouchEnd,
   useValue,
   getBoundingClientRect
 } from "@bifrostui/utils";
@@ -110,7 +112,6 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const value = shouldProtection ? latestVal.current : valueProp;
   const [rootRef, setRootRef] = useState(null);
   const handleRef = useForkRef(ref, setRootRef);
-  useTouchEmulator(rootRef);
   const sliderRect = useRef();
   const touchStartPageX = useRef();
   const touchStartLeft = useRef();
@@ -181,9 +182,7 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
       return;
     beforeMoveValue.current = internalValue;
     tooltipRef.current = internalValue;
-    if (!sliderRect.current.width) {
-      getLineWidth();
-    }
+    getLineWidth();
     const currentTarget = isMini ? e.mpEvent.currentTarget : e.currentTarget;
     touchStartPageX.current = e.touches[0].pageX;
     touchStartLeft.current = currentTarget == null ? void 0 : currentTarget.offsetLeft;
@@ -242,6 +241,16 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
     setFrontTooltipVisible(false);
     setEndTooltipVisible(false);
   };
+  const onMouseUp = (e) => {
+    emulateTouchEnd(e);
+    document.removeEventListener("mousemove", emulateTouchMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onMouseDown = (e) => {
+    emulateTouchStart(e);
+    document.addEventListener("mousemove", emulateTouchMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
   const renderButton = (index) => {
     const valuenow = internalValue[index];
     return /* @__PURE__ */ React.createElement(
@@ -264,7 +273,8 @@ const Slider = /* @__PURE__ */ React.forwardRef((props, ref) => {
         },
         onTouchMove,
         onTouchEnd,
-        onTouchCancel: onTouchEnd
+        onTouchCancel: onTouchEnd,
+        onMouseDown
       },
       index === SLIDER_BUTTON.FRONT ? startIcon || defaultIcon : endIcon || defaultIcon
     );

package/es/SwipeAction/SwipeAction.css

@@ -0,0 +1,79 @@
+:root,
+page,
+xhs-page {
+  --bui-swipe-action-container-padding: 10px;
+  --bui-swipe-action-container-color: var(--bui-color-black);
+}
+.bui-swipe-action {
+  background: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+  overflow: hidden;
+  touch-action: pan-x;
+}
+.bui-swipe-action-track {
+  position: relative;
+  transition: transform 200ms ease;
+}
+.bui-swipe-action-actions {
+  position: absolute;
+  top: 0;
+  display: flex;
+  width: auto;
+  white-space: nowrap;
+}
+.bui-swipe-action-actions-right {
+  left: 100%;
+  height: 100%;
+  cursor: pointer;
+  margin-left: 1px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+}
+.bui-swipe-action-actions-left {
+  margin-right: 1px;
+  right: 100%;
+  height: 100%;
+  cursor: pointer;
+  box-sizing: content-box;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+.bui-swipe-action-button {
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  color: #fff;
+  box-sizing: content-box;
+  white-space: nowrap;
+}
+.bui-swipe-action-content-container {
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  user-select: none;
+  padding: var(--bui-swipe-action-container-padding);
+  color: var(--bui-swipe-action-container-color);
+}
+.bui-swipe-action-content-container:active {
+  cursor: grabbing;
+}
+.bui-swipe-action-content-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.bui-swipe-action-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  height: 100%;
+}

package/es/SwipeAction/SwipeAction.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SwipeActionProps, SwipeActionRef } from './SwipeAction.types';
+import './SwipeAction.less';
+declare const SwipeAction: React.ForwardRefExoticComponent<Omit<SwipeActionProps<"div", {}>, "ref"> & React.RefAttributes<SwipeActionRef>>;
+export default SwipeAction;

package/es/SwipeAction/SwipeAction.js

@@ -0,0 +1,334 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import React, {
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+  useMemo
+} from "react";
+import clsx from "clsx";
+import {
+  useTouch,
+  touchEmulator,
+  isMini,
+  getBoundingClientRect,
+  throttle
+} from "@bifrostui/utils";
+import BuiSwipeActionContext from "./SwipeActionContext";
+import { DragPhaseEnum, SideTypeEnum } from "./constants";
+import "./SwipeAction.css";
+const classPrefix = "bui-swipe-action";
+const SwipeAction = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      children,
+      rightActions,
+      leftActions,
+      disabled,
+      closeOnClickActionItem = true,
+      closeOnClickContainer = false,
+      onActionsReveal
+    } = _a, others = __objRest(_a, [
+      "className",
+      "children",
+      "rightActions",
+      "leftActions",
+      "disabled",
+      "closeOnClickActionItem",
+      "closeOnClickContainer",
+      "onActionsReveal"
+    ]);
+    const touch = useTouch();
+    const rootRef = useRef(null);
+    const leftRef = useRef(null);
+    const rightRef = useRef(null);
+    const contentRef = useRef(null);
+    const [translateX, setTranslateX] = useState(0);
+    const [isOpen, setIsOpen] = useState(false);
+    const startingX = useRef(0);
+    const currentX = useRef(0);
+    const isDragging = useRef(false);
+    let pretranslateX = 0;
+    let dragPhase = DragPhaseEnum.START;
+    const dragThreshold = 5;
+    const leftWidthCache = useRef(0);
+    const rightWidthCache = useRef(0);
+    const getWidth = (_ref) => {
+      if (!_ref.current)
+        return Promise.resolve(0);
+      return new Promise((resolve) => {
+        if (isMini) {
+          getBoundingClientRect(_ref.current).then((rect) => {
+            if (rect) {
+              resolve(rect.width || 0);
+            }
+          });
+        } else {
+          resolve(_ref.current.offsetWidth);
+        }
+      });
+    };
+    const getLefRefWidth = () => __async(void 0, null, function* () {
+      if (leftRef.current && leftActions && !leftWidthCache.current) {
+        leftWidthCache.current = yield getWidth(leftRef);
+      }
+      return leftWidthCache.current;
+    });
+    const getRightRefWidth = () => __async(void 0, null, function* () {
+      if (rightRef.current && rightActions && !rightWidthCache.current) {
+        rightWidthCache.current = yield getWidth(rightRef);
+      }
+      return rightWidthCache.current;
+    });
+    const initRefWidth = () => {
+      getLefRefWidth();
+      getRightRefWidth();
+    };
+    const handleTouchStart = (e) => {
+      dragPhase = DragPhaseEnum.START;
+      const isMaskEle = e.target.id === "content-mask";
+      if (isDragging.current || disabled || isMaskEle)
+        return;
+      touch.start(e);
+      isDragging.current = true;
+      startingX.current = touch.deltaX.current - translateX;
+    };
+    const handleTouchMove = throttle(
+      (e) => __async(void 0, null, function* () {
+        if (!isDragging.current || disabled)
+          return;
+        if (dragPhase === DragPhaseEnum.START) {
+          dragPhase = DragPhaseEnum.MOVE;
+        }
+        touch.move(e);
+        currentX.current = touch.deltaX.current - startingX.current;
+        if (Math.abs(currentX.current) < dragThreshold)
+          return;
+        const leftWidth = yield getLefRefWidth();
+        const rightWidth = yield getRightRefWidth();
+        currentX.current = Math.max(
+          -rightWidth,
+          Math.min(leftWidth, currentX.current)
+        );
+        setTranslateX(currentX.current);
+      }),
+      100
+    );
+    const emitActionsReveal = (targetX, stop = false) => {
+      const isSpecial = targetX === pretranslateX && targetX !== 0;
+      if (targetX === pretranslateX && !isSpecial || stop)
+        return;
+      let resStr = null;
+      const shouldOpen = targetX > 0 && pretranslateX <= 0 || targetX < 0 && pretranslateX >= 0 || isSpecial;
+      if (shouldOpen) {
+        if (targetX > 0) {
+          resStr = SideTypeEnum.LEFT;
+        } else if (targetX < 0) {
+          resStr = SideTypeEnum.RIGHT;
+        }
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+      if (resStr) {
+        onActionsReveal == null ? void 0 : onActionsReveal({ side: resStr });
+      }
+    };
+    const handleTouchEnd = (e) => __async(void 0, null, function* () {
+      if (!isDragging.current)
+        return;
+      if (dragPhase === DragPhaseEnum.MOVE) {
+        dragPhase = DragPhaseEnum.END;
+      }
+      const leftWidth = yield getLefRefWidth();
+      const rightWidth = yield getRightRefWidth();
+      const threshold = 0.5;
+      let targetX = 0;
+      isDragging.current = false;
+      if (Math.abs(currentX.current) < dragThreshold)
+        return;
+      if (currentX.current > leftWidth * threshold) {
+        targetX = leftWidth;
+      } else if (currentX.current < -rightWidth * threshold) {
+        targetX = -rightWidth;
+      }
+      if (dragPhase === DragPhaseEnum.END || isMini) {
+        emitActionsReveal(targetX);
+        console.log("handleTouchEnd\uFF1A", targetX, e);
+        setTranslateX(targetX);
+        pretranslateX = targetX;
+      }
+      currentX.current = 0;
+    });
+    const close = () => {
+      setTranslateX(0);
+      pretranslateX = 0;
+      setIsOpen(false);
+    };
+    useEffect(() => {
+      initRefWidth();
+      if (!contentRef.current)
+        return;
+      const removeTouchEmulator = touchEmulator(contentRef.current);
+      return () => {
+        removeTouchEmulator();
+      };
+    }, []);
+    useEffect(() => {
+      var _a2, _b, _c, _d;
+      (_a2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _a2.addEventListener("touchstart", handleTouchStart);
+      (_b = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _b.addEventListener("touchmove", handleTouchMove);
+      (_c = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _c.addEventListener("touchend", handleTouchEnd);
+      (_d = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _d.addEventListener("touchcancel", handleTouchEnd);
+      if (!isMini && document) {
+        document.addEventListener("mouseup", handleTouchEnd);
+      }
+      return () => {
+        var _a3, _b2, _c2, _d2;
+        (_a3 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _a3.removeEventListener(
+          "touchstart",
+          handleTouchStart
+        );
+        (_b2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _b2.removeEventListener("touchmove", handleTouchMove);
+        (_c2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _c2.removeEventListener("touchend", handleTouchEnd);
+        (_d2 = contentRef == null ? void 0 : contentRef.current) == null ? void 0 : _d2.removeEventListener("touchcancel", handleTouchEnd);
+        if (!isMini && document) {
+          document.removeEventListener("mouseup", handleTouchEnd);
+        }
+      };
+    }, []);
+    useImperativeHandle(ref, () => ({
+      show: (params) => __async(void 0, null, function* () {
+        let targetX = 0;
+        if (params && params.side === SideTypeEnum.RIGHT) {
+          targetX = -(yield getRightRefWidth());
+        } else {
+          targetX = yield getLefRefWidth();
+        }
+        setTranslateX(targetX);
+        pretranslateX = targetX;
+        emitActionsReveal(targetX);
+      }),
+      close,
+      // 获取当前是否打开
+      open: isOpen,
+      ref: rootRef.current
+    }));
+    const outClickHandle = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (translateX !== 0 && closeOnClickContainer) {
+        close();
+      }
+    };
+    const SwipeActionContext = useMemo(
+      () => ({ closeOnClickActionItem, close }),
+      [closeOnClickActionItem]
+    );
+    return /* @__PURE__ */ React.createElement(BuiSwipeActionContext.Provider, { value: SwipeActionContext }, /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(`${classPrefix}`, className),
+        ref: rootRef
+      }, others),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${classPrefix}-track`,
+          style: {
+            transform: `translate3d(${translateX}px, 0, 0)`
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix}-actions ${classPrefix}-actions-left`,
+            ref: leftRef
+          },
+          leftActions
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix}-content-container`,
+            ref: contentRef,
+            onTouchStart: handleTouchStart,
+            onTouchMove: handleTouchMove,
+            onTouchEnd: handleTouchEnd,
+            onTouchCancel: handleTouchEnd
+          },
+          isOpen && closeOnClickContainer && /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `${classPrefix}-content-mask`,
+              id: "content-mask",
+              onClick: outClickHandle
+            }
+          ),
+          children
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${classPrefix}-actions ${classPrefix}-actions-right`,
+            ref: rightRef
+          },
+          rightActions
+        )
+      )
+    ));
+  }
+);
+SwipeAction.displayName = "BuiSwipeAction";
+var SwipeAction_default = SwipeAction;
+export {
+  SwipeAction_default as default
+};