@pisell/date-picker 1.0.59 → 1.0.60

package/es/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateRange } from '../internals/models';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -8,5 +7,5 @@ export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProp
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
 }
-declare const DateRangePickerToolbar: React.ForwardRefExoticComponent<DateRangePickerToolbarProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+declare const DateRangePickerToolbar: any;
 export { DateRangePickerToolbar };

package/es/PisellDateRangePicker/CloseCircle.d.ts

@@ -0,0 +1,6 @@
+declare const CloseCircle: (props: {
+    size: number;
+    className: string;
+    onClick: any;
+}) => JSX.Element;
+export default CloseCircle;

package/es/PisellDateRangePicker/CloseCircle.js

@@ -0,0 +1,27 @@
+import React from "react";
+var CloseCircle = function CloseCircle(props) {
+  var size = props.size,
+    className = props.className,
+    onClick = props.onClick;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "icon",
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "35105",
+    width: size,
+    height: size
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M938.6496 512a426.6496 426.6496 0 1 1-853.2992 0 426.6496 426.6496 0 0 1 853.2992 0z",
+    fill: "currentColor",
+    "p-id": "35106"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M717.2096 346.1632a27.8528 27.8528 0 0 0-39.3728-39.3216L512 472.576 346.1632 306.8416a27.8016 27.8016 0 1 0-39.3216 39.3216L472.576 512l-165.7856 165.8368a27.8016 27.8016 0 1 0 39.3216 39.3216l165.888-165.7856 165.7856 165.8368a27.8528 27.8528 0 0 0 39.3216-39.424L551.424 512l165.8368-165.8368z",
+    fill: "#FFFFFF",
+    "p-id": "35107"
+  })));
+};
+export default CloseCircle;

package/es/PisellDateRangePicker/index.d.ts

@@ -7,9 +7,9 @@ export interface PisellDateRangePickerProps {
     /** 再次选择日期时是否清除结束时间 */
     clearEndOnSelection?: boolean;
     /** 日期选择确认回调 */
-    onChange?: (day: Dayjs[]) => void;
+    onChange?: (day: (Dayjs | null)[]) => void;
     /** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
-    onDateChange?: (day: Dayjs[]) => void;
+    onDateChange?: (day: (Dayjs | null)[]) => void;
     /** 日期选择值 */
     value?: Dayjs[];
     /** 日期选择默认值 */
@@ -61,6 +61,9 @@ export interface PisellDateRangePickerProps {
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
+    style?: React.CSSProperties;
+    /** 是否展示清除按钮 */
+    allowClear?: boolean;
 }
 declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
 export default PisellDateRangePicker;

package/es/PisellDateRangePicker/index.js

@@ -11,8 +11,9 @@ import Shortcuts from "../Shortcuts";
 import { SingleInputDateRangeField } from "../SingleInputDateRangeField";
 import classNames from "classnames";
 import { isArr, isBoolean } from "@pisell/utils";
-import "./index.less";
 import useCssVariables from "./useCssVariables";
+import CloseCircle from "./CloseCircle";
+import "./index.less";
 var transDayjsArr = function transDayjsArr(dayjsArr, defaultValue) {
   var _newArr;
   var newArr = dayjsArr || defaultValue;
@@ -53,7 +54,9 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     okButtonProps = props.okButtonProps,
     cancelButtonProps = props.cancelButtonProps,
     onDateChange = props.onDateChange,
-    desktopModeMediaQuery = props.desktopModeMediaQuery;
+    desktopModeMediaQuery = props.desktopModeMediaQuery,
+    style = props.style,
+    allowClear = props.allowClear;
   var _useState = useState(propsOpen !== null && propsOpen !== void 0 ? propsOpen : false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -124,10 +127,32 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     },
     dom: document.body
   });
+  var handleClear = function handleClear(e) {
+    e.stopPropagation();
+    setValue([null, null]);
+    setOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange([null, null]);
+  };
+  var endAdornment = useMemo(function () {
+    if (!allowClear) {
+      return suffixIcon;
+    }
+    if (_value.some(function (item) {
+      return !!item;
+    })) {
+      return /*#__PURE__*/React.createElement(CloseCircle, {
+        size: 24,
+        className: "pisell-date-range-picker-clear",
+        onClick: handleClear
+      });
+    }
+  }, [suffixIcon, allowClear, _value]);
   return /*#__PURE__*/React.createElement("span", {
     className: classNames(className, "pisell-date-range-picker", {
       "pisell-date-range-picker-no-border": !bordered
-    })
+    }),
+    style: style
   }, /*#__PURE__*/React.createElement(DateRangePicker
   // defaultValue={defaultValue}
   // key={`${_value?.[0]?.valueOf()}-${_value?.[1]?.valueOf()}`}
@@ -178,7 +203,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
         // variant: "standard",
         // hiddenLabel: true,
         InputProps: {
-          endAdornment: suffixIcon
+          endAdornment: endAdornment
         }
       },
       popper: {

package/es/PisellDateRangePicker/index.less

@@ -8,6 +8,14 @@
   label {
     font-size: 14px;
   }
+  .pisell-date-range-picker-clear {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    height: 24px;
+    :hover {
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
 }
 .pisell-date-range-picker-no-border {
   .MuiOutlinedInput-notchedOutline {
@@ -17,11 +25,11 @@
 .MuiOutlinedInput-notchedOutline {
   legend {
     color: inherit !important;
-    width: auto !important;;
-    margin-bottom: 0.5em !important;;
-    font-size: 1.5em !important;;
-    line-height: 11px !important;;
-    border: none !important;;
+    width: auto !important;
+    margin-bottom: 0.5em !important;
+    font-size: 1.5em !important;
+    line-height: 11px !important;
+    border: none !important;
   }
 }
 
@@ -30,13 +38,13 @@
     width: var(--pisell-date-range-picker-popup-width, 625px);
     .MuiDateRangeCalendar-root {
       width: 100%;
-      flex:1;
+      flex: 1;
       .MuiDateRangeCalendar-monthContainer {
         width: 50%;
         .MuiDayCalendar-header {
           padding: 0 20px;
           .MuiDayCalendar-weekDayLabel {
-            flex:1;
+            flex: 1;
             width: 100%;
           }
         }

package/lib/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateRange } from '../internals/models';
 import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -8,5 +7,5 @@ export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProp
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {
 }
-declare const DateRangePickerToolbar: React.ForwardRefExoticComponent<DateRangePickerToolbarProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+declare const DateRangePickerToolbar: any;
 export { DateRangePickerToolbar };

package/lib/PisellDateRangePicker/CloseCircle.d.ts

@@ -0,0 +1,6 @@
+declare const CloseCircle: (props: {
+    size: number;
+    className: string;
+    onClick: any;
+}) => JSX.Element;
+export default CloseCircle;

package/lib/PisellDateRangePicker/CloseCircle.js

@@ -0,0 +1,67 @@
+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/PisellDateRangePicker/CloseCircle.tsx
+var CloseCircle_exports = {};
+__export(CloseCircle_exports, {
+  default: () => CloseCircle_default
+});
+module.exports = __toCommonJS(CloseCircle_exports);
+var import_react = __toESM(require("react"));
+var CloseCircle = (props) => {
+  const { size, className, onClick } = props;
+  return /* @__PURE__ */ import_react.default.createElement("span", { className, onClick }, /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      className: "icon",
+      viewBox: "0 0 1024 1024",
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      "p-id": "35105",
+      width: size,
+      height: size
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "path",
+      {
+        d: "M938.6496 512a426.6496 426.6496 0 1 1-853.2992 0 426.6496 426.6496 0 0 1 853.2992 0z",
+        fill: "currentColor",
+        "p-id": "35106"
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "path",
+      {
+        d: "M717.2096 346.1632a27.8528 27.8528 0 0 0-39.3728-39.3216L512 472.576 346.1632 306.8416a27.8016 27.8016 0 1 0-39.3216 39.3216L472.576 512l-165.7856 165.8368a27.8016 27.8016 0 1 0 39.3216 39.3216l165.888-165.7856 165.7856 165.8368a27.8528 27.8528 0 0 0 39.3216-39.424L551.424 512l165.8368-165.8368z",
+        fill: "#FFFFFF",
+        "p-id": "35107"
+      }
+    )
+  ));
+};
+var CloseCircle_default = CloseCircle;

package/lib/PisellDateRangePicker/index.d.ts

@@ -7,9 +7,9 @@ export interface PisellDateRangePickerProps {
     /** 再次选择日期时是否清除结束时间 */
     clearEndOnSelection?: boolean;
     /** 日期选择确认回调 */
-    onChange?: (day: Dayjs[]) => void;
+    onChange?: (day: (Dayjs | null)[]) => void;
     /** 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value */
-    onDateChange?: (day: Dayjs[]) => void;
+    onDateChange?: (day: (Dayjs | null)[]) => void;
     /** 日期选择值 */
     value?: Dayjs[];
     /** 日期选择默认值 */
@@ -61,6 +61,9 @@ export interface PisellDateRangePickerProps {
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
+    style?: React.CSSProperties;
+    /** 是否展示清除按钮 */
+    allowClear?: boolean;
 }
 declare const PisellDateRangePicker: (props: PisellDateRangePickerProps) => JSX.Element;
 export default PisellDateRangePicker;

package/lib/PisellDateRangePicker/index.js

@@ -39,8 +39,9 @@ var import_Shortcuts = __toESM(require("../Shortcuts"));
 var import_SingleInputDateRangeField = require("../SingleInputDateRangeField");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
-var import_index = require("./index.less");
 var import_useCssVariables = __toESM(require("./useCssVariables"));
+var import_CloseCircle = __toESM(require("./CloseCircle"));
+var import_index = require("./index.less");
 var transDayjsArr = (dayjsArr, defaultValue) => {
   let newArr = dayjsArr || defaultValue;
   if ((dayjsArr == null ? void 0 : dayjsArr.length) === 0) {
@@ -76,7 +77,9 @@ var PisellDateRangePicker = (props) => {
     okButtonProps,
     cancelButtonProps,
     onDateChange,
-    desktopModeMediaQuery
+    desktopModeMediaQuery,
+    style,
+    allowClear
   } = props;
   const [open, setOpen] = (0, import_react.useState)(propsOpen ?? false);
   (0, import_react.useEffect)(() => {
@@ -141,12 +144,35 @@ var PisellDateRangePicker = (props) => {
     },
     dom: document.body
   });
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setValue([null, null]);
+    setOpen(false);
+    onClose == null ? void 0 : onClose();
+    propsOnChange == null ? void 0 : propsOnChange([null, null]);
+  };
+  const endAdornment = (0, import_react.useMemo)(() => {
+    if (!allowClear) {
+      return suffixIcon;
+    }
+    if (_value.some((item) => !!item)) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_CloseCircle.default,
+        {
+          size: 24,
+          className: "pisell-date-range-picker-clear",
+          onClick: handleClear
+        }
+      );
+    }
+  }, [suffixIcon, allowClear, _value]);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
       className: (0, import_classnames.default)(className, "pisell-date-range-picker", {
         "pisell-date-range-picker-no-border": !bordered
-      })
+      }),
+      style
     },
     /* @__PURE__ */ import_react.default.createElement(
       import_DateRangePicker.DateRangePicker,
@@ -195,7 +221,7 @@ var PisellDateRangePicker = (props) => {
             // variant: "standard",
             // hiddenLabel: true,
             InputProps: {
-              endAdornment: suffixIcon
+              endAdornment
             }
           },
           popper: {

package/lib/PisellDateRangePicker/index.less

@@ -8,6 +8,14 @@
   label {
     font-size: 14px;
   }
+  .pisell-date-range-picker-clear {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    height: 24px;
+    :hover {
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
 }
 .pisell-date-range-picker-no-border {
   .MuiOutlinedInput-notchedOutline {
@@ -17,11 +25,11 @@
 .MuiOutlinedInput-notchedOutline {
   legend {
     color: inherit !important;
-    width: auto !important;;
-    margin-bottom: 0.5em !important;;
-    font-size: 1.5em !important;;
-    line-height: 11px !important;;
-    border: none !important;;
+    width: auto !important;
+    margin-bottom: 0.5em !important;
+    font-size: 1.5em !important;
+    line-height: 11px !important;
+    border: none !important;
   }
 }
 
@@ -30,13 +38,13 @@
     width: var(--pisell-date-range-picker-popup-width, 625px);
     .MuiDateRangeCalendar-root {
       width: 100%;
-      flex:1;
+      flex: 1;
       .MuiDateRangeCalendar-monthContainer {
         width: 50%;
         .MuiDayCalendar-header {
           padding: 0 20px;
           .MuiDayCalendar-weekDayLabel {
-            flex:1;
+            flex: 1;
             width: 100%;
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/date-picker",
-  "version": "1.0.59",
+  "version": "1.0.60",
   "sideEffects": [
     "*.less"
   ],
@@ -26,7 +26,7 @@
     "antd": "^5.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@pisell/utils": "1.0.23"
+    "@pisell/utils": "1.0.21"
   },
   "files": [
     "es",