@bifrostui/react 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { PickerProps, IPickerOptionItem } from '../Picker';
+import { DatePickerType } from './constants';
+export type DatePickerOption = IPickerOptionItem & {
+    value: number;
+};
+export type DatePickerProps<D extends React.ElementType = 'div', P = Omit<PickerProps, 'value' | 'defaultValue' | 'onChange' | 'onConfirm' | 'onClose'>> = OverrideProps<{
+    props: P & {
+        defaultValue?: Date;
+        value?: Date;
+        views?: DatePickerType[];
+        minDate?: Date;
+        maxDate?: Date;
+        showUnit?: boolean;
+        disableDateTimeView?: Partial<{
+            [key in DatePickerType]: (options: number[]) => number[];
+        }>;
+        dateTimeStep?: Partial<{
+            [key in DatePickerType]: number;
+        }>;
+        formatter?: (type: DatePickerType, option: DatePickerOption) => DatePickerOption;
+        filter?: (type: DatePickerType, options: DatePickerOption[]) => DatePickerOption[];
+        onConfirm?: (e: React.SyntheticEvent, { value }: {
+            value: Date;
+        }) => void;
+        onClose?: (e: React.SyntheticEvent, { value }: {
+            value: Date;
+        }) => void;
+        onChange?: (e: React.SyntheticEvent, { value }: {
+            type: DatePickerType;
+            value: Date;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/DatePicker/DatePicker.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DatePicker_types_exports = {};
+module.exports = __toCommonJS(DatePicker_types_exports);

package/dist/DatePicker/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum DatePickerType {
+    YEAR = "year",
+    MONTH = "month",
+    DAY = "day",
+    HOUR = "hour",
+    MINUTE = "minute",
+    SECOND = "second"
+}
+export default DatePickerType;

package/dist/DatePicker/constants.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  DatePickerType: () => DatePickerType,
+  default: () => constants_default
+});
+module.exports = __toCommonJS(constants_exports);
+var DatePickerType = /* @__PURE__ */ ((DatePickerType2) => {
+  DatePickerType2["YEAR"] = "year";
+  DatePickerType2["MONTH"] = "month";
+  DatePickerType2["DAY"] = "day";
+  DatePickerType2["HOUR"] = "hour";
+  DatePickerType2["MINUTE"] = "minute";
+  DatePickerType2["SECOND"] = "second";
+  return DatePickerType2;
+})(DatePickerType || {});
+var constants_default = DatePickerType;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePickerType
+});

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as DatePicker } from './DatePicker';
+export * from './DatePicker.types';
+export { DatePickerType } from './constants';

package/dist/DatePicker/index.js

@@ -0,0 +1,44 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  DatePicker: () => import_DatePicker.default,
+  DatePickerType: () => import_constants.DatePickerType,
+  default: () => import_DatePicker.default
+});
+module.exports = __toCommonJS(DatePicker_exports);
+var import_DatePicker = __toESM(require("./DatePicker"));
+__reExport(DatePicker_exports, require("./DatePicker.types"), module.exports);
+var import_constants = require("./constants");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker,
+  DatePickerType,
+  ...require("./DatePicker.types")
+});

package/dist/DesktopDatePicker/DesktopDatePicker.d.ts

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

package/dist/DesktopDatePicker/DesktopDatePicker.js

@@ -0,0 +1,280 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DesktopDatePicker_exports = {};
+__export(DesktopDatePicker_exports, {
+  default: () => DesktopDatePicker_default
+});
+module.exports = __toCommonJS(DesktopDatePicker_exports);
+var import_icons = require("@bifrostui/icons");
+var import_dayjs = __toESM(require("dayjs"));
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_DesktopPicker = __toESM(require("../DesktopPicker"));
+var import_useGetDatePickerContent = __toESM(require("./useGetDatePickerContent"));
+var import_index = require("./index.css");
+const prefixCls = "bui-d-date-picker";
+const DesktopDatePicker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    inputRef,
+    inputProps,
+    value,
+    defaultValue,
+    disabled = false,
+    disableOpenPicker = false,
+    placeholder,
+    format = "YYYY/MM/DD",
+    open,
+    disabledDate,
+    picker = "day",
+    minDate = (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).subtract(10, "year").toDate(),
+    maxDate = (0, import_dayjs.default)((0, import_dayjs.default)().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",
+    "picker",
+    "minDate",
+    "maxDate",
+    "icon",
+    "headerBarLeftIcon",
+    "headerBarRightIcon",
+    "closeOnSelect",
+    "onChange",
+    "onClose",
+    "onOpen",
+    "monthRender",
+    "yearRender",
+    "onMonthChange",
+    "onYearChange",
+    "DesktopPickerProps",
+    "CalendarProps"
+  ]);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [selectType, setSelectType] = (0, import_react.useState)(
+    picker
+  );
+  const [inputStr, setInputStr] = (0, import_react.useState)("");
+  const [useUserStr, setUseUserStr] = (0, import_react.useState)(false);
+  const [calendarValue, triggerChange] = (0, import_utils.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 } = (0, import_useGetDatePickerContent.default)({
+    format,
+    minDate,
+    maxDate,
+    setIsOpen,
+    triggerChange,
+    disabledDate,
+    calendarValue,
+    setSelectType,
+    picker,
+    selectType,
+    headerBarLeftIcon,
+    headerBarRightIcon,
+    CalendarProps,
+    onClose,
+    monthRender,
+    yearRender,
+    onMonthChange,
+    onYearChange,
+    closeOnSelect
+  });
+  const onInputChange = (e) => {
+    e.stopPropagation();
+    const newValue = e.target.value;
+    if (newValue.length === 0) {
+      setInputStr("");
+      setUseUserStr(true);
+      triggerChange(e, null);
+      return;
+    }
+    if ((0, import_dayjs.default)(newValue, format, true).isValid()) {
+      setInputStr("");
+      setUseUserStr(false);
+      if (disabledDate == null ? void 0 : disabledDate((0, import_dayjs.default)(newValue).toDate())) {
+        return;
+      }
+      if ((0, import_dayjs.default)(newValue).isAfter(maxDate)) {
+        triggerChange(e, maxDate);
+        return;
+      }
+      if ((0, import_dayjs.default)(newValue).isBefore(minDate)) {
+        triggerChange(e, minDate);
+        return;
+      }
+      triggerChange(e, (0, import_dayjs.default)(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(picker);
+  };
+  const showPlaceholder = (0, import_react.useMemo)(() => {
+    if (placeholder) {
+      return placeholder;
+    }
+    return format;
+  }, [placeholder, format]);
+  const renderValue = (0, import_react.useMemo)(() => {
+    if (useUserStr) {
+      return inputStr;
+    }
+    if (calendarValue) {
+      return (0, import_dayjs.default)(calendarValue).format(format);
+    }
+    return "";
+  }, [calendarValue, inputStr, useUserStr, format]);
+  (0, import_react.useEffect)(() => {
+    setUseUserStr(false);
+  }, [calendarValue]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, others), {
+      className: (0, import_clsx.default)(prefixCls, className, {
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-active`]: isOpen
+      }),
+      ref
+    }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_DesktopPicker.default,
+      __spreadValues({
+        open: open != null ? open : isOpen,
+        miniBackdropInvisible: open !== void 0,
+        onClose: (e, data) => {
+          setIsOpen(data == null ? void 0 : data.value);
+        },
+        onMount,
+        onUnmounted: unMounted,
+        content: desktopDatePicker()
+      }, DesktopPickerProps),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-container` }, /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        __spreadProps(__spreadValues({}, inputProps), {
+          "aria-invalid": true,
+          autoComplete: "off",
+          placeholder: showPlaceholder,
+          type: "text",
+          inputMode: "text",
+          ref: inputRef,
+          className: (0, import_clsx.default)(`${prefixCls}-input`, {
+            [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
+          }),
+          onBlur: () => setUseUserStr(false),
+          onClick: handleDatePickerInputClick,
+          onChange: onInputChange,
+          value: renderValue
+        })
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          onClick: handleDatePickerIconClick,
+          className: `${prefixCls}-icon`
+        },
+        icon || /* @__PURE__ */ import_react.default.createElement(import_icons.DateOutlinedIcon, { htmlColor: "var(--bui-color-neutral-3)" })
+      ))
+    )
+  );
+});
+DesktopDatePicker.displayName = "BUIDatePicker";
+var DesktopDatePicker_default = DesktopDatePicker;

package/dist/DesktopDatePicker/DesktopDatePicker.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 IDatePickerValue = Date | null;
+export interface IDatePickerInstance {
+    /** 日期对象 */
+    day: Date;
+    /** 是否禁用 */
+    disabled: boolean;
+}
+export interface IDatePickerCustomIconProps {
+    /**
+     * 是否是最小时间
+     */
+    isMinMonth?: boolean;
+    /**
+     * 是否是最大时间
+     */
+    isMaxMonth?: boolean;
+}
+export interface IDatePickerCalendarProps {
+    /**
+     * 是否隐藏当前月之外的日期，默认为false
+     */
+    hideDaysOutsideCurrentMonth?: boolean;
+    /**
+     * 高亮的日期，默认为today
+     * today 若选中的非当天，则当天高亮显示，若选中的是当天，则当天展示选中态
+     * weekend 可选的周末高亮显示
+     */
+    highlightDate?: 'today' | 'weekend';
+    /**
+     * 自定义日期单元格的内容
+     */
+    dateRender?: (currentDate: IDatePickerInstance) => React.ReactNode;
+    /**
+     * 自定义周单元格的内容
+     */
+    weekRender?: (week: string) => React.ReactNode;
+}
+export type DesktopDatePickerProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 默认选中的值，当组件非受控时使用
+         */
+        defaultValue?: IDatePickerValue;
+        /**
+         * 选中的值，当组件受控时使用
+         */
+        value?: IDatePickerValue;
+        /**
+         * 输入框占位内容
+         */
+        placeholder?: string;
+        /**
+         * 可选择的最小日期，默认为当前日期
+         * 渲染指定月时：value=null并指定minDate
+         */
+        minDate?: Date;
+        /**
+         * 可选择的最大日期，默认为当前日期的一年后
+         */
+        maxDate?: Date;
+        /**
+         * 弹层是否打开
+         */
+        open?: boolean;
+        /**
+         * 输入框icon
+         */
+        icon?: React.ReactNode;
+        /**
+         * inputRef
+         */
+        inputRef?: Ref<HTMLInputElement>;
+        /**
+         * inputProp
+         */
+        inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+        /**
+         * 日期选择器类型
+         */
+        picker?: 'year' | 'month' | 'day';
+        /**
+         * 头部操作栏左边图标
+         */
+        headerBarLeftIcon?: (options: IDatePickerCustomIconProps) => React.ReactNode;
+        /**
+         * 头部操作栏右边图标
+         */
+        headerBarRightIcon?: (options: IDatePickerCustomIconProps) => React.ReactNode;
+        /**
+         * 是否禁用日期选择器
+         */
+        disabled?: boolean;
+        /**
+         * 不可选择的日期
+         */
+        disabledDate?: (currentDate: Date) => boolean;
+        /**
+         * 自定义月份单元格的内容
+         */
+        monthRender?: ({ month, currentDate, }: {
+            month: string | number;
+            currentDate: IDatePickerInstance;
+        }) => React.ReactNode;
+        /**
+         * 自定义年份单元格的内容
+         */
+        yearRender?: ({ year, currentDate, }: {
+            year: string | number;
+            currentDate: IDatePickerInstance;
+        }) => React.ReactNode;
+        /**
+         * 日期发生变化的回调
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            value: IDatePickerValue;
+        }) => 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/dist/DesktopDatePicker/DesktopDatePicker.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DesktopDatePicker_types_exports = {};
+module.exports = __toCommonJS(DesktopDatePicker_types_exports);