@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -0,0 +1,163 @@
+import React, { Ref } from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { DesktopPickerProps } from '../DesktopPicker';
+import { CalendarProps } from '../Calendar';
+export type IDateTimePickerValue = Date | null;
+export interface IDateTimePickerInstance {
+    /** 日期对象 */
+    day: Date;
+    /** 是否禁用 */
+    disabled: boolean;
+}
+export interface IDateTimePickerCustomIconProps {
+    /**
+     * 是否是最小时间
+     */
+    isMinMonth?: boolean;
+    /**
+     * 是否是最大时间
+     */
+    isMaxMonth?: boolean;
+}
+export interface IDateTimePickerCalendarProps {
+    /**
+     * 是否隐藏当前月之外的日期，默认为false
+     */
+    hideDaysOutsideCurrentMonth?: boolean;
+    /**
+     * 高亮的日期，默认为today
+     * today 若选中的非当天，则当天高亮显示，若选中的是当天，则当天展示选中态
+     * weekend 可选的周末高亮显示
+     */
+    highlightDate?: 'today' | 'weekend';
+    /**
+     * 自定义日期单元格的内容
+     */
+    dateRender?: (currentDate: IDateTimePickerInstance) => React.ReactNode;
+    /**
+     * 自定义周单元格的内容
+     */
+    weekRender?: (week: string) => React.ReactNode;
+}
+export type DateTimePickerProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 默认选中的值，当组件非受控时使用
+         */
+        defaultValue?: IDateTimePickerValue;
+        /**
+         * 选中的值，当组件受控时使用
+         */
+        value?: IDateTimePickerValue;
+        /**
+         * 输入框占位内容
+         */
+        placeholder?: string;
+        /**
+         * 可选择的最小日期，默认为当前日期
+         * 渲染指定月时：value=null并指定minDate
+         */
+        minDate?: Date;
+        /**
+         * 可选择的最大日期，默认为当前日期的一年后
+         */
+        maxDate?: Date;
+        /**
+         * 弹层是否打开
+         */
+        open?: boolean;
+        /**
+         * 输入框icon
+         */
+        icon?: React.ReactNode;
+        /**
+         * inputRef
+         */
+        inputRef?: Ref<HTMLInputElement>;
+        /**
+         * inputProp
+         */
+        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+        /**
+         * 选择器类型
+         */
+        views?: Array<'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;
+        /**
+         * 头部操作栏左边图标
+         */
+        headerBarLeftIcon?: (options: IDateTimePickerCustomIconProps) => React.ReactNode;
+        /**
+         * 头部操作栏右边图标
+         */
+        headerBarRightIcon?: (options: IDateTimePickerCustomIconProps) => React.ReactNode;
+        /**
+         * 是否禁用日期选择器
+         */
+        disabled?: boolean;
+        /**
+         * 不可选择的日期
+         */
+        disabledDate?: (currentDate: Date) => boolean;
+        /**
+         * 自定义月份单元格的内容
+         */
+        monthRender?: ({ month, currentDate, }: {
+            month: string | number;
+            currentDate: IDateTimePickerInstance;
+        }) => React.ReactNode;
+        /**
+         * 自定义年份单元格的内容
+         */
+        yearRender?: ({ year, currentDate, }: {
+            year: string | number;
+            currentDate: IDateTimePickerInstance;
+        }) => React.ReactNode;
+        /**
+         * 日期发生变化的回调
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            value: IDateTimePickerValue;
+        }) => void;
+        /**
+         * 选择日期后是否立刻关闭
+         */
+        closeOnSelect?: boolean;
+        /**
+         * 禁用弹层选择功能
+         */
+        disableOpenPicker?: boolean;
+        /**
+         * 日期格式化
+         */
+        format?: string;
+        /**
+         * 弹层关闭的回调
+         */
+        onClose?: () => void;
+        /**
+         * 弹层打开的回调
+         */
+        onOpen?: () => void;
+        /**
+         * 月份切换的回调
+         */
+        onMonthChange?: (e: React.SyntheticEvent, data: {
+            value: Date;
+        }) => void;
+        /**
+         * 年份切换的回调
+         */
+        onYearChange?: (e: React.SyntheticEvent, data: {
+            value: Date;
+        }) => void;
+        /**
+         * DesktopPickerProps
+         */
+        DesktopPickerProps?: Omit<DesktopPickerProps, 'open'>;
+        /**
+         * CalendarProps
+         */
+        CalendarProps?: CalendarProps;
+    };
+    defaultComponent: D;
+}, D>;

package/es/DesktopDateTimePicker/DesktopDateTimePicker.types.js

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

package/es/DesktopDateTimePicker/index.css

@@ -0,0 +1,66 @@
+:root,
+page,
+xhs-page {
+  --bui-datetime-picker-height: var(--bui-input-height, 32px);
+  --bui-datetime-picker-min-width: var(--bui-input-min-width, 100px);
+  --bui-datetime-picker-icon-size: var(--bui-title-size-3, 16px);
+  --bui-datetime-picker-font-size: var(--bui-title-size-3, 16px);
+  --bui-datetime-picker-container-padding: var(--bui-spacing-md, 9px);
+  --bui-datetime-picker-bg: var(--bui-color-bg-view);
+  --bui-datetime-picker-font-family: var(--bui-font-family);
+  --bui-datetime-picker-border: 1px solid var(--bui-color-border-default);
+  --bui-datetime-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  --bui-datetime-picker-disabled-color: var(--bui-color-fg-subtle);
+}
+.bui-datetime-picker {
+  position: relative;
+  cursor: pointer;
+  height: var(--bui-datetime-picker-height);
+  min-width: 100px;
+  font-size: var(--bui-datetime-picker-font-size);
+  border-radius: 5px;
+  background-color: var(--bui-datetime-picker-bg);
+  font-family: var(--bui-datetime-picker-font-family);
+  box-sizing: border-box;
+  border: var(--bui-datetime-picker-border);
+}
+.bui-datetime-picker:active,
+.bui-datetime-picker-active {
+  box-shadow: var(--bui-datetime-picker-shadow);
+}
+.bui-datetime-picker-invalid {
+  border: 1px solid var(--bui-color-danger);
+}
+.bui-datetime-picker-icon {
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-datetime-picker-icon-size);
+}
+.bui-datetime-picker-container {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  height: 100%;
+}
+.bui-datetime-picker-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+}
+.bui-datetime-picker-box {
+  display: flex;
+  width: 420px;
+}
+.bui-datetime-picker.bui-datetime-picker-disabled {
+  pointer-events: none;
+  box-shadow: none;
+  background-color: rgba(188, 188, 188, 0.2);
+}
+.bui-datetime-picker.bui-datetime-picker-disabled input {
+  color: var(--bui-datetime-picker-disabled-color);
+}

package/es/DesktopDateTimePicker/index.d.ts

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

package/es/DesktopDateTimePicker/index.js

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

package/es/DesktopPicker/DesktopPicker.d.ts

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

package/es/DesktopPicker/DesktopPicker.js

@@ -0,0 +1,226 @@
+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,
+      prefix = ""
+    } = _a, others = __objRest(_a, [
+      "className",
+      "open",
+      "container",
+      "children",
+      "defaultDirection",
+      "inheritWidth",
+      "content",
+      "miniBackdropInvisible",
+      "onClose",
+      "onMount",
+      "onUnmounted",
+      "containerWidth",
+      "BackdropProps",
+      "prefix"
+    ]);
+    const contentRef = useRef(null);
+    const nodeRef = useRef(null);
+    const renderChildren = React.cloneElement(children, {
+      ref: nodeRef,
+      style: {
+        flex: 1
+      }
+    });
+    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), prefix, 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,61 @@
+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 & {
+        /**
+         * 前缀
+         */
+        prefix?: React.ReactNode | string;
+        /**
+         * 是否继承宽度
+         * @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,39 @@
+: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 {
+  display: flex;
+  align-items: center;
+  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;