feat: update vc-calendar

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,
-          ...props,
+        ...this.$attrs,
-          value,
+        value,
-        },
-        on: getListeners(this),
       };
       let nowEl = null;
       if (showToday) {

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,

components/vc-calendar/src/calendar/OkButton.jsx

@@ -1,18 +1,16 @@
 function noop() {}
-export default {
+const OkButton = (_, { attrs }) => {
-  functional: true,
+  const { prefixCls, locale, okDisabled, onOk } = attrs;
-  render(createElement, context) {
+  let className = `${prefixCls}-ok-btn`;
-    const { props, listeners = {} } = context;
+  if (okDisabled) {
-    const { prefixCls, locale, okDisabled } = props;
+    className += ` ${prefixCls}-ok-btn-disabled`;
-    const { ok = noop } = listeners;
+  }
-    let className = `${prefixCls}-ok-btn`;
+  return (
-    if (okDisabled) {
+    <a class={className} role="button" onClick={okDisabled ? noop : onOk}>
-      className += ` ${prefixCls}-ok-btn-disabled`;
+      {locale.ok}
-    }
+    </a>
-    return (
+  );
-      <a class={className} role="button" onClick={okDisabled ? noop : ok}>
-        {locale.ok}
-      </a>
-    );
-  },
 };
+
+OkButton.inheritAttrs = false;
+export default OkButton;

components/vc-calendar/src/calendar/TimePickerButton.jsx

@@ -1,22 +1,27 @@
 function noop() {}
-export default {
+const TimePickerButton = (_, { attrs }) => {
-  functional: true,
+  const {
-  render(h, context) {
+    prefixCls,
-    const { props, listeners = {} } = context;
+    locale,
-    const { prefixCls, locale, showTimePicker, timePickerDisabled } = props;
+    showTimePicker,
-    const { closeTimePicker = noop, openTimePicker = noop } = listeners;
+    timePickerDisabled,
-    const className = {
+    onCloseTimePicker = noop,
-      [`${prefixCls}-time-picker-btn`]: true,
+    onOpenTimePicker = noop,
-      [`${prefixCls}-time-picker-btn-disabled`]: timePickerDisabled,
+  } = attrs;
-    };
+  const className = {
-    let onClick = noop;
+    [`${prefixCls}-time-picker-btn`]: true,
-    if (!timePickerDisabled) {
+    [`${prefixCls}-time-picker-btn-disabled`]: timePickerDisabled,
-      onClick = showTimePicker ? closeTimePicker : openTimePicker;
+  };
-    }
+  let onClick = noop;
-    return (
+  if (!timePickerDisabled) {
-      <a class={className} role="button" onClick={onClick}>
+    onClick = showTimePicker ? onCloseTimePicker : onOpenTimePicker;
-        {showTimePicker ? locale.dateSelect : locale.timeSelect}
+  }
-      </a>
+  return (
-    );
+    <a class={className} role="button" onClick={onClick}>
-  },
+      {showTimePicker ? locale.dateSelect : locale.timeSelect}
+    </a>
+  );
 };
+
+TimePickerButton.inheritAttrs = false;
+export default TimePickerButton;

components/vc-calendar/src/calendar/TodayButton.jsx

@@ -1,33 +1,23 @@
 import { getTodayTimeStr, getTodayTime, isAllowedDate } from '../util/';
 function noop() {}
-export default {
+const TodayButton = (_, { attrs }) => {
-  functional: true,
+  const { prefixCls, locale, value, timePicker, disabled, disabledDate, onToday, text } = attrs;
-  render(createElement, context) {
+  const localeNow = (!text && timePicker ? locale.now : text) || locale.today;
-    const { props, listeners = {} } = context;
+  const disabledToday = disabledDate && !isAllowedDate(getTodayTime(value), disabledDate);
-    const {
+  const isDisabled = disabledToday || disabled;
-      prefixCls,
+  const disabledTodayClass = isDisabled ? `${prefixCls}-today-btn-disabled` : '';
-      locale,
+  return (
-      value,
+    <a
-      timePicker,
+      class={`${prefixCls}-today-btn ${disabledTodayClass}`}
-      disabled,
+      role="button"
-      disabledDate,
+      onClick={isDisabled ? noop : onToday}
-      // onToday,
+      title={getTodayTimeStr(value)}
-      text,
+    >
-    } = props;
+      {localeNow}
-    const { today = noop } = listeners;
+    </a>
-    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>
-    );
-  },
 };
+
+TodayButton.inheritAttrs = false;
+
+export default TodayButton;

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
-            {...{
+            ref={this.saveDateInput}
-              directives: [
-                {
-                  name: 'ant-ref',
-                  value: this.saveDateInput,
-                },
-                {
-                  name: 'ant-input',
-                },
-              ],
-            }}
             class={`${prefixCls}-input ${invalidClass}`}
             value={str}
             disabled={disabled}

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)}
+            onClick={disabled ? noop : onSelect.bind(null, current)}
-            onMouseenter={disabled ? noop : dayHover.bind(null, current)}
+            onMouseenter={disabled ? noop : onDayHover.bind(null, current)}
             role="gridcell"
             title={getTitleString(current)}
             class={cls}

components/vc-calendar/src/date/DateTHead.jsx

@@ -1,49 +1,46 @@
 import DateConstants from './DateConstants';
 import moment from 'moment';
 
-export default {
+const DateTHead = (_, { attrs }) => {
-  functional: true,
+  const value = attrs.value;
-  render(createElement, context) {
+  const localeData = value.localeData();
-    const { props } = context;
+  const prefixCls = attrs.prefixCls;
-    const value = props.value;
+  const veryShortWeekdays = [];
-    const localeData = value.localeData();
+  const weekDays = [];
-    const prefixCls = props.prefixCls;
+  const firstDayOfWeek = localeData.firstDayOfWeek();
-    const veryShortWeekdays = [];
+  let showWeekNumberEl;
-    const weekDays = [];
+  const now = moment();
-    const firstDayOfWeek = localeData.firstDayOfWeek();
+  for (let dateColIndex = 0; dateColIndex < DateConstants.DATE_COL_COUNT; dateColIndex++) {
-    let showWeekNumberEl;
+    const index = (firstDayOfWeek + dateColIndex) % DateConstants.DATE_COL_COUNT;
-    const now = moment();
+    now.day(index);
-    for (let dateColIndex = 0; dateColIndex < DateConstants.DATE_COL_COUNT; dateColIndex++) {
+    veryShortWeekdays[dateColIndex] = localeData.weekdaysMin(now);
-      const index = (firstDayOfWeek + dateColIndex) % DateConstants.DATE_COL_COUNT;
+    weekDays[dateColIndex] = localeData.weekdaysShort(now);
-      now.day(index);
+  }
-      veryShortWeekdays[dateColIndex] = localeData.weekdaysMin(now);
-      weekDays[dateColIndex] = localeData.weekdaysShort(now);
-    }
 
-    if (props.showWeekNumber) {
+  if (attrs.showWeekNumber) {
-      showWeekNumberEl = (
+    showWeekNumberEl = (
-        <th
+      <th role="columnheader" class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}>
-          role="columnheader"
+        <span class={`${prefixCls}-column-header-inner`}>x</span>
-          class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}
+      </th>
-        >
-          <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>
     );
-  },
+  }
+  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;

components/vc-calendar/src/date/DateTable.jsx

@@ -1,20 +1,16 @@
 import DateTHead from './DateTHead';
 import DateTBody from './DateTBody';
 
-export default {
+const DateTable = (_, { attrs }) => {
-  functional: true,
+  const prefixCls = attrs.prefixCls;
-  render(createElement, context) {
+  return (
-    const { props, listeners = {} } = context;
+    <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
-    const prefixCls = props.prefixCls;
+      <DateTHead {...attrs} />
-    const bodyProps = {
+      <DateTBody {...attrs} />
-      props,
+    </table>
-      on: listeners,
+  );
-    };
-    return (
-      <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
-        <DateTHead {...bodyProps} />
-        <DateTBody {...bodyProps} />
-      </table>
-    );
-  },
 };
+
+DateTable.inheritAttrs = false;
+
+export default DateTable;

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,

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,

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}

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) {
+      } else if (this.rootInstance) {
-        this.$refs.rootInstance.focus();
+        this.rootInstance.focus();
       }
     },
     saveFocusElement(focusElement) {
       this.focusElement = focusElement;
     },
+    saveRoot(root) {
+      this.rootInstance = root;
+    },
   },
 };