From 5726819a780101cf737034a698863e4c3274504a Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Fri, 8 Jan 2021 16:28:22 +0800
Subject: [PATCH] perf(picker): use wxs (#3949)

---
 packages/picker-column/index.wxml | 11 ++++----
 packages/picker-column/index.wxs  | 30 +++++++++++++++++++++-
 packages/picker/index.ts          |  5 ++--
 packages/picker/index.wxml        | 26 ++++++++-----------
 packages/picker/index.wxs         | 42 +++++++++++++++++++++++++++++++
 5 files changed, 91 insertions(+), 23 deletions(-)
 create mode 100644 packages/picker/index.wxs

diff --git a/packages/picker-column/index.wxml b/packages/picker-column/index.wxml
index f052ed99..cb6b7ba2 100644
--- a/packages/picker-column/index.wxml
+++ b/packages/picker-column/index.wxml
@@ -1,22 +1,23 @@
-<wxs src="./index.wxs" module="getOptionText" />
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="van-picker-column custom-class"
-  style="height: {{ itemHeight * visibleItemCount }}px"
+  style="{{ computed.rootStyle({ itemHeight, visibleItemCount }) }}"
   bind:touchstart="onTouchStart"
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
 >
-  <view style="transition: transform {{ duration }}ms; line-height: {{ itemHeight }}px; transform: translate3d(0, {{ offset + (itemHeight * (visibleItemCount - 1)) / 2 }}px, 0)">
+  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount }) }}">
     <view
       wx:for="{{ options }}"
       wx:for-item="option"
       wx:key="index"
       data-index="{{ index }}"
       style="height: {{ itemHeight }}px"
-      class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
+      class="van-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: index === currentIndex }) }} {{ index === currentIndex ? 'active-class' : '' }}"
       bindtap="onClickItem"
-    >{{ getOptionText(option, valueKey) }}</view>
+    >{{ computed.optionText(option, valueKey) }}</view>
   </view>
 </view>
diff --git a/packages/picker-column/index.wxs b/packages/picker-column/index.wxs
index 3c8fc681..2d5a6117 100644
--- a/packages/picker-column/index.wxs
+++ b/packages/picker-column/index.wxs
@@ -1,8 +1,36 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
 function isObj(x) {
   var type = typeof x;
   return x !== null && (type === 'object' || type === 'function');
 }
 
-module.exports = function (option, valueKey) {
+function optionText(option, valueKey) {
   return isObj(option) && option[valueKey] != null ? option[valueKey] : option;
 }
+
+function rootStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight * data.visibleItemCount),
+  });
+}
+
+function wrapperStyle(data) {
+  var offset = addUnit(
+    data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2
+  );
+
+  return style({
+    transition: 'transform ' + data.duration + 'ms',
+    'line-height': addUnit(data.itemHeight),
+    transform: 'translate3d(0, ' + offset + ', 0)',
+  });
+}
+
+module.exports = {
+  optionText: optionText,
+  rootStyle: rootStyle,
+  wrapperStyle: wrapperStyle,
+};
diff --git a/packages/picker/index.ts b/packages/picker/index.ts
index af34a62d..2930041f 100644
--- a/packages/picker/index.ts
+++ b/packages/picker/index.ts
@@ -28,7 +28,6 @@ VantComponent({
       value: [],
       observer(columns = []) {
         this.simple = columns.length && !columns[0].values;
-        this.children = this.selectAllComponents('.van-picker__column');
 
         if (Array.isArray(this.children) && this.children.length) {
           this.setColumns().catch(() => {});
@@ -38,7 +37,9 @@ VantComponent({
   },
 
   beforeCreate() {
-    this.children = [];
+    Object.defineProperty(this, 'children', {
+      get: () => this.selectAllComponents('.van-picker__column') || [],
+    });
   },
 
   methods: {
diff --git a/packages/picker/index.wxml b/packages/picker/index.wxml
index 519adb54..dbf12492 100644
--- a/packages/picker/index.wxml
+++ b/packages/picker/index.wxml
@@ -1,41 +1,37 @@
-<import src="./toolbar.wxml" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="van-picker custom-class">
-  <template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
+  <include wx:if="{{ toolbarPosition === 'top' }}" src="toolbar.wxml" />
+
   <view wx:if="{{ loading }}" class="van-picker__loading">
     <loading color="#1989fa"/>
   </view>
+
   <view
     class="van-picker__columns"
-    style="height: {{ itemHeight * visibleItemCount }}px"
+    style="{{ computed.columnsStyle({ itemHeight, visibleItemCount }) }}"
     catch:touchmove="noop"
   >
     <picker-column
       class="van-picker__column"
-      wx:for="{{ isSimple(columns) ? [columns] : columns }}"
+      wx:for="{{ computed.columns(columns) }}"
       wx:key="index"
       data-index="{{ index }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
-      initial-options="{{ isSimple(columns) ? item : item.values }}"
+      initial-options="{{ item.values }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"
       item-height="{{ itemHeight }}"
       visible-item-count="{{ visibleItemCount }}"
       active-class="active-class"
       bind:change="onChange"
     />
-    <view class="van-picker__mask" style="background-size: 100% {{ (itemHeight * visibleItemCount - itemHeight) / 2 }}px" />
+    <view class="van-picker__mask" style="{{ computed.maskStyle({ itemHeight, visibleItemCount }) }}" />
     <view
       class="van-picker__frame van-hairline--top-bottom"
-      style="height: {{ itemHeight }}px"
+      style="{{ computed.frameStyle({ itemHeight }) }}"
     />
   </view>
-  <template is="toolbar" wx:if="{{ toolbarPosition === 'bottom' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
-</view>
 
-<wxs module="isSimple">
-  function isSimple(columns) {
-    return columns.length && !columns[0].values;
-  }
-  module.exports = isSimple;
-</wxs>
+  <include wx:if="{{ toolbarPosition === 'bottom' }}" src="toolbar.wxml" />
+</view>
diff --git a/packages/picker/index.wxs b/packages/picker/index.wxs
new file mode 100644
index 00000000..0abbd10e
--- /dev/null
+++ b/packages/picker/index.wxs
@@ -0,0 +1,42 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+var array = require('../wxs/array.wxs');
+
+function columnsStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight * data.visibleItemCount),
+  });
+}
+
+function maskStyle(data) {
+  return style({
+    'background-size':
+      '100% ' + addUnit((data.itemHeight * (data.visibleItemCount - 1)) / 2),
+  });
+}
+
+function frameStyle(data) {
+  return style({
+    height: addUnit(data.itemHeight),
+  });
+}
+
+function columns(columns) {
+  if (!array.isArray(columns)) {
+    return [];
+  }
+
+  if (columns.length && !columns[0].values) {
+    return [{ values: columns }];
+  }
+
+  return columns;
+}
+
+module.exports = {
+  columnsStyle: columnsStyle,
+  frameStyle: frameStyle,
+  maskStyle: maskStyle,
+  columns: columns,
+};