@bifrostui/react 1.4.5 → 1.4.7-beta.0

package/es/DatePicker/DatePicker.js

@@ -0,0 +1,310 @@
+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 React, { forwardRef, useEffect, useState } from "react";
+import clsx from "clsx";
+import { useValue } from "@bifrostui/utils";
+import {
+  DatePickerType
+} from "./DatePicker.types";
+import Picker from "../Picker";
+import { useLocaleText } from "../locales";
+const MIN_DATE = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
+const MAX_DATE = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11, 31);
+const DEFAULT_PICKER = [
+  DatePickerType.YEAR,
+  DatePickerType.MONTH,
+  DatePickerType.DAY
+];
+function isValidDate(value) {
+  return value instanceof Date && !Number.isNaN(value.getTime());
+}
+const padZero = (num, targetLength = 2) => {
+  let str = `${num}`;
+  while (str.length < targetLength) {
+    str = `0${str}`;
+  }
+  return str;
+};
+const getMaxDay = (year, monthIndex) => {
+  return new Date(year, monthIndex + 1, 0).getDate();
+};
+const getDateTypeValue = (date, type) => {
+  switch (type) {
+    case DatePickerType.YEAR:
+      return date.getFullYear();
+    case DatePickerType.MONTH:
+      return date.getMonth() + 1;
+    case DatePickerType.DAY:
+      return date.getDate();
+    case DatePickerType.HOUR:
+      return date.getHours();
+    case DatePickerType.MINUTE:
+      return date.getMinutes();
+    case DatePickerType.SECOND:
+      return date.getSeconds();
+    default:
+      throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${type}`);
+  }
+};
+const DatePicker = forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    value: propValue,
+    defaultValue,
+    views = DEFAULT_PICKER,
+    minDate: propMinDate = MIN_DATE,
+    maxDate: propMaxDate = MAX_DATE,
+    showUnit = false,
+    formatter,
+    filter,
+    disableDateTimeView,
+    dateTimeStep,
+    onConfirm,
+    onClose,
+    onChange
+  } = _a, others = __objRest(_a, [
+    "className",
+    "value",
+    "defaultValue",
+    "views",
+    "minDate",
+    "maxDate",
+    "showUnit",
+    "formatter",
+    "filter",
+    "disableDateTimeView",
+    "dateTimeStep",
+    "onConfirm",
+    "onClose",
+    "onChange"
+  ]);
+  const [options, setOptions] = useState([]);
+  const [pickerValue, setPickerValue] = useState([]);
+  const datePickerText = useLocaleText("datePicker");
+  const formatDate = (date) => {
+    let formattedDate = date;
+    if (!formattedDate || !isValidDate(date) || formattedDate.getTime() < propMinDate.getTime()) {
+      formattedDate = propMinDate;
+    }
+    if (formattedDate.getTime() > propMaxDate.getTime()) {
+      formattedDate = propMaxDate;
+    }
+    return formattedDate;
+  };
+  const [currentDate, triggerChange] = useValue({
+    value: propValue && formatDate(propValue),
+    defaultValue: formatDate(defaultValue)
+  });
+  const handleConfirm = (e) => {
+    onConfirm == null ? void 0 : onConfirm(e, { value: currentDate });
+  };
+  const handleClose = (e) => {
+    onClose == null ? void 0 : onClose(e, { value: currentDate });
+  };
+  const handleChange = (e, { value, columnIndex }) => {
+    if (value[columnIndex] === null)
+      return;
+    const current = new Date(currentDate);
+    switch (views[columnIndex]) {
+      case DatePickerType.YEAR:
+        current.setFullYear(value[columnIndex]);
+        break;
+      case DatePickerType.MONTH: {
+        const selectedMaxDay = getMaxDay(
+          current.getFullYear(),
+          Number(value[columnIndex]) - 1
+        );
+        if (current.getDate() > selectedMaxDay) {
+          current.setDate(selectedMaxDay);
+        }
+        current.setMonth(value[columnIndex] - 1);
+        break;
+      }
+      case DatePickerType.DAY:
+        current.setDate(value[columnIndex]);
+        break;
+      case DatePickerType.HOUR:
+        current.setHours(value[columnIndex]);
+        break;
+      case DatePickerType.MINUTE:
+        current.setMinutes(value[columnIndex]);
+        break;
+      case DatePickerType.SECOND:
+        current.setSeconds(value[columnIndex]);
+        break;
+      default:
+        throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${views[columnIndex]}`);
+    }
+    triggerChange(e, formatDate(current));
+    onChange == null ? void 0 : onChange(e, { type: views[columnIndex], value: current });
+  };
+  const formatOption = (type, value) => {
+    let label = padZero(value);
+    if (formatter) {
+      return formatter(type, {
+        value,
+        label
+      });
+    }
+    if (showUnit) {
+      label += datePickerText[type];
+    }
+    return { value, label };
+  };
+  const generateOptions = (min, max, type, columnIndex) => {
+    const step = (dateTimeStep == null ? void 0 : dateTimeStep[type]) || 1;
+    let valueIndex = 0;
+    const optionsArray = Array.from(
+      { length: (max - min + 1) / step || 1 },
+      (_, index) => {
+        const value = index * step + min;
+        if (value <= getDateTypeValue(currentDate, type)) {
+          valueIndex = index;
+        }
+        return formatOption(type, value);
+      }
+    );
+    pickerValue[columnIndex] = optionsArray[valueIndex].value;
+    setPickerValue([...pickerValue]);
+    if ((disableDateTimeView == null ? void 0 : disableDateTimeView[type]) && typeof disableDateTimeView[type] === "function") {
+      const disabledOptionsValue = disableDateTimeView[type](
+        optionsArray.map((i) => i.value)
+      );
+      return optionsArray.map((option) => {
+        if (disabledOptionsValue.includes(option.value)) {
+          return __spreadProps(__spreadValues({}, option), {
+            disabled: true
+          });
+        }
+        return option;
+      });
+    }
+    if (filter) {
+      return filter(type, optionsArray);
+    }
+    return optionsArray;
+  };
+  const getBoundary = (type, value) => {
+    const boundary = type === "min" ? propMinDate : propMaxDate;
+    const year = boundary.getFullYear();
+    let month = 1;
+    let date = 1;
+    let hour = 0;
+    let minute = 0;
+    let seconds = 0;
+    if (type === "max") {
+      month = 12;
+      date = getMaxDay(value.getFullYear(), value.getMonth());
+      hour = 23;
+      minute = 59;
+      seconds = 59;
+    }
+    if (value.getFullYear() === year) {
+      month = boundary.getMonth() + 1;
+      if (value.getMonth() + 1 === month) {
+        date = boundary.getDate();
+        if (value.getDate() === date) {
+          hour = boundary.getHours();
+          if (value.getHours() === hour) {
+            minute = boundary.getMinutes();
+            if (value.getMinutes() === minute) {
+              seconds = boundary.getSeconds();
+            }
+          }
+        }
+      }
+    }
+    return {
+      [`${type}Year`]: year,
+      [`${type}Month`]: month,
+      [`${type}Date`]: date,
+      [`${type}Hour`]: hour,
+      [`${type}Minute`]: minute,
+      [`${type}Seconds`]: seconds
+    };
+  };
+  const generateRanges = () => {
+    const ranges = [];
+    const { minYear, minMonth, minDate, minHour, minMinute, minSeconds } = getBoundary("min", currentDate);
+    const { maxYear, maxMonth, maxDate, maxHour, maxMinute, maxSeconds } = getBoundary("max", currentDate);
+    for (let i = 0; i < views.length; i += 1) {
+      const type = views[i];
+      switch (type) {
+        case DatePickerType.YEAR:
+          ranges.push([minYear, maxYear]);
+          break;
+        case DatePickerType.MONTH:
+          ranges.push([minMonth, maxMonth]);
+          break;
+        case DatePickerType.DAY:
+          ranges.push([minDate, maxDate]);
+          break;
+        case DatePickerType.HOUR:
+          ranges.push([minHour, maxHour]);
+          break;
+        case DatePickerType.MINUTE:
+          ranges.push([minMinute, maxMinute]);
+          break;
+        case DatePickerType.SECOND:
+          ranges.push([minSeconds, maxSeconds]);
+          break;
+        default:
+          throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${type}`);
+      }
+    }
+    return ranges;
+  };
+  const generateRangeOptions = () => generateRanges().map(
+    (range, index) => generateOptions(range[0], range[1], views[index], index)
+  );
+  useEffect(() => {
+    setOptions(generateRangeOptions());
+  }, [currentDate, views, propMinDate, propMaxDate]);
+  return /* @__PURE__ */ React.createElement(
+    Picker,
+    __spreadProps(__spreadValues({}, others), {
+      "data-selected": currentDate ? currentDate.getTime() : "",
+      className: clsx("bui-date-picker", className),
+      ref,
+      options,
+      value: pickerValue,
+      onConfirm: handleConfirm,
+      onClose: handleClose,
+      onOptionChange: handleChange
+    })
+  );
+});
+DatePicker.displayName = "BuiDatePicker";
+var DatePicker_default = DatePicker;
+export {
+  DatePicker_default as default
+};

package/es/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { PickerProps, IPickerOptionItem } from '../Picker';
+export declare enum DatePickerType {
+    YEAR = "year",
+    MONTH = "month",
+    DAY = "day",
+    HOUR = "hour",
+    MINUTE = "minute",
+    SECOND = "second"
+}
+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/es/DatePicker/DatePicker.types.js

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

package/es/DatePicker/index.d.ts

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

package/es/DatePicker/index.js

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

package/es/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/es/DesktopDatePicker/DesktopDatePicker.js

@@ -0,0 +1,253 @@
+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 "./useGetDatePickerContent";
+import "./index.css";
+const prefixCls = "bui-d-date-picker";
+const DesktopDatePicker = /* @__PURE__ */ React.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 = 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",
+    "picker",
+    "minDate",
+    "maxDate",
+    "icon",
+    "headerBarLeftIcon",
+    "headerBarRightIcon",
+    "closeOnSelect",
+    "onChange",
+    "onClose",
+    "onOpen",
+    "monthRender",
+    "yearRender",
+    "onMonthChange",
+    "onYearChange",
+    "DesktopPickerProps",
+    "CalendarProps"
+  ]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectType, setSelectType] = useState(
+    picker
+  );
+  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,
+    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 (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(picker);
+  };
+  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
+      }),
+      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: desktopDatePicker()
+      }, 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}-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)" })
+      ))
+    )
+  );
+});
+DesktopDatePicker.displayName = "BUIDatePicker";
+var DesktopDatePicker_default = DesktopDatePicker;
+export {
+  DesktopDatePicker_default as default
+};