@bifrostui/react 1.4.8-beta.0 → 2.0.0-beta.1

package/es/SwipeAction/SwipeAction.css

@@ -1,79 +0,0 @@
-: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

@@ -1,5 +0,0 @@
-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

@@ -1,334 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

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

package/es/SwipeAction/SwipeActionContext.d.ts

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

package/es/SwipeAction/SwipeActionContext.js

@@ -1,11 +0,0 @@
-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

@@ -1,31 +0,0 @@
-.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

@@ -1,5 +0,0 @@
-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;

package/es/SwipeAction/SwipeActionItem.js

@@ -1,78 +0,0 @@
-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;
-};
-import React, { useContext } from "react";
-import clsx from "clsx";
-import BuiSwipeActionContext from "./SwipeActionContext";
-import "./SwipeActionItem.css";
-const prefixCls = "bui-swipe-action-item";
-const SwipeActionItem = /* @__PURE__ */ React.forwardRef(
-  (props, ref) => {
-    const _a = props, {
-      className,
-      children,
-      onClick,
-      color = "primary",
-      id = ""
-    } = _a, others = __objRest(_a, [
-      "className",
-      "children",
-      "onClick",
-      "color",
-      "id"
-    ]);
-    const { closeOnClickActionItem, close } = useContext(BuiSwipeActionContext);
-    const onClickHandle = (e) => {
-      e.stopPropagation();
-      if (closeOnClickActionItem) {
-        close == null ? void 0 : close();
-      }
-      onClick == null ? void 0 : onClick(e, {
-        color,
-        id,
-        text: children
-      });
-    };
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      __spreadValues({
-        className: clsx(prefixCls, className, {
-          [`${prefixCls}-${color}`]: color
-        }),
-        ref,
-        onClick: onClickHandle
-      }, others),
-      children
-    );
-  }
-);
-SwipeActionItem.displayName = "SwipeActionItem";
-var SwipeActionItem_default = SwipeActionItem;
-export {
-  SwipeActionItem_default as default
-};

package/es/SwipeAction/constants.d.ts

@@ -1,9 +0,0 @@
-export declare enum SideTypeEnum {
-    LEFT = "left",
-    RIGHT = "right"
-}
-export declare enum DragPhaseEnum {
-    START = 1,
-    MOVE = 2,
-    END = 3
-}

package/es/SwipeAction/constants.js

@@ -1,15 +0,0 @@
-var SideTypeEnum = /* @__PURE__ */ ((SideTypeEnum2) => {
-  SideTypeEnum2["LEFT"] = "left";
-  SideTypeEnum2["RIGHT"] = "right";
-  return SideTypeEnum2;
-})(SideTypeEnum || {});
-var DragPhaseEnum = /* @__PURE__ */ ((DragPhaseEnum2) => {
-  DragPhaseEnum2[DragPhaseEnum2["START"] = 1] = "START";
-  DragPhaseEnum2[DragPhaseEnum2["MOVE"] = 2] = "MOVE";
-  DragPhaseEnum2[DragPhaseEnum2["END"] = 3] = "END";
-  return DragPhaseEnum2;
-})(DragPhaseEnum || {});
-export {
-  DragPhaseEnum,
-  SideTypeEnum
-};

package/es/SwipeAction/index.d.ts

@@ -1,5 +0,0 @@
-export * from './SwipeAction.types';
-export { default } from './SwipeAction';
-export { default as SwipeAction } from './SwipeAction';
-export { default as SwipeActionItem } from './SwipeActionItem';
-export { SideTypeEnum, DragPhaseEnum } from './constants';

package/es/SwipeAction/index.js

@@ -1,12 +0,0 @@
-export * from "./SwipeAction.types";
-import { default as default2 } from "./SwipeAction";
-import { default as default3 } from "./SwipeAction";
-import { default as default4 } from "./SwipeActionItem";
-import { SideTypeEnum, DragPhaseEnum } from "./constants";
-export {
-  DragPhaseEnum,
-  SideTypeEnum,
-  default3 as SwipeAction,
-  default4 as SwipeActionItem,
-  default2 as default
-};

package/es/Tabs/utils/scroll.d.ts

@@ -1,2 +0,0 @@
-declare const scrollLeftTo: (scroller: HTMLElement, to: number, duration: number) => void;
-export default scrollLeftTo;