@bifrostui/react 2.0.0-beta.10 → 2.0.0-beta.11

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,4 @@
+/// <reference types="react" />
+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;

package/es/SwipeAction/SwipeActionItem.js

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

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

package/es/SwipeAction/constants.js

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

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

@@ -0,0 +1,12 @@
+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/Tabs.js

@@ -31,9 +31,10 @@ import clsx from "clsx";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
-import bound from "./utils/bound";
+import scrollLeftTo from "./utils/scroll";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
+const duration = 300;
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
   const tabsRef = useRef(null);
@@ -46,14 +47,11 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const animate = useEventCallback(() => {
+  const getActiveTabElement = () => {
     const container = tabsRef.current;
     if (!container)
-      return;
+      return void 0;
     const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
-    const activeLine = activeLineRef.current;
-    if (!activeLine)
-      return;
     let activeTab;
     if (tabs.length) {
       activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
@@ -67,6 +65,25 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
         return [...child.classList].includes("bui-tab-active");
       });
     }
+    return activeTab;
+  };
+  const scrollIntoView = () => {
+    const tabsContainer = tabsRef.current;
+    const activeTab = getActiveTabElement();
+    if (!tabsContainer || !activeTab) {
+      return;
+    }
+    const to = activeTab.offsetLeft - (tabsContainer.offsetWidth - activeTab.offsetWidth) / 2;
+    scrollLeftTo(tabsContainer, to, duration);
+  };
+  const animate = useEventCallback(() => {
+    const container = tabsRef.current;
+    if (!container)
+      return;
+    const activeLine = activeLineRef.current;
+    if (!activeLine)
+      return;
+    const activeTab = getActiveTabElement();
     let activeTabLeft = 0;
     let activeTabWidth = 0;
     let containerWidth = 0;
@@ -88,13 +105,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0 || !activeTab)
       return;
-    const nextScrollLeft = bound(
-      activeTabLeft - (containerWidth - activeTabWidth) / 2,
-      0,
-      containerScrollWidth - containerWidth
-    );
-    if (tabsRef.current) {
-      tabsRef.current.scrollLeft = nextScrollLeft;
+    if (!isMini) {
+      scrollIntoView();
     }
   });
   const updateMask = useMemo(
@@ -105,7 +117,10 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
           return;
         const scrollLeft = container == null ? void 0 : container.scrollLeft;
         const showLeftMask = scrollLeft > 0;
-        const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+        const rightRange = Math.abs(
+          container.scrollWidth - (scrollLeft + container.offsetWidth)
+        );
+        const showRightMask = rightRange > 1;
         setMaskData({
           leftMaskOpacity: showLeftMask ? 1 : 0,
           rightMaskOpacity: showRightMask ? 1 : 0

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

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

package/es/Tabs/utils/scroll.js

@@ -0,0 +1,36 @@
+const root = window || global;
+let rafId;
+let prev = Date.now();
+const rafPolyfill = (fn) => {
+  const curr = Date.now();
+  const ms = Math.max(0, 16 - (curr - prev));
+  const id = setTimeout(fn, ms);
+  prev = curr + ms;
+  return id;
+};
+const cancelRaf = (id) => {
+  const cancelAnimationFrame = (root == null ? void 0 : root.cancelAnimationFrame) || (root == null ? void 0 : root.clearTimeout) || clearTimeout;
+  cancelAnimationFrame.call(root, id);
+};
+const raf = (fn) => {
+  const requestAnimationFrame = (root == null ? void 0 : root.requestAnimationFrame) || rafPolyfill;
+  return requestAnimationFrame.call(root, fn);
+};
+const scrollLeftTo = (scroller, to, duration) => {
+  cancelRaf(rafId);
+  let count = 0;
+  const from = scroller.scrollLeft;
+  const frames = duration === 0 ? 1 : Math.round(duration / 16);
+  function animate() {
+    scroller.scrollLeft += (to - from) / frames;
+    count += 1;
+    if (count < frames) {
+      rafId = raf(animate);
+    }
+  }
+  animate();
+};
+var scroll_default = scrollLeftTo;
+export {
+  scroll_default as default
+};

package/es/Toast/FunctionalToast.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { render, unmount, getRootElement } from "@bifrostui/utils";
+import { render, unmount, getRootContainer } from "@bifrostui/utils";
 import React, { useCallback, useEffect, useState } from "react";
 import ToastView from "./Toast";
 let toastCloses = [];
@@ -70,10 +70,21 @@ const functionalToast = (props) => {
       rootWrapper.style[property] = styles[property];
     });
   }
-  const rootElement = getRootElement();
+  const rootElement = getRootContainer(options == null ? void 0 : options.container);
   rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
-    const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);
+    const _a = options, {
+      duration,
+      allowMultiple,
+      onClose,
+      container: container
+    } = _a, others = __objRest(_a, [
+      "duration",
+      "allowMultiple",
+      "onClose",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      "container"
+    ]);
     const [open, setOpen] = useState(false);
     let timer;
     const fadeTimeout = {

package/es/Toast/Toast.css

@@ -13,7 +13,6 @@
   position: fixed;
   left: 50%;
   z-index: var(--bui-z-index-toast);
-  width: fit-content;
   min-width: var(--min-width);
   max-width: var(--max-width);
   padding: var(--padding);

package/es/Toast/Toast.types.d.ts

@@ -49,6 +49,11 @@ export interface ToastProps extends FadeProps {
      * @default false
      */
     disableClick?: boolean;
+    /**
+     * 渲染Toast的根容器
+     * @default document.body
+     */
+    container?: HTMLElement | (() => HTMLElement);
     /**
      * 关闭时的回调函数
      */

package/es/Tooltip/Tooltip.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 "./Tooltip.css";
@@ -48,8 +69,8 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     offsetSpacing = 0,
     placement = "top",
     trigger = "click",
-    onOpenChange,
-    open
+    open,
+    onOpenChange
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -59,8 +80,8 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "offsetSpacing",
     "placement",
     "trigger",
-    "onOpenChange",
-    "open"
+    "open",
+    "onOpenChange"
   ]);
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = parsePlacement(placement);
@@ -68,11 +89,18 @@ const Tooltip = /* @__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 });
   };
@@ -91,23 +119,33 @@ const Tooltip = /* @__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;
     hideTooltip(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;
@@ -118,26 +156,32 @@ const Tooltip = /* @__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 (!openStatus)
+        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]);
   let triggerEventOption;
   if (!controlByUser) {
     triggerEventOption = triggerEventTransform({
@@ -150,12 +194,12 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted }, /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
-      style: __spreadValues(__spreadValues({}, style), tooltyles),
-      "data-id": `tt_${ttId}`
+      style: __spreadValues(__spreadValues({}, style), toolStyles),
+      ref: nodeRef
     }, others),
     /* @__PURE__ */ React.createElement(
       "div",

package/es/index.d.ts

@@ -8,6 +8,11 @@ export * from './Calendar';
 export * from './Card';
 export * from './Checkbox';
 export * from './Collapse';
+export * from './DatePicker';
+export * from './DesktopDatePicker';
+export * from './DesktopTimePicker';
+export * from './DesktopDateTimePicker';
+export * from './DesktopPicker';
 export * from './Divider';
 export * from './Drawer';
 export * from './Fade';
@@ -48,3 +53,4 @@ export * from './Toast';
 export * from './Dialog';
 export * from './ThemeProvider';
 export * from './locales';
+export * from './SwipeAction';

package/es/index.js

@@ -8,6 +8,11 @@ export * from "./Calendar";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./Collapse";
+export * from "./DatePicker";
+export * from "./DesktopDatePicker";
+export * from "./DesktopTimePicker";
+export * from "./DesktopDateTimePicker";
+export * from "./DesktopPicker";
 export * from "./Divider";
 export * from "./Drawer";
 export * from "./Fade";
@@ -48,3 +53,4 @@ export * from "./Toast";
 export * from "./Dialog";
 export * from "./ThemeProvider";
 export * from "./locales";
+export * from "./SwipeAction";

package/es/locales/base.d.ts

@@ -37,4 +37,15 @@ export interface BaseLang {
         currentType?: Record<string, string>;
         hotCityType?: Record<string, string>;
     };
+    desktopDatePicker?: {
+        month?: Record<number, string>;
+    };
+    datePicker?: {
+        year: string;
+        month: string;
+        day: string;
+        hour: string;
+        minute: string;
+        second: string;
+    };
 }