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

package/dist/Slide/Slide.miniapp.js

@@ -0,0 +1,213 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+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);
+var Slide_miniapp_exports = {};
+__export(Slide_miniapp_exports, {
+  default: () => Slide_miniapp_default
+});
+module.exports = __toCommonJS(Slide_miniapp_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_index = require("./index.css");
+const defaultEasing = {
+  enter: import_utils.easing.easeOut,
+  exit: import_utils.easing.sharp
+};
+const defaultTimeout = {
+  enter: import_utils.duration.enteringScreen,
+  exit: import_utils.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__ */ import_react.default.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 = (0, import_react.useRef)(inProp || !mountOnEnter);
+    const [isMounted, setIsMounted] = (0, import_react.useState)(inProp || !mountOnEnter);
+    const elementRef = (0, import_react.useRef)(null);
+    const handleRef = (0, import_utils.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 = (0, import_utils.createTransitions)();
+    const animationName = getAnimationName(direction, inProp);
+    const animationDurationAndDelay = getAnimationDurationAndDelay();
+    const animation = (0, import_react.useMemo)(
+      () => transitions.create(
+        animationName,
+        (0, import_utils.getTransitionProps)(
+          __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+            style,
+            easing: easingProp
+          }),
+          { mode: inProp ? "enter" : "exit" }
+        )
+      ),
+      [inProp]
+    );
+    (0, import_react.useEffect)(() => {
+      if (inProp && !isMounted) {
+        setIsMounted(true);
+      }
+    }, [inProp, isMounted]);
+    (0, import_react.useEffect)(() => {
+      if (isMounted && isFirstMount.current) {
+        isFirstMount.current = false;
+      }
+    }, [isMounted]);
+    (0, import_react.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]);
+    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 import_react.default.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;

package/dist/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/dist/Slider/Slider.js

@@ -128,7 +128,6 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const value = shouldProtection ? latestVal.current : valueProp;
   const [rootRef, setRootRef] = (0, import_react.useState)(null);
   const handleRef = (0, import_utils.useForkRef)(ref, setRootRef);
-  (0, import_utils.useTouchEmulator)(rootRef);
   const sliderRect = (0, import_react.useRef)();
   const touchStartPageX = (0, import_react.useRef)();
   const touchStartLeft = (0, import_react.useRef)();
@@ -199,9 +198,7 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       return;
     beforeMoveValue.current = internalValue;
     tooltipRef.current = internalValue;
-    if (!sliderRect.current.width) {
-      getLineWidth();
-    }
+    getLineWidth();
     const currentTarget = import_utils.isMini ? e.mpEvent.currentTarget : e.currentTarget;
     touchStartPageX.current = e.touches[0].pageX;
     touchStartLeft.current = currentTarget == null ? void 0 : currentTarget.offsetLeft;
@@ -260,6 +257,16 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     setFrontTooltipVisible(false);
     setEndTooltipVisible(false);
   };
+  const onMouseUp = (e) => {
+    (0, import_utils.emulateTouchEnd)(e);
+    document.removeEventListener("mousemove", import_utils.emulateTouchMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  const onMouseDown = (e) => {
+    (0, import_utils.emulateTouchStart)(e);
+    document.addEventListener("mousemove", import_utils.emulateTouchMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
   const renderButton = (index) => {
     const valuenow = internalValue[index];
     return /* @__PURE__ */ import_react.default.createElement(
@@ -282,7 +289,8 @@ const Slider = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         },
         onTouchMove,
         onTouchEnd,
-        onTouchCancel: onTouchEnd
+        onTouchCancel: onTouchEnd,
+        onMouseDown
       },
       index === SLIDER_BUTTON.FRONT ? startIcon || defaultIcon : endIcon || defaultIcon
     );

package/dist/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/dist/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/dist/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;