@bifrostui/react 1.3.2 → 1.4.0-beta.0

package/es/Toast/FunctionalToast.js

@@ -125,6 +125,24 @@ functionalToast.clear = () => {
     destroyAll();
   });
 };
+const useToast = () => {
+  const holderRef = React.useRef(null);
+  ["warning", "loading", "success", "fail"].forEach((methodName) => {
+    functionalToast[methodName] = (options) => functionalToast(__spreadProps(__spreadValues({
+      type: methodName
+    }, formatProps(options)), {
+      theme: holderRef.current.theme
+    }));
+  });
+  functionalToast.clear = () => {
+    setTimeout(() => {
+      destroyAll();
+    });
+  };
+  const wrapAPI = functionalToast;
+  return [wrapAPI, /* @__PURE__ */ React.createElement(ToastView, { key: "toast-holder", ref: holderRef })];
+};
+functionalToast.useToast = useToast;
 const Toast = functionalToast;
 var FunctionalToast_default = Toast;
 export {

package/es/Toast/Toast.css

@@ -1,30 +1,28 @@
 .bui-toast {
-  --min-width: 86px;
-  --max-width: 80%;
-  --font-size: var(--bui-text-size-1);
-  --color: var(--bui-color-white);
-  --padding: var(--bui-spacing-xl);
-  --word-break: break-all;
-  --z-index: var(--bui-z-index-toast);
-  --position-top: 15%;
-  --position-bottom: 85%;
-  --background-color: rgba(0, 0, 0, 0.8);
-  --border-radius: var(--bui-shape-radius-default);
-  --text-align: center;
+  --min-width: var(--bui-toast-min-width, 86px);
+  --max-width: var(--bui-toast-max-width, 80%);
+  --flex-direction: var(--bui-toast-flex-direction, column);
+  --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
+  --position-top: var(--bui-toast-position-top, 15%);
+  --position-bottom: var(--bui-toast-position-bottom, 85%);
+  --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
+  --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
+  --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
+  --icon-font-size: var(--bui-toast-icon-font-size, 30px);
   position: fixed;
   left: 50%;
-  z-index: var(--z-index);
+  z-index: var(--bui-z-index-toast);
   width: fit-content;
   min-width: var(--min-width);
   max-width: var(--max-width);
   padding: var(--padding);
-  font-size: var(--font-size);
-  color: var(--color);
+  font-size: var(--bui-text-size-1);
+  color: var(--bui-color-white);
   border-radius: var(--border-radius);
-  word-break: var(--word-break);
+  word-break: break-all;
   white-space: pre-wrap;
   background-color: var(--background-color);
-  text-align: var(--text-align);
+  text-align: center;
   font-family: var(--bui-font-family);
 }
 .bui-toast.bui-toast-allow-click {
@@ -46,10 +44,10 @@
 }
 .bui-toast-icon {
   display: flex;
-  flex-direction: column;
+  flex-direction: var(--flex-direction);
   align-items: center;
 }
 .bui-toast-icon .bui-svg-icon {
-  margin-bottom: 8px;
-  font-size: 30px;
+  margin: 0 0 var(--icon-margin);
+  font-size: var(--icon-font-size);
 }

package/es/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastProps } from './Toast.types';
+import { ToastProps, ToastRef } from './Toast.types';
 import './Toast.less';
-declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;
 export default ToastComponent;

package/es/Toast/Toast.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React from "react";
+import React, { useImperativeHandle } from "react";
 import {
   ErrorCircleFilledBoldIcon,
   AccessTimeCircleFilledBoldIcon,
@@ -38,56 +38,60 @@ import {
   SuccessCircleFilledBoldIcon
 } from "@bifrostui/icons";
 import Fade from "../Fade";
+import { useTheme } from "../ThemeProvider";
 import "./Toast.css";
 const prefixCls = "bui-toast";
-const ToastComponent = /* @__PURE__ */ React.forwardRef(
-  (props, ref) => {
-    const _a = props, {
-      className,
-      style,
-      open,
-      type,
-      icon,
-      message,
-      position = "center",
-      disableClick = false
-    } = _a, others = __objRest(_a, [
-      "className",
-      "style",
-      "open",
-      "type",
-      "icon",
-      "message",
-      "position",
-      "disableClick"
-    ]);
-    const iconMap = {
-      fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
-    };
-    const iconDom = iconMap[type] || icon;
-    return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx(
-          prefixCls,
-          `${prefixCls}-${position}`,
-          {
-            [`${prefixCls}-icon`]: !!iconDom,
-            [`${prefixCls}-allow-click`]: !disableClick
-          },
-          className
-        ),
-        ref,
-        style
-      },
-      iconDom,
-      message
-    ));
-  }
-);
+const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    open,
+    type,
+    icon,
+    message,
+    position = "center",
+    disableClick = false,
+    theme
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "open",
+    "type",
+    "icon",
+    "message",
+    "position",
+    "disableClick",
+    "theme"
+  ]);
+  const themeConfig = useTheme(theme);
+  useImperativeHandle(ref, () => {
+    return { theme: themeConfig };
+  }, []);
+  const iconMap = {
+    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+  };
+  const iconDom = iconMap[type] || icon;
+  return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        prefixCls,
+        `${prefixCls}-${position}`,
+        {
+          [`${prefixCls}-icon`]: !!iconDom,
+          [`${prefixCls}-allow-click`]: !disableClick
+        },
+        className
+      ),
+      style
+    },
+    iconDom,
+    message
+  ));
+});
 ToastComponent.displayName = "BuiToast";
 var Toast_default = ToastComponent;
 export {

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { FadeProps } from '../Fade/Fade.types';
+import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
+export type ToastRef = {
+    theme?: ThemeProps;
+};
 /**
  * 提示类型
  */
@@ -36,6 +40,10 @@ export interface ToastProps extends FadeProps {
      * 自定义图标
      */
     icon?: React.ReactNode;
+    /**
+     * theme 主题定制
+     */
+    theme?: ThemeProps;
     /**
      * 展示Toast时，页面内容是否可以点击
      * @default false
@@ -62,7 +70,7 @@ export type ToastReturnType = {
 /**
  * Toast Instance
  */
-export interface ToastInstance {
+export interface ToastFunction {
     (options: ToastOptions): ToastReturnType;
     /**
      * 警告提示
@@ -85,3 +93,9 @@ export interface ToastInstance {
      */
     clear: () => void;
 }
+export interface ToastInstance extends ToastFunction {
+    /**
+     * 获取toast静态方法 & contextHolder
+     */
+    useToast: () => [ToastFunction, React.JSX.Element];
+}

package/es/Tooltip/Tooltip.css

@@ -0,0 +1,91 @@
+.bui-tooltip {
+  --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
+  --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
+  --max-width: var(--bui-tooltip-max-width, 350px);
+  --content-min-width: var(--bui-tooltip-content-min-width, 30px);
+  --content-min-height: var(--bui-tooltip-content-min-height, 32px);
+  --content-padding: var(--bui-tooltip-content-padding, 6px 8px);
+  max-width: var(--max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-tooltip .bui-tooltip-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-tooltip .bui-tooltip-arrow.location-left {
+  left: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-right {
+  right: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-top {
+  top: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-bottom {
+  bottom: var(--localtion-position);
+}
+.bui-tooltip.tooltip-top .location-center,
+.bui-tooltip.tooltip-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-tooltip.tooltip-left .location-center,
+.bui-tooltip.tooltip-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-tooltip.tooltip-top {
+  padding-bottom: var(--arrow-size);
+}
+.bui-tooltip.tooltip-top .bui-tooltip-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-top: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  bottom: 0;
+}
+.bui-tooltip.tooltip-bottom {
+  padding-top: var(--arrow-size);
+}
+.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  top: 0;
+}
+.bui-tooltip.tooltip-left {
+  padding-right: var(--arrow-size);
+}
+.bui-tooltip.tooltip-left .bui-tooltip-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-left: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  right: 0;
+}
+.bui-tooltip.tooltip-right {
+  padding-left: var(--arrow-size);
+}
+.bui-tooltip.tooltip-right .bui-tooltip-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  left: 0;
+}
+.bui-tooltip .bui-tooltip-content {
+  min-width: var(--content-min-width);
+  min-height: var(--content-min-height);
+  padding: var(--content-padding);
+  color: var(--bui-color-white);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-alpha-dark-7);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}

package/es/Tooltip/Tooltip.d.ts

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

package/es/Tooltip/Tooltip.js

@@ -0,0 +1,161 @@
+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 clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+import {
+  getStylesAndLocation,
+  triggerEventTransform,
+  useUniqueId
+} from "@bifrostui/utils";
+import Portal from "../Portal";
+import "./Tooltip.css";
+const prefixCls = "bui-tooltip";
+const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    children,
+    title,
+    defaultOpen,
+    placement = "top",
+    trigger,
+    onOpenChange,
+    open,
+    PortalProps
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "children",
+    "title",
+    "defaultOpen",
+    "placement",
+    "trigger",
+    "onOpenChange",
+    "open",
+    "PortalProps"
+  ]);
+  const controlByUser = typeof open !== "undefined";
+  const positionArr = placement.split(/([A-Z])/);
+  const direction = positionArr[0];
+  let location;
+  if (positionArr.length > 1) {
+    positionArr.splice(0, 1);
+    location = positionArr.join("").toLowerCase();
+  } else {
+    location = "center";
+  }
+  const childrenRef = useRef();
+  const [openStatus, setOpenStatus] = useState(defaultOpen);
+  const [arrowDirection, setArrowDirection] = useState(direction);
+  const [arrowLocation, setArrowLocation] = useState(location);
+  const [tooltyles, setTooltyles] = useState({});
+  const ttId = useUniqueId();
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open);
+  }, [open]);
+  const onRootElementMouted = () => {
+    const result = getStylesAndLocation({
+      childrenRef,
+      arrowDirection,
+      arrowLocation,
+      selector: `[data-id="tt_${ttId}"]`
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setTooltyles(styles);
+  };
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  const triggerClick = (event) => {
+    const targetStatus = !openStatus;
+    changeOpenStatus(event, targetStatus);
+  };
+  const hideTooltip = (event) => {
+    changeOpenStatus(event, false);
+  };
+  const showTooltip = (event) => {
+    changeOpenStatus(event, true);
+  };
+  let triggerEventOption;
+  if (!controlByUser) {
+    triggerEventOption = triggerEventTransform({
+      trigger,
+      click: triggerClick,
+      show: showTooltip,
+      hide: hideTooltip
+    });
+  }
+  const childrenOptions = __spreadValues({
+    ref: childrenRef
+  }, triggerEventOption);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(
+    Portal,
+    __spreadProps(__spreadValues({
+      onRootElementMouted
+    }, PortalProps), {
+      ref
+    }),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
+        style: __spreadValues(__spreadValues({}, style), tooltyles),
+        "data-id": `tt_${ttId}`
+      }, others),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
+        }
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title)
+    )
+  ) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
+});
+Tooltip.displayName = "BuiTooltip";
+var Tooltip_default = Tooltip;
+export {
+  Tooltip_default as default
+};

package/es/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { PortalCoreProps } from '../Portal/Portal.types';
+type triggerType = 'click' | 'hover';
+export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 气泡浮层显示内容
+         */
+        title?: string;
+        /**
+         * 默认是否显隐
+         * @default false
+         */
+        defaultOpen?: boolean;
+        /**
+         * 用于手动控制气泡浮层显隐
+         */
+        open?: boolean;
+        /**
+         * 气泡框位置
+         * @default 'top'
+         */
+        placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+        /**
+         * 触发行为
+         * - click: 点击触发
+         * - hover: hover触发
+         * - 或者是他们的数组
+         * @default 'click'
+         */
+        trigger?: triggerType | triggerType[];
+        /**
+         * Portal组件的属性
+         */
+        PortalProps?: PortalCoreProps;
+        /**
+         * 点击事件回调方法
+         * - event 触发事件
+         * - data.open 浮层显隐状态
+         * @returns
+         */
+        onOpenChange?: (event: React.SyntheticEvent, data: {
+            open: boolean;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export {};

package/es/Tooltip/Tooltip.types.js

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

package/es/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip, default } from './Tooltip';
+export * from './Tooltip.types';

package/es/Tooltip/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./Tooltip";
+export * from "./Tooltip.types";
+export {
+  default2 as Tooltip,
+  default3 as default
+};

package/es/index.d.ts

@@ -7,6 +7,7 @@ export * from './Button';
 export * from './Calendar';
 export * from './Card';
 export * from './Checkbox';
+export * from './Collapse';
 export * from './Divider';
 export * from './Drawer';
 export * from './Fade';
@@ -15,6 +16,7 @@ export * from './Image';
 export * from './Input';
 export * from './List';
 export * from './Modal';
+export * from './Popover';
 export * from './Portal';
 export * from './Progress';
 export * from './Radio';
@@ -32,11 +34,16 @@ export * from './Tabs';
 export * from './Tag';
 export * from './TextArea';
 export * from './Transition';
+export * from './Tooltip';
 export * from './NavBar';
 export * from './Loading';
 export * from './TabBar';
 export * from './Countdown';
 export * from './CitySelector';
 export * from './Picker';
+export * from './CollapsePanel';
+export * from './Breadcrumb';
 export * from './Toast';
 export * from './Dialog';
+export * from './ThemeProvider';
+export * from './locales';

package/es/index.js

@@ -7,6 +7,7 @@ export * from "./Button";
 export * from "./Calendar";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./Collapse";
 export * from "./Divider";
 export * from "./Drawer";
 export * from "./Fade";
@@ -15,6 +16,7 @@ export * from "./Image";
 export * from "./Input";
 export * from "./List";
 export * from "./Modal";
+export * from "./Popover";
 export * from "./Portal";
 export * from "./Progress";
 export * from "./Radio";
@@ -32,11 +34,16 @@ export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";
 export * from "./Transition";
+export * from "./Tooltip";
 export * from "./NavBar";
 export * from "./Loading";
 export * from "./TabBar";
 export * from "./Countdown";
 export * from "./CitySelector";
 export * from "./Picker";
+export * from "./CollapsePanel";
+export * from "./Breadcrumb";
 export * from "./Toast";
 export * from "./Dialog";
+export * from "./ThemeProvider";
+export * from "./locales";

package/es/locales/base.d.ts

@@ -0,0 +1,40 @@
+export interface BaseLang {
+    dialog?: {
+        cancel?: string;
+        confirm?: string;
+        placeholder?: string;
+    };
+    picker?: {
+        cancel?: string;
+        confirm?: string;
+    };
+    calendar?: {
+        Monday?: string;
+        Tuesday?: string;
+        Wednesday?: string;
+        Thursday?: string;
+        Friday?: string;
+        Saturday?: string;
+        Sunday?: string;
+    };
+    input?: {
+        placeholder?: string;
+    };
+    textarea?: {
+        placeholder?: string;
+    };
+    selector?: {
+        select?: string;
+    };
+    citySelector?: {
+        selectedCityGroupName?: string;
+        currentCityGroupName?: string;
+        hotCitiesGroupName?: string;
+        located?: string;
+        current?: string;
+        hot?: string;
+        gpsType?: Record<string, string>;
+        currentType?: Record<string, string>;
+        hotCityType?: Record<string, string>;
+    };
+}