@wangxinowo/vue-datepicker-next 1.0.2 → 1.0.5

package/src/components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -1,264 +1,277 @@
-import PropTypes from '../../../_util/vue-types';
-import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps, getListeners } from '../../../_util/props-util';
-import MonthPanel from '../month/MonthPanel';
-import YearPanel from '../year/YearPanel';
-import DecadePanel from '../decade/DecadePanel';
-function noop() {}
-function goMonth(direction) {
-  const next = this.value.clone();
-  next.add(direction, 'months');
-  this.__emit('valueChange', next);
-}
-
-function goYear(direction) {
-  const next = this.value.clone();
-  next.add(direction, 'years');
-  this.__emit('valueChange', next);
-}
-
-function showIf(condition, el) {
-  return condition ? el : null;
-}
-
-const CalendarHeader = {
-  name: 'CalendarHeader',
-  mixins: [BaseMixin],
-  props: {
-    prefixCls: PropTypes.string,
-    value: PropTypes.object,
-    // onValueChange: PropTypes.func,
-    showTimePicker: PropTypes.bool,
-    // onPanelChange: PropTypes.func,
-    locale: PropTypes.object,
-    enablePrev: PropTypes.any.def(1),
-    enableNext: PropTypes.any.def(1),
-    disabledMonth: PropTypes.func,
-    mode: PropTypes.any,
-    selectedValue: PropTypes.object,
-    monthCellRender: PropTypes.func,
-    monthCellContentRender: PropTypes.func,
-    renderFooter: PropTypes.func,
-  },
-  data() {
-    this.nextMonth = goMonth.bind(this, 1);
-    this.previousMonth = goMonth.bind(this, -1);
-    this.nextYear = goYear.bind(this, 1);
-    this.previousYear = goYear.bind(this, -1);
-    return {
-      yearPanelReferer: null,
-    };
-  },
-  methods: {
-    onMonthSelect(value) {
-      this.__emit('panelChange', value, 'date');
-      if (getListeners(this).monthSelect) {
-        this.__emit('monthSelect', value);
-      } else {
-        // 只有当当前不是月份选择器模式时才触发 valueChange
-        // 当 mode === 'month' 时，表示用户在月份选择器模式下直接选择月份
-        // 此时不需要触发 valueChange，因为选择已通过 panelChange 处理
-        if (this.mode !== 'month') {
-          this.__emit('valueChange', value);
-        }
-      }
-    },
-
-    onYearSelect(value) {
-      const referer = this.yearPanelReferer;
-      this.setState({ yearPanelReferer: null });
-      this.__emit('panelChange', value, referer);
-      // 只有当从其他面板进入年份选择时才触发 valueChange
-      // 当 referer 为 null 时，表示用户在年份选择器模式下直接选择年份
-      // 此时不需要触发 valueChange，因为选择已通过 panelChange 处理
-      // 触发 valueChange 会导致面板显示值被重置
-      if (referer) {
-        this.__emit('valueChange', value);
-      }
-    },
-
-    onDecadeSelect(value) {
-      this.__emit('panelChange', value, 'year');
-      this.__emit('valueChange', value);
-    },
-
-    // 处理年份面板的十年导航变化
-    onYearValueChange(value) {
-      this.__emit('valueChange', value);
-    },
-
-    changeYear(direction) {
-      if (direction > 0) {
-        this.nextYear();
-      } else {
-        this.previousYear();
-      }
-    },
-
-    monthYearElement(showTimePicker) {
-      const props = this.$props;
-      const prefixCls = props.prefixCls;
-      const locale = props.locale;
-      const value = props.value;
-      const localeData = value.localeData();
-      const monthBeforeYear = locale.monthBeforeYear;
-      const selectClassName = `${prefixCls}-${monthBeforeYear ? 'my-select' : 'ym-select'}`;
-      const timeClassName = showTimePicker ? ` ${prefixCls}-time-status` : '';
-      const year = (
-        <a
-          class={`${prefixCls}-year-select${timeClassName}`}
-          role="button"
-          onClick={showTimePicker ? noop : () => this.showYearPanel('date')}
-          title={showTimePicker ? null : locale.yearSelect}
-        >
-          {value.format(locale.yearFormat)}
-        </a>
-      );
-      const month = (
-        <a
-          class={`${prefixCls}-month-select${timeClassName}`}
-          role="button"
-          onClick={showTimePicker ? noop : this.showMonthPanel}
-          title={showTimePicker ? null : locale.monthSelect}
-        >
-          {locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)}
-        </a>
-      );
-      let day;
-      if (showTimePicker) {
-        day = (
-          <a class={`${prefixCls}-day-select${timeClassName}`} role="button">
-            {value.format(locale.dayFormat)}
-          </a>
-        );
-      }
-      let my = [];
-      if (monthBeforeYear) {
-        my = [month, day, year];
-      } else {
-        my = [year, month, day];
-      }
-      return <span class={selectClassName}>{my}</span>;
-    },
-
-    showMonthPanel() {
-      // null means that users' interaction doesn't change value
-      this.__emit('panelChange', null, 'month');
-    },
-
-    showYearPanel(referer) {
-      this.setState({ yearPanelReferer: referer });
-      this.__emit('panelChange', null, 'year');
-    },
-
-    showDecadePanel() {
-      this.__emit('panelChange', null, 'decade');
-    },
-  },
-
-  render() {
-    const props = getOptionProps(this);
-    const {
-      prefixCls,
-      locale,
-      mode,
-      value,
-      showTimePicker,
-      enableNext,
-      enablePrev,
-      disabledMonth,
-      renderFooter,
-      selectedValue,
-    } = props;
-
-    let panel = null;
-    if (mode === 'month') {
-      panel = (
-        <MonthPanel
-          locale={locale}
-          value={value}
-          selectedValue={selectedValue}
-          rootPrefixCls={prefixCls}
-          onSelect={this.onMonthSelect}
-          onYearPanelShow={() => this.showYearPanel('month')}
-          disabledDate={disabledMonth}
-          cellRender={props.monthCellRender}
-          contentRender={props.monthCellContentRender}
-          renderFooter={renderFooter}
-          changeYear={this.changeYear}
-        />
-      );
-    }
-    if (mode === 'year') {
-      panel = (
-        <YearPanel
-          locale={locale}
-          value={value}
-          selectedValue={selectedValue}
-          rootPrefixCls={prefixCls}
-          onSelect={this.onYearSelect}
-          onValueChange={this.onYearValueChange}
-          onDecadePanelShow={this.showDecadePanel}
-          renderFooter={renderFooter}
-          disabledDate={disabledMonth}
-        />
-      );
-    }
-    if (mode === 'decade') {
-      panel = (
-        <DecadePanel
-          locale={locale}
-          value={value}
-          rootPrefixCls={prefixCls}
-          onSelect={this.onDecadeSelect}
-          renderFooter={renderFooter}
-        />
-      );
-    }
-
-    return (
-      <div class={`${prefixCls}-header`}>
-        <div style={{ position: 'relative' }}>
-          {showIf(
-            enablePrev && !showTimePicker,
-            <a
-              class={`${prefixCls}-prev-year-btn`}
-              role="button"
-              onClick={this.previousYear}
-              title={locale.previousYear}
-            />,
-          )}
-          {showIf(
-            enablePrev && !showTimePicker,
-            <a
-              class={`${prefixCls}-prev-month-btn`}
-              role="button"
-              onClick={this.previousMonth}
-              title={locale.previousMonth}
-            />,
-          )}
-          {this.monthYearElement(showTimePicker)}
-          {showIf(
-            enableNext && !showTimePicker,
-            <a
-              class={`${prefixCls}-next-month-btn`}
-              onClick={this.nextMonth}
-              title={locale.nextMonth}
-            />,
-          )}
-          {showIf(
-            enableNext && !showTimePicker,
-            <a
-              class={`${prefixCls}-next-year-btn`}
-              onClick={this.nextYear}
-              title={locale.nextYear}
-            />,
-          )}
-        </div>
-        {panel}
-      </div>
-    );
-  },
-};
-
-export default CalendarHeader;
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
+import MonthPanel from '../month/MonthPanel';
+import YearPanel from '../year/YearPanel';
+import DecadePanel from '../decade/DecadePanel';
+function noop() {}
+function goMonth(direction) {
+  const next = this.value.clone();
+  next.add(direction, 'months');
+  this.__emit('valueChange', next);
+}
+
+function goYear(direction) {
+  const next = this.value.clone();
+  next.add(direction, 'years');
+  this.__emit('valueChange', next);
+}
+
+function showIf(condition, el) {
+  return condition ? el : null;
+}
+
+const CalendarHeader = {
+  name: 'CalendarHeader',
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    value: PropTypes.object,
+    // onValueChange: PropTypes.func,
+    showTimePicker: PropTypes.bool,
+    // onPanelChange: PropTypes.func,
+    locale: PropTypes.object,
+    enablePrev: PropTypes.any.def(1),
+    enableNext: PropTypes.any.def(1),
+    disabledMonth: PropTypes.func,
+    mode: PropTypes.any,
+    // 支持数组形式，用于范围选择器
+    selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    // hover 值，用于范围选择时的预览效果
+    hoverValue: PropTypes.array.def([]),
+    monthCellRender: PropTypes.func,
+    monthCellContentRender: PropTypes.func,
+    renderFooter: PropTypes.func,
+    // 用于范围选择器，标识是左面板还是右面板
+    direction: PropTypes.string,
+  },
+  data() {
+    this.nextMonth = goMonth.bind(this, 1);
+    this.previousMonth = goMonth.bind(this, -1);
+    this.nextYear = goYear.bind(this, 1);
+    this.previousYear = goYear.bind(this, -1);
+    return {
+      yearPanelReferer: null,
+    };
+  },
+  methods: {
+    onMonthSelect(value) {
+      this.__emit('panelChange', value, 'date');
+      if (getListeners(this).monthSelect) {
+        this.__emit('monthSelect', value);
+      } else {
+        // 只有当当前不是月份选择器模式时才触发 valueChange
+        // 当 mode === 'month' 时，表示用户在月份选择器模式下直接选择月份
+        // 此时不需要触发 valueChange，因为选择已通过 panelChange 处理
+        if (this.mode !== 'month') {
+          this.__emit('valueChange', value);
+        }
+      }
+    },
+
+    onYearSelect(value) {
+      const referer = this.yearPanelReferer;
+      this.setState({ yearPanelReferer: null });
+      this.__emit('panelChange', value, referer);
+      // 只有当从其他面板进入年份选择时才触发 valueChange
+      // 当 referer 为 null 时，表示用户在年份选择器模式下直接选择年份
+      // 此时不需要触发 valueChange，因为选择已通过 panelChange 处理
+      // 触发 valueChange 会导致面板显示值被重置
+      if (referer) {
+        this.__emit('valueChange', value);
+      }
+    },
+
+    onDecadeSelect(value) {
+      this.__emit('panelChange', value, 'year');
+      this.__emit('valueChange', value);
+    },
+
+    // 处理年份面板的十年导航变化
+    onYearValueChange(value) {
+      this.__emit('valueChange', value);
+    },
+
+    changeYear(direction) {
+      if (direction > 0) {
+        this.nextYear();
+      } else {
+        this.previousYear();
+      }
+    },
+
+    monthYearElement(showTimePicker) {
+      const props = this.$props;
+      const prefixCls = props.prefixCls;
+      const locale = props.locale;
+      const value = props.value;
+      const localeData = value.localeData();
+      const monthBeforeYear = locale.monthBeforeYear;
+      const selectClassName = `${prefixCls}-${monthBeforeYear ? 'my-select' : 'ym-select'}`;
+      const timeClassName = showTimePicker ? ` ${prefixCls}-time-status` : '';
+      const year = (
+        <a
+          class={`${prefixCls}-year-select${timeClassName}`}
+          role="button"
+          onClick={showTimePicker ? noop : () => this.showYearPanel('date')}
+          title={showTimePicker ? null : locale.yearSelect}
+        >
+          {value.format(locale.yearFormat)}
+        </a>
+      );
+      const month = (
+        <a
+          class={`${prefixCls}-month-select${timeClassName}`}
+          role="button"
+          onClick={showTimePicker ? noop : this.showMonthPanel}
+          title={showTimePicker ? null : locale.monthSelect}
+        >
+          {locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)}
+        </a>
+      );
+      let day;
+      if (showTimePicker) {
+        day = (
+          <a class={`${prefixCls}-day-select${timeClassName}`} role="button">
+            {value.format(locale.dayFormat)}
+          </a>
+        );
+      }
+      let my = [];
+      if (monthBeforeYear) {
+        my = [month, day, year];
+      } else {
+        my = [year, month, day];
+      }
+      return <span class={selectClassName}>{my}</span>;
+    },
+
+    showMonthPanel() {
+      // null means that users' interaction doesn't change value
+      this.__emit('panelChange', null, 'month');
+    },
+
+    showYearPanel(referer) {
+      this.setState({ yearPanelReferer: referer });
+      this.__emit('panelChange', null, 'year');
+    },
+
+    showDecadePanel() {
+      this.__emit('panelChange', null, 'decade');
+    },
+  },
+
+  render() {
+    const props = getOptionProps(this);
+    const {
+      prefixCls,
+      locale,
+      mode,
+      value,
+      showTimePicker,
+      enableNext,
+      enablePrev,
+      disabledMonth,
+      renderFooter,
+      selectedValue,
+      hoverValue,
+    } = props;
+
+    const yearHover = getListeners(this).yearHover || noop;
+    const monthHover = getListeners(this).monthHover || noop;
+
+    let panel = null;
+    if (mode === 'month') {
+      panel = (
+        <MonthPanel
+          locale={locale}
+          value={value}
+          selectedValue={selectedValue}
+          hoverValue={hoverValue}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onMonthSelect}
+          onYearPanelShow={() => this.showYearPanel('month')}
+          onMonthHover={monthHover}
+          disabledDate={disabledMonth}
+          cellRender={props.monthCellRender}
+          contentRender={props.monthCellContentRender}
+          renderFooter={renderFooter}
+          changeYear={this.changeYear}
+        />
+      );
+    }
+    if (mode === 'year') {
+      panel = (
+        <YearPanel
+          locale={locale}
+          value={value}
+          selectedValue={selectedValue}
+          hoverValue={hoverValue}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onYearSelect}
+          onValueChange={this.onYearValueChange}
+          onDecadePanelShow={this.showDecadePanel}
+          onYearHover={yearHover}
+          renderFooter={renderFooter}
+          disabledDate={disabledMonth}
+        />
+      );
+    }
+    if (mode === 'decade') {
+      panel = (
+        <DecadePanel
+          locale={locale}
+          value={value}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onDecadeSelect}
+          renderFooter={renderFooter}
+        />
+      );
+    }
+
+    return (
+      <div class={`${prefixCls}-header`}>
+        <div style={{ position: 'relative' }}>
+          {showIf(
+            enablePrev && !showTimePicker,
+            <a
+              class={`${prefixCls}-prev-year-btn`}
+              role="button"
+              onClick={this.previousYear}
+              title={locale.previousYear}
+            />,
+          )}
+          {showIf(
+            enablePrev && !showTimePicker,
+            <a
+              class={`${prefixCls}-prev-month-btn`}
+              role="button"
+              onClick={this.previousMonth}
+              title={locale.previousMonth}
+            />,
+          )}
+          {this.monthYearElement(showTimePicker)}
+          {showIf(
+            enableNext && !showTimePicker,
+            <a
+              class={`${prefixCls}-next-month-btn`}
+              onClick={this.nextMonth}
+              title={locale.nextMonth}
+            />,
+          )}
+          {showIf(
+            enableNext && !showTimePicker,
+            <a
+              class={`${prefixCls}-next-year-btn`}
+              onClick={this.nextYear}
+              title={locale.nextYear}
+            />,
+          )}
+        </div>
+        {panel}
+      </div>
+    );
+  },
+};
+
+export default CalendarHeader;