@pisell/materials 1.0.364 → 1.0.366

package/lib/components/config-provider/index.d.ts

@@ -6,4 +6,3 @@ export interface ConfigProviderProps extends OriginalConfigProviderProps {
 }
 declare const ConfigProvider: (props: ConfigProviderProps) => React.JSX.Element;
 export default ConfigProvider;
-//# sourceMappingURL=index.d.ts.map

package/lib/components/date-picker/constants.d.ts

@@ -0,0 +1,39 @@
+import dayjs from 'dayjs';
+export declare const presetDetailMap: {
+    today: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    yesterday: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    tomorrow: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    next_monday: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    last_friday: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    first_day_of_this_month: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    last_day_of_this_month: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    first_day_of_next_month: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+    last_day_of_last_month: {
+        getValue: () => dayjs.Dayjs;
+        label: () => any;
+    };
+};

package/lib/components/date-picker/constants.js

@@ -0,0 +1,78 @@
+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 __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);
+
+// src/components/date-picker/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  presetDetailMap: () => presetDetailMap
+});
+module.exports = __toCommonJS(constants_exports);
+var import_dayjs = __toESM(require("dayjs"));
+var import_locales = require("../../locales");
+var presetDetailMap = {
+  today: {
+    getValue: () => (0, import_dayjs.default)().startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-today")
+  },
+  yesterday: {
+    getValue: () => (0, import_dayjs.default)().add(-1, "d").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-yesterday")
+  },
+  tomorrow: {
+    getValue: () => (0, import_dayjs.default)().add(1, "d").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-tomorrow")
+  },
+  next_monday: {
+    getValue: () => (0, import_dayjs.default)().startOf("week").add(8, "day").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-next_monday")
+  },
+  last_friday: {
+    getValue: () => (0, import_dayjs.default)().subtract(1, "week").startOf("week").add(5, "day").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-last_friday")
+  },
+  first_day_of_this_month: {
+    getValue: () => (0, import_dayjs.default)().startOf("month").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-first_day_of_this_month")
+  },
+  last_day_of_this_month: {
+    getValue: () => (0, import_dayjs.default)().endOf("month").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-last_day_of_this_month")
+  },
+  first_day_of_next_month: {
+    getValue: () => (0, import_dayjs.default)().endOf("month").add(1, "day").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-first_day_of_next_month")
+  },
+  last_day_of_last_month: {
+    getValue: () => (0, import_dayjs.default)().startOf("month").subtract(1, "day").startOf("day"),
+    label: () => (0, import_locales.getText)("date-picker-last_day_of_last_month")
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  presetDetailMap
+});

package/lib/components/date-picker/datePickerCpt.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PickerDateProps } from 'antd/es/date-picker/generatePicker';
+import { Dayjs } from 'dayjs';
+import './index.less';
+interface DatePickerCptProps extends PickerDateProps<Dayjs> {
+}
+declare const DatePickerCpt: (props: DatePickerCptProps) => React.JSX.Element;
+export default DatePickerCpt;

package/lib/components/date-picker/datePickerCpt.js

@@ -0,0 +1,297 @@
+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 __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);
+
+// src/components/date-picker/datePickerCpt.tsx
+var datePickerCpt_exports = {};
+__export(datePickerCpt_exports, {
+  default: () => datePickerCpt_default
+});
+module.exports = __toCommonJS(datePickerCpt_exports);
+var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_antd = require("antd");
+var import_browserSelect = __toESM(require("../browserSelect"));
+var import_utils = require("@pisell/utils");
+var import_constants = require("./constants");
+var import_locales = require("../../locales");
+var import_useResponsive = __toESM(require("../../hooks/useResponsive"));
+var import_index = require("./index.less");
+var isValidDate = (dateString, format) => {
+  const date = window.dayjs(dateString, format, true);
+  return date.isValid();
+};
+(0, import_useResponsive.configResponsive)({
+  phone: 0,
+  ipad: 768,
+  pc: 1080
+});
+var DatePickerCpt = (props) => {
+  const { mode, onChange, value, format: propsFormat, defaultValue, ...others } = props;
+  const { locale } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
+  const [currentShortcut, setCurrentShortcut] = (0, import_react.useState)("");
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [popupOpen, setPopupOpen] = (0, import_react.useState)(false);
+  const [_value, setValue] = (0, import_react.useState)(value);
+  const [valueStr, setValueStr] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)(false);
+  const ref = (0, import_react.useRef)(null);
+  const canClose = (0, import_react.useRef)(true);
+  const responsive = (0, import_useResponsive.default)();
+  const isDesktop = !("ontouchstart" in window || navigator.maxTouchPoints);
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setValue(value);
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    setValueStr((_value == null ? void 0 : _value.format(format)) || "");
+  }, [_value]);
+  const customPresetItems = (0, import_react.useMemo)(() => {
+    const preset = [
+      {
+        label: import_constants.presetDetailMap["today"].label(),
+        value: "today"
+      },
+      {
+        label: import_constants.presetDetailMap["yesterday"].label(),
+        value: "yesterday"
+      },
+      {
+        label: import_constants.presetDetailMap["tomorrow"].label(),
+        value: "tomorrow"
+      },
+      {
+        label: import_constants.presetDetailMap["next_monday"].label(),
+        value: "next_monday"
+      },
+      {
+        label: import_constants.presetDetailMap["last_friday"].label(),
+        value: "last_friday"
+      },
+      {
+        label: import_constants.presetDetailMap["first_day_of_this_month"].label(),
+        value: "first_day_of_this_month"
+      },
+      {
+        label: import_constants.presetDetailMap["last_day_of_this_month"].label(),
+        value: "last_day_of_this_month"
+      },
+      {
+        label: import_constants.presetDetailMap["first_day_of_next_month"].label(),
+        value: "first_day_of_next_month"
+      },
+      {
+        label: import_constants.presetDetailMap["last_day_of_last_month"].label(),
+        value: "last_day_of_last_month"
+      }
+    ];
+    if (!currentShortcut) {
+      preset.push({
+        label: (0, import_locales.getText)("date-picker-shortcut-custom"),
+        value: "custom"
+      });
+    }
+    return preset;
+  }, [currentShortcut]);
+  const format = (0, import_react.useMemo)(() => {
+    if (propsFormat) {
+      if ((0, import_utils.isFunction)(propsFormat)) {
+        return propsFormat(value);
+      }
+      return propsFormat;
+    }
+    let localeValue = locale == null ? void 0 : locale.locale;
+    return localeValue === "en" || localeValue === "en-US" ? "DD/MM/YYYY" : "YYYY/MM/DD";
+  }, [propsFormat, locale]);
+  const handleSelectChange = (e) => {
+    var _a;
+    const shortcut = e.target.value;
+    setCurrentShortcut(shortcut);
+    const date = (_a = import_constants.presetDetailMap[shortcut]) == null ? void 0 : _a.getValue();
+    setValue(date);
+    handleOk(date);
+  };
+  const handleTodayClick = () => {
+    const val = (0, import_dayjs.default)().startOf("day");
+    handleChange(val);
+  };
+  const handleOpenChange = (visible) => {
+    if (!visible) {
+      setOpen(visible);
+      setTimeout(() => {
+        var _a;
+        setPopupOpen(visible);
+        (_a = ref.current) == null ? void 0 : _a.blur();
+      });
+      return;
+    }
+    setOpen(visible);
+    setPopupOpen(visible);
+  };
+  const handleOk = (val) => {
+    const returnValue = val || _value;
+    onChange == null ? void 0 : onChange(returnValue, returnValue == null ? void 0 : returnValue.format(format));
+    handleOpenChange(false);
+  };
+  const handleChange = (val, valStr) => {
+    canClose.current = true;
+    setError(false);
+    setCurrentShortcut("");
+    setValue(val);
+    handleOk(val);
+  };
+  const handleApply = () => {
+    if (error)
+      return;
+    handleOk();
+  };
+  const handleDataStrChange = (e) => {
+    const val = e.target.value;
+    setValueStr(val);
+    if (isValidDate(val, format)) {
+      setError(false);
+      const valDate = (0, import_dayjs.default)(val, format);
+      setValue(valDate);
+    } else {
+      setError(true);
+    }
+  };
+  if (!mode || mode === "date") {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.DatePicker,
+      {
+        ...others,
+        ref,
+        defaultValue,
+        showNow: false,
+        onChange: handleChange,
+        open: popupOpen,
+        value: _value,
+        onOpenChange: (o) => {
+          if (!o && !canClose.current) {
+            return;
+          }
+          handleOpenChange(o);
+        },
+        mode: "date",
+        picker: "date",
+        popupClassName: "date-picker-popup-wrap",
+        format: currentShortcut ? () => import_constants.presetDetailMap[currentShortcut].label() : format,
+        panelRender: (panelNode) => {
+          const dom = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-date-picker-custom-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: "pisell-lowcode-date-picker-custom-action",
+              onMouseDown: (e) => {
+                canClose.current = false;
+                e.stopPropagation();
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "50%" } }, /* @__PURE__ */ import_react.default.createElement(
+              import_antd.Input,
+              {
+                size: "large",
+                placeholder: (0, import_dayjs.default)().format(format),
+                value: valueStr,
+                onChange: handleDataStrChange
+              }
+            ), error && /* @__PURE__ */ import_react.default.createElement("span", { className: "date-picker-error" }, (0, import_locales.getText)("date-picker-invalid-date"))),
+            /* @__PURE__ */ import_react.default.createElement(
+              import_browserSelect.default,
+              {
+                value: currentShortcut || "custom",
+                className: "date-picker-toolbar-select",
+                options: customPresetItems,
+                size: "large",
+                onChange: handleSelectChange,
+                style: { width: "50%" }
+              }
+            )
+          ), panelNode), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-custom-footer" }, /* @__PURE__ */ import_react.default.createElement(
+            "span",
+            {
+              className: "pisell-lowcode-custom-footer-today",
+              onClick: handleTodayClick
+            },
+            (0, import_locales.getText)("date-picker-today")
+          ), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "primary", size: "large", onClick: handleApply }, (0, import_locales.getText)("date-picker-apply"))));
+          if (isDesktop) {
+            return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-date-picker-custom-popup-wrap pisell-lowcode-date-picker-dropdown-mode" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-date-picker-custom-wrap" }, dom));
+          }
+          if (responsive === "phone") {
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_antd.Drawer,
+              {
+                placement: "bottom",
+                open,
+                height: 565,
+                closable: false,
+                styles: {
+                  content: {
+                    borderRadius: "8px 8px 0 0"
+                  }
+                },
+                bodyStyle: { padding: 0 },
+                maskClosable: false
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: "pisell-lowcode-picker-custom-dropdown pisell-lowcode-date-picker-custom-popup-wrap",
+                  onMouseDown: (e) => e.stopPropagation()
+                },
+                /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-picker-panel-container pisell-lowcode-picker-date-panel-container" }, dom)
+              )
+            );
+          }
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Modal,
+            {
+              width: 458,
+              open,
+              footer: null,
+              closable: false,
+              wrapClassName: "pisell-lowcode-date-picker-modal"
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: "pisell-lowcode-picker-custom-dropdown pisell-lowcode-date-picker-custom-popup-wrap",
+                onMouseDown: (e) => e.stopPropagation()
+              },
+              /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-picker-panel-container pisell-lowcode-picker-date-panel-container" }, dom)
+            )
+          );
+        }
+      }
+    ));
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.DatePicker, { ...props });
+};
+var datePickerCpt_default = DatePickerCpt;

package/lib/components/date-picker/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+declare const useMediaQuery: (query: string) => boolean;
+export default useMediaQuery;

package/lib/components/date-picker/hooks/useMediaQuery.js

@@ -0,0 +1,43 @@
+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);
+
+// src/components/date-picker/hooks/useMediaQuery.ts
+var useMediaQuery_exports = {};
+__export(useMediaQuery_exports, {
+  default: () => useMediaQuery_default
+});
+module.exports = __toCommonJS(useMediaQuery_exports);
+var import_react = require("react");
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const mediaQuery = window.matchMedia(query);
+    if (mediaQuery.matches !== matches) {
+      setMatches(mediaQuery.matches);
+    }
+    const handleMediaQueryChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleMediaQueryChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleMediaQueryChange);
+    };
+  }, [query]);
+  return matches;
+};
+var useMediaQuery_default = useMediaQuery;

package/lib/components/date-picker/index.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 declare const DatePicker: (props: any) => import("react").JSX.Element;
 export default DatePicker;
-//# sourceMappingURL=index.d.ts.map

package/lib/components/date-picker/index.js

@@ -32,19 +32,20 @@ __export(date_picker_exports, {
   default: () => date_picker_default
 });
 module.exports = __toCommonJS(date_picker_exports);
-var import_antd = require("antd");
 var import_hoc = require("../../utils/hoc");
 var import_dayjs = __toESM(require("dayjs"));
 var import_date_picker = require("@pisell/date-picker");
 var import_localeData = __toESM(require("dayjs/plugin/localeData"));
 var import_weekday = __toESM(require("dayjs/plugin/weekday"));
+var import_datePickerCpt = __toESM(require("./datePickerCpt"));
 import_dayjs.default.extend(import_weekday.default);
 import_dayjs.default.extend(import_localeData.default);
-var DatePicker = (0, import_hoc.withMomentProps)(import_antd.DatePicker, [
+var DatePicker = (0, import_hoc.withMomentProps)(import_datePickerCpt.default, [
   "defaultPickerValue",
   "defaultValue",
   "showTime.defaultValue",
   "value"
 ]);
 DatePicker.RangePicker = import_date_picker.RangePicker;
+DatePicker.OldRangePicker = import_date_picker.OldPisellDateRangePicker;
 var date_picker_default = DatePicker;