taro-ui 3.3.3 → 3.4.0

package/dist/components/calendar/controller/index.js

@@ -2,50 +2,54 @@ import classnames from "classnames";
 import dayjs from "dayjs";
 import React from "react";
 import { Picker, Text, View } from "@tarojs/components";
-class AtCalendarController extends React.Component {
-  render() {
-    const { generateDate, minDate, maxDate, monthFormat, hideArrow } = this.props;
-    const dayjsDate = dayjs(generateDate);
-    const dayjsMinDate = !!minDate && dayjs(minDate);
-    const dayjsMaxDate = !!maxDate && dayjs(maxDate);
-    const isMinMonth = dayjsMinDate && dayjsMinDate.startOf("month").isSame(dayjsDate);
-    const isMaxMonth = dayjsMaxDate && dayjsMaxDate.startOf("month").isSame(dayjsDate);
-    const minDateValue = dayjsMinDate ? dayjsMinDate.format("YYYY-MM") : "";
-    const maxDateValue = dayjsMaxDate ? dayjsMaxDate.format("YYYY-MM") : "";
-    return /* @__PURE__ */ React.createElement(View, { className: "at-calendar__controller controller" }, hideArrow ? null : /* @__PURE__ */ React.createElement(
-      View,
-      {
-        className: classnames("controller__arrow controller__arrow--left", {
-          "controller__arrow--disabled": isMinMonth
-        }),
-        onClick: this.props.onPreMonth.bind(this, isMinMonth)
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Picker,
-      {
-        mode: "date",
-        fields: "month",
-        end: maxDateValue,
-        start: minDateValue,
-        onChange: this.props.onSelectDate,
-        value: dayjsDate.format("YYYY-MM")
-      },
-      /* @__PURE__ */ React.createElement(Text, { className: "controller__info" }, dayjsDate.format(monthFormat))
-    ), hideArrow ? null : /* @__PURE__ */ React.createElement(
-      View,
-      {
-        className: classnames(
-          "controller__arrow controller__arrow--right",
-          {
-            "controller__arrow--disabled": isMaxMonth
-          }
-        ),
-        onClick: this.props.onNextMonth.bind(this, isMaxMonth)
-      }
-    ));
-  }
+function AtCalendarController({
+  generateDate,
+  minDate,
+  maxDate,
+  monthFormat,
+  hideArrow,
+  onPreMonth,
+  onNextMonth,
+  onSelectDate
+}) {
+  const dayjsDate = dayjs(generateDate);
+  const dayjsMinDate = !!minDate && dayjs(minDate);
+  const dayjsMaxDate = !!maxDate && dayjs(maxDate);
+  const isMinMonth = dayjsMinDate && dayjsMinDate.startOf("month").isSame(dayjsDate);
+  const isMaxMonth = dayjsMaxDate && dayjsMaxDate.startOf("month").isSame(dayjsDate);
+  const minDateValue = dayjsMinDate ? dayjsMinDate.format("YYYY-MM") : "";
+  const maxDateValue = dayjsMaxDate ? dayjsMaxDate.format("YYYY-MM") : "";
+  return /* @__PURE__ */ React.createElement(View, { className: "at-calendar__controller controller" }, hideArrow ? null : /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: classnames("controller__arrow controller__arrow--left", {
+        "controller__arrow--disabled": isMinMonth
+      }),
+      onClick: () => onPreMonth(isMinMonth)
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Picker,
+    {
+      mode: "date",
+      fields: "month",
+      end: maxDateValue,
+      start: minDateValue,
+      onChange: onSelectDate,
+      value: dayjsDate.format("YYYY-MM")
+    },
+    /* @__PURE__ */ React.createElement(Text, { className: "controller__info" }, dayjsDate.format(monthFormat))
+  ), hideArrow ? null : /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: classnames("controller__arrow controller__arrow--right", {
+        "controller__arrow--disabled": isMaxMonth
+      }),
+      onClick: () => onNextMonth(isMaxMonth)
+    }
+  ));
 }
+var controller_default = AtCalendarController;
 export {
-  AtCalendarController as default
+  controller_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/components/calendar/controller/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/calendar/controller/index.tsx"],"sourcesContent":["import classnames from 'classnames'\nimport dayjs, { Dayjs } from 'dayjs'\nimport React from 'react'\nimport { Picker, Text, View } from '@tarojs/components'\nimport {\n  AtCalendarControllerProps,\n  AtCalendarControllerState\n} from '../../../../types/calendar'\n\nexport default class AtCalendarController extends React.Component<\n  AtCalendarControllerProps,\n  AtCalendarControllerState\n> {\n  public render(): JSX.Element {\n    const { generateDate, minDate, maxDate, monthFormat, hideArrow } =\n      this.props\n\n    const dayjsDate: Dayjs = dayjs(generateDate)\n    const dayjsMinDate: Dayjs | boolean = !!minDate && dayjs(minDate)\n    const dayjsMaxDate: Dayjs | boolean = !!maxDate && dayjs(maxDate)\n\n    const isMinMonth: boolean =\n      dayjsMinDate && dayjsMinDate.startOf('month').isSame(dayjsDate)\n\n    const isMaxMonth: boolean =\n      dayjsMaxDate && dayjsMaxDate.startOf('month').isSame(dayjsDate)\n\n    const minDateValue: string = dayjsMinDate\n      ? dayjsMinDate.format('YYYY-MM')\n      : ''\n    const maxDateValue: string = dayjsMaxDate\n      ? dayjsMaxDate.format('YYYY-MM')\n      : ''\n\n    return (\n      <View className='at-calendar__controller controller'>\n        {hideArrow ? null : (\n          <View\n            className={classnames('controller__arrow controller__arrow--left', {\n              'controller__arrow--disabled': isMinMonth\n            })}\n            onClick={this.props.onPreMonth.bind(this, isMinMonth)}\n          />\n        )}\n        <Picker\n          mode='date'\n          fields='month'\n          end={maxDateValue}\n          start={minDateValue}\n          onChange={this.props.onSelectDate}\n          value={dayjsDate.format('YYYY-MM')}\n        >\n          <Text className='controller__info'>\n            {dayjsDate.format(monthFormat)}\n          </Text>\n        </Picker>\n        {hideArrow ? null : (\n          <View\n            className={classnames(\n              'controller__arrow controller__arrow--right',\n              {\n                'controller__arrow--disabled': isMaxMonth\n              }\n            )}\n            onClick={this.props.onNextMonth.bind(this, isMaxMonth)}\n          />\n        )}\n      </View>\n    )\n  }\n}\n"],"mappings":"AAAA,OAAO,gBAAgB;AACvB,OAAO,WAAsB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,MAAM,YAAY;AAMnC,MAAO,6BAA2C,MAAM,UAGtD;AAAA,EACO,SAAsB;AAC3B,UAAM,EAAE,cAAc,SAAS,SAAS,aAAa,UAAU,IAC7D,KAAK;AAEP,UAAM,YAAmB,MAAM,YAAY;AAC3C,UAAM,eAAgC,CAAC,CAAC,WAAW,MAAM,OAAO;AAChE,UAAM,eAAgC,CAAC,CAAC,WAAW,MAAM,OAAO;AAEhE,UAAM,aACJ,gBAAgB,aAAa,QAAQ,OAAO,EAAE,OAAO,SAAS;AAEhE,UAAM,aACJ,gBAAgB,aAAa,QAAQ,OAAO,EAAE,OAAO,SAAS;AAEhE,UAAM,eAAuB,eACzB,aAAa,OAAO,SAAS,IAC7B;AACJ,UAAM,eAAuB,eACzB,aAAa,OAAO,SAAS,IAC7B;AAEJ,WACE,oCAAC,QAAK,WAAU,wCACb,YAAY,OACX;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW,6CAA6C;AAAA,UACjE,+BAA+B;AAAA,QACjC,CAAC;AAAA,QACD,SAAS,KAAK,MAAM,WAAW,KAAK,MAAM,UAAU;AAAA;AAAA,IACtD,GAEF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,KAAK,MAAM;AAAA,QACrB,OAAO,UAAU,OAAO,SAAS;AAAA;AAAA,MAEjC,oCAAC,QAAK,WAAU,sBACb,UAAU,OAAO,WAAW,CAC/B;AAAA,IACF,GACC,YAAY,OACX;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,+BAA+B;AAAA,UACjC;AAAA,QACF;AAAA,QACA,SAAS,KAAK,MAAM,YAAY,KAAK,MAAM,UAAU;AAAA;AAAA,IACvD,CAEJ;AAAA,EAEJ;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/calendar/controller/index.tsx"],"sourcesContent":["import classnames from 'classnames'\nimport dayjs, { Dayjs } from 'dayjs'\nimport React from 'react'\nimport { Picker, Text, View } from '@tarojs/components'\nimport { AtCalendarControllerProps } from '../../../../types/calendar'\n\nfunction AtCalendarController({\n  generateDate,\n  minDate,\n  maxDate,\n  monthFormat,\n  hideArrow,\n  onPreMonth,\n  onNextMonth,\n  onSelectDate\n}: AtCalendarControllerProps): JSX.Element {\n  const dayjsDate: Dayjs = dayjs(generateDate)\n  const dayjsMinDate: Dayjs | boolean = !!minDate && dayjs(minDate)\n  const dayjsMaxDate: Dayjs | boolean = !!maxDate && dayjs(maxDate)\n\n  const isMinMonth: boolean =\n    dayjsMinDate && dayjsMinDate.startOf('month').isSame(dayjsDate)\n\n  const isMaxMonth: boolean =\n    dayjsMaxDate && dayjsMaxDate.startOf('month').isSame(dayjsDate)\n\n  const minDateValue: string = dayjsMinDate\n    ? dayjsMinDate.format('YYYY-MM')\n    : ''\n  const maxDateValue: string = dayjsMaxDate\n    ? dayjsMaxDate.format('YYYY-MM')\n    : ''\n\n  return (\n    <View className='at-calendar__controller controller'>\n      {hideArrow ? null : (\n        <View\n          className={classnames('controller__arrow controller__arrow--left', {\n            'controller__arrow--disabled': isMinMonth\n          })}\n          onClick={() =>\n            (onPreMonth as (monthDisabled?: boolean) => void)(isMinMonth)\n          }\n        />\n      )}\n      <Picker\n        mode='date'\n        fields='month'\n        end={maxDateValue}\n        start={minDateValue}\n        onChange={onSelectDate}\n        value={dayjsDate.format('YYYY-MM')}\n      >\n        <Text className='controller__info'>\n          {dayjsDate.format(monthFormat)}\n        </Text>\n      </Picker>\n      {hideArrow ? null : (\n        <View\n          className={classnames('controller__arrow controller__arrow--right', {\n            'controller__arrow--disabled': isMaxMonth\n          })}\n          onClick={() =>\n            (onNextMonth as (monthDisabled?: boolean) => void)(isMaxMonth)\n          }\n        />\n      )}\n    </View>\n  )\n}\n\nexport default AtCalendarController\n"],"mappings":"AAAA,OAAO,gBAAgB;AACvB,OAAO,WAAsB;AAC7B,OAAO,WAAW;AAClB,SAAS,QAAQ,MAAM,YAAY;AAGnC,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,YAAmB,MAAM,YAAY;AAC3C,QAAM,eAAgC,CAAC,CAAC,WAAW,MAAM,OAAO;AAChE,QAAM,eAAgC,CAAC,CAAC,WAAW,MAAM,OAAO;AAEhE,QAAM,aACJ,gBAAgB,aAAa,QAAQ,OAAO,EAAE,OAAO,SAAS;AAEhE,QAAM,aACJ,gBAAgB,aAAa,QAAQ,OAAO,EAAE,OAAO,SAAS;AAEhE,QAAM,eAAuB,eACzB,aAAa,OAAO,SAAS,IAC7B;AACJ,QAAM,eAAuB,eACzB,aAAa,OAAO,SAAS,IAC7B;AAEJ,SACE,oCAAC,QAAK,WAAU,wCACb,YAAY,OACX;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,6CAA6C;AAAA,QACjE,+BAA+B;AAAA,MACjC,CAAC;AAAA,MACD,SAAS,MACN,WAAiD,UAAU;AAAA;AAAA,EAEhE,GAEF;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAO;AAAA,MACP,KAAK;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,SAAS;AAAA;AAAA,IAEjC,oCAAC,QAAK,WAAU,sBACb,UAAU,OAAO,WAAW,CAC/B;AAAA,EACF,GACC,YAAY,OACX;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,8CAA8C;AAAA,QAClE,+BAA+B;AAAA,MACjC,CAAC;AAAA,MACD,SAAS,MACN,YAAkD,UAAU;AAAA;AAAA,EAEjE,CAEJ;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/calendar/index.d.ts

@@ -1,20 +1,3 @@
-import React from 'react';
-import { AtCalendarDefaultProps, AtCalendarProps, AtCalendarState } from '../../../types/calendar';
-export default class AtCalendar extends React.Component<AtCalendarProps, Readonly<AtCalendarState>> {
-    static defaultProps: AtCalendarDefaultProps;
-    constructor(props: AtCalendarProps);
-    UNSAFE_componentWillReceiveProps(nextProps: AtCalendarProps): void;
-    private getSingleSelectdState;
-    private getMultiSelectedState;
-    private getSelectedDate;
-    private getInitializeState;
-    private triggerChangeDate;
-    private setMonth;
-    private handleClickPreMonth;
-    private handleClickNextMonth;
-    private handleSelectDate;
-    private handleDayClick;
-    private handleSelectedDate;
-    private handleDayLongClick;
-    render(): JSX.Element;
-}
+import { AtCalendarProps } from '../../../types/calendar';
+declare function AtCalendar(props: AtCalendarProps): JSX.Element;
+export default AtCalendar;

package/dist/components/calendar/index.js

@@ -1,168 +1,68 @@
+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));
 import classnames from "classnames";
 import dayjs from "dayjs";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "@tarojs/components";
+import { useComponentLocale } from "../../hooks/useComponentLocale";
 import AtCalendarBody from "./body/index";
 import AtCalendarController from "./controller/index";
-const defaultProps = {
-  validDates: [],
-  marks: [],
-  isSwiper: true,
-  hideArrow: false,
-  isVertical: false,
-  selectedDates: [],
-  isMultiSelect: false,
-  format: "YYYY-MM-DD",
-  currentDate: Date.now(),
-  monthFormat: "YYYY\u5E74MM\u6708"
-};
-class AtCalendar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getSingleSelectdState = (value) => {
-      const { generateDate } = this.state;
-      const stateValue = {
-        selectedDate: this.getSelectedDate(value.valueOf())
-      };
-      const dayjsGenerateDate = value.startOf("month");
-      const generateDateValue = dayjsGenerateDate.valueOf();
-      if (generateDateValue !== generateDate) {
-        this.triggerChangeDate(dayjsGenerateDate);
-        stateValue.generateDate = generateDateValue;
-      }
-      return stateValue;
-    };
-    this.getMultiSelectedState = (value) => {
-      const { selectedDate } = this.state;
-      const { end, start } = selectedDate;
-      const valueUnix = value.valueOf();
-      const state = {
-        selectedDate
-      };
-      if (end) {
-        state.selectedDate = this.getSelectedDate(valueUnix, 0);
-      } else {
-        state.selectedDate.end = Math.max(valueUnix, +start);
-        state.selectedDate.start = Math.min(valueUnix, +start);
-      }
-      return state;
-    };
-    this.getSelectedDate = (start, end) => {
-      const stateValue = {
-        start,
-        end: start
-      };
-      if (typeof end !== "undefined") {
-        stateValue.end = end;
-      }
-      return stateValue;
-    };
-    this.triggerChangeDate = (value) => {
-      const { format } = this.props;
-      if (typeof this.props.onMonthChange !== "function") return;
-      this.props.onMonthChange(value.format(format));
-    };
-    this.setMonth = (vectorCount) => {
-      const { format } = this.props;
-      const { generateDate } = this.state;
-      const _generateDate = dayjs(generateDate).add(vectorCount, "month");
-      this.setState({
-        generateDate: _generateDate.valueOf()
-      });
-      if (vectorCount && typeof this.props.onMonthChange === "function") {
-        this.props.onMonthChange(_generateDate.format(format));
-      }
-    };
-    this.handleClickPreMonth = (isMinMonth) => {
-      if (isMinMonth === true) {
-        return;
-      }
-      this.setMonth(-1);
-      if (typeof this.props.onClickPreMonth === "function") {
-        this.props.onClickPreMonth();
-      }
+function AtCalendar(props) {
+  const calendarLocale = useComponentLocale("Calendar");
+  const {
+    validDates = [],
+    marks = [],
+    isSwiper = true,
+    hideArrow = false,
+    isVertical = false,
+    selectedDates = [],
+    isMultiSelect = false,
+    format = "YYYY-MM-DD",
+    currentDate = Date.now(),
+    monthFormat,
+    minDate,
+    maxDate,
+    className,
+    onMonthChange,
+    onClickPreMonth,
+    onClickNextMonth,
+    onDayClick,
+    onSelectDate,
+    onDayLongClick
+  } = props;
+  const resolvedMonthFormat = monthFormat != null ? monthFormat : calendarLocale.monthFormat;
+  const getSelectedDate = (start, end) => {
+    const stateValue = {
+      start,
+      end: start
     };
-    this.handleClickNextMonth = (isMaxMonth) => {
-      if (isMaxMonth === true) {
-        return;
-      }
-      this.setMonth(1);
-      if (typeof this.props.onClickNextMonth === "function") {
-        this.props.onClickNextMonth();
-      }
-    };
-    // picker 选择时间改变时触发
-    this.handleSelectDate = (e) => {
-      const { value } = e.detail;
-      const _generateDate = dayjs(value);
-      const _generateDateValue = _generateDate.valueOf();
-      if (this.state.generateDate === _generateDateValue) return;
-      this.triggerChangeDate(_generateDate);
-      this.setState({
-        generateDate: _generateDateValue
-      });
-    };
-    this.handleDayClick = (item) => {
-      const { isMultiSelect } = this.props;
-      const { isDisabled, value } = item;
-      if (isDisabled) return;
-      const dayjsDate = dayjs(value);
-      let stateValue = {};
-      if (isMultiSelect) {
-        stateValue = this.getMultiSelectedState(dayjsDate);
-      } else {
-        stateValue = this.getSingleSelectdState(dayjsDate);
-      }
-      this.setState(stateValue, () => {
-        this.handleSelectedDate();
-      });
-      if (typeof this.props.onDayClick === "function") {
-        this.props.onDayClick({ value: item.value });
-      }
-    };
-    this.handleSelectedDate = () => {
-      const selectDate = this.state.selectedDate;
-      if (typeof this.props.onSelectDate === "function") {
-        const info = {
-          start: dayjs(selectDate.start).format(this.props.format)
-        };
-        if (selectDate.end) {
-          info.end = dayjs(selectDate.end).format(this.props.format);
-        }
-        this.props.onSelectDate({
-          value: info
-        });
-      }
-    };
-    this.handleDayLongClick = (item) => {
-      if (typeof this.props.onDayLongClick === "function") {
-        this.props.onDayLongClick({ value: item.value });
-      }
-    };
-    const { currentDate, isMultiSelect } = props;
-    this.state = this.getInitializeState(currentDate, isMultiSelect);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { currentDate, isMultiSelect } = nextProps;
-    if (!currentDate || currentDate === this.props.currentDate) return;
-    if (isMultiSelect && this.props.isMultiSelect) {
-      const { start, end } = currentDate;
-      const { start: preStart, end: preEnd } = this.props.currentDate;
-      if (start === preStart && preEnd === end) {
-        return;
-      }
+    if (typeof end !== "undefined") {
+      stateValue.end = end;
     }
-    const stateValue = this.getInitializeState(
-      currentDate,
-      isMultiSelect
-    );
-    this.setState(stateValue);
-  }
-  getInitializeState(currentDate, isMultiSelect) {
+    return stateValue;
+  };
+  const getInitializeState = (date, multiSelect) => {
     let end;
     let start;
     let generateDateValue;
-    if (!currentDate) {
+    if (!date) {
       const dayjsStart = dayjs();
       start = dayjsStart.startOf("day").valueOf();
       generateDateValue = dayjsStart.startOf("month").valueOf();
@@ -173,72 +73,190 @@ class AtCalendar extends React.Component {
         }
       };
     }
-    if (isMultiSelect) {
-      const { start: cStart, end: cEnd } = currentDate;
+    if (multiSelect) {
+      const { start: cStart, end: cEnd } = date;
       const dayjsStart = dayjs(cStart);
       start = dayjsStart.startOf("day").valueOf();
       generateDateValue = dayjsStart.startOf("month").valueOf();
       end = cEnd ? dayjs(cEnd).startOf("day").valueOf() : start;
     } else {
-      const dayjsStart = dayjs(currentDate);
+      const dayjsStart = dayjs(date);
       start = dayjsStart.startOf("day").valueOf();
       generateDateValue = dayjsStart.startOf("month").valueOf();
       end = start;
     }
     return {
       generateDate: generateDateValue,
-      selectedDate: this.getSelectedDate(start, end)
+      selectedDate: getSelectedDate(start, end)
+    };
+  };
+  const [generateDate, setGenerateDate] = useState(
+    () => getInitializeState(currentDate, isMultiSelect).generateDate
+  );
+  const [selectedDate, setSelectedDate] = useState(
+    () => getInitializeState(currentDate, isMultiSelect).selectedDate
+  );
+  const prevCurrentDateRef = useRef(currentDate);
+  const prevIsMultiSelectRef = useRef(isMultiSelect);
+  useEffect(() => {
+    if (!currentDate || currentDate === prevCurrentDateRef.current) {
+      prevCurrentDateRef.current = currentDate;
+      prevIsMultiSelectRef.current = isMultiSelect;
+      return;
+    }
+    if (isMultiSelect && prevIsMultiSelectRef.current) {
+      const { start, end } = currentDate;
+      const { start: preStart, end: preEnd } = prevCurrentDateRef.current;
+      if (start === preStart && preEnd === end) {
+        prevCurrentDateRef.current = currentDate;
+        prevIsMultiSelectRef.current = isMultiSelect;
+        return;
+      }
+    }
+    const stateValue = getInitializeState(currentDate, isMultiSelect);
+    setGenerateDate(stateValue.generateDate);
+    setSelectedDate(stateValue.selectedDate);
+    prevCurrentDateRef.current = currentDate;
+    prevIsMultiSelectRef.current = isMultiSelect;
+  }, [currentDate, isMultiSelect]);
+  const triggerChangeDate = (value) => {
+    if (typeof onMonthChange !== "function") return;
+    onMonthChange(value.format(format));
+  };
+  const setMonth = (vectorCount) => {
+    const _generateDate = dayjs(generateDate).add(vectorCount, "month");
+    const nextGenerateDate = _generateDate.valueOf();
+    setGenerateDate(nextGenerateDate);
+    if (vectorCount && typeof onMonthChange === "function") {
+      onMonthChange(_generateDate.format(format));
+    }
+  };
+  const handleClickPreMonth = (isMinMonth) => {
+    if (isMinMonth === true) {
+      return;
+    }
+    setMonth(-1);
+    if (typeof onClickPreMonth === "function") {
+      onClickPreMonth();
+    }
+  };
+  const handleClickNextMonth = (isMaxMonth) => {
+    if (isMaxMonth === true) {
+      return;
+    }
+    setMonth(1);
+    if (typeof onClickNextMonth === "function") {
+      onClickNextMonth();
+    }
+  };
+  const handleSelectDate = (e) => {
+    const { value } = e.detail;
+    const _generateDate = dayjs(value);
+    const _generateDateValue = _generateDate.valueOf();
+    if (generateDate === _generateDateValue) return;
+    triggerChangeDate(_generateDate);
+    setGenerateDate(_generateDateValue);
+  };
+  const notifySelectedDate = (selectDate) => {
+    if (typeof onSelectDate === "function") {
+      const info = {
+        start: dayjs(selectDate.start).format(format)
+      };
+      if (selectDate.end) {
+        info.end = dayjs(selectDate.end).format(format);
+      }
+      onSelectDate({
+        value: info
+      });
+    }
+  };
+  const getSingleSelectdState = (value, currentGenerateDate) => {
+    const stateValue = {
+      selectedDate: getSelectedDate(value.valueOf())
+    };
+    const dayjsGenerateDate = value.startOf("month");
+    const generateDateValue = dayjsGenerateDate.valueOf();
+    if (generateDateValue !== currentGenerateDate) {
+      triggerChangeDate(dayjsGenerateDate);
+      stateValue.generateDate = generateDateValue;
+    }
+    return stateValue;
+  };
+  const getMultiSelectedState = (value, currentSelectedDate) => {
+    const { end, start } = currentSelectedDate;
+    const valueUnix = value.valueOf();
+    const state = {
+      selectedDate: currentSelectedDate
     };
-  }
-  render() {
-    const { generateDate, selectedDate } = this.state;
-    const {
+    if (end) {
+      state.selectedDate = getSelectedDate(valueUnix, 0);
+    } else {
+      state.selectedDate = __spreadProps(__spreadValues({}, currentSelectedDate), {
+        end: Math.max(valueUnix, +start),
+        start: Math.min(valueUnix, +start)
+      });
+    }
+    return state;
+  };
+  const handleDayClick = (item) => {
+    const { isDisabled, value } = item;
+    if (isDisabled) return;
+    const dayjsDate = dayjs(value);
+    let stateValue = {};
+    if (isMultiSelect) {
+      stateValue = getMultiSelectedState(dayjsDate, selectedDate);
+    } else {
+      stateValue = getSingleSelectdState(dayjsDate, generateDate);
+    }
+    if (stateValue.generateDate != null) {
+      setGenerateDate(stateValue.generateDate);
+    }
+    if (stateValue.selectedDate != null) {
+      setSelectedDate(stateValue.selectedDate);
+      notifySelectedDate(stateValue.selectedDate);
+    }
+    if (typeof onDayClick === "function") {
+      onDayClick({ value: item.value });
+    }
+  };
+  const handleDayLongClick = (item) => {
+    if (typeof onDayLongClick === "function") {
+      onDayLongClick({ value: item.value });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(View, { className: classnames("at-calendar", className) }, /* @__PURE__ */ React.createElement(
+    AtCalendarController,
+    {
+      minDate,
+      maxDate,
+      hideArrow,
+      monthFormat: resolvedMonthFormat,
+      generateDate,
+      onPreMonth: handleClickPreMonth,
+      onNextMonth: handleClickNextMonth,
+      onSelectDate: handleSelectDate
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AtCalendarBody,
+    {
       validDates,
       marks,
       format,
       minDate,
       maxDate,
       isSwiper,
-      className,
-      hideArrow,
       isVertical,
-      monthFormat,
-      selectedDates
-    } = this.props;
-    return /* @__PURE__ */ React.createElement(View, { className: classnames("at-calendar", className) }, /* @__PURE__ */ React.createElement(
-      AtCalendarController,
-      {
-        minDate,
-        maxDate,
-        hideArrow,
-        monthFormat,
-        generateDate,
-        onPreMonth: this.handleClickPreMonth,
-        onNextMonth: this.handleClickNextMonth,
-        onSelectDate: this.handleSelectDate
-      }
-    ), /* @__PURE__ */ React.createElement(
-      AtCalendarBody,
-      {
-        validDates,
-        marks,
-        format,
-        minDate,
-        maxDate,
-        isSwiper,
-        isVertical,
-        selectedDate,
-        selectedDates,
-        generateDate,
-        onDayClick: this.handleDayClick,
-        onSwipeMonth: this.setMonth,
-        onLongClick: this.handleDayLongClick
-      }
-    ));
-  }
+      selectedDate,
+      selectedDates,
+      generateDate,
+      onDayClick: handleDayClick,
+      onSwipeMonth: setMonth,
+      onLongClick: handleDayLongClick
+    }
+  ));
 }
-AtCalendar.defaultProps = defaultProps;
+var calendar_default = AtCalendar;
 export {
-  AtCalendar as default
+  calendar_default as default
 };
 //# sourceMappingURL=index.js.map