@bifrostui/react 1.5.0 → 2.0.0-alpha.0

package/es/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -1,295 +0,0 @@
-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 { DateOutlinedIcon } from "@bifrostui/icons";
-import dayjs from "dayjs";
-import clsx from "clsx";
-import React, { useMemo, useState, useEffect } from "react";
-import { useValue } from "@bifrostui/utils";
-import DesktopPicker from "../DesktopPicker";
-import useGetDatePickerContent from "../DesktopDatePicker/useGetDatePickerContent";
-import useGetTimePickerContent from "../DesktopTimePicker/useGetTimePickerContent";
-import "./index.css";
-const prefixCls = "bui-datetime-picker";
-const DesktopDateTimePicker = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, {
-    className,
-    inputRef,
-    inputProps,
-    value,
-    defaultValue,
-    disabled = false,
-    disableOpenPicker = false,
-    placeholder,
-    format = "YYYY/MM/DD HH:mm:ss",
-    open,
-    disabledDate,
-    views = ["year", "month", "day", "hour", "minute", "second"],
-    minDate = dayjs(dayjs().format("YYYYMMDD")).subtract(10, "year").toDate(),
-    maxDate = dayjs(dayjs().format("YYYYMMDD")).add(10, "year").toDate(),
-    icon,
-    headerBarLeftIcon,
-    headerBarRightIcon,
-    closeOnSelect = true,
-    onChange,
-    onClose,
-    onOpen,
-    monthRender,
-    yearRender,
-    onMonthChange,
-    onYearChange,
-    DesktopPickerProps,
-    CalendarProps
-  } = _a, others = __objRest(_a, [
-    "className",
-    "inputRef",
-    "inputProps",
-    "value",
-    "defaultValue",
-    "disabled",
-    "disableOpenPicker",
-    "placeholder",
-    "format",
-    "open",
-    "disabledDate",
-    "views",
-    "minDate",
-    "maxDate",
-    "icon",
-    "headerBarLeftIcon",
-    "headerBarRightIcon",
-    "closeOnSelect",
-    "onChange",
-    "onClose",
-    "onOpen",
-    "monthRender",
-    "yearRender",
-    "onMonthChange",
-    "onYearChange",
-    "DesktopPickerProps",
-    "CalendarProps"
-  ]);
-  const [isOpen, setIsOpen] = useState(open);
-  const [isInvalid, setIsInvalid] = useState(false);
-  const getPicker = useMemo(() => {
-    if (views.includes("day")) {
-      return "day";
-    }
-    if (views.includes("month")) {
-      return "month";
-    }
-    if (views.includes("year")) {
-      return "year";
-    }
-    return "day";
-  }, [views]);
-  const [selectType, setSelectType] = useState(
-    getPicker
-  );
-  const [inputStr, setInputStr] = useState("");
-  const [useUserStr, setUseUserStr] = useState(false);
-  const [calendarValue, triggerChange] = useValue({
-    value,
-    defaultValue,
-    onChange
-  });
-  const handleDatePickerIconClick = (e) => {
-    if (disabled || disableOpenPicker || open !== void 0)
-      return;
-    setIsOpen(!isOpen);
-  };
-  const handleDatePickerInputClick = (e) => {
-    e.stopPropagation();
-    if (inputProps == null ? void 0 : inputProps.readOnly) {
-      if (disabled || disableOpenPicker || open !== void 0)
-        return;
-      setIsOpen(!isOpen);
-      return;
-    }
-    setIsOpen(false);
-  };
-  const { desktopDatePicker } = useGetDatePickerContent({
-    format,
-    minDate,
-    maxDate,
-    setIsOpen,
-    triggerChange,
-    disabledDate,
-    calendarValue,
-    setSelectType,
-    picker: getPicker,
-    selectType,
-    headerBarLeftIcon,
-    headerBarRightIcon,
-    CalendarProps,
-    onClose,
-    monthRender,
-    yearRender,
-    onMonthChange,
-    onYearChange,
-    closeOnSelect: false,
-    style: {
-      borderRadius: "3px 0px 0px 3px"
-    }
-  });
-  const { desktopTimePanel } = useGetTimePickerContent({
-    views: views.filter(
-      (item) => item !== "day" && item !== "month" && item !== "year"
-    ),
-    minTime: dayjs(minDate),
-    maxTime: dayjs(maxDate),
-    setIsOpen,
-    triggerChange,
-    closeOnSelect,
-    timeValue: dayjs(calendarValue),
-    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("");
-      setUseUserStr(false);
-      if (disabledDate == null ? void 0 : disabledDate(dayjs(newValue).toDate())) {
-        return;
-      }
-      if (dayjs(newValue).isAfter(maxDate)) {
-        triggerChange(e, maxDate);
-        return;
-      }
-      if (dayjs(newValue).isBefore(minDate)) {
-        triggerChange(e, minDate);
-        return;
-      }
-      triggerChange(e, dayjs(e.target.value).toDate());
-    } else {
-      setUseUserStr(true);
-      setInputStr(e.target.value);
-    }
-  };
-  const onmount = () => {
-    onOpen == null ? void 0 : onOpen();
-  };
-  const unMounted = () => {
-    onClose == null ? void 0 : onClose();
-    setSelectType(getPicker);
-  };
-  const showPlaceholder = useMemo(() => {
-    if (placeholder) {
-      return placeholder;
-    }
-    return format;
-  }, [placeholder, format]);
-  const renderValue = useMemo(() => {
-    if (useUserStr) {
-      return inputStr;
-    }
-    if (calendarValue) {
-      return dayjs(calendarValue).format(format);
-    }
-    return "";
-  }, [calendarValue, inputStr, useUserStr, format]);
-  useEffect(() => {
-    setUseUserStr(false);
-  }, [calendarValue]);
-  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,
-      __spreadProps(__spreadValues({
-        open: open != null ? open : isOpen,
-        miniBackdropInvisible: open !== void 0,
-        onClose: (e, data) => {
-          setIsOpen(data == null ? void 0 : data.value);
-        },
-        onMount: onmount,
-        onUnmounted: unMounted,
-        content: /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `${prefixCls}-box`,
-            onClick: (e) => {
-              e.stopPropagation();
-            }
-          },
-          desktopDatePicker(),
-          desktopTimePanel()
-        )
-      }, DesktopPickerProps), {
-        inheritWidth: false
-      }),
-      /* @__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}-input`, {
-            [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
-          }),
-          onBlur: () => setUseUserStr(false),
-          onClick: handleDatePickerInputClick,
-          onChange: onInputChange,
-          value: renderValue
-        })
-      ), /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onClick: handleDatePickerIconClick,
-          className: `${prefixCls}-icon`
-        },
-        icon || /* @__PURE__ */ React.createElement(DateOutlinedIcon, { htmlColor: "var(--bui-color-neutral-3)" })
-      ))
-    )
-  );
-});
-DesktopDateTimePicker.displayName = "BUIDesktopDateTimePicker";
-var DesktopDateTimePicker_default = DesktopDateTimePicker;
-export {
-  DesktopDateTimePicker_default as default
-};

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

@@ -1,163 +0,0 @@
-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

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

package/es/DesktopDateTimePicker/index.css

@@ -1,66 +0,0 @@
-: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

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

package/es/DesktopDateTimePicker/index.js

@@ -1,9 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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;