[improvement] Area: 使用picker重构组件 (#1175)

example/pages/area/index.js

@@ -1,4 +1,5 @@
 import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
 
 Page({
   data: {
@@ -20,6 +21,16 @@ Page({
   },
 
   onChange(event) {
+    const { values } = event.detail;
+
+    Toast(values.map(item => item.name).join('-'));
+  },
+
+  onConfirm(event) {
+    console.log(event);
+  },
+
+  onCancel(event) {
     console.log(event);
   }
 });

example/pages/area/index.wxml

@@ -2,6 +2,9 @@
   <van-area
     loading="{{ loading }}"
     area-list="{{ areaList }}"
+    bind:change="onChange"
+    bind:confirm="onConfirm"
+    bind:cancel="onCancel"
   />
 </demo-block>
 
@@ -10,6 +13,8 @@
     value="{{ value }}"
     loading="{{ loading }}"
     area-list="{{ areaList }}"
+    bind:change="onChange"
+    bind:confirm="onConfirm"
   />
 </demo-block>
 
@@ -20,6 +25,9 @@
     loading="{{ loading }}"
     area-list="{{ areaList }}"
     bind:change="onChange"
-    bind:confirm="onChange"
+    bind:confirm="onConfirm"
   />
 </demo-block>
+
+
+<van-toast id="van-toast" />

packages/area/index.json

@@ -1,6 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "van-loading": "../loading/index"
+    "van-picker": "../picker/index"
   }
 }

packages/area/index.less

@@ -1,71 +0,0 @@
-@import '../common/style/var.less';
-
-.van-picker {
-  -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
-  position: relative;
-  overflow: hidden;
-  background-color: @white;
-  user-select: none;
-
-  &__toolbar {
-    display: flex;
-    justify-content: space-between;
-    height: 44px;
-    line-height: 44px;
-  }
-
-  &__cancel,
-  &__confirm {
-    color: @blue;
-    padding: 0 15px;
-    font-size: 14px;
-
-    &:active {
-      background-color: @active-color;
-    }
-  }
-
-  &__title {
-    max-width: 50%;
-    font-size: 16px;
-    font-weight: 500;
-    text-align: center;
-  }
-
-  &__columns {
-    position: relative;
-  }
-
-  &__loading {
-    display: flex;
-    z-index: 4;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(255, 255, 255, .9);
-  }
-
-  &-column {
-    flex: 1;
-    overflow: hidden;
-    font-size: 16px;
-    text-align: center;
-
-    &__item {
-      padding: 0 5px;
-      color: @text-color;
-
-      &--selected {
-        font-weight: 500;
-      }
-
-      &--disabled {
-        opacity: .3;
-      }
-    }
-  }
-}

packages/area/index.ts

@@ -1,11 +1,13 @@
 import { VantComponent } from '../common/component';
 
 type AreaItem = {
-  name: string;
-  code: string;
+  name: string
+  code: string
 };
 
 VantComponent({
+  classes: ['active-class', 'toolbar-class', 'column-class'],
+
   props: {
     title: String,
     value: String,
@@ -29,8 +31,8 @@ VantComponent({
   },
 
   data: {
-    pickerValue: [0, 0, 0],
-    columns: []
+    columns: [{ values: [] }, { values: [] }, { values: [] }],
+    displayColumns: [{ values: [] }, { values: [] }, { values: [] }]
   },
 
   watch: {
@@ -39,55 +41,60 @@ VantComponent({
       this.setValues();
     },
 
-    areaList: 'setValues'
+    areaList: 'setValues',
+
+    columnsNum(value) {
+      this.set({
+        displayColumns: this.data.columns.slice(0, +value)
+      });
+    }
   },
 
   methods: {
-    onCancel() {
-      this.$emit('cancel', {
-        values: this.getValues(),
-        indexs: this.getIndexs(),
-        detail: this.getDetail()
-      });
+    getPicker() {
+      if (this.picker == null) {
+        this.picker = this.selectComponent('.van-area__picker');
+      }
+      return this.picker;
     },
 
-    onConfirm() {
-      this.$emit('confirm', {
-        values: this.getValues(),
-        indexs: this.getIndexs(),
-        detail: this.getDetail()
-      });
+    onCancel(event) {
+      this.emit('cancel', event.detail);
+    },
+
+    onConfirm(event) {
+      this.emit('confirm', event.detail);
+    },
+
+    emit(type, detail) {
+      detail.values = detail.value;
+      delete detail.value;
+      this.$emit(type, detail);
     },
 
     onChange(event: Weapp.Event) {
-      const { value } = event.detail;
-      const { pickerValue } = this.data;
-      const displayColumns = this.getDisplayColumns();
-      const index = pickerValue.findIndex(
-        (item, index) => item !== value[index]
-      );
-      const values = displayColumns[index];
-
-      if (index < 0 || value[index] < 0 || !values[value[index]]) {
-        return;
-      }
-
-      this.code = values[value[index]].code;
+      const { index, picker, value } = event.detail;
+      this.code = value[index].code;
       this.setValues();
       this.$emit('change', {
-        picker: this,
-        values: this.getValues(),
+        picker,
+        values: picker.getValues(),
         index
       });
     },
 
+    getConfig(type: string) {
+      const { areaList } = this.data;
+      return (areaList && areaList[`${type}_list`]) || {};
+    },
+
     getList(type: string, code?: string): AreaItem[] {
       let result = [];
       if (type !== 'province' && !code) {
         return result;
       }
 
-      const list = this.data.areaList && this.data.areaList[`${type}_list`] || {};
+      const list = this.getConfig(type);
       result = Object.keys(list).map(code => ({
         code,
         name: list[code]
@@ -125,44 +132,35 @@ VantComponent({
     },
 
     setValues() {
-      let code =
-        this.code ||
-        (this.data.areaList &&
-          Object.keys(this.data.areaList.county_list || {})[0]) ||
-        '';
+      const county = this.getConfig('county');
+      let code = this.code || Object.keys(county)[0] || '';
       const province = this.getList('province');
       const city = this.getList('city', code.slice(0, 2));
 
-      this.set({
-        'columns[0]': province,
-        'columns[1]': city
-      });
+      const picker = this.getPicker();
 
-      if (city.length && code.slice(2, 4) === '00') {
-        code = city[0].code;
+      if (!picker) {
+        return;
       }
 
-      this.set({
-        'columns[2]': this.getList('county', code.slice(0, 4)),
-        pickerValue: [
+      picker.setColumnValues(0, province);
+      picker.setColumnValues(1, city);
+
+      if (city.length && code.slice(2, 4) === '00') {
+        ;[{ code }] = city;
+      }
+
+      picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
+      picker.setIndexes([
         this.getIndex('province', code),
         this.getIndex('city', code),
         this.getIndex('county', code)
-        ]
-      });
+      ]);
     },
 
     getValues() {
-      const { pickerValue = [] } = this.data;
-      const displayColumns = this.getDisplayColumns();
-      return displayColumns
-        .map((option, index) => option[pickerValue[index]])
-        .filter(value => !!value);
-    },
-
-    getIndexs() {
-      const { pickerValue, columnsNum } = this.data;
-      return pickerValue.slice(0, columnsNum);
+      const picker = this.getPicker();
+      return picker ? picker.getValues().filter(value => !!value) : [];
     },
 
     getDetail() {
@@ -196,11 +194,6 @@ VantComponent({
     reset() {
       this.code = '';
       this.setValues();
-    },
-
-    getDisplayColumns() {
-      const { columns = [], columnsNum } = this.data;
-      return columns.slice(0, +columnsNum);
     }
   }
 });

packages/area/index.wxml

@@ -1,35 +1,16 @@
-<view class="van-picker">
-  <view class="van-picker__toolbar van-hairline--bottom">
-    <view class="van-picker__cancel" bindtap="onCancel">取消</view>
-    <view class="van-picker__title">{{ title }}</view>
-    <view class="van-picker__confirm" bindtap="onConfirm">确定</view>
-  </view>
-
-  <view wx:if="{{ loading }}" class="van-picker__loading">
-    <van-loading color="#1989fa"/>
-  </view>
-
-  <picker-view
-    indicator-style="height: {{ itemHeight }}px;"
-    style="width: 100%; height: {{ itemHeight * visibleItemCount + 'px' }}"
-    bindchange="onChange"
-    value="{{ pickerValue }}"
-    class="van-picker__columns"
-  >
-    <picker-view-column
-      wx:if="{{ rowIndex < columnsNum }}"
-      wx:for="{{ columns }}"
-      wx:for-item="row"
-      wx:for-index="rowIndex"
-      wx:key="rowIndex"
-      class="van-picker-column"
-    >
-      <view
-        wx:for="{{ row }}"
-        wx:key="{{ item.code }}"
-        style="line-height: {{ itemHeight }}px;"
-        class="van-picker-column__item {{ index === pickerValue[rowIndex] ? 'van-picker-column__item--selected' : '' }}"
-      >{{ item.name }}</view>
-    </picker-view-column>
-  </picker-view>
-</view>
+<van-picker
+  class="van-area__picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
+  show-toolbar
+  value-key="name"
+  title="{{ title }}"
+  loading="{{ loading }}"
+  columns="{{ displayColumns }}"
+  item-height="{{ itemHeight }}"
+  visible-item-count="{{ visibleItemCount }}"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+  bind:cancel="onCancel"
+/>

packages/picker/index.less

@@ -38,7 +38,8 @@
   }
 
   &__column {
-    flex: 1;
+    flex: 1 1;
+    width: 0;
   }
 
   &__loading {

packages/picker/index.ts

@@ -38,6 +38,10 @@ VantComponent({
     }
   },
 
+  beforeCreate() {
+    this.children = [];
+  },
+
   methods: {
     noop() {},