@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/Slide/index.css

@@ -0,0 +1,72 @@
+@keyframes bui-slide-left-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    visibility: visible;
+    transform: none;
+  }
+}
+@keyframes bui-slide-left-out {
+  from {
+    transform: none;
+  }
+  to {
+    visibility: hidden;
+    transform: translateX(100%);
+  }
+}
+@keyframes bui-slide-right-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    visibility: visible;
+    transform: none;
+  }
+}
+@keyframes bui-slide-right-out {
+  from {
+    transform: none;
+  }
+  to {
+    visibility: hidden;
+    transform: translateX(-100%);
+  }
+}
+@keyframes bui-slide-up-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    visibility: visible;
+    transform: none;
+  }
+}
+@keyframes bui-slide-up-out {
+  from {
+    transform: none;
+  }
+  to {
+    visibility: hidden;
+    transform: translateY(100%);
+  }
+}
+@keyframes bui-slide-down-in {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    visibility: visible;
+    transform: none;
+  }
+}
+@keyframes bui-slide-down-out {
+  from {
+    transform: none;
+  }
+  to {
+    visibility: hidden;
+    transform: translateY(-100%);
+  }
+}

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/Stack/demo/index.css

@@ -1,6 +1,7 @@
 .bui-stack-demo-options {
   display: flex;
   column-gap: 30px;
+  flex-wrap: wrap;
 }
 .bui-stack-demo-options-title {
   font-weight: 500;
@@ -10,6 +11,7 @@
     display: flex;
     flex-direction: column;
     row-gap: 15px;
+    flex-wrap: wrap;
   }
   .bui-stack-demo-options-title {
     width: 100%;

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
+};

package/es/SwipeAction/SwipeAction.types.d.ts

@@ -0,0 +1,75 @@
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import React from 'react';
+import { SideTypeEnum } from './constants';
+export type SwipeActionProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 右侧的操作按钮列表区域
+         */
+        rightActions?: React.ReactNode;
+        /**
+         * 左侧的操作按钮列表区域
+         */
+        leftActions?: React.ReactNode;
+        /**
+         * 是否在点击按钮区自动归位
+         */
+        closeOnClickActionItem?: boolean;
+        /**
+         * 是否在点击其他区域时自动归位
+         */
+        closeOnClickContainer?: boolean;
+        /**
+         * 操作按钮展开时触发
+         */
+        onActionsReveal?: (params: RevealParams) => void;
+        /**
+         * 是否禁用拖动
+         */
+        disabled?: boolean;
+    };
+    defaultComponent: D;
+}, D>;
+interface RevealParams {
+    side: SideTypeEnum | '';
+}
+export type SwipeActionItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 颜色风格
+         */
+        color?: ThemeColor | 'vip';
+        /**
+         * id
+         */
+        id?: string | number;
+        /**
+         * 点击事件
+         */
+        onClick?: (e: React.SyntheticEvent, item: {
+            id: string | number;
+            color: ThemeColor | 'vip';
+            text: React.ReactNode;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export interface BuiSwipeActionContextProps {
+    /**
+     * 是否在点击操作按钮时自动归位
+     */
+    closeOnClickActionItem?: boolean;
+    /**
+     * 关闭函数
+     */
+    close: () => void;
+}
+export type SwipeActionRef = {
+    close: () => void;
+    show: (params?: {
+        side: SideTypeEnum;
+    }) => void;
+    open: boolean;
+    ref?: HTMLDivElement;
+};
+export {};

package/es/SwipeAction/SwipeAction.types.js

@@ -0,0 +1 @@
+export {};

package/es/SwipeAction/SwipeActionContext.d.ts

@@ -0,0 +1,3 @@
+import { BuiSwipeActionContextProps } from './SwipeAction.types';
+declare const BuiSwipeActionContext: import("react").Context<BuiSwipeActionContextProps>;
+export default BuiSwipeActionContext;

package/es/SwipeAction/SwipeActionContext.js

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+const BuiSwipeActionContext = createContext({
+  closeOnClickActionItem: true,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  close: () => {
+  }
+});
+var SwipeActionContext_default = BuiSwipeActionContext;
+export {
+  SwipeActionContext_default as default
+};

package/es/SwipeAction/SwipeActionItem.css

@@ -0,0 +1,31 @@
+.bui-swipe-action-item {
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background: var(--background-button-color);
+  color: #fff;
+  box-sizing: content-box;
+  white-space: nowrap;
+  font-family: var(--bui-font-family);
+}
+.bui-swipe-action-item-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-swipe-action-item-vip {
+  background-color: var(--bui-color-vip);
+}
+.bui-swipe-action-item-success {
+  background-color: var(--bui-color-success);
+}
+.bui-swipe-action-item-info {
+  background-color: var(--bui-color-info);
+}
+.bui-swipe-action-item-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-swipe-action-item-danger {
+  background-color: var(--bui-color-danger);
+}

package/es/SwipeAction/SwipeActionItem.d.ts

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