From a791e1e97162955f5a58b3ab6b0592368a4a9acb Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 29 Jul 2019 20:31:14 +0800
Subject: [PATCH] [improvement] DatetimePicker: optimize render (#3996)

---
 src/datetime-picker/DatePicker.js             | 25 +------------------
 src/datetime-picker/TimePicker.js             | 25 +------------------
 src/datetime-picker/shared.js                 | 23 +++++++++++++++++
 .../__snapshots__/date-picker.spec.js.snap    |  4 +--
 .../test/__snapshots__/demo.spec.js.snap      | 10 ++++----
 .../__snapshots__/time-picker.spec.js.snap    |  8 +++---
 6 files changed, 36 insertions(+), 59 deletions(-)

diff --git a/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js
index 6d6b12e75..98029abba 100644
--- a/src/datetime-picker/DatePicker.js
+++ b/src/datetime-picker/DatePicker.js
@@ -1,13 +1,11 @@
 import { createNamespace } from '../utils';
 import { isDate } from '../utils/validate/date';
 import { padZero } from '../utils/format/string';
-import { pickerProps } from '../picker/shared';
 import { getTrueValue, getMonthEndDay } from './utils';
 import { sharedProps, TimePickerMixin } from './shared';
-import Picker from '../picker';
 
 const currentYear = new Date().getFullYear();
-const [createComponent, bem] = createNamespace('date-picker');
+const [createComponent] = createNamespace('date-picker');
 
 export default createComponent({
   mixins: [TimePickerMixin],
@@ -185,26 +183,5 @@ export default createComponent({
         this.$refs.picker.setValues(values);
       });
     }
-  },
-
-  render() {
-    const props = {};
-    Object.keys(pickerProps).forEach(key => {
-      props[key] = this[key];
-    });
-
-    return (
-      <Picker
-        class={bem()}
-        ref="picker"
-        columns={this.columns}
-        onChange={this.onChange}
-        onConfirm={this.onConfirm}
-        onCancel={() => {
-          this.$emit('cancel');
-        }}
-        {...{ props }}
-      />
-    );
   }
 });
diff --git a/src/datetime-picker/TimePicker.js b/src/datetime-picker/TimePicker.js
index 8d2a4554a..5c03945ad 100644
--- a/src/datetime-picker/TimePicker.js
+++ b/src/datetime-picker/TimePicker.js
@@ -1,11 +1,9 @@
 import { createNamespace } from '../utils';
 import { padZero } from '../utils/format/string';
 import { range } from '../utils/format/number';
-import { pickerProps } from '../picker/shared';
 import { sharedProps, TimePickerMixin } from './shared';
-import Picker from '../picker';
 
-const [createComponent, bem] = createNamespace('time-picker');
+const [createComponent] = createNamespace('time-picker');
 
 export default createComponent({
   mixins: [TimePickerMixin],
@@ -93,26 +91,5 @@ export default createComponent({
         this.$refs.picker.setValues(values);
       });
     }
-  },
-
-  render() {
-    const props = {};
-    Object.keys(pickerProps).forEach(key => {
-      props[key] = this[key];
-    });
-
-    return (
-      <Picker
-        class={bem()}
-        ref="picker"
-        columns={this.columns}
-        onChange={this.onChange}
-        onConfirm={this.onConfirm}
-        onCancel={() => {
-          this.$emit('cancel');
-        }}
-        {...{ props }}
-      />
-    );
   }
 });
diff --git a/src/datetime-picker/shared.js b/src/datetime-picker/shared.js
index 5e0491a65..a3f305664 100644
--- a/src/datetime-picker/shared.js
+++ b/src/datetime-picker/shared.js
@@ -1,6 +1,7 @@
 import { times } from './utils';
 import { padZero } from '../utils/format/string';
 import { pickerProps } from '../picker/shared';
+import Picker from '../picker';
 
 export const sharedProps = {
   ...pickerProps,
@@ -66,6 +67,28 @@ export const TimePickerMixin = {
   methods: {
     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}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
+        onCancel={this.onCancel}
+        {...{ props }}
+      />
+    );
   }
 };
diff --git a/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
index d4d51a215..f693fe82d 100644
--- a/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`filter prop 1`] = `
-<div class="van-picker van-date-picker">
+<div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
     <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -63,7 +63,7 @@ exports[`filter prop 1`] = `
 `;
 
 exports[`formatter prop 1`] = `
-<div class="van-picker van-date-picker">
+<div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
     <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
diff --git a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
index 6bd494dc1..f6511f935 100644
--- a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-picker van-date-picker van-datetime-picker">
+    <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -166,7 +166,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-date-picker van-datetime-picker">
+    <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -247,7 +247,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-date-picker van-datetime-picker">
+    <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -293,7 +293,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-time-picker van-datetime-picker">
+    <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -386,7 +386,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-picker van-time-picker van-datetime-picker">
+    <div class="van-picker van-datetime-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
         <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
         <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
diff --git a/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
index cf775ff1d..f1bc1cb50 100644
--- a/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`filter prop 1`] = `
-<div class="van-picker van-time-picker">
+<div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
     <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -35,7 +35,7 @@ exports[`filter prop 1`] = `
 `;
 
 exports[`format initial value 1`] = `
-<div class="van-picker van-time-picker">
+<div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
     <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -62,7 +62,7 @@ exports[`format initial value 1`] = `
 `;
 
 exports[`formatter prop 1`] = `
-<div class="van-picker van-time-picker">
+<div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
     <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
@@ -96,7 +96,7 @@ exports[`formatter prop 1`] = `
 `;
 
 exports[`max-hour & max-minute 1`] = `
-<div class="van-picker van-time-picker">
+<div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
     <div role="button" tabindex="0" class="van-picker__confirm">确认</div>