@wangxinowo/vue-datepicker-next 1.0.3 → 1.0.5

package/src/components/vc-calendar/src/month/MonthPanel.jsx

@@ -1,124 +1,130 @@
-import PropTypes from '../../../_util/vue-types';
-import BaseMixin from '../../../_util/BaseMixin';
-import { hasProp, getListeners } from '../../../_util/props-util';
-import MonthTable from './MonthTable';
-
-function goYear(direction) {
-  this.changeYear(direction);
-}
-
-function noop() {}
-
-const MonthPanel = {
-  name: 'MonthPanel',
-  mixins: [BaseMixin],
-  props: {
-    value: PropTypes.any,
-    defaultValue: PropTypes.any,
-    // 支持单个值或数组（范围选择）
-    selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.array]),
-    cellRender: PropTypes.any,
-    contentRender: PropTypes.any,
-    locale: PropTypes.any,
-    rootPrefixCls: PropTypes.string,
-    // onChange: PropTypes.func,
-    disabledDate: PropTypes.func,
-    // onSelect: PropTypes.func,
-    renderFooter: PropTypes.func,
-    changeYear: PropTypes.func.def(noop),
-  },
-
-  data() {
-    const { value, defaultValue } = this;
-    // bind methods
-    this.nextYear = goYear.bind(this, 1);
-    this.previousYear = goYear.bind(this, -1);
-    return {
-      sValue: value || defaultValue,
-    };
-  },
-  watch: {
-    value(val) {
-      this.setState({
-        sValue: val,
-      });
-    },
-  },
-  methods: {
-    setAndSelectValue(value) {
-      this.setValue(value);
-      this.__emit('select', value);
-    },
-
-    setValue(value) {
-      if (hasProp(this, 'value')) {
-        this.setState({
-          sValue: value,
-        });
-      }
-    },
-  },
-
-  render() {
-    const {
-      sValue,
-      cellRender,
-      contentRender,
-      locale,
-      rootPrefixCls,
-      disabledDate,
-      renderFooter,
-      selectedValue,
-    } = this;
-    const year = sValue.year();
-    const prefixCls = `${rootPrefixCls}-month-panel`;
-
-    const footer = renderFooter && renderFooter('month');
-    return (
-      <div class={prefixCls}>
-        <div>
-          <div class={`${prefixCls}-header`}>
-            <a
-              class={`${prefixCls}-prev-year-btn`}
-              role="button"
-              onClick={this.previousYear}
-              title={locale.previousYear}
-            />
-
-            <a
-              class={`${prefixCls}-year-select`}
-              role="button"
-              onClick={getListeners(this).yearPanelShow || noop}
-              title={locale.yearSelect}
-            >
-              <span class={`${prefixCls}-year-select-content`}>{year}</span>
-              <span class={`${prefixCls}-year-select-arrow`}>x</span>
-            </a>
-
-            <a
-              class={`${prefixCls}-next-year-btn`}
-              role="button"
-              onClick={this.nextYear}
-              title={locale.nextYear}
-            />
-          </div>
-          <div class={`${prefixCls}-body`}>
-            <MonthTable
-              disabledDate={disabledDate}
-              onSelect={this.setAndSelectValue}
-              locale={locale}
-              value={sValue}
-              selectedValue={selectedValue}
-              cellRender={cellRender}
-              contentRender={contentRender}
-              prefixCls={prefixCls}
-            />
-          </div>
-          {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
-        </div>
-      </div>
-    );
-  },
-};
-
-export default MonthPanel;
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { hasProp, getListeners } from '../../../_util/props-util';
+import MonthTable from './MonthTable';
+
+function goYear(direction) {
+  this.changeYear(direction);
+}
+
+function noop() {}
+
+const MonthPanel = {
+  name: 'MonthPanel',
+  mixins: [BaseMixin],
+  props: {
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    // 支持单个值或数组（范围选择）
+    selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.array]),
+    // hover 值，用于范围选择时的预览效果
+    hoverValue: PropTypes.array.def([]),
+    cellRender: PropTypes.any,
+    contentRender: PropTypes.any,
+    locale: PropTypes.any,
+    rootPrefixCls: PropTypes.string,
+    // onChange: PropTypes.func,
+    disabledDate: PropTypes.func,
+    // onSelect: PropTypes.func,
+    renderFooter: PropTypes.func,
+    changeYear: PropTypes.func.def(noop),
+  },
+
+  data() {
+    const { value, defaultValue } = this;
+    // bind methods
+    this.nextYear = goYear.bind(this, 1);
+    this.previousYear = goYear.bind(this, -1);
+    return {
+      sValue: value || defaultValue,
+    };
+  },
+  watch: {
+    value(val) {
+      this.setState({
+        sValue: val,
+      });
+    },
+  },
+  methods: {
+    setAndSelectValue(value) {
+      this.setValue(value);
+      this.__emit('select', value);
+    },
+
+    setValue(value) {
+      if (hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        });
+      }
+    },
+  },
+
+  render() {
+    const {
+      sValue,
+      cellRender,
+      contentRender,
+      locale,
+      rootPrefixCls,
+      disabledDate,
+      renderFooter,
+      selectedValue,
+      hoverValue,
+    } = this;
+    const year = sValue.year();
+    const prefixCls = `${rootPrefixCls}-month-panel`;
+    const monthHover = getListeners(this).monthHover || noop;
+
+    const footer = renderFooter && renderFooter('month');
+    return (
+      <div class={prefixCls}>
+        <div>
+          <div class={`${prefixCls}-header`}>
+            <a
+              class={`${prefixCls}-prev-year-btn`}
+              role="button"
+              onClick={this.previousYear}
+              title={locale.previousYear}
+            />
+
+            <a
+              class={`${prefixCls}-year-select`}
+              role="button"
+              onClick={getListeners(this).yearPanelShow || noop}
+              title={locale.yearSelect}
+            >
+              <span class={`${prefixCls}-year-select-content`}>{year}</span>
+              <span class={`${prefixCls}-year-select-arrow`}>x</span>
+            </a>
+
+            <a
+              class={`${prefixCls}-next-year-btn`}
+              role="button"
+              onClick={this.nextYear}
+              title={locale.nextYear}
+            />
+          </div>
+          <div class={`${prefixCls}-body`}>
+            <MonthTable
+              disabledDate={disabledDate}
+              onSelect={this.setAndSelectValue}
+              onMonthHover={monthHover}
+              locale={locale}
+              value={sValue}
+              selectedValue={selectedValue}
+              hoverValue={hoverValue}
+              cellRender={cellRender}
+              contentRender={contentRender}
+              prefixCls={prefixCls}
+            />
+          </div>
+          {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
+        </div>
+      </div>
+    );
+  },
+};
+
+export default MonthPanel;