@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/es/CollapsePanel/CollapsePanelItem.js

@@ -0,0 +1,85 @@
+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 from "react";
+import clsx from "clsx";
+import { Collapse } from "../Collapse";
+const prefixCls = "bui-collapse-panel-item";
+const CollapsePanelItem = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    label,
+    children,
+    icon,
+    active,
+    onClick
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "label",
+    "children",
+    "icon",
+    "active",
+    "onClick"
+  ]);
+  const isControlledIcon = typeof icon === "function";
+  const getIcon = () => {
+    return typeof icon === "function" ? icon(active) : icon;
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues({
+      className: clsx(prefixCls, active && `${prefixCls}-active`, className),
+      style,
+      ref
+    }, others),
+    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          `${prefixCls}-header-icon`,
+          `${prefixCls}-header-icon-arrow`,
+          {
+            [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
+          }
+        )
+      },
+      getIcon()
+    )),
+    /* @__PURE__ */ React.createElement(Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content` }, children))
+  );
+});
+CollapsePanelItem.displayName = "BuiCollapsePanelItem";
+CollapsePanelItem.defaultProps = {
+  active: false
+};
+var CollapsePanelItem_default = CollapsePanelItem;
+export {
+  CollapsePanelItem_default as default
+};

package/es/CollapsePanel/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './CollapsePanel';
+export { default as CollapsePanel } from './CollapsePanel';
+export { default as CollapsePanelItem } from './CollapsePanelItem';
+export * from './CollapsePanel.types';

package/es/CollapsePanel/index.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./CollapsePanel";
+import { default as default3 } from "./CollapsePanel";
+import { default as default4 } from "./CollapsePanelItem";
+export * from "./CollapsePanel.types";
+export {
+  default3 as CollapsePanel,
+  default4 as CollapsePanelItem,
+  default2 as default
+};

package/es/Countdown/Countdown.css

@@ -2,6 +2,7 @@
   --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
   --color: var(--bui-countdown-color, var(--bui-color-fg-default));
   --font-weight: var(--bui-countdown-font-weight, var(--bui-font-weight-normal));
+  --slice-unit-margin: var(--bui-countdown-slice-unit-margin, 0 2px);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -34,5 +35,5 @@
     sans-serif;
 }
 .bui-countdown-slice-unit {
-  margin: 0 2px;
+  margin: var(--slice-unit-margin);
 }

package/es/Countdown/Countdown.js

@@ -82,6 +82,9 @@ const Countdown = forwardRef((props, ref) => {
     if (serverTimestamp && endTimestamp) {
       setStartTime(serverTimestamp);
       setEndTime(endTimestamp);
+    } else if (endTimestamp) {
+      setStartTime(Date.now());
+      setEndTime(endTimestamp);
     }
   }, [serverTimestamp, endTimestamp]);
   const defaultRender = (timeIns) => {

package/es/Dialog/Dialog.d.ts

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

package/es/Dialog/Dialog.js

@@ -0,0 +1,125 @@
+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, { useImperativeHandle, useRef } from "react";
+import { Input } from "../Input";
+import { Button } from "../Button";
+import { useLocaleText } from "../locales";
+import Modal from "../Modal";
+import { useTheme } from "../ThemeProvider";
+import "./index.css";
+const prefixCls = "bui-dialog";
+const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    open,
+    onOk,
+    onClose,
+    header,
+    message,
+    type,
+    confirmText,
+    cancelText,
+    placeholder,
+    InputProps,
+    className,
+    theme
+  } = _a, others = __objRest(_a, [
+    "open",
+    "onOk",
+    "onClose",
+    "header",
+    "message",
+    "type",
+    "confirmText",
+    "cancelText",
+    "placeholder",
+    "InputProps",
+    "className",
+    "theme"
+  ]);
+  const InputRef = useRef(null);
+  const themeConfig = useTheme(theme);
+  const {
+    cancel,
+    confirm,
+    placeholder: placeholderLocaleName
+  } = useLocaleText("dialog", themeConfig);
+  useImperativeHandle(ref, () => {
+    return { theme: themeConfig };
+  });
+  const footerNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "text",
+      onClick: onClose,
+      className: `${prefixCls}-body-button`
+    },
+    cancelText || cancel
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "text",
+      color: "primary",
+      onClick: () => {
+        var _a2;
+        onOk((_a2 = InputRef == null ? void 0 : InputRef.current) == null ? void 0 : _a2.value);
+      },
+      className: `${prefixCls}-body-button`
+    },
+    confirmText || confirm
+  ));
+  const inputNode = type === "prompt" && /* @__PURE__ */ React.createElement(
+    Input,
+    __spreadProps(__spreadValues({}, InputProps), {
+      inputRef: InputRef,
+      className: `${prefixCls}-body-input`,
+      placeholder: `${placeholder || placeholderLocaleName}`
+    })
+  );
+  if (!open)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    __spreadProps(__spreadValues({}, others), {
+      open: true,
+      className: clsx(prefixCls, className),
+      disablePortal: true,
+      onClose
+    }),
+    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ React.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
+  );
+});
+Dialog.displayName = "BuiDialog";
+var Dialog_default = Dialog;
+export {
+  Dialog_default as default
+};

package/es/Dialog/Dialog.types.d.ts

@@ -0,0 +1,109 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '../Modal/Modal.types';
+import { InputProps } from '../Input/Input.types';
+import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
+/**
+ * 对话框类型
+ */
+export type DialogType = 'confirm' | 'prompt';
+export type Dispatch = (action: boolean, val?: string) => void;
+export type DialogRef = {
+    theme?: ThemeProps;
+};
+export interface DialogProps extends ModalProps {
+    /**
+     * 对话框类型
+     * @default confirm
+     */
+    type?: DialogType;
+    /**
+     * 自定义标题
+     */
+    header?: ReactNode;
+    /**
+     * 自定义内容
+     */
+    message?: ReactNode;
+    /**
+     * 输入框占位文本
+     */
+    placeholder?: string;
+    /**
+     * 透传给内部Input组件的属性
+     */
+    InputProps?: Partial<InputProps>;
+    /**
+     * 确认文本内容
+     */
+    confirmText?: ReactNode;
+    /**
+     * 取消文本内容
+     */
+    cancelText?: ReactNode;
+    /**
+     * theme 主题定制
+     */
+    theme?: ThemeProps;
+    /**
+     * 确认回调
+     */
+    onOk?: (val?: string) => void;
+    /**
+     * 取消回调
+     */
+    onClose?: () => void;
+}
+/**
+ * 函数式调用配置参数
+ */
+export type DialogOptions = Omit<DialogProps, 'placeholder' | 'inputProps' | 'onOk' | 'onClose'> & {
+    /**
+     * 确认回调
+     */
+    onConfirm?: (val?: string) => void | Promise<void>;
+    /**
+     * 取消回调
+     */
+    onCancel?: () => void | Promise<void>;
+};
+/**
+ * prompt函数式调用配置参数
+ */
+export type PromptOptions = (DialogOptions & {
+    /**
+     * 输入框占位文本
+     */
+    placeholder?: string;
+    /**
+     * 内部<input>标签的标准属性
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}) | string;
+/**
+ * confirm函数式调用配置参数
+ */
+export type ConfirmOptions = DialogOptions | string;
+/**
+ * Dialog函数式调用返回值类型
+ */
+export type DialogPromise = Promise<boolean | string>;
+/**
+ * Dialog Instance
+ */
+export interface DialogFunction {
+    /**
+     * 直接调用显示确认框 Dialog
+     */
+    (options: ConfirmOptions): DialogPromise;
+    /**
+     * 显示确认框 Dialog.confirm
+     */
+    confirm?: (options: ConfirmOptions) => DialogPromise;
+    /**
+     * 显示提示对话框 Dialog.prompt
+     */
+    prompt?: (options: PromptOptions, val?: string) => DialogPromise;
+}
+export interface DialogInstance extends DialogFunction {
+    useDialog: () => [DialogFunction, React.JSX.Element];
+}

package/es/Dialog/Dialog.types.js

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

package/es/Dialog/FunctionalDialog.d.ts

@@ -0,0 +1,3 @@
+import { DialogInstance } from './Dialog.types';
+declare const Dialog: DialogInstance;
+export default Dialog;

package/es/Dialog/FunctionalDialog.js

@@ -0,0 +1,177 @@
+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;
+};
+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, { useCallback, useEffect, useState } from "react";
+import { getRootElement, render, unmount } from "@bifrostui/utils";
+import Popup from "./Dialog";
+const { isValidElement, Component } = React;
+const formatProps = (props) => {
+  if (typeof props === "string" || isValidElement(props)) {
+    return { message: props };
+  }
+  return props;
+};
+const DialogGenerator = (options) => {
+  const rootWrapper = document.createElement("div");
+  const rootElement = getRootElement();
+  rootElement.appendChild(rootWrapper);
+  const DialogComponent = () => {
+    const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);
+    const [visible, setVisible] = useState(false);
+    const close = useCallback(() => {
+      setVisible(false);
+      setTimeout(() => {
+        const unmountRes = unmount(rootWrapper);
+        if (unmountRes && rootWrapper.parentNode) {
+          rootWrapper.parentNode.removeChild(rootWrapper);
+        }
+      }, 150);
+    }, [rootWrapper]);
+    useEffect(() => {
+      setVisible(true);
+    }, []);
+    const dispatch = (action, val) => __async(void 0, null, function* () {
+      if (action === true) {
+        try {
+          yield onConfirm == null ? void 0 : onConfirm(val);
+        } catch (error) {
+        }
+      } else if (action === false) {
+        try {
+          yield onCancel == null ? void 0 : onCancel();
+        } catch (error) {
+        }
+      }
+      close();
+    });
+    return /* @__PURE__ */ React.createElement(
+      Popup,
+      __spreadProps(__spreadValues({
+        ref
+      }, others), {
+        open: visible,
+        onOk: (val) => dispatch(true, val),
+        onClose: () => dispatch(false)
+      })
+    );
+  };
+  return render(/* @__PURE__ */ React.createElement(DialogComponent, null), rootWrapper);
+};
+const Dialog = (props) => {
+  const options = formatProps(props);
+  const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
+  return new Promise((resolve) => {
+    DialogGenerator(__spreadProps(__spreadValues({}, rest), {
+      onConfirm: (val) => __async(void 0, null, function* () {
+        yield onConfirm == null ? void 0 : onConfirm(val);
+        if (rest.type === "prompt")
+          resolve(val);
+        else
+          resolve(true);
+      }),
+      onCancel: () => __async(void 0, null, function* () {
+        yield onCancel == null ? void 0 : onCancel();
+        resolve(false);
+      })
+    }));
+  });
+};
+Dialog.prototype = Component.prototype;
+const confirm = (options) => {
+  return Dialog(__spreadValues({
+    type: "confirm"
+  }, formatProps(options)));
+};
+const prompt = (options) => {
+  return Dialog(__spreadValues({
+    type: "prompt"
+  }, formatProps(options)));
+};
+const useDialog = () => {
+  const holderRef = React.useRef(null);
+  const wrapAPI = (props) => {
+    const options = __spreadValues({ theme: holderRef.current.theme }, formatProps(props));
+    const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
+    return new Promise((resolve) => {
+      DialogGenerator(__spreadProps(__spreadValues({}, rest), {
+        onConfirm: (val) => __async(void 0, null, function* () {
+          yield onConfirm == null ? void 0 : onConfirm(val);
+          if (rest.type === "prompt")
+            resolve(val);
+          else
+            resolve(true);
+        }),
+        onCancel: () => __async(void 0, null, function* () {
+          yield onCancel == null ? void 0 : onCancel();
+          resolve(false);
+        })
+      }));
+    });
+  };
+  wrapAPI.confirm = (options) => Dialog(__spreadProps(__spreadValues({
+    type: "confirm"
+  }, formatProps(options)), {
+    theme: holderRef.current.theme
+  }));
+  wrapAPI.prompt = (options) => Dialog(__spreadProps(__spreadValues({
+    type: "prompt"
+  }, formatProps(options)), {
+    theme: holderRef.current.theme
+  }));
+  return [wrapAPI, /* @__PURE__ */ React.createElement(Popup, { key: "dialog-holder", ref: holderRef })];
+};
+Dialog.confirm = confirm;
+Dialog.prompt = prompt;
+Dialog.useDialog = useDialog;
+var FunctionalDialog_default = Dialog;
+export {
+  FunctionalDialog_default as default
+};

package/es/Dialog/index.css

@@ -0,0 +1,75 @@
+.bui-dialog {
+  --max-width: var(--bui-dialog-max-width, 300px);
+  --border-radius: var(--bui-dialog-border-radius, var(--bui-shape-radius-drawer));
+  --title-padding: var(--bui-dialog-title-padding, 0 40px 9px);
+  --desc-padding: var(--bui-dialog-desc-padding, 0 24px);
+  --footer-margin-top: var(--bui-dialog-footer-margin-top, 15px);
+  --button-height: var(--bui-dialog-button-height, 53px);
+  --button-line-height: var(--bui-dialog-button-line-height, 25px);
+  --button-padding: var(--bui-dialog-button-padding, 12px 0 13px);
+  --button-font-size: var(--bui-dialog-button-font-size, 17px);
+  --button-border-left: var(--bui-dialog-button-border-left, 1px solid rgba(0, 0, 0, 0.05));
+  --button-active-background-color: var(--bui-dialog-button-active-background-color, rgba(54, 57, 64, 0.05));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-dialog-body {
+  padding-top: 21px;
+  min-width: var(--max-width);
+  margin: 0 auto;
+  border-radius: var(--border-radius);
+  background-clip: padding-box;
+  background-color: var(--bui-color-bg-view);
+  line-height: 21px;
+}
+.bui-dialog-body-title {
+  padding: var(--title-padding);
+  font-size: var(--bui-title-size-2);
+  text-align: center;
+  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-medium);
+}
+.bui-dialog-body-title + .bui-dialog-body-footer {
+  margin-top: var(--bui-spacing-sm);
+}
+.bui-dialog-body-desc {
+  padding: var(--desc-padding);
+  color: var(--bui-color-fg-muted);
+  font-size: var(--bui-title-size-4);
+  text-align: center;
+}
+.bui-dialog-body-desc:first-child {
+  padding-top: 0;
+}
+.bui-dialog-body-footer {
+  margin-top: var(--footer-margin-top);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  display: -webkit-box;
+  display: flex;
+}
+.bui-dialog-body-input {
+  width: calc(100% - 48px);
+  margin: 14px 24px 0;
+}
+.bui-dialog-body-button {
+  flex: 1;
+  display: block;
+  width: 100%;
+  height: var(--button-height);
+  line-height: var(--button-line-height);
+  padding: var(--button-padding);
+  font-size: var(--button-font-size);
+  border: 0;
+  outline: 0;
+  border-left: var(--button-border-left);
+  border-radius: 0;
+  text-align: center;
+  box-sizing: border-box;
+}
+.bui-dialog-body-button:first-child {
+  border: none;
+}
+.bui-dialog-body-button:active {
+  background-color: var(--button-active-background-color);
+}

package/es/Dialog/index.d.ts

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

package/es/Dialog/index.js

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

package/es/Divider/Divider.css

@@ -1,18 +1,20 @@
 .bui-divider {
   --height: var(--bui-divider-height, 100%);
   --width: var(--bui-divider-width, 100%);
+  --border-width: var(--bui-divider-border-width, 1px);
+  --line-width: var(--bui-divider-line-width, 40px);
   border-color: var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
 .bui-divider-vertical {
   height: var(--height);
   display: inline-block;
-  border-right-width: 1px;
+  border-right-width: var(--border-width);
   border-right-style: solid;
 }
 .bui-divider-horizontal {
   width: var(--width);
-  border-bottom-width: 1px;
+  border-bottom-width: var(--border-width);
   border-bottom-style: solid;
 }
 .bui-divider-vertical-dashed {
@@ -29,8 +31,8 @@
   justify-content: center;
 }
 .bui-divider-line {
-  width: 40px;
-  border-bottom-width: 1px;
+  width: var(--line-width);
+  border-bottom-width: var(--border-width);
   border-bottom-style: solid;
   border-color: var(--bui-color-border-default);
 }