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

package/es/Slide/Slide.miniapp.js

@@ -0,0 +1,189 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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;
+};
+import React, { useEffect, useState, useRef } from "react";
+import {
+  createTransitions,
+  duration,
+  easing,
+  getTransitionProps,
+  useForkRef
+} from "@bifrostui/utils";
+import "./index.css";
+const defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+const getAnimationName = (direction, inProp) => {
+  const animations = {
+    left: inProp ? "bui-slide-left-in" : "bui-slide-left-out",
+    right: inProp ? "bui-slide-right-in" : "bui-slide-right-out",
+    up: inProp ? "bui-slide-up-in" : "bui-slide-up-out",
+    down: inProp ? "bui-slide-down-in" : "bui-slide-down-out"
+  };
+  return animations[direction] || animations.down;
+};
+const Slide = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children: children,
+      in: inProp,
+      style,
+      direction = "down",
+      appear: appear = true,
+      enter = true,
+      exit = true,
+      delay = 0,
+      easing: easingProp = defaultEasing,
+      timeout = defaultTimeout,
+      mountOnEnter: mountOnEnter,
+      unmountOnExit,
+      onEnter: onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited
+    } = _b, others = __objRest(_b, [
+      // Base props
+      "children",
+      "in",
+      "style",
+      "direction",
+      // Animation controls
+      "appear",
+      "enter",
+      "exit",
+      "delay",
+      "easing",
+      "timeout",
+      // Lifecycle hooks
+      "mountOnEnter",
+      "unmountOnExit",
+      // Animation callbacks
+      "onEnter",
+      "onEntering",
+      "onEntered",
+      "onExit",
+      "onExiting",
+      "onExited"
+    ]);
+    var _a2;
+    const isFirstMount = useRef(inProp || !mountOnEnter);
+    const [isMounted, setIsMounted] = useState(inProp || !mountOnEnter);
+    const elementRef = useRef(null);
+    const handleRef = useForkRef(ref, children == null ? void 0 : children.ref, elementRef);
+    const shouldAnimateOnFirstMount = inProp && appear;
+    const shouldAnimate = inProp && enter || !inProp && exit;
+    const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
+    const getAnimationDurationAndDelay = () => {
+      if (!shouldExecuteAnimation) {
+        return { timeout: 0, delay: 0 };
+      }
+      return { timeout, delay };
+    };
+    const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
+    const transitions = createTransitions();
+    const animationName = getAnimationName(direction, inProp);
+    const animationDurationAndDelay = getAnimationDurationAndDelay();
+    const animation = transitions.create(
+      animationName,
+      getTransitionProps(
+        __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+          style,
+          easing: easingProp
+        }),
+        { mode: inProp ? "enter" : "exit" }
+      )
+    );
+    useEffect(() => {
+      if (inProp && !isMounted) {
+        setIsMounted(true);
+      }
+    }, [inProp, isMounted]);
+    useEffect(() => {
+      if (isMounted && isFirstMount.current) {
+        isFirstMount.current = false;
+      }
+    }, [isMounted]);
+    useEffect(() => {
+      const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
+      if (!shouldTriggerCallback)
+        return;
+      if (inProp) {
+        onEnter == null ? void 0 : onEnter(elementRef.current);
+      } else {
+        onExit == null ? void 0 : onExit(elementRef.current);
+      }
+    }, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
+    const handleAnimationStart = () => {
+      if (!shouldExecuteAnimation)
+        return;
+      if (inProp) {
+        onEntering == null ? void 0 : onEntering(elementRef.current);
+      } else {
+        onExiting == null ? void 0 : onExiting(elementRef.current);
+      }
+    };
+    const handleAnimationEnd = () => {
+      if (shouldSkipFirstAnimation)
+        return;
+      if (inProp) {
+        onEntered == null ? void 0 : onEntered(elementRef.current);
+      } else {
+        onExited == null ? void 0 : onExited(elementRef.current);
+        if (unmountOnExit) {
+          setIsMounted(false);
+        }
+      }
+    };
+    if (!children || !isMounted)
+      return null;
+    return React.cloneElement(children, __spreadProps(__spreadValues({}, others), {
+      ref: handleRef,
+      onAnimationEnd: handleAnimationEnd,
+      onAnimationStart: handleAnimationStart,
+      style: __spreadValues(__spreadValues({
+        animation,
+        animationFillMode: "both"
+      }, style), (_a2 = children.props) == null ? void 0 : _a2.style)
+    }));
+  }
+);
+Slide.displayName = "BuiSlide";
+var Slide_miniapp_default = Slide;
+export {
+  Slide_miniapp_default as default
+};

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