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

package/es/DesktopTimePicker/utils/utils.js

@@ -0,0 +1,365 @@
+import dayjs from "dayjs";
+const getIsRangeDate = (time, start, end) => {
+  if (!time)
+    return true;
+  if (!start && !end) {
+    return true;
+  }
+  if (start && end) {
+    return !time.isBefore(start, "day") && !time.isAfter(end, "day");
+  }
+  if (start) {
+    return !time.isBefore(start, "day") && (end ? !time.isAfter(end, "day") : true);
+  }
+  if (end) {
+    return !time.isAfter(end, "day") && (start ? !time.isBefore(start, "day") : true);
+  }
+  return true;
+};
+const isDisabledViewTime = (time, disabledTimeView) => {
+  const isDisabledViewTimeItem = (type) => {
+    const disabledArr = disabledTimeView == null ? void 0 : disabledTimeView()[type](time.hour(), time.minute());
+    const value = time[type]();
+    return (disabledArr == null ? void 0 : disabledArr.indexOf(value)) !== -1;
+  };
+  return isDisabledViewTimeItem("hour") || isDisabledViewTimeItem("minute") || isDisabledViewTimeItem("second");
+};
+const getIsRangeTime = (time, start, end) => {
+  if (start && end) {
+    return !time.isBefore(start, "second") && !time.isAfter(end, "second");
+  }
+  if (start) {
+    return !time.isBefore(start, "second");
+  }
+  if (end) {
+    return !time.isAfter(end, "second");
+  }
+  return true;
+};
+const isDisabledTime = (time, start, end, disabledTimeView) => {
+  if (!time)
+    return false;
+  return isDisabledViewTime(time, disabledTimeView) || !getIsRangeTime(time, start, end);
+};
+const getOutOfMinRangeMinutes = (hourValue, minTime, dataList) => {
+  if (!minTime) {
+    return [];
+  }
+  const outOfMinRangeMinutes = [];
+  if (hourValue === minTime.hour()) {
+    outOfMinRangeMinutes.push(
+      ...dataList.map((item) => item.value).filter((minute) => minute < minTime.minute())
+    );
+  } else if (hourValue < minTime.hour()) {
+    outOfMinRangeMinutes.push(...dataList.map((item) => item.value));
+  }
+  return outOfMinRangeMinutes;
+};
+const getOutOfMaxRangeMinutes = (hourValue, maxTime, dataList) => {
+  if (!maxTime) {
+    return [];
+  }
+  const outOfMaxRangeMinutes = [];
+  if (hourValue === maxTime.hour()) {
+    outOfMaxRangeMinutes.push(
+      ...dataList.map((item) => item.value).filter((minute) => minute > maxTime.minute())
+    );
+  } else if (hourValue > maxTime.hour()) {
+    outOfMaxRangeMinutes.push(...dataList.map((item) => item.value));
+  }
+  return outOfMaxRangeMinutes;
+};
+const getOutOfMinRangeSeconds = (hourValue, minuteValue, minTime, dataList) => {
+  if (!minTime) {
+    return [];
+  }
+  const outOfMinRangeMinutes = [];
+  if (hourValue === minTime.hour() && minuteValue === minTime.minute()) {
+    outOfMinRangeMinutes.push(
+      ...dataList.map((item) => item.value).filter((second) => second < minTime.second())
+    );
+  } else if (hourValue === minTime.hour() && minuteValue < minTime.minute()) {
+    outOfMinRangeMinutes.push(...dataList.map((item) => item.value));
+  } else if (hourValue < minTime.hour()) {
+    outOfMinRangeMinutes.push(...dataList.map((item) => item.value));
+  }
+  return outOfMinRangeMinutes;
+};
+const getOutOfMaxRangeSeconds = (hourValue, minuteValue, maxTime, dataList) => {
+  if (!maxTime) {
+    return [];
+  }
+  const outOfMaxRangeMinutes = [];
+  if (hourValue === maxTime.hour() && minuteValue === maxTime.minute()) {
+    outOfMaxRangeMinutes.push(
+      ...dataList.map((item) => item.value).filter((second) => second > maxTime.second())
+    );
+  } else if (hourValue === maxTime.hour() && minuteValue > maxTime.minute()) {
+    outOfMaxRangeMinutes.push(...dataList.map((item) => item.value));
+  } else if (hourValue > maxTime.hour()) {
+    outOfMaxRangeMinutes.push(...dataList.map((item) => item.value));
+  }
+  return outOfMaxRangeMinutes;
+};
+const getdisabledTime = (type, timeValue, minTime, maxTime, dataList, disabledTimeView, timeSteps, ampm) => {
+  var _a, _b, _c, _d, _e;
+  const isRangeDate = getIsRangeDate(timeValue, minTime, maxTime);
+  if (!isRangeDate) {
+    return dataList.map((item) => item.value);
+  }
+  const hourValue = timeValue == null ? void 0 : timeValue.hour();
+  const minuteValue = timeValue == null ? void 0 : timeValue.minute();
+  const getDisabledViewTime = () => {
+    var _a2, _b2, _c2, _d2, _e2, _f;
+    switch (type) {
+      case "hour": {
+        const disabledHours = ((_b2 = disabledTimeView == null ? void 0 : (_a2 = disabledTimeView()).hour) == null ? void 0 : _b2.call(_a2)) || [];
+        if (ampm && (timeValue == null ? void 0 : timeValue.format("A")) === "PM") {
+          return disabledHours.map((hour) => hour - 12);
+        }
+        return disabledHours;
+      }
+      case "minute": {
+        const disabledMinutes = ((_d2 = disabledTimeView == null ? void 0 : (_c2 = disabledTimeView()).minute) == null ? void 0 : _d2.call(_c2, hourValue)) || [];
+        return disabledMinutes;
+      }
+      case "second": {
+        const disabledSeconds = ((_f = disabledTimeView == null ? void 0 : (_e2 = disabledTimeView()).second) == null ? void 0 : _f.call(_e2, hourValue, minuteValue)) || [];
+        return disabledSeconds;
+      }
+      default:
+        return [];
+    }
+  };
+  const disabledViewTime = getDisabledViewTime();
+  const getOutOfMinRangeTime = () => {
+    if (!minTime) {
+      return [];
+    }
+    switch (type) {
+      case "hour": {
+        const outOfRangeHours = dataList.map((item) => item.value).filter((hour) => {
+          const minHour2 = minTime == null ? void 0 : minTime.hour();
+          const meridiemValue = timeValue == null ? void 0 : timeValue.format("A");
+          if (ampm) {
+            if (meridiemValue === "AM") {
+              return minHour2 >= 12 || hour < minHour2;
+            }
+            if (minHour2 < 12) {
+              return false;
+            }
+            return hour < minHour2 - 12;
+          }
+          return hour < minHour2;
+        });
+        return outOfRangeHours;
+      }
+      case "minute": {
+        const outOfRangeMinutes = getOutOfMinRangeMinutes(
+          hourValue,
+          minTime,
+          dataList
+        );
+        return outOfRangeMinutes;
+      }
+      case "second": {
+        const outOfRangeSeconds = getOutOfMinRangeSeconds(
+          hourValue,
+          minuteValue,
+          minTime,
+          dataList
+        );
+        return outOfRangeSeconds;
+      }
+      default:
+        return [];
+    }
+  };
+  const getOutOfMaxRangeTime = () => {
+    if (!maxTime) {
+      return [];
+    }
+    switch (type) {
+      case "hour": {
+        const outOfRangeHours = dataList.map((item) => item.value).filter((hour) => {
+          if (ampm) {
+            const maxHour2 = maxTime == null ? void 0 : maxTime.hour();
+            const meridiemValue = timeValue == null ? void 0 : timeValue.format("A");
+            if (maxHour2 >= 12) {
+              if (meridiemValue === "AM") {
+                return false;
+              }
+              return hour > maxHour2 - 12;
+            }
+            if (meridiemValue === "AM") {
+              return hour > maxHour2;
+            }
+            return true;
+          }
+          return hour > (maxTime == null ? void 0 : maxTime.hour());
+        });
+        return outOfRangeHours;
+      }
+      case "minute": {
+        const outOfRangeMinutes = getOutOfMaxRangeMinutes(
+          hourValue,
+          maxTime,
+          dataList
+        );
+        return outOfRangeMinutes;
+      }
+      case "second": {
+        const outOfRangeSeconds = getOutOfMaxRangeSeconds(
+          hourValue,
+          minuteValue,
+          maxTime,
+          dataList
+        );
+        return outOfRangeSeconds;
+      }
+      default:
+        return [];
+    }
+  };
+  const outOfMinRangeTime = getOutOfMinRangeTime();
+  const outOfMaxRangeTime = getOutOfMaxRangeTime();
+  const isEqualMinDate = timeValue == null ? void 0 : timeValue.isSame(minTime, "day");
+  const isEqualMaxDate = timeValue == null ? void 0 : timeValue.isSame(maxTime, "day");
+  const allHours = Array.from({ length: 24 }, (_, i) => i);
+  const disabledViewHours = ((_b = disabledTimeView == null ? void 0 : (_a = disabledTimeView()).hour) == null ? void 0 : _b.call(_a)) || [];
+  const minHour = (_c = minTime == null ? void 0 : minTime.hour()) != null ? _c : 0;
+  const maxHour = (_d = maxTime == null ? void 0 : maxTime.hour()) != null ? _d : 23;
+  const outOfMinHours = allHours.filter((hour) => hour < minHour);
+  const outOfMaxHours = allHours.filter((hour) => hour > maxHour);
+  const generateHourArray = (start, end, step) => {
+    if (!step) {
+      step = 1;
+    }
+    return Array.from(
+      { length: Math.ceil((end - start) / step) },
+      (_, i) => start + i * step
+    );
+  };
+  const hourStep = (_e = timeSteps.hour) != null ? _e : 1;
+  const amArr = generateHourArray(0, 12, hourStep);
+  const pmArr = generateHourArray(12, 24, hourStep);
+  const disabledAmPm = (disabledHours) => {
+    const containsAll = (arr) => arr.every((item) => disabledHours.includes(item));
+    const containsAllAmArr = containsAll(amArr);
+    const containsAllPmArr = containsAll(pmArr);
+    if (containsAllAmArr && containsAllPmArr)
+      return ["AM", "PM"];
+    if (containsAllAmArr)
+      return ["AM"];
+    if (containsAllPmArr)
+      return ["PM"];
+    return [];
+  };
+  if (!timeValue || isEqualMinDate && isEqualMaxDate) {
+    if (type === "meridiem") {
+      const disabledHours = [
+        .../* @__PURE__ */ new Set([...outOfMinHours, ...outOfMaxHours, ...disabledViewHours])
+      ];
+      return disabledAmPm(disabledHours);
+    }
+    return [
+      .../* @__PURE__ */ new Set([
+        ...disabledViewTime,
+        ...outOfMinRangeTime,
+        ...outOfMaxRangeTime
+      ])
+    ];
+  }
+  if (!isEqualMinDate && !isEqualMaxDate) {
+    if (type === "meridiem") {
+      const disabledHours = disabledViewHours;
+      return disabledAmPm(disabledHours);
+    }
+    return disabledViewTime;
+  }
+  if (isEqualMinDate) {
+    if (type === "meridiem") {
+      const disabledHours = [
+        .../* @__PURE__ */ new Set([...outOfMinHours, ...disabledViewHours])
+      ];
+      return disabledAmPm(disabledHours);
+    }
+    return [.../* @__PURE__ */ new Set([...disabledViewTime, ...outOfMinRangeTime])];
+  }
+  if (type === "meridiem") {
+    const disabledHours = [
+      .../* @__PURE__ */ new Set([...outOfMaxHours, ...disabledViewHours])
+    ];
+    return disabledAmPm(disabledHours);
+  }
+  return [.../* @__PURE__ */ new Set([...disabledViewTime, ...outOfMaxRangeTime])];
+};
+const calculateValidMinTime = (disabledTimeView, minTime) => {
+  var _a, _b, _c, _d, _e, _f;
+  const defaultTime = dayjs().set("hour", 0).set("minute", 0).set("second", 0);
+  let validTime = minTime || defaultTime;
+  const disabledHours = (_b = disabledTimeView == null ? void 0 : (_a = disabledTimeView()).hour) == null ? void 0 : _b.call(_a);
+  if (disabledHours.includes(validTime.hour())) {
+    const validHours = Array.from({ length: 24 }, (_, i) => i).filter(
+      (value) => !disabledHours.includes(value) && value > validTime.hour()
+    );
+    const minValue = Math.min(...validHours);
+    validTime = validTime.set("hour", minValue);
+  }
+  if (validTime.hour() > (minTime == null ? void 0 : minTime.hour())) {
+    validTime = validTime.set("minute", 0);
+    validTime = validTime.set("second", 0);
+  }
+  const disabledMinutes = (_d = disabledTimeView == null ? void 0 : (_c = disabledTimeView()).minute) == null ? void 0 : _d.call(_c, validTime.hour());
+  if (disabledMinutes.includes(validTime.minute())) {
+    const validMinutes = Array.from({ length: 60 }, (_, i) => i).filter(
+      (value) => {
+        if (validTime.hour() > (minTime == null ? void 0 : minTime.hour())) {
+          return !disabledMinutes.includes(value);
+        }
+        return !disabledMinutes.includes(value) && value > validTime.minute();
+      }
+    );
+    const minValue = Math.min(...validMinutes);
+    validTime = validTime.set("minute", minValue);
+  }
+  if (validTime.minute() > (minTime == null ? void 0 : minTime.minute())) {
+    validTime = validTime.set("second", 0);
+  }
+  const disabledSeconds = (_f = disabledTimeView == null ? void 0 : (_e = disabledTimeView()).second) == null ? void 0 : _f.call(
+    _e,
+    validTime.hour(),
+    validTime.minute()
+  );
+  if (disabledSeconds.includes(validTime.second())) {
+    const validSeconds = Array.from({ length: 60 }, (_, i) => i).filter(
+      (value) => {
+        if (validTime.hour() > (minTime == null ? void 0 : minTime.hour()) || validTime.minute() > (minTime == null ? void 0 : minTime.minute())) {
+          return !disabledSeconds.includes(value);
+        }
+        return !disabledMinutes.includes(value) && value > validTime.second();
+      }
+    );
+    const minValue = Math.min(...validSeconds);
+    validTime = validTime.set("second", minValue);
+  }
+  return validTime;
+};
+const dateToDayjs = (date) => {
+  if (!date)
+    return void 0;
+  return dayjs(date);
+};
+export {
+  calculateValidMinTime,
+  dateToDayjs,
+  getIsRangeDate,
+  getIsRangeTime,
+  getOutOfMaxRangeMinutes,
+  getOutOfMaxRangeSeconds,
+  getOutOfMinRangeMinutes,
+  getOutOfMinRangeSeconds,
+  getdisabledTime,
+  isDisabledTime,
+  isDisabledViewTime
+};

package/es/Dialog/Dialog.js

@@ -30,7 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useImperativeHandle, useRef } from "react";
+import React, { useRef } from "react";
+import { useUniqueId } from "@bifrostui/utils";
 import { Input } from "../Input";
 import { Button } from "../Button";
 import { useLocaleText } from "../locales";
@@ -42,11 +43,11 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     open,
     onOk,
-    onClose,
-    header,
-    message,
-    type,
-    confirmText,
+    onCancel,
+    title,
+    content,
+    type = "confirm",
+    okText,
     cancelText,
     placeholder,
     InputProps,
@@ -55,33 +56,42 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
-    "onClose",
-    "header",
-    "message",
+    "onCancel",
+    "title",
+    "content",
     "type",
-    "confirmText",
+    "okText",
     "cancelText",
     "placeholder",
     "InputProps",
     "className",
     "theme"
   ]);
-  const InputRef = useRef(null);
+  const inputRef = useRef(null);
+  const titleId = useUniqueId();
+  const contentId = useUniqueId();
   const themeConfig = useTheme(theme);
   const {
     cancel,
-    confirm,
+    ok,
     placeholder: placeholderLocaleName
   } = useLocaleText("dialog", themeConfig);
-  useImperativeHandle(ref, () => {
-    return { theme: themeConfig };
-  });
-  const footerNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ React.createElement(
+  const isAlertMode = type === "alert";
+  const isPromptMode = type === "prompt";
+  const handleOk = (event) => {
+    var _a2;
+    const inputValue = ((_a2 = inputRef.current) == null ? void 0 : _a2.value) || "";
+    onOk == null ? void 0 : onOk(event, { value: inputValue });
+  };
+  const handleCancel = (event) => {
+    onCancel == null ? void 0 : onCancel(event);
+  };
+  const actionsNode = /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ React.createElement(
     Button,
     {
       variant: "text",
-      onClick: onClose,
-      className: `${prefixCls}-body-button`
+      onClick: handleCancel,
+      className: `${prefixCls}-actions-btn`
     },
     cancelText || cancel
   ), /* @__PURE__ */ React.createElement(
@@ -89,33 +99,45 @@ const Dialog = /* @__PURE__ */ React.forwardRef((props, ref) => {
     {
       variant: "text",
       color: "primary",
-      onClick: () => {
-        var _a2;
-        onOk((_a2 = InputRef == null ? void 0 : InputRef.current) == null ? void 0 : _a2.value);
-      },
-      className: `${prefixCls}-body-button`
+      onClick: handleOk,
+      className: `${prefixCls}-actions-btn`
     },
-    confirmText || confirm
+    okText || ok
   ));
-  const inputNode = type === "prompt" && /* @__PURE__ */ React.createElement(
+  const inputNode = isPromptMode && /* @__PURE__ */ React.createElement(
     Input,
     __spreadProps(__spreadValues({}, InputProps), {
-      inputRef: InputRef,
-      className: `${prefixCls}-body-input`,
-      placeholder: `${placeholder || placeholderLocaleName}`
+      inputRef,
+      className: `${prefixCls}-input`,
+      placeholder: placeholder || placeholderLocaleName,
+      autoFocus: true,
+      "aria-describedby": content ? contentId : void 0
     })
   );
-  if (!open)
-    return null;
+  const ariaLabelledBy = title ? titleId : void 0;
+  const ariaDescribedBy = content ? contentId : void 0;
   return /* @__PURE__ */ React.createElement(
     Modal,
     __spreadProps(__spreadValues({}, others), {
-      open: true,
-      className: clsx(prefixCls, className),
-      disablePortal: true,
-      onClose
+      open,
+      ref,
+      className: clsx(prefixCls, `${prefixCls}-${type}`, className),
+      onClose: handleCancel
     }),
-    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ React.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${prefixCls}-container`,
+        role: type === "alert" ? "alertdialog" : "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      title && /* @__PURE__ */ React.createElement("h1", { id: titleId, className: `${prefixCls}-title` }, title),
+      content && /* @__PURE__ */ React.createElement("div", { id: contentId, className: `${prefixCls}-content` }, content),
+      inputNode,
+      actionsNode
+    )
   );
 });
 Dialog.displayName = "BuiDialog";