[improvement] DatetimePicker: optimize static methods (#2395)

packages/circle/index.vue

@@ -26,6 +26,10 @@ import create from '../utils/create';
 import { raf, cancel } from '../utils/raf';
 import { BLUE, WHITE } from '../utils/color';
 
+function format(rate) {
+  return Math.min(Math.max(rate, 0), 100);
+}
+
 export default create({
   name: 'circle',
 
@@ -100,7 +104,7 @@ export default create({
       handler() {
         this.startTime = Date.now();
         this.startRate = this.value;
-        this.endRate = this.format(this.rate);
+        this.endRate = format(this.rate);
         this.increase = this.endRate > this.startRate;
         this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
         if (this.speed) {
@@ -119,14 +123,10 @@ export default create({
       const now = Date.now();
       const progress = Math.min((now - this.startTime) / this.duration, 1);
       const rate = progress * (this.endRate - this.startRate) + this.startRate;
-      this.$emit('input', this.format(parseFloat(rate.toFixed(1))));
+      this.$emit('input', format(parseFloat(rate.toFixed(1))));
       if (this.increase ? rate < this.endRate : rate > this.endRate) {
         this.rafId = raf(this.animate);
       }
-    },
-
-    format(rate) {
-      return Math.min(Math.max(rate, 0), 100);
     }
   }
 });

packages/col/index.vue

@@ -27,6 +27,7 @@ export default create({
     gutter() {
       return (this.$parent && Number(this.$parent.gutter)) || 0;
     },
+
     style() {
       const padding = `${this.gutter / 2}px`;
       return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};

packages/datetime-picker/index.vue

@@ -21,7 +21,36 @@ import { range } from '../utils';
 import PickerMixin from '../mixins/picker';
 
 const currentYear = new Date().getFullYear();
-const isValidDate = date => Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
+
+function isValidDate(date) {
+  return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
+}
+
+function padZero(val) {
+  return `00${val}`.slice(-2);
+}
+
+function times(n, iteratee) {
+  let index = -1;
+  const result = Array(n);
+
+  while (++index < n) {
+    result[index] = iteratee(index);
+  }
+  return result;
+}
+
+function getTrueValue(formattedValue) {
+  if (!formattedValue) return;
+  while (isNaN(parseInt(formattedValue, 10))) {
+    formattedValue = formattedValue.slice(1);
+  }
+  return parseInt(formattedValue, 10);
+}
+
+function getMonthEndDay(year, month) {
+  return 32 - new Date(year, month - 1, 32).getDate();
+}
 
 export default create({
   name: 'datetime-picker',
@@ -142,7 +171,7 @@ export default create({
 
     columns() {
       const results = this.ranges.map(({ type, range: rangeArr }) => {
-        const values = this.times(rangeArr[1] - rangeArr[0] + 1, index => {
+        const values = times(rangeArr[1] - rangeArr[0] + 1, index => {
           let value = rangeArr[0] + index;
           value = value < 10 ? `0${value}` : `${value}`;
           return this.formatter(type, value);
@@ -157,11 +186,11 @@ export default create({
     }
   },
 
-  methods: {
-    pad(val) {
-      return `00${val}`.slice(-2);
-    },
+  mounted() {
+    this.updateColumnValue(this.innerValue);
+  },
 
+  methods: {
     correctValue(value) {
       // validate value
       const isDateType = this.type !== 'time';
@@ -175,8 +204,8 @@ export default create({
       // time type
       if (!isDateType) {
         let [hour, minute] = value.split(':');
-        hour = this.pad(range(hour, this.minHour, this.maxHour));
-        minute = this.pad(range(minute, this.minMinute, this.maxMinute));
+        hour = padZero(range(hour, this.minHour, this.maxHour));
+        minute = padZero(range(minute, this.minMinute, this.maxMinute));
 
         return `${hour}:${minute}`;
       }
@@ -188,16 +217,6 @@ export default create({
       return new Date(value);
     },
 
-    times(n, iteratee) {
-      let index = -1;
-      const result = Array(n);
-
-      while (++index < n) {
-        result[index] = iteratee(index);
-      }
-      return result;
-    },
-
     getBoundary(type, value) {
       const boundary = this[`${type}Date`];
       const year = boundary.getFullYear();
@@ -208,7 +227,7 @@ export default create({
 
       if (type === 'max') {
         month = 12;
-        date = this.getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+        date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
         hour = 23;
         minute = 59;
       }
@@ -235,18 +254,6 @@ export default create({
       };
     },
 
-    getTrueValue(formattedValue) {
-      if (!formattedValue) return;
-      while (isNaN(parseInt(formattedValue, 10))) {
-        formattedValue = formattedValue.slice(1);
-      }
-      return parseInt(formattedValue, 10);
-    },
-
-    getMonthEndDay(year, month) {
-      return 32 - new Date(year, month - 1, 32).getDate();
-    },
-
     onConfirm() {
       this.$emit('confirm', this.innerValue);
     },
@@ -259,10 +266,10 @@ export default create({
         value = `${indexes[0] + this.minHour}:${indexes[1] + this.minMinute}`;
       } else {
         const values = picker.getValues();
-        const year = this.getTrueValue(values[0]);
-        const month = this.getTrueValue(values[1]);
-        const maxDate = this.getMonthEndDay(year, month);
-        let date = this.getTrueValue(values[2]);
+        const year = getTrueValue(values[0]);
+        const month = getTrueValue(values[1]);
+        const maxDate = getMonthEndDay(year, month);
+        let date = getTrueValue(values[2]);
         if (this.type === 'year-month') {
           date = 1;
         }
@@ -270,8 +277,8 @@ export default create({
         let hour = 0;
         let minute = 0;
         if (this.type === 'datetime') {
-          hour = this.getTrueValue(values[3]);
-          minute = this.getTrueValue(values[4]);
+          hour = getTrueValue(values[3]);
+          minute = getTrueValue(values[4]);
         }
 
         value = new Date(year, month - 1, date, hour, minute);
@@ -288,7 +295,7 @@ export default create({
 
     updateColumnValue(value) {
       let values = [];
-      const { formatter, pad } = this;
+      const { formatter } = this;
 
       if (this.type === 'time') {
         const pair = value.split(':');
@@ -299,13 +306,13 @@ export default create({
       } else {
         values = [
           formatter('year', `${value.getFullYear()}`),
-          formatter('month', pad(value.getMonth() + 1)),
-          formatter('day', pad(value.getDate()))
+          formatter('month', padZero(value.getMonth() + 1)),
+          formatter('day', padZero(value.getDate()))
         ];
         if (this.type === 'datetime') {
           values.push(
-            formatter('hour', pad(value.getHours())),
-            formatter('minute', pad(value.getMinutes()))
+            formatter('hour', padZero(value.getHours())),
+            formatter('minute', padZero(value.getMinutes()))
           );
         }
         if (this.type === 'year-month') {
@@ -317,10 +324,6 @@ export default create({
         this.$refs.picker.setValues(values);
       });
     }
-  },
-
-  mounted() {
-    this.updateColumnValue(this.innerValue);
   }
 });
 </script>