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,
+        ...this.$attrs,
         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) {
-    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}>
+    <a class={className} role="button" onClick={okDisabled ? noop : onOk}>
       {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,
+    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 ? closeTimePicker : openTimePicker;
+    onClick = showTimePicker ? onCloseTimePicker : onOpenTimePicker;
   }
   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,20 +1,7 @@
 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 { 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;
@@ -23,11 +10,14 @@ export default {
     <a
       class={`${prefixCls}-today-btn ${disabledTodayClass}`}
       role="button"
-        onClick={isDisabled ? noop : today}
+      onClick={isDisabled ? noop : onToday}
       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,13 +1,10 @@
 import DateConstants from './DateConstants';
 import moment from 'moment';
 
-export default {
+const DateTHead = (_, { attrs }) => {
-  functional: true,
+  const value = attrs.value;
-  render(createElement, context) {
-    const { props } = context;
-    const value = props.value;
   const localeData = value.localeData();
-    const prefixCls = props.prefixCls;
+  const prefixCls = attrs.prefixCls;
   const veryShortWeekdays = [];
   const weekDays = [];
   const firstDayOfWeek = localeData.firstDayOfWeek();
@@ -20,12 +17,9 @@ export default {
     weekDays[dateColIndex] = localeData.weekdaysShort(now);
   }
 
-    if (props.showWeekNumber) {
+  if (attrs.showWeekNumber) {
     showWeekNumberEl = (
-        <th
+      <th role="columnheader" class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}>
-          role="columnheader"
-          class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}
-        >
         <span class={`${prefixCls}-column-header-inner`}>x</span>
       </th>
     );
@@ -45,5 +39,8 @@ export default {
       </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) {
-    const { props, listeners = {} } = context;
-    const prefixCls = props.prefixCls;
-    const bodyProps = {
-      props,
-      on: listeners,
-    };
   return (
     <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
-        <DateTHead {...bodyProps} />
+      <DateTHead {...attrs} />
-        <DateTBody {...bodyProps} />
+      <DateTBody {...attrs} />
     </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;
+    },
   },
 };