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

package/es/DesktopDatePicker/useGetDatePickerContent.js

@@ -0,0 +1,316 @@
+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 { CaretLeftIcon, CaretRightIcon } from "@bifrostui/icons";
+import clsx from "clsx";
+import dayjs from "dayjs";
+import React, { useMemo } from "react";
+import Calendar from "../Calendar";
+import "./deskTopPickerContainer.css";
+import { useLocaleText } from "../locales";
+const prefixCls = "bui-d-date-picker-lay";
+const useGetDatePickerContent = (props) => {
+  const yPatterns = ["YYYY", "YY"];
+  const mPatterns = ["MM", "M", "MMM", "MMMM"];
+  const dPatterns = ["D", "DD"];
+  const { month: monthMap } = useLocaleText("desktopDatePicker");
+  const _a = props, {
+    format,
+    minDate,
+    maxDate,
+    picker,
+    setIsOpen,
+    disabledDate,
+    calendarValue,
+    setSelectType,
+    selectType,
+    headerBarLeftIcon,
+    headerBarRightIcon,
+    closeOnSelect,
+    monthRender,
+    yearRender,
+    onMonthChange,
+    onYearChange,
+    triggerChange,
+    CalendarProps
+  } = _a, others = __objRest(_a, [
+    "format",
+    "minDate",
+    "maxDate",
+    "picker",
+    "setIsOpen",
+    "disabledDate",
+    "calendarValue",
+    "setSelectType",
+    "selectType",
+    "headerBarLeftIcon",
+    "headerBarRightIcon",
+    "closeOnSelect",
+    "monthRender",
+    "yearRender",
+    "onMonthChange",
+    "onYearChange",
+    "triggerChange",
+    "CalendarProps"
+  ]);
+  const isMinMonth = dayjs(minDate).isSame(calendarValue, "month");
+  const isMaxMonth = dayjs(maxDate).isSame(calendarValue, "month");
+  const yearList = useMemo(() => {
+    const maxYear = dayjs(maxDate).year();
+    const minYear = dayjs(minDate).year();
+    const years = [];
+    for (let i = minYear; i <= maxYear; i += 1) {
+      years.push(i);
+    }
+    const chunkedYears = [];
+    for (let i = 0; i < years.length; i += 3) {
+      chunkedYears.push(years.slice(i, i + 3));
+    }
+    return chunkedYears;
+  }, [maxDate, minDate]);
+  const mouthList = [
+    [1, 2, 3],
+    [4, 5, 6],
+    [7, 8, 9],
+    [10, 11, 12]
+  ];
+  const validateAndAdjustDate = (value) => {
+    const dateValue = dayjs(value);
+    const minValue = dayjs(minDate);
+    const maxValue = dayjs(maxDate);
+    if (dateValue.isBefore(minValue)) {
+      return minValue;
+    }
+    if (dateValue.isAfter(maxValue)) {
+      return maxValue;
+    }
+    return dateValue;
+  };
+  const onClickPrev = (e) => {
+    e.stopPropagation();
+    if (!isMinMonth) {
+      const month = dayjs(calendarValue).subtract(1, "month").toDate();
+      triggerChange(e, validateAndAdjustDate(month).toDate());
+    }
+  };
+  const onClickNext = (e) => {
+    e.stopPropagation();
+    if (!isMaxMonth) {
+      const month = dayjs(calendarValue).add(1, "month").toDate();
+      triggerChange(e, validateAndAdjustDate(month).toDate());
+    }
+  };
+  const calendarChange = (e, data) => {
+    e.stopPropagation();
+    if (data.value) {
+      const ymd = dayjs(data.value);
+      const hms = dayjs(calendarValue || /* @__PURE__ */ new Date());
+      const newValue = ymd.hour(hms.hour()).minute(hms.minute()).second(hms.second());
+      triggerChange(e, validateAndAdjustDate(newValue).toDate());
+    }
+    if (closeOnSelect) {
+      setIsOpen(false);
+    }
+  };
+  const handleTdClick = (e, data) => {
+    e.stopPropagation();
+    if (selectType === "year") {
+      triggerChange(
+        e,
+        validateAndAdjustDate(
+          dayjs(calendarValue || /* @__PURE__ */ new Date()).year(data)
+        ).toDate()
+      );
+      onYearChange == null ? void 0 : onYearChange(
+        e,
+        validateAndAdjustDate(
+          dayjs(calendarValue || /* @__PURE__ */ new Date()).year(data)
+        ).toDate()
+      );
+      if (picker === "year" && closeOnSelect) {
+        setIsOpen(false);
+        return;
+      }
+      setSelectType("month");
+    }
+    if (selectType === "month") {
+      triggerChange(
+        e,
+        validateAndAdjustDate(
+          dayjs(calendarValue || /* @__PURE__ */ new Date()).month(data - 1)
+        ).toDate()
+      );
+      onMonthChange == null ? void 0 : onMonthChange(
+        e,
+        validateAndAdjustDate(
+          dayjs(calendarValue || /* @__PURE__ */ new Date()).month(data - 1)
+        ).toDate()
+      );
+      if (picker === "day") {
+        setSelectType("day");
+        return;
+      }
+      if (closeOnSelect) {
+        setIsOpen(false);
+      }
+    }
+  };
+  const renderTd = (its, currentData) => {
+    if (yearRender && selectType === "year") {
+      return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, yearRender({ year: its, currentData }));
+    }
+    if (monthRender && selectType === "month") {
+      return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, monthRender({ month: its, currentData }));
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-col-content`) }, /* @__PURE__ */ React.createElement("span", { className: clsx(`${prefixCls}-col-text`) }, selectType === "month" ? monthMap[its] : its));
+  };
+  const renderTable = () => {
+    const dataList = selectType === "year" ? yearList : mouthList;
+    return dataList.map((item, index) => {
+      return /* @__PURE__ */ React.createElement("div", { key: index + 1, className: clsx(`${prefixCls}-row`) }, item.map((its, idx) => {
+        let disabledClick = false;
+        if (selectType === "year") {
+          const currentData = dayjs(calendarValue).set("year", its);
+          if (its < dayjs(minDate).year() || its > dayjs(maxDate).year() || (disabledDate == null ? void 0 : disabledDate(currentData.toDate()))) {
+            disabledClick = true;
+          }
+        }
+        if (selectType === "month") {
+          const currentData = dayjs(calendarValue).set("month", its - 1);
+          disabledClick = currentData.isBefore(minDate, "month") || currentData.isAfter(maxDate, "month");
+          if (disabledDate) {
+            disabledClick = disabledDate == null ? void 0 : disabledDate(currentData.toDate());
+          }
+        }
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: idx + 1,
+            className: clsx(`${prefixCls}-col`, {
+              [`${prefixCls}-col-active`]: (selectType === "year" ? dayjs(calendarValue).year() : dayjs(calendarValue).month() + 1) === its && !disabledClick,
+              [`${prefixCls}-col-disabled`]: disabledClick
+            }),
+            onClick: (e) => {
+              if (!disabledClick) {
+                handleTdClick(e, its);
+              }
+            }
+          },
+          renderTd(its, calendarValue)
+        );
+      }));
+    });
+  };
+  const handleClickTitle = (e, data) => {
+    e.stopPropagation();
+    if (yPatterns.indexOf(data) > -1) {
+      setSelectType("year");
+    }
+    if (mPatterns.indexOf(data) > -1) {
+      setSelectType("month");
+    }
+    if (dPatterns.indexOf(data) > -1) {
+      setSelectType("day");
+    }
+  };
+  const renderTitle = (formate, value) => {
+    const allType = [...yPatterns, ...mPatterns, ...dPatterns];
+    const formattingTokens = /(\[[^[]*\])|([-_?:/.,()\s{0-9}]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
+    const matchArr = formate.match(formattingTokens);
+    const domArr = [];
+    let str = "";
+    for (let i = 0; i <= matchArr.length; i += 1) {
+      if (allType.indexOf(matchArr[i]) > -1) {
+        if (str !== "") {
+          domArr.push(str);
+          str = "";
+        }
+        domArr.push(
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: clsx(`${prefixCls}-title-text`),
+              key: i,
+              onClick: (e) => handleClickTitle(e, matchArr[i])
+            },
+            dayjs(value).format(matchArr[i])
+          )
+        );
+      } else {
+        str = `${matchArr[i]}${str}`;
+      }
+    }
+    return domArr;
+  };
+  const desktopDatePicker = () => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadProps(__spreadValues({
+        className: clsx(`${prefixCls}-main`)
+      }, others), {
+        onClick: (e) => {
+          e.stopPropagation();
+        }
+      }),
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-handler` }, selectType !== "year" && /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${prefixCls}-handler-btn` }, headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ React.createElement(
+        CaretLeftIcon,
+        {
+          className: `${prefixCls}-handler-icon`,
+          htmlColor: isMinMonth && "var(--bui-color-white)"
+        }
+      )), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, calendarValue ? renderTitle(format, calendarValue) : format), selectType !== "year" && /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${prefixCls}-handler-btn` }, headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ React.createElement(
+        CaretRightIcon,
+        {
+          className: `${prefixCls}-handler-icon`,
+          htmlColor: isMaxMonth && "var(--bui-color-white)"
+        }
+      ))),
+      selectType === "day" ? /* @__PURE__ */ React.createElement(
+        Calendar,
+        __spreadValues({
+          headerVisible: true,
+          minDate,
+          maxDate,
+          disabledDate,
+          value: calendarValue,
+          onChange: calendarChange
+        }, CalendarProps)
+      ) : /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-list`) }, /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-box`) }, renderTable()))
+    );
+  };
+  return {
+    desktopDatePicker
+  };
+};
+var useGetDatePickerContent_default = useGetDatePickerContent;
+export {
+  useGetDatePickerContent_default as default
+};

package/es/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

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

package/es/DesktopDateTimePicker/DesktopDateTimePicker.js

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