@bifrostui/react 1.2.9-beta.0 → 1.3.0

package/es/Toast/FunctionalToast.js

@@ -0,0 +1,132 @@
+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 { render, unmount, getRootElement } from "@bifrostui/utils";
+import React, { useCallback, useEffect, useState } from "react";
+import ToastView from "./Toast";
+const toastCloses = [];
+const formatProps = (props) => {
+  if (typeof props === "string") {
+    return { message: props };
+  }
+  return props;
+};
+const destroyAll = () => {
+  let closeToast = toastCloses.pop();
+  while (closeToast) {
+    closeToast();
+    closeToast = toastCloses.pop();
+  }
+};
+const functionalToast = (props) => {
+  const options = __spreadValues({
+    duration: 2e3,
+    position: "center",
+    allowMultiple: false,
+    disableClick: false
+  }, formatProps(props));
+  const instance = {
+    close: () => null
+  };
+  const rootWrapper = document.createElement("div");
+  if (options.disableClick) {
+    const styles = {
+      position: "fixed",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      zIndex: "var(--bui-z-index-toast)"
+    };
+    Object.keys(styles).forEach((property) => {
+      rootWrapper.style[property] = styles[property];
+    });
+  }
+  const rootElement = getRootElement();
+  rootElement.appendChild(rootWrapper);
+  const ToastComponent = () => {
+    const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);
+    const [open, setOpen] = useState(false);
+    let timer;
+    const fadeTimeout = {
+      enter: 350,
+      exit: 150
+    };
+    const close = useCallback(() => {
+      setOpen(false);
+      setTimeout(() => {
+        const unmountRes = unmount(rootWrapper);
+        if (unmountRes && rootWrapper.parentNode) {
+          rootWrapper.parentNode.removeChild(rootWrapper);
+        }
+      }, fadeTimeout.exit);
+      onClose == null ? void 0 : onClose();
+    }, [rootWrapper]);
+    useEffect(() => {
+      setOpen(true);
+      if (!allowMultiple)
+        destroyAll();
+      toastCloses.push(close);
+      if (duration !== 0 && typeof duration === "number") {
+        timer = setTimeout(close, duration);
+      }
+      return () => {
+        clearTimeout(timer);
+      };
+    }, []);
+    instance.close = close;
+    return /* @__PURE__ */ React.createElement(
+      ToastView,
+      __spreadProps(__spreadValues({}, others), {
+        open,
+        timeout: fadeTimeout,
+        onClose: close
+      })
+    );
+  };
+  render(/* @__PURE__ */ React.createElement(ToastComponent, null), rootWrapper);
+  return instance;
+};
+["warning", "loading", "success", "fail"].forEach((methodName) => {
+  functionalToast[methodName] = (options) => functionalToast(__spreadValues({
+    type: methodName
+  }, formatProps(options)));
+});
+functionalToast.clear = () => {
+  setTimeout(() => {
+    destroyAll();
+  });
+};
+const Toast = functionalToast;
+var FunctionalToast_default = Toast;
+export {
+  FunctionalToast_default as default
+};

package/es/Toast/Toast.css

@@ -0,0 +1,55 @@
+.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;
+  position: fixed;
+  left: 50%;
+  z-index: var(--z-index);
+  width: fit-content;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  padding: var(--padding);
+  font-size: var(--font-size);
+  color: var(--color);
+  border-radius: var(--border-radius);
+  word-break: var(--word-break);
+  white-space: pre-wrap;
+  background-color: var(--background-color);
+  text-align: var(--text-align);
+  font-family: var(--bui-font-family);
+}
+.bui-toast.bui-toast-allow-click {
+  position: fixed;
+  right: unset;
+  bottom: unset;
+}
+.bui-toast-center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.bui-toast-top {
+  top: var(--position-top);
+  transform: translate(-50%, calc(-1 * var(--position-top)));
+}
+.bui-toast-bottom {
+  top: var(--position-bottom);
+  transform: translate(-50%, calc(-1 * var(--position-bottom)));
+}
+.bui-toast-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bui-toast-icon .bui-svg-icon {
+  margin-bottom: 8px;
+  font-size: 30px;
+}

package/es/Toast/Toast.d.ts

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

package/es/Toast/Toast.js

@@ -0,0 +1,95 @@
+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 from "react";
+import {
+  ErrorCircleFilledBoldIcon,
+  AccessTimeCircleFilledBoldIcon,
+  AlertCircleFilledBoldIcon,
+  SuccessCircleFilledBoldIcon
+} from "@bifrostui/icons";
+import Fade from "../Fade";
+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
+    ));
+  }
+);
+ToastComponent.displayName = "BuiToast";
+var Toast_default = ToastComponent;
+export {
+  Toast_default as default
+};

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { FadeProps } from '../Fade/Fade.types';
+/**
+ * 提示类型
+ */
+export type ToastType = 'loading' | 'success' | 'fail' | 'warning';
+export interface ToastProps extends FadeProps {
+    /**
+     * 是否展示
+     */
+    open?: boolean;
+    /**
+     * 提示类型
+     */
+    type?: ToastType;
+    /**
+     * toast内容，支持使用`\n`换行
+     */
+    message?: string;
+    /**
+     * 展示时长(ms)，值为 0 时，toast 不会消失
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * 展示位置
+     * @default center
+     */
+    position?: 'top' | 'center' | 'bottom';
+    /**
+     * 是否允许同时存在多个Toast
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * 自定义图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * 展示Toast时，页面内容是否可以点击
+     * @default false
+     */
+    disableClick?: boolean;
+    /**
+     * 关闭时的回调函数
+     */
+    onClose?: () => void;
+}
+/**
+ * 函数式调用配置参数
+ */
+export type ToastOptions = Omit<ToastProps, 'type' | 'open'> | string;
+/**
+ * 函数式调用返回值类型
+ */
+export type ToastReturnType = {
+    /**
+     * 关闭当前提示
+     */
+    close: () => void;
+};
+/**
+ * Toast Instance
+ */
+export interface ToastInstance {
+    (options: ToastOptions): ToastReturnType;
+    /**
+     * 警告提示
+     */
+    warning: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 加载提示
+     */
+    loading: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 成功提示
+     */
+    success: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 失败提示
+     */
+    fail: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 清空提示
+     */
+    clear: () => void;
+}

package/es/Toast/Toast.types.js

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

package/es/Toast/index.d.ts

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

package/es/Toast/index.js

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

package/es/Transition/Transition.miniapp.js

@@ -22,7 +22,13 @@ import React from "react";
 import TransitionCore from "./TransitionCore";
 const Transition = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ React.createElement(TransitionCore, __spreadProps(__spreadValues({}, props), { nextTick: Taro.nextTick, ref }));
+    return /* @__PURE__ */ React.createElement(
+      TransitionCore,
+      __spreadProps(__spreadValues({}, props), {
+        nextTick: (cb) => setTimeout(() => Taro.nextTick(cb), 16),
+        ref
+      })
+    );
   }
 );
 Transition.displayName = "BuiTransition";

package/es/index.d.ts

@@ -38,3 +38,5 @@ export * from './TabBar';
 export * from './Countdown';
 export * from './CitySelector';
 export * from './Picker';
+export * from './Toast';
+export * from './Dialog';

package/es/index.js

@@ -38,3 +38,5 @@ export * from "./TabBar";
 export * from "./Countdown";
 export * from "./CitySelector";
 export * from "./Picker";
+export * from "./Toast";
+export * from "./Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.2.9-beta.0",
+  "version": "1.3.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.2.9-beta.0",
-    "@bifrostui/types": "1.2.9-beta.0",
-    "@bifrostui/utils": "1.2.9-beta.0",
-    "@bifrostui/styles": "1.2.9-beta.0"
+    "@bifrostui/styles": "1.3.0",
+    "@bifrostui/types": "1.3.0",
+    "@bifrostui/utils": "1.3.0",
+    "@bifrostui/icons": "1.3.0"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",