refactor(DatetimePicker): remove mixin

src/datetime-picker/DatePicker.js

@@ -1,15 +1,14 @@
 import { createNamespace } from '../utils';
 import { isDate } from '../utils/validate/date';
 import { padZero } from '../utils/format/string';
-import { getTrueValue, getMonthEndDay } from './utils';
-import { sharedProps, TimePickerMixin } from './shared';
+import { times, sharedProps, getTrueValue, getMonthEndDay } from './utils';
+import Picker from '../picker';
+import { pickerProps } from '../picker/shared';
 
 const currentYear = new Date().getFullYear();
 const [createComponent] = createNamespace('date-picker');
 
 export default createComponent({
-  mixins: [TimePickerMixin],
-
   props: {
     ...sharedProps,
     type: {
@@ -30,18 +29,10 @@ export default createComponent({
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
-  watch: {
-    filter: 'updateInnerValue',
-    minDate: 'updateInnerValue',
-    maxDate: 'updateInnerValue',
-
-    modelValue(val) {
-      val = this.formatValue(val);
-
-      if (val.valueOf() !== this.innerValue.valueOf()) {
-        this.innerValue = val;
-      }
-    },
+  data() {
+    return {
+      innerValue: this.formatValue(this.modelValue),
+    };
   },
 
   computed: {
@@ -111,9 +102,75 @@ export default createComponent({
 
       return result;
     },
+
+    originColumns() {
+      return this.ranges.map(({ type, range: rangeArr }) => {
+        let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => {
+          const value = padZero(rangeArr[0] + index);
+          return value;
+        });
+
+        if (this.filter) {
+          values = this.filter(type, values);
+        }
+
+        return {
+          type,
+          values,
+        };
+      });
+    },
+
+    columns() {
+      return this.originColumns.map((column) => ({
+        values: column.values.map((value) =>
+          this.formatter(column.type, value)
+        ),
+      }));
+    },
+  },
+
+  watch: {
+    filter: 'updateInnerValue',
+    minDate: 'updateInnerValue',
+    maxDate: 'updateInnerValue',
+    columns: 'updateColumnValue',
+
+    innerValue(val) {
+      this.$emit('update:modelValue', val);
+    },
+
+    modelValue(val) {
+      val = this.formatValue(val);
+
+      if (val.valueOf() !== this.innerValue.valueOf()) {
+        this.innerValue = val;
+      }
+    },
+  },
+
+  mounted() {
+    this.updateColumnValue();
+
+    this.$nextTick(() => {
+      this.updateInnerValue();
+    });
   },
 
   methods: {
+    // @exposed-api
+    getPicker() {
+      return this.$refs.picker;
+    },
+
+    onConfirm() {
+      this.$emit('confirm', this.innerValue);
+    },
+
+    onCancel() {
+      this.$emit('cancel');
+    },
+
     formatValue(value) {
       if (!isDate(value)) {
         value = this.minDate;
@@ -246,4 +303,23 @@ export default createComponent({
       });
     },
   },
+
+  render() {
+    const props = {};
+    Object.keys(pickerProps).forEach((key) => {
+      props[key] = this[key];
+    });
+
+    return (
+      <Picker
+        ref="picker"
+        columns={this.columns}
+        readonly={this.readonly}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
+        onCancel={this.onCancel}
+        {...props}
+      />
+    );
+  },
 });

src/datetime-picker/TimePicker.js

@@ -1,13 +1,13 @@
 import { createNamespace } from '../utils';
 import { padZero } from '../utils/format/string';
 import { range } from '../utils/format/number';
-import { sharedProps, TimePickerMixin } from './shared';
+import { times, sharedProps } from './utils';
+import Picker from '../picker';
+import { pickerProps } from '../picker/shared';
 
 const [createComponent] = createNamespace('time-picker');
 
 export default createComponent({
-  mixins: [TimePickerMixin],
-
   props: {
     ...sharedProps,
     minHour: {
@@ -30,6 +30,12 @@ export default createComponent({
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
+  data() {
+    return {
+      innerValue: this.formatValue(this.modelValue),
+    };
+  },
+
   computed: {
     ranges() {
       return [
@@ -43,6 +49,32 @@ export default createComponent({
         },
       ];
     },
+
+    originColumns() {
+      return this.ranges.map(({ type, range: rangeArr }) => {
+        let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => {
+          const value = padZero(rangeArr[0] + index);
+          return value;
+        });
+
+        if (this.filter) {
+          values = this.filter(type, values);
+        }
+
+        return {
+          type,
+          values,
+        };
+      });
+    },
+
+    columns() {
+      return this.originColumns.map((column) => ({
+        values: column.values.map((value) =>
+          this.formatter(column.type, value)
+        ),
+      }));
+    },
   },
 
   watch: {
@@ -51,6 +83,11 @@ export default createComponent({
     maxHour: 'updateInnerValue',
     minMinute: 'updateInnerValue',
     maxMinute: 'updateInnerValue',
+    columns: 'updateColumnValue',
+
+    innerValue(val) {
+      this.$emit('update:modelValue', val);
+    },
 
     value(val) {
       val = this.formatValue(val);
@@ -62,7 +99,28 @@ export default createComponent({
     },
   },
 
+  mounted() {
+    this.updateColumnValue();
+
+    this.$nextTick(() => {
+      this.updateInnerValue();
+    });
+  },
+
   methods: {
+    // @exposed-api
+    getPicker() {
+      return this.$refs.picker;
+    },
+
+    onConfirm() {
+      this.$emit('confirm', this.innerValue);
+    },
+
+    onCancel() {
+      this.$emit('cancel');
+    },
+
     formatValue(value) {
       if (!value) {
         value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`;
@@ -106,4 +164,23 @@ export default createComponent({
       });
     },
   },
+
+  render() {
+    const props = {};
+    Object.keys(pickerProps).forEach((key) => {
+      props[key] = this[key];
+    });
+
+    return (
+      <Picker
+        ref="picker"
+        columns={this.columns}
+        readonly={this.readonly}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
+        onCancel={this.onCancel}
+        {...props}
+      />
+    );
+  },
 });

src/datetime-picker/shared.js

@@ -1,101 +0,0 @@
-import { times } from './utils';
-import { padZero } from '../utils/format/string';
-import { pickerProps } from '../picker/shared';
-import Picker from '../picker';
-
-export const sharedProps = {
-  ...pickerProps,
-  filter: Function,
-  modelValue: null,
-  columnsOrder: Array,
-  formatter: {
-    type: Function,
-    default: (type, value) => value,
-  },
-};
-
-export const TimePickerMixin = {
-  data() {
-    return {
-      innerValue: this.formatValue(this.modelValue),
-    };
-  },
-
-  computed: {
-    originColumns() {
-      return this.ranges.map(({ type, range: rangeArr }) => {
-        let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => {
-          const value = padZero(rangeArr[0] + index);
-          return value;
-        });
-
-        if (this.filter) {
-          values = this.filter(type, values);
-        }
-
-        return {
-          type,
-          values,
-        };
-      });
-    },
-
-    columns() {
-      return this.originColumns.map((column) => ({
-        values: column.values.map((value) =>
-          this.formatter(column.type, value)
-        ),
-      }));
-    },
-  },
-
-  watch: {
-    columns: 'updateColumnValue',
-
-    innerValue(val) {
-      this.$emit('update:modelValue', val);
-    },
-  },
-
-  mounted() {
-    this.updateColumnValue();
-
-    this.$nextTick(() => {
-      this.updateInnerValue();
-    });
-  },
-
-  methods: {
-    // @exposed-api
-    getPicker() {
-      return this.$refs.picker;
-    },
-
-    onConfirm() {
-      this.$emit('confirm', this.innerValue);
-    },
-
-    onCancel() {
-      this.$emit('cancel');
-    },
-  },
-
-  render() {
-    const props = {};
-    Object.keys(pickerProps).forEach((key) => {
-      props[key] = this[key];
-    });
-
-    return (
-      <Picker
-        ref="picker"
-        columns={this.columns}
-        readonly={this.readonly}
-        onChange={this.onChange}
-        onConfirm={this.onConfirm}
-        onCancel={this.onCancel}
-        {...props}
-      />
-    );
-  },
-};

src/datetime-picker/utils.ts

@@ -1,4 +1,16 @@
 import { isNaN } from '../utils/validate/number';
+import { pickerProps } from '../picker/shared';
+
+export const sharedProps = {
+  ...pickerProps,
+  filter: Function,
+  modelValue: null,
+  columnsOrder: Array,
+  formatter: {
+    type: Function,
+    default: (type: string, value: unknown) => value,
+  },
+};
 
 export function times(n: number, iteratee: (index: number) => any[]) {
   let index = -1;