@bifrostui/react 1.4.5 → 1.4.7-beta.0

package/es/Popover/Popover.js

@@ -26,14 +26,35 @@ 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 clsx from "clsx";
 import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
   parsePlacement,
-  useUniqueId,
-  throttle
+  throttle,
+  useForkRef,
+  isMini
 } from "@bifrostui/utils";
 import Portal from "../Portal";
 import "./Popover.css";
@@ -49,9 +70,9 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     offsetSpacing = 0,
     placement = "top",
     trigger = "click",
-    onOpenChange,
     open,
-    hideArrow
+    hideArrow,
+    onOpenChange
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -62,9 +83,9 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "offsetSpacing",
     "placement",
     "trigger",
-    "onOpenChange",
     "open",
-    "hideArrow"
+    "hideArrow",
+    "onOpenChange"
   ]);
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = parsePlacement(placement);
@@ -72,11 +93,18 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   const [arrowDirection, setArrowDirection] = useState(direction);
   const [arrowLocation, setArrowLocation] = useState(location);
-  const [tooltyles, setTooltyles] = useState({});
-  const ttId = useUniqueId();
+  const [toolStyles, setToolStyles] = useState({});
+  const tipRef = useRef(null);
+  const nodeRef = useForkRef(ref, tipRef);
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
   const changeOpenStatus = (event, status) => {
     if (controlByUser)
       return;
+    clearRef(status);
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
   };
@@ -95,23 +123,33 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (!controlByUser)
       return;
     setOpenStatus(open);
+    clearRef(open);
   }, [open]);
+  useEffect(() => {
+    if (!openStatus) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [openStatus]);
   const clickEventHandler = (event) => {
     if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
       return;
     hidePopover(event);
   };
-  const onRootElementMouted = throttle(() => {
+  const onRootElementMouted = throttle(() => __async(void 0, null, function* () {
+    if (!tipRef.current)
+      return;
     const {
       direction: newParsedDirection,
       location: newParsedLocation = "center"
     } = parsePlacement(placement);
-    const result = getStylesAndLocation({
+    const result = yield getStylesAndLocation({
       childrenRef,
       arrowDirection: newParsedDirection,
       arrowLocation: newParsedLocation,
       offsetSpacing,
-      selector: `[data-id="tt_${ttId}"]`
+      tipRef
     });
     if (!result)
       return;
@@ -122,26 +160,32 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (newArrowLocation !== arrowLocation) {
       setArrowLocation(newArrowLocation);
     }
-    setTooltyles(styles);
-  }, 100);
-  const bindEvent = () => {
-    if (!controlByUser) {
-      document.addEventListener("click", clickEventHandler);
-    }
-    window.addEventListener("resize", onRootElementMouted);
-  };
-  const unbindEvent = () => {
-    if (!controlByUser) {
-      document.removeEventListener("click", clickEventHandler);
-    }
-    window.removeEventListener("resize", onRootElementMouted);
-  };
+    setToolStyles(styles);
+  }), 100);
   useEffect(() => {
+    const bindEvent = () => {
+      if (!tipRef.current)
+        return;
+      if (!controlByUser) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.addEventListener("resize", onRootElementMouted);
+      }
+    };
+    const unbindEvent = () => {
+      if (!controlByUser) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.removeEventListener("resize", onRootElementMouted);
+      }
+    };
     bindEvent();
     return () => {
       unbindEvent();
     };
-  }, []);
+  }, [openStatus]);
   if (!title && !content)
     return null;
   let triggerEventOption;
@@ -156,14 +200,14 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted }, /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
-      "data-id": `tt_${ttId}`,
-      style: __spreadValues(__spreadValues({}, style), tooltyles)
+      style: __spreadValues(__spreadValues({}, style), toolStyles),
+      ref: nodeRef
     }, others),
     !hideArrow ? /* @__PURE__ */ React.createElement(
       "div",

package/es/Portal/Portal.miniapp.js

@@ -18,11 +18,13 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import Taro from "@tarojs/taro";
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import PortalCore from "./PortalCore";
 const Portal = forwardRef((props, ref) => {
   const { disablePortal } = props;
-  const rootWrapperElement = useMemo(() => {
+  const [rootWrapperElement, setRootWrapperElement] = useState();
+  useEffect(() => {
+    let root;
     if (!disablePortal) {
       const currentPages = Taro.getCurrentPages() || [];
       const currentPage = currentPages[currentPages.length - 1];
@@ -34,11 +36,12 @@ const Portal = forwardRef((props, ref) => {
         const view = document.createElement("view");
         view.id = portalId;
         rootElement == null ? void 0 : rootElement.appendChild(view);
-        return view;
+        root = view;
+      } else {
+        root = portalWrapperElement;
       }
-      return portalWrapperElement;
     }
-    return void 0;
+    setRootWrapperElement(root);
   }, []);
   return /* @__PURE__ */ React.createElement(PortalCore, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });

package/es/ScrollView/ScrollView.js

@@ -2,12 +2,14 @@ import { useForkRef } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
 import "./ScrollView.css";
-function easeOutScroll(from, to, callback) {
+function easeOutScroll(from, to, callback, dur) {
+  if (dur <= 0) {
+    dur = 500;
+  }
   if (from === to || typeof from !== "number") {
     return;
   }
   const change = to - from;
-  const dur = 500;
   const sTime = +/* @__PURE__ */ new Date();
   function linear(t, b, c, d) {
     return c * t / d + b;
@@ -42,7 +44,8 @@ const ScrollView = forwardRef(
       scrollIntoView,
       onTouchMove: propsOnTouchMove,
       scrollIntoViewAlignment,
-      children
+      children,
+      scrollAnimationDuration = 500
     } = props;
     const container = useRef(null);
     const handleRef = useForkRef(ref, container);
@@ -52,10 +55,15 @@ const ScrollView = forwardRef(
       if (top === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(container.current.scrollTop, top, (pos) => {
-          if (container.current)
-            container.current.scrollTop = pos;
-        });
+        easeOutScroll(
+          container.current.scrollTop,
+          top,
+          (pos) => {
+            if (container.current)
+              container.current.scrollTop = pos;
+          },
+          scrollAnimationDuration
+        );
       } else if (container.current)
         container.current.scrollTop = top;
     }, []);
@@ -63,10 +71,15 @@ const ScrollView = forwardRef(
       if (left === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(container.current.scrollLeft, left, (pos) => {
-          if (container.current)
-            container.current.scrollLeft = pos;
-        });
+        easeOutScroll(
+          container.current.scrollLeft,
+          left,
+          (pos) => {
+            if (container.current)
+              container.current.scrollLeft = pos;
+          },
+          scrollAnimationDuration
+        );
       } else if (container.current)
         container.current.scrollLeft = left;
     }, []);

package/es/ScrollView/ScrollView.types.d.ts

@@ -138,7 +138,6 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          */
         fastDeceleration?: boolean;
         /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
-         * 仅小程序可用
          */
         scrollAnimationDuration?: number;
         /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。

package/es/Select/Select.css

@@ -48,13 +48,9 @@
 .bui-select-option-container {
   position: absolute;
   box-sizing: border-box;
-  top: 100%;
-  left: 0;
-  width: 100%;
   font-size: var(--bui-select-font-size, var(--bui-title-size-3));
   z-index: var(--bui-z-index-tooltip);
   border-radius: 3px;
-  background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
@@ -71,6 +67,7 @@
   border-radius: 3px;
   padding: var(--bui-select-option-container-padding, 3px 0);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  background-color: var(--bui-color-bg-view);
   overflow: hidden;
 }
 .bui-select-option {

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";
@@ -98,38 +117,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;
@@ -154,10 +171,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);
       };
     }
   }, []);
@@ -175,8 +193,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 150,
-          exit: 150
+          enter: 167,
+          exit: 167
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -190,7 +208,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          "data-id": dataId,
+          ref: optionContainerRef,
           style: optionStyle
         },
         /* @__PURE__ */ React.createElement(
@@ -199,11 +217,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
+          )
         )
       )
     );
@@ -231,9 +256,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,
@@ -250,9 +274,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
 Select.displayName = "BuiSelect";
 Select.defaultProps = {
   defaultValue: "",
-  scrollContainer: () => {
-    return isMini ? null : document.body;
-  }
+  scrollContainer: () => null
 };
 var Select_default = Select;
 export {

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;