@bifrostui/react 1.4.6 → 1.4.7-beta.0

package/es/DesktopPicker/DesktopPicker.js

@@ -0,0 +1,221 @@
+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 clsx from "clsx";
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  getStylesAndLocation,
+  isMini,
+  getRootContainer,
+  useDidMountEffect
+} from "@bifrostui/utils";
+import Backdrop from "../Backdrop";
+import Portal from "../Portal";
+import calcAfterMounted from "./utils/calcAfterMounted";
+import "./index.css";
+const prefixCls = "bui-desktop-picker";
+const directionMap = {
+  bottom: "top",
+  top: "bottom"
+};
+const DesktopPicker = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      open,
+      container,
+      children,
+      defaultDirection = "bottom",
+      inheritWidth = true,
+      content,
+      miniBackdropInvisible = false,
+      onClose,
+      onMount,
+      onUnmounted,
+      containerWidth = "auto",
+      BackdropProps
+    } = _a, others = __objRest(_a, [
+      "className",
+      "open",
+      "container",
+      "children",
+      "defaultDirection",
+      "inheritWidth",
+      "content",
+      "miniBackdropInvisible",
+      "onClose",
+      "onMount",
+      "onUnmounted",
+      "containerWidth",
+      "BackdropProps"
+    ]);
+    const contentRef = useRef(null);
+    const nodeRef = useRef(null);
+    const renderChildren = React.cloneElement(children, {
+      ref: nodeRef
+    });
+    const [contentPosition, setContentPosition] = useState(
+      "bottom"
+    );
+    const [transform, setTransform] = useState(false);
+    const getContentDirection = () => __async(void 0, null, function* () {
+      const curScrollRoot = getRootContainer(container);
+      const result = yield getStylesAndLocation({
+        scrollRoot: container && curScrollRoot,
+        childrenRef: nodeRef,
+        arrowDirection: defaultDirection,
+        arrowLocation: "none",
+        offsetSpacing: 0,
+        tipRef: contentRef
+      });
+      if (!result)
+        return;
+      const { newArrowDirection, styles, childrenStyle } = result;
+      const element = contentRef.current;
+      element.style.transform = styles == null ? void 0 : styles.transform;
+      element.style.visibility = styles == null ? void 0 : styles.visibility;
+      element.style.top = styles == null ? void 0 : styles.top;
+      element.style.left = styles == null ? void 0 : styles.left;
+      if (inheritWidth) {
+        element.style.width = childrenStyle == null ? void 0 : childrenStyle.width;
+      }
+      setContentPosition(newArrowDirection);
+    });
+    useEffect(() => {
+      if (!isMini && open) {
+        const addEventListenerClick = (e) => {
+          var _a2;
+          if (!((_a2 = nodeRef.current) == null ? void 0 : _a2.contains(e.target))) {
+            onClose(null, { value: !open });
+          }
+        };
+        getContentDirection();
+        const containerDom = getRootContainer(container, window);
+        containerDom.addEventListener("scroll", getContentDirection);
+        window.addEventListener("resize", getContentDirection);
+        window.addEventListener("click", addEventListenerClick);
+        return () => {
+          containerDom.removeEventListener("scroll", getContentDirection);
+          window.removeEventListener("resize", getContentDirection);
+          window.removeEventListener("click", addEventListenerClick);
+        };
+      }
+      if (isMini && open) {
+        calcAfterMounted(getContentDirection);
+      }
+    }, [container, open]);
+    const renderContent = () => {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            `${prefixCls}-container`,
+            `${prefixCls}-${contentPosition}`
+          ),
+          style: {
+            width: containerWidth
+          },
+          ref: contentRef
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${prefixCls}-container-${transform && open ? "open" : "close"} ${prefixCls}-container-content`,
+            style: {
+              transformOrigin: `${directionMap[contentPosition]} center`
+            },
+            onTransitionEnd: () => {
+              if (!open) {
+                setTransform(false);
+              }
+            }
+          },
+          content
+        )
+      );
+    };
+    useEffect(() => {
+      if (open) {
+        calcAfterMounted(() => {
+          setTransform(true);
+        });
+      }
+    }, [open]);
+    const renderContainer = useMemo(() => {
+      return open || transform;
+    }, [open, transform]);
+    useDidMountEffect(() => {
+      if (!renderContainer) {
+        onUnmounted == null ? void 0 : onUnmounted();
+      } else {
+        onMount == null ? void 0 : onMount();
+      }
+    }, [renderContainer]);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), renderChildren), !isMini && renderContainer && /* @__PURE__ */ React.createElement(Portal, null, renderContent()), isMini && renderContainer && /* @__PURE__ */ React.createElement(Portal, null, renderContent(), !miniBackdropInvisible && /* @__PURE__ */ React.createElement(
+      Backdrop,
+      __spreadProps(__spreadValues({}, BackdropProps), {
+        invisible: true,
+        open,
+        onClick: (e) => onClose(e, { value: !open })
+      })
+    )));
+  }
+);
+DesktopPicker.displayName = "BUIDesktopPicker";
+var DesktopPicker_default = DesktopPicker;
+export {
+  DesktopPicker_default as default
+};

package/es/DesktopPicker/DesktopPicker.types.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { BackdropProps } from '../Backdrop/Backdrop.types';
+export type DesktopPickerProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 是否继承宽度
+         * @default true
+         */
+        inheritWidth?: boolean;
+        /**
+         * 是否打开
+         */
+        open: boolean;
+        /**
+         * 浮层的内容
+         */
+        content?: React.ReactNode;
+        /**
+         * 浮层宽度
+         */
+        containerWidth?: number;
+        /**
+         * 是否指定滚动容器
+         */
+        container?: HTMLElement | (() => HTMLElement);
+        /**
+         * 小程序是否使用backdrop
+         * @default false
+         */
+        miniBackdropInvisible?: boolean;
+        /**
+         * 关闭浮层
+         */
+        onClose?: (e: React.MouseEvent<any>, data: {
+            value: boolean;
+        }) => void;
+        /**
+         * 打开后动画开始的回调
+         */
+        onMount?: () => void;
+        /**
+         * 卸载后动画结束的回调
+         */
+        onUnmounted?: () => void;
+        /**
+         * 默认的浮层位置
+         * @default bottom
+         */
+        defaultDirection?: 'top' | 'bottom';
+        /**
+         * 透传浮层的Props
+         */
+        BackdropProps?: BackdropProps;
+    };
+    defaultComponent: D;
+}, D>;

package/es/DesktopPicker/DesktopPicker.types.js

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

package/es/DesktopPicker/index.css

@@ -0,0 +1,37 @@
+:root,
+page,
+xhs-page {
+  --bui-desktop-picker-zindex: var(--bui-z-index-tooltip);
+  --bui-desktop-picker-bg: var(--bui-color-bg-view);
+  --bui-desktop-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
+}
+.bui-desktop-picker {
+  position: relative;
+  height: 100%;
+}
+.bui-desktop-picker-container {
+  position: absolute;
+  box-sizing: border-box;
+  visibility: hidden;
+  z-index: var(--bui-desktop-picker-zindex);
+}
+.bui-desktop-picker-container-content {
+  border-radius: 3px;
+  background-color: var(--bui-desktop-picker-bg);
+  box-shadow: var(--bui-desktop-picker-shadow);
+}
+.bui-desktop-picker-container-open {
+  transform: none;
+  transition: opacity 321ms cubic-bezier(0.4, 0, 0.2, 1), transform 214ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.bui-desktop-picker-container-close {
+  opacity: 0;
+  transform: scale(0.75, 0.5625);
+  transition: opacity 321ms cubic-bezier(0.4, 0, 0.2, 1), transform 214ms cubic-bezier(0.4, 0, 0.2, 1) 107ms;
+}
+.bui-desktop-picker-top {
+  margin-top: -6px;
+}
+.bui-desktop-picker-bottom {
+  margin-top: 6px;
+}

package/es/DesktopPicker/index.d.ts

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

package/es/DesktopPicker/index.js

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

package/es/DesktopPicker/utils/calcAfterMounted.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (fn: any) => void;
+export default _default;

package/es/DesktopPicker/utils/calcAfterMounted.js

@@ -0,0 +1,6 @@
+var calcAfterMounted_default = (fn) => {
+  fn();
+};
+export {
+  calcAfterMounted_default as default
+};

package/es/DesktopPicker/utils/calcAfterMounted.miniapp.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (fn: any) => void;
+export default _default;

package/es/DesktopPicker/utils/calcAfterMounted.miniapp.js

@@ -0,0 +1,9 @@
+import Taro from "@tarojs/taro";
+var calcAfterMounted_miniapp_default = (fn) => {
+  Taro.nextTick(() => {
+    fn();
+  });
+};
+export {
+  calcAfterMounted_miniapp_default as default
+};

package/es/DesktopTimePicker/DesktopTimePicker.d.ts

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

package/es/DesktopTimePicker/DesktopTimePicker.js

@@ -0,0 +1,261 @@
+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 { AccessTimeCircleOutlinedIcon } from "@bifrostui/icons";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import clsx from "clsx";
+import React, { useMemo, useState, useEffect } from "react";
+import { useValue } from "@bifrostui/utils";
+import { isDisabledTime, dateToDayjs } from "./utils/utils";
+import DesktopPicker from "../DesktopPicker";
+import useGetTimePickerContent from "./useGetTimePickerContent";
+import "./index.css";
+dayjs.extend(customParseFormat);
+const prefixCls = "bui-d-time-picker";
+const allowedViews = ["hour", "minute", "second"];
+const DesktopTimePicker = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      views = allowedViews,
+      timeSteps = { hour: 1, minute: 1, second: 1 },
+      ampm = false,
+      className,
+      inputRef,
+      inputProps,
+      value,
+      defaultValue,
+      disabled = false,
+      disableOpenPicker = false,
+      placeholder,
+      open,
+      format = ampm ? "hh:mm:ss A" : "HH:mm:ss",
+      disabledTimeView = () => ({
+        hour: () => [],
+        minute: () => [],
+        second: () => []
+      }),
+      minTime,
+      maxTime,
+      icon,
+      closeOnSelect = true,
+      onChange,
+      onClose,
+      onOpen,
+      DesktopPickerProps,
+      timeRender
+    } = _a, others = __objRest(_a, [
+      "views",
+      "timeSteps",
+      "ampm",
+      "className",
+      "inputRef",
+      "inputProps",
+      "value",
+      "defaultValue",
+      "disabled",
+      "disableOpenPicker",
+      "placeholder",
+      "open",
+      "format",
+      "disabledTimeView",
+      "minTime",
+      "maxTime",
+      "icon",
+      "closeOnSelect",
+      "onChange",
+      "onClose",
+      "onOpen",
+      "DesktopPickerProps",
+      "timeRender"
+    ]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputStr, setInputStr] = useState("");
+    const [useUserStr, setUseUserStr] = useState(false);
+    const [isInvalid, setIsInvalid] = useState(false);
+    const [timeValue, triggerChange] = useValue({
+      value,
+      defaultValue,
+      onChange
+    });
+    const handleDatePickerIconClick = (e) => {
+      e.stopPropagation();
+      if (disabled || disableOpenPicker || open !== void 0)
+        return;
+      setIsOpen(!isOpen);
+    };
+    const handleTimePickerInputClick = (e) => {
+      e.stopPropagation();
+      if (inputProps == null ? void 0 : inputProps.readOnly) {
+        if (disabled || disableOpenPicker || open !== void 0)
+          return;
+        setIsOpen(!isOpen);
+        return;
+      }
+      setIsOpen(false);
+    };
+    const { desktopTimePanel } = useGetTimePickerContent({
+      views: Array.from(
+        new Set(views.filter((view) => allowedViews.includes(view)))
+      ),
+      timeSteps,
+      ampm,
+      minTime: dateToDayjs(minTime),
+      maxTime: dateToDayjs(maxTime),
+      setIsOpen,
+      triggerChange,
+      disabledTimeView,
+      timeValue: dateToDayjs(timeValue),
+      onClose,
+      onOpen,
+      closeOnSelect,
+      timeRender,
+      setIsInvalid
+    });
+    const onInputChange = (e) => {
+      e.stopPropagation();
+      const newValue = e.target.value;
+      if (newValue.length === 0) {
+        setInputStr("");
+        setUseUserStr(true);
+        triggerChange(e, null);
+        return;
+      }
+      if (!dayjs(newValue, format, true).isValid()) {
+        setInputStr(newValue);
+        setUseUserStr(true);
+      } else {
+        setInputStr("");
+        setUseUserStr(false);
+        let validTime;
+        if (dateToDayjs(timeValue)) {
+          validTime = dateToDayjs(timeValue);
+        } else if (minTime) {
+          validTime = dateToDayjs(minTime);
+        } else if (maxTime) {
+          validTime = dateToDayjs(maxTime);
+        } else {
+          validTime = dayjs();
+        }
+        const year = validTime.year();
+        const month = validTime.month() + 1;
+        const date = validTime.date();
+        const newTimeValue = dayjs(`${year}-${month}-${date} ${newValue}`);
+        if (isDisabledTime(
+          newTimeValue,
+          dateToDayjs(minTime),
+          dateToDayjs(maxTime),
+          disabledTimeView
+        )) {
+          return;
+        }
+        triggerChange(e, newTimeValue.toDate());
+      }
+    };
+    const onMount = () => {
+      onOpen == null ? void 0 : onOpen();
+    };
+    const unMounted = () => {
+      onClose == null ? void 0 : onClose();
+    };
+    const showPlaceholder = useMemo(
+      () => placeholder || format,
+      [placeholder, format]
+    );
+    const inputValue = useMemo(() => {
+      if (useUserStr) {
+        return inputStr;
+      }
+      if (timeValue) {
+        return dayjs(timeValue).format(format);
+      }
+      return "";
+    }, [timeValue, inputStr, useUserStr, format]);
+    useEffect(() => {
+      setUseUserStr(false);
+    }, [timeValue]);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadProps(__spreadValues({}, others), {
+        className: clsx(prefixCls, className, {
+          [`${prefixCls}-disabled`]: disabled,
+          [`${prefixCls}-active`]: isOpen,
+          [`${prefixCls}-invalid`]: isInvalid
+        }),
+        ref
+      }),
+      /* @__PURE__ */ React.createElement(
+        DesktopPicker,
+        __spreadValues({
+          open: open != null ? open : isOpen,
+          miniBackdropInvisible: open !== void 0,
+          onClose: (e, data) => {
+            setIsOpen(data == null ? void 0 : data.value);
+          },
+          onMount,
+          onUnmounted: unMounted,
+          content: desktopTimePanel(),
+          inheritWidth: false
+        }, DesktopPickerProps),
+        /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, /* @__PURE__ */ React.createElement(
+          "input",
+          __spreadProps(__spreadValues({}, inputProps), {
+            "aria-invalid": true,
+            autoComplete: "off",
+            placeholder: showPlaceholder,
+            type: "text",
+            inputMode: "text",
+            ref: inputRef,
+            className: clsx(`${prefixCls}-content`, {
+              [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
+            }),
+            onBlur: () => setUseUserStr(false),
+            onClick: handleTimePickerInputClick,
+            onChange: onInputChange,
+            value: inputValue
+          })
+        ), /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            onClick: handleDatePickerIconClick,
+            className: `${prefixCls}-icon`
+          },
+          icon || /* @__PURE__ */ React.createElement(AccessTimeCircleOutlinedIcon, { htmlColor: "#9c9ca5" })
+        ))
+      )
+    );
+  }
+);
+DesktopTimePicker.displayName = "BUITimePicker";
+var DesktopTimePicker_default = DesktopTimePicker;
+export {
+  DesktopTimePicker_default as default
+};