feat: update vc-calendar

2024-11-30 02:57:50 +08:00 · 2020-07-21 18:36:27 +08:00 · 2020-07-21 18:36:27 +08:00 · f6e2e54f65
commit f6e2e54f65
parent 6ab243ffaa
13 changed files with 139 additions and 151 deletions
--- a/components/vc-calendar/src/calendar/CalendarFooter.jsx
+++ b/components/vc-calendar/src/calendar/CalendarFooter.jsx
@ -1,11 +1,13 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps, getListeners } from '../../../_util/props-util';
+import { getOptionProps } from '../../../_util/props-util';
 import TodayButton from './TodayButton';
 import OkButton from './OkButton';
 import TimePickerButton from './TimePickerButton';

 const CalendarFooter = {
+  name: 'CalendarFooter',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    prefixCls: PropTypes.string,
@ -42,11 +44,9 @@ const CalendarFooter = {
    const extraFooter = renderFooter && renderFooter(mode);
    if (showToday || timePicker || extraFooter) {
      const btnProps = {
-        props: {
-          ...props,
-          value,
-        },
-        on: getListeners(this),
+        ...props,
+        ...this.$attrs,
+        value,
      };
      let nowEl = null;
      if (showToday) {
--- a/components/vc-calendar/src/calendar/CalendarHeader.jsx
+++ b/components/vc-calendar/src/calendar/CalendarHeader.jsx
@ -23,6 +23,7 @@ function showIf(condition, el) {

 const CalendarHeader = {
  name: 'CalendarHeader',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    prefixCls: PropTypes.string,
--- a/components/vc-calendar/src/calendar/OkButton.jsx
+++ b/components/vc-calendar/src/calendar/OkButton.jsx
@ -1,18 +1,16 @@
 function noop() {}
-export default {
-  functional: true,
-  render(createElement, context) {
-    const { props, listeners = {} } = context;
-    const { prefixCls, locale, okDisabled } = props;
-    const { ok = noop } = listeners;
-    let className = `${prefixCls}-ok-btn`;
-    if (okDisabled) {
-      className += ` ${prefixCls}-ok-btn-disabled`;
-    }
-    return (
-      <a class={className} role="button" onClick={okDisabled ? noop : ok}>
-        {locale.ok}
-      </a>
-    );
-  },
+const OkButton = (_, { attrs }) => {
+  const { prefixCls, locale, okDisabled, onOk } = attrs;
+  let className = `${prefixCls}-ok-btn`;
+  if (okDisabled) {
+    className += ` ${prefixCls}-ok-btn-disabled`;
+  }
+  return (
+    <a class={className} role="button" onClick={okDisabled ? noop : onOk}>
+      {locale.ok}
+    </a>
+  );
 };
+
+OkButton.inheritAttrs = false;
+export default OkButton;
--- a/components/vc-calendar/src/calendar/TimePickerButton.jsx
+++ b/components/vc-calendar/src/calendar/TimePickerButton.jsx
@ -1,22 +1,27 @@
 function noop() {}
-export default {
-  functional: true,
-  render(h, context) {
-    const { props, listeners = {} } = context;
-    const { prefixCls, locale, showTimePicker, timePickerDisabled } = props;
-    const { closeTimePicker = noop, openTimePicker = noop } = listeners;
-    const className = {
-      [`${prefixCls}-time-picker-btn`]: true,
-      [`${prefixCls}-time-picker-btn-disabled`]: timePickerDisabled,
-    };
-    let onClick = noop;
-    if (!timePickerDisabled) {
-      onClick = showTimePicker ? closeTimePicker : openTimePicker;
-    }
-    return (
-      <a class={className} role="button" onClick={onClick}>
-        {showTimePicker ? locale.dateSelect : locale.timeSelect}
-      </a>
-    );
-  },
+const TimePickerButton = (_, { attrs }) => {
+  const {
+    prefixCls,
+    locale,
+    showTimePicker,
+    timePickerDisabled,
+    onCloseTimePicker = noop,
+    onOpenTimePicker = noop,
+  } = attrs;
+  const className = {
+    [`${prefixCls}-time-picker-btn`]: true,
+    [`${prefixCls}-time-picker-btn-disabled`]: timePickerDisabled,
+  };
+  let onClick = noop;
+  if (!timePickerDisabled) {
+    onClick = showTimePicker ? onCloseTimePicker : onOpenTimePicker;
+  }
+  return (
+    <a class={className} role="button" onClick={onClick}>
+      {showTimePicker ? locale.dateSelect : locale.timeSelect}
+    </a>
+  );
 };
+
+TimePickerButton.inheritAttrs = false;
+export default TimePickerButton;
--- a/components/vc-calendar/src/calendar/TodayButton.jsx
+++ b/components/vc-calendar/src/calendar/TodayButton.jsx
@ -1,33 +1,23 @@
 import { getTodayTimeStr, getTodayTime, isAllowedDate } from '../util/';
 function noop() {}
-export default {
-  functional: true,
-  render(createElement, context) {
-    const { props, listeners = {} } = context;
-    const {
-      prefixCls,
-      locale,
-      value,
-      timePicker,
-      disabled,
-      disabledDate,
-      // onToday,
-      text,
-    } = props;
-    const { today = noop } = listeners;
-    const localeNow = (!text && timePicker ? locale.now : text) || locale.today;
-    const disabledToday = disabledDate && !isAllowedDate(getTodayTime(value), disabledDate);
-    const isDisabled = disabledToday || disabled;
-    const disabledTodayClass = isDisabled ? `${prefixCls}-today-btn-disabled` : '';
-    return (
-      <a
-        class={`${prefixCls}-today-btn ${disabledTodayClass}`}
-        role="button"
-        onClick={isDisabled ? noop : today}
-        title={getTodayTimeStr(value)}
-      >
-        {localeNow}
-      </a>
-    );
-  },
+const TodayButton = (_, { attrs }) => {
+  const { prefixCls, locale, value, timePicker, disabled, disabledDate, onToday, text } = attrs;
+  const localeNow = (!text && timePicker ? locale.now : text) || locale.today;
+  const disabledToday = disabledDate && !isAllowedDate(getTodayTime(value), disabledDate);
+  const isDisabled = disabledToday || disabled;
+  const disabledTodayClass = isDisabled ? `${prefixCls}-today-btn-disabled` : '';
+  return (
+    <a
+      class={`${prefixCls}-today-btn ${disabledTodayClass}`}
+      role="button"
+      onClick={isDisabled ? noop : onToday}
+      title={getTodayTimeStr(value)}
+    >
+      {localeNow}
+    </a>
+  );
 };
+
+TodayButton.inheritAttrs = false;
+
+export default TodayButton;
--- a/components/vc-calendar/src/date/DateInput.jsx
+++ b/components/vc-calendar/src/date/DateInput.jsx
@ -10,6 +10,8 @@ let cachedSelectionEnd;
 let dateInputInstance;

 const DateInput = {
+  name: 'DateInput',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    prefixCls: PropTypes.string,
@ -190,17 +192,7 @@ const DateInput = {
      <div class={`${prefixCls}-input-wrap`}>
        <div class={`${prefixCls}-date-input-wrap`}>
          <input
-            {...{
-              directives: [
-                {
-                  name: 'ant-ref',
-                  value: this.saveDateInput,
-                },
-                {
-                  name: 'ant-input',
-                },
-              ],
-            }}
+            ref={this.saveDateInput}
            class={`${prefixCls}-input ${invalidClass}`}
            value={str}
            disabled={disabled}
--- a/components/vc-calendar/src/date/DateTBody.jsx
+++ b/components/vc-calendar/src/date/DateTBody.jsx
@ -1,5 +1,5 @@
 import PropTypes from '../../../_util/vue-types';
-import { getOptionProps, getListeners } from '../../../_util/props-util';
+import { getOptionProps } from '../../../_util/props-util';
 import cx from 'classnames';
 import DateConstants from './DateConstants';
 import { getTitleString, getTodayTime } from '../util/';
@ -27,6 +27,8 @@ function getIdFromDate(date) {
 }

 const DateTBody = {
+  name: 'DateTBody',
+  inheritAttrs: false,
  props: {
    contentRender: PropTypes.func,
    dateRender: PropTypes.func,
@ -50,7 +52,7 @@ const DateTBody = {
      disabledDate,
      hoverValue,
    } = props;
-    const { select = noop, dayHover = noop } = getListeners(this);
+    const { onSelect = noop, onDayHover = noop } = this.$attrs;
    let iIndex;
    let jIndex;
    let current;
@ -227,8 +229,8 @@ const DateTBody = {
        dateCells.push(
          <td
            key={passed}
-            onClick={disabled ? noop : select.bind(null, current)}
-            onMouseenter={disabled ? noop : dayHover.bind(null, current)}
+            onClick={disabled ? noop : onSelect.bind(null, current)}
+            onMouseenter={disabled ? noop : onDayHover.bind(null, current)}
            role="gridcell"
            title={getTitleString(current)}
            class={cls}
--- a/components/vc-calendar/src/date/DateTHead.jsx
+++ b/components/vc-calendar/src/date/DateTHead.jsx
@ -1,49 +1,46 @@
 import DateConstants from './DateConstants';
 import moment from 'moment';

-export default {
-  functional: true,
-  render(createElement, context) {
-    const { props } = context;
-    const value = props.value;
-    const localeData = value.localeData();
-    const prefixCls = props.prefixCls;
-    const veryShortWeekdays = [];
-    const weekDays = [];
-    const firstDayOfWeek = localeData.firstDayOfWeek();
-    let showWeekNumberEl;
-    const now = moment();
-    for (let dateColIndex = 0; dateColIndex < DateConstants.DATE_COL_COUNT; dateColIndex++) {
-      const index = (firstDayOfWeek + dateColIndex) % DateConstants.DATE_COL_COUNT;
-      now.day(index);
-      veryShortWeekdays[dateColIndex] = localeData.weekdaysMin(now);
-      weekDays[dateColIndex] = localeData.weekdaysShort(now);
-    }
+const DateTHead = (_, { attrs }) => {
+  const value = attrs.value;
+  const localeData = value.localeData();
+  const prefixCls = attrs.prefixCls;
+  const veryShortWeekdays = [];
+  const weekDays = [];
+  const firstDayOfWeek = localeData.firstDayOfWeek();
+  let showWeekNumberEl;
+  const now = moment();
+  for (let dateColIndex = 0; dateColIndex < DateConstants.DATE_COL_COUNT; dateColIndex++) {
+    const index = (firstDayOfWeek + dateColIndex) % DateConstants.DATE_COL_COUNT;
+    now.day(index);
+    veryShortWeekdays[dateColIndex] = localeData.weekdaysMin(now);
+    weekDays[dateColIndex] = localeData.weekdaysShort(now);
+  }

-    if (props.showWeekNumber) {
-      showWeekNumberEl = (
-        <th
-          role="columnheader"
-          class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}
-        >
-          <span class={`${prefixCls}-column-header-inner`}>x</span>
-        </th>
-      );
-    }
-    const weekDaysEls = weekDays.map((day, xindex) => {
-      return (
-        <th key={xindex} role="columnheader" title={day} class={`${prefixCls}-column-header`}>
-          <span class={`${prefixCls}-column-header-inner`}>{veryShortWeekdays[xindex]}</span>
-        </th>
-      );
-    });
-    return (
-      <thead>
-        <tr role="row">
-          {showWeekNumberEl}
-          {weekDaysEls}
-        </tr>
-      </thead>
+  if (attrs.showWeekNumber) {
+    showWeekNumberEl = (
+      <th role="columnheader" class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}>
+        <span class={`${prefixCls}-column-header-inner`}>x</span>
+      </th>
    );
-  },
+  }
+  const weekDaysEls = weekDays.map((day, xindex) => {
+    return (
+      <th key={xindex} role="columnheader" title={day} class={`${prefixCls}-column-header`}>
+        <span class={`${prefixCls}-column-header-inner`}>{veryShortWeekdays[xindex]}</span>
+      </th>
+    );
+  });
+  return (
+    <thead>
+      <tr role="row">
+        {showWeekNumberEl}
+        {weekDaysEls}
+      </tr>
+    </thead>
+  );
 };
+
+DateTHead.inheritAttrs = false;
+
+export default DateTHead;
--- a/components/vc-calendar/src/date/DateTable.jsx
+++ b/components/vc-calendar/src/date/DateTable.jsx
@ -1,20 +1,16 @@
 import DateTHead from './DateTHead';
 import DateTBody from './DateTBody';

-export default {
-  functional: true,
-  render(createElement, context) {
-    const { props, listeners = {} } = context;
-    const prefixCls = props.prefixCls;
-    const bodyProps = {
-      props,
-      on: listeners,
-    };
-    return (
-      <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
-        <DateTHead {...bodyProps} />
-        <DateTBody {...bodyProps} />
-      </table>
-    );
-  },
+const DateTable = (_, { attrs }) => {
+  const prefixCls = attrs.prefixCls;
+  return (
+    <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+      <DateTHead {...attrs} />
+      <DateTBody {...attrs} />
+    </table>
+  );
 };
+
+DateTable.inheritAttrs = false;
+
+export default DateTable;
--- a/components/vc-calendar/src/decade/DecadePanel.jsx
+++ b/components/vc-calendar/src/decade/DecadePanel.jsx
@ -20,7 +20,9 @@ function chooseDecade(year, event) {
 }

 export default {
+  name: 'DecadePanel',
  mixins: [BaseMixin],
+  inheritAttrs: false,
  props: {
    locale: PropTypes.object,
    value: PropTypes.object,
--- a/components/vc-calendar/src/full-calendar/CalendarHeader.jsx
+++ b/components/vc-calendar/src/full-calendar/CalendarHeader.jsx
@ -4,6 +4,7 @@ import { getMonthName } from '../util';

 const CalendarHeader = {
  name: 'CalendarHeader',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    value: PropTypes.object,
--- a/components/vc-calendar/src/mixin/CalendarMixin.js
+++ b/components/vc-calendar/src/mixin/CalendarMixin.js
@ -26,6 +26,7 @@ function isMoment(value) {
 const MomentType = PropTypes.custom(isMoment);
 const CalendarMixin = {
  mixins: [BaseMixin],
+  inheritAttrs: false,
  name: 'CalendarMixinWrapper',
  props: {
    value: MomentType,
@ -62,18 +63,18 @@ const CalendarMixin = {
    },

    renderRoot(newProps) {
-      const props = this.$props;
+      const props = { ...this.$props, ...this.$attrs };
      const prefixCls = props.prefixCls;

      const className = {
        [prefixCls]: 1,
        [`${prefixCls}-hidden`]: !props.visible,
-        // [props.className]: !!props.className,
+        [props.class]: !!props.class,
        [newProps.class]: !!newProps.class,
      };
      return (
        <div
-          ref="rootInstance"
+          ref={this.saveRoot}
          class={className}
          tabindex="0"
          onKeydown={this.onKeyDown || noop}
--- a/components/vc-calendar/src/mixin/CommonMixin.js
+++ b/components/vc-calendar/src/mixin/CommonMixin.js
@ -15,12 +15,15 @@ export default {
    focus() {
      if (this.focusElement) {
        this.focusElement.focus();
-      } else if (this.$refs.rootInstance) {
-        this.$refs.rootInstance.focus();
+      } else if (this.rootInstance) {
+        this.rootInstance.focus();
      }
    },
    saveFocusElement(focusElement) {
      this.focusElement = focusElement;
    },
+    saveRoot(root) {
+      this.rootInstance = root;
+    },
  },
 };