From 8e1af8e4203900db986d5e10c4cc06fc905d689b Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Thu, 9 Jan 2020 19:34:07 +0800
Subject: [PATCH] refactor(mixins): remove observer behavior (#2640)
---
packages/area/index.ts | 33 +++++++--------
packages/common/component.ts | 2 -
packages/datetime-picker/index.ts | 37 ++++++++---------
packages/definitions/index.ts | 1 -
packages/definitions/weapp.ts | 7 ----
packages/dialog/index.ts | 13 +++---
packages/image/index.ts | 19 ++++-----
packages/mixins/basic.ts | 6 +++
packages/mixins/observer/behavior.ts | 9 ----
packages/mixins/observer/index.ts | 23 -----------
packages/notice-bar/index.ts | 23 ++++++-----
packages/picker-column/index.ts | 11 ++---
packages/row/index.ts | 9 ++--
packages/slider/index.ts | 11 ++---
packages/stepper/index.ts | 61 ++++++++++++++--------------
packages/switch/index.ts | 15 ++++---
packages/tab/index.ts | 33 +++++++++------
17 files changed, 136 insertions(+), 177 deletions(-)
delete mode 100644 packages/mixins/observer/behavior.ts
delete mode 100644 packages/mixins/observer/index.ts
diff --git a/packages/area/index.ts b/packages/area/index.ts
index bf0d9f5e..cb14b3e1 100644
--- a/packages/area/index.ts
+++ b/packages/area/index.ts
@@ -14,14 +14,26 @@ VantComponent({
props: {
...pickerProps,
- value: String,
+ value: {
+ type: String,
+ observer(value: string) {
+ this.code = value;
+ this.setValues();
+ },
+ },
areaList: {
type: Object,
- value: {}
+ value: {},
+ observer: 'setValues'
},
columnsNum: {
type: null,
- value: 3
+ value: 3,
+ observer(value: number) {
+ this.setData({
+ displayColumns: this.data.columns.slice(0, +value)
+ });
+ }
},
columnsPlaceholder: {
type: Array,
@@ -43,21 +55,6 @@ VantComponent({
typeToColumnsPlaceholder: {}
},
- watch: {
- value(value: string) {
- this.code = value;
- this.setValues();
- },
-
- areaList: 'setValues',
-
- columnsNum(value: number) {
- this.setData({
- displayColumns: this.data.columns.slice(0, +value)
- });
- }
- },
-
mounted() {
setTimeout(() => {
this.setValues();
diff --git a/packages/common/component.ts b/packages/common/component.ts
index 2f6c084b..7168dc3d 100644
--- a/packages/common/component.ts
+++ b/packages/common/component.ts
@@ -1,5 +1,4 @@
import { basic } from '../mixins/basic';
-import { observe } from '../mixins/observer/index';
import { VantComponentOptions, CombinedComponentInstance } from 'definitions/index';
function mapKeys(source: object, target: object, map: object) {
@@ -59,7 +58,6 @@ function VantComponent<Data, Props, Methods>(
addGlobalClass: true
};
- observe(vantOptions, options);
Component(options);
}
diff --git a/packages/datetime-picker/index.ts b/packages/datetime-picker/index.ts
index 3bcbb56e..60800784 100644
--- a/packages/datetime-picker/index.ts
+++ b/packages/datetime-picker/index.ts
@@ -45,11 +45,15 @@ VantComponent({
props: {
...pickerProps,
- value: null,
+ value: {
+ type: null,
+ observer: 'updateValue'
+ },
filter: null,
type: {
type: String,
- value: 'datetime'
+ value: 'datetime',
+ observer: 'updateValue'
},
showToolbar: {
type: Boolean,
@@ -61,27 +65,33 @@ VantComponent({
},
minDate: {
type: Number,
- value: new Date(currentYear - 10, 0, 1).getTime()
+ value: new Date(currentYear - 10, 0, 1).getTime(),
+ observer: 'updateValue'
},
maxDate: {
type: Number,
- value: new Date(currentYear + 10, 11, 31).getTime()
+ value: new Date(currentYear + 10, 11, 31).getTime(),
+ observer: 'updateValue'
},
minHour: {
type: Number,
- value: 0
+ value: 0,
+ observer: 'updateValue'
},
maxHour: {
type: Number,
- value: 23
+ value: 23,
+ observer: 'updateValue'
},
minMinute: {
type: Number,
- value: 0
+ value: 0,
+ observer: 'updateValue'
},
maxMinute: {
type: Number,
- value: 59
+ value: 59,
+ observer: 'updateValue'
}
},
@@ -90,17 +100,6 @@ VantComponent({
columns: []
},
- watch: {
- value: 'updateValue',
- type: 'updateValue',
- minDate: 'updateValue',
- maxDate: 'updateValue',
- minHour: 'updateValue',
- maxHour: 'updateValue',
- minMinute: 'updateValue',
- maxMinute: 'updateValue'
- },
-
methods: {
updateValue() {
const { data } = this;
diff --git a/packages/definitions/index.ts b/packages/definitions/index.ts
index a99516bc..424d2bc5 100644
--- a/packages/definitions/index.ts
+++ b/packages/definitions/index.ts
@@ -19,7 +19,6 @@ export interface VantComponentOptions<Data, Props, Methods, Instance> {
classes?: string[];
mixins?: string[];
props?: Props & Weapp.PropertyOption;
- watch?: Weapp.WatchOption<Instance>;
relation?: Weapp.RelationOption<Instance> & { name: string };
relations?: {
[componentName: string]: Weapp.RelationOption<Instance>;
diff --git a/packages/definitions/weapp.ts b/packages/definitions/weapp.ts
index b2dfbd7d..51e9c76f 100644
--- a/packages/definitions/weapp.ts
+++ b/packages/definitions/weapp.ts
@@ -91,13 +91,6 @@ export namespace Weapp {
changedPath: Array<string | number>,
) => void;
- /**
- * watch定义
- */
- export interface WatchOption<Instance> {
- [name: string]: string | Observer<Instance, any>
- }
-
/**
* methods定义，miniprogram-api-typings缺少this定义
*/
diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
index d945d568..afff8c7c 100644
--- a/packages/dialog/index.ts
+++ b/packages/dialog/index.ts
@@ -9,7 +9,12 @@ VantComponent({
mixins: [button, openType],
props: {
- show: Boolean,
+ show: {
+ type: Boolean,
+ observer(show: boolean) {
+ !show && this.stopLoading();
+ }
+ },
title: String,
message: String,
useSlot: Boolean,
@@ -64,12 +69,6 @@ VantComponent({
}
},
- watch: {
- show(show: boolean) {
- !show && this.stopLoading();
- }
- },
-
methods: {
onConfirm() {
this.handleAction('confirm');
diff --git a/packages/image/index.ts b/packages/image/index.ts
index 5b6e2168..f5a27ed6 100644
--- a/packages/image/index.ts
+++ b/packages/image/index.ts
@@ -16,7 +16,15 @@ VantComponent({
classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
props: {
- src: String,
+ src: {
+ type: String,
+ observer() {
+ this.setData({
+ error: false,
+ loading: true
+ });
+ }
+ },
round: Boolean,
width: {
type: null,
@@ -51,15 +59,6 @@ VantComponent({
loading: true
},
- watch: {
- src() {
- this.setData({
- error: false,
- loading: true
- });
- }
- },
-
mounted() {
this.setMode();
this.setStyle();
diff --git a/packages/mixins/basic.ts b/packages/mixins/basic.ts
index 8a5162c8..be39794d 100644
--- a/packages/mixins/basic.ts
+++ b/packages/mixins/basic.ts
@@ -4,6 +4,12 @@ export const basic = Behavior({
this.triggerEvent(...args);
},
+ set(data: object, callback: Function) {
+ this.setData(data, callback);
+
+ return new Promise(resolve => wx.nextTick(resolve));
+ },
+
getRect(selector: string, all: boolean) {
return new Promise(resolve => {
wx.createSelectorQuery()
diff --git a/packages/mixins/observer/behavior.ts b/packages/mixins/observer/behavior.ts
deleted file mode 100644
index 40b08e49..00000000
--- a/packages/mixins/observer/behavior.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const behavior = Behavior({
- methods: {
- set(data: object, callback: Function) {
- this.setData(data, callback);
-
- return new Promise(resolve => wx.nextTick(resolve));
- }
- }
-});
diff --git a/packages/mixins/observer/index.ts b/packages/mixins/observer/index.ts
deleted file mode 100644
index ddea609c..00000000
--- a/packages/mixins/observer/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { behavior } from './behavior';
-
-export function observe(vantOptions, options) {
- const { watch } = vantOptions;
-
- options.behaviors.push(behavior);
-
- if (watch) {
- const props = options.properties || {};
- Object.keys(watch).forEach(key => {
- if (key in props) {
- let prop = props[key];
- if (prop === null || !('type' in prop)) {
- prop = { type: prop };
- }
- prop.observer = watch[key];
- props[key] = prop;
- }
- });
-
- options.properties = props;
- }
-}
diff --git a/packages/notice-bar/index.ts b/packages/notice-bar/index.ts
index f8a2e9c2..58a350ea 100644
--- a/packages/notice-bar/index.ts
+++ b/packages/notice-bar/index.ts
@@ -8,7 +8,12 @@ VantComponent({
props: {
text: {
type: String,
- value: ''
+ value: '',
+ observer() {
+ wx.nextTick(() => {
+ this.init();
+ });
+ },
},
mode: {
type: String,
@@ -28,7 +33,12 @@ VantComponent({
},
speed: {
type: Number,
- value: 50
+ value: 50,
+ observer() {
+ wx.nextTick(() => {
+ this.init();
+ });
+ }
},
scrollable: {
type: Boolean,
@@ -53,15 +63,6 @@ VantComponent({
show: true
},
- watch: {
- text() {
- this.setData({}, this.init);
- },
- speed() {
- this.setData({}, this.init);
- }
- },
-
created() {
this.resetAnimation = wx.createAnimation({
duration: 0,
diff --git a/packages/picker-column/index.ts b/packages/picker-column/index.ts
index 0e888a71..42ced2d0 100644
--- a/packages/picker-column/index.ts
+++ b/packages/picker-column/index.ts
@@ -18,7 +18,10 @@ VantComponent({
},
defaultIndex: {
type: Number,
- value: 0
+ value: 0,
+ observer(value: number) {
+ this.setIndex(value);
+ }
}
},
@@ -42,12 +45,6 @@ VantComponent({
});
},
- watch: {
- defaultIndex(value: number) {
- this.setIndex(value);
- }
- },
-
methods: {
getCount() {
return this.data.options.length;
diff --git a/packages/row/index.ts b/packages/row/index.ts
index 33f063f4..fe0cf39d 100644
--- a/packages/row/index.ts
+++ b/packages/row/index.ts
@@ -12,11 +12,10 @@ VantComponent({
},
props: {
- gutter: Number
- },
-
- watch: {
- gutter: 'setGutter'
+ gutter: {
+ type: Number,
+ observer: 'setGutter'
+ }
},
mounted() {
diff --git a/packages/slider/index.ts b/packages/slider/index.ts
index 566f0f07..ff187696 100644
--- a/packages/slider/index.ts
+++ b/packages/slider/index.ts
@@ -25,7 +25,10 @@ VantComponent({
},
value: {
type: Number,
- value: 0
+ value: 0,
+ observer(value: number) {
+ this.updateValue(value, false);
+ }
},
barHeight: {
type: null,
@@ -33,12 +36,6 @@ VantComponent({
}
},
- watch: {
- value(value: number) {
- this.updateValue(value, false);
- }
- },
-
created() {
this.updateValue(this.data.value);
},
diff --git a/packages/stepper/index.ts b/packages/stepper/index.ts
index 06d2fb6a..ebd67c59 100644
--- a/packages/stepper/index.ts
+++ b/packages/stepper/index.ts
@@ -17,11 +17,39 @@ VantComponent({
classes: ['input-class', 'plus-class', 'minus-class'],
props: {
- value: null,
+ value: {
+ type: null,
+ observer(value) {
+ if (value === '') {
+ return;
+ }
+
+ const newValue = this.range(value);
+
+ if (typeof newValue === 'number' && +this.data.value !== newValue) {
+ this.setData({ value: newValue });
+ }
+ },
+ },
integer: Boolean,
disabled: Boolean,
- inputWidth: null,
- buttonSize: null,
+ inputWidth: {
+ type: null,
+ observer() {
+ this.setData({
+ inputStyle: this.computeInputStyle()
+ });
+ },
+ },
+ buttonSize: {
+ type: null,
+ observer() {
+ this.setData({
+ inputStyle: this.computeInputStyle(),
+ buttonStyle: this.computeButtonStyle()
+ });
+ }
+ },
asyncChange: Boolean,
disableInput: Boolean,
decimalLength: {
@@ -52,33 +80,6 @@ VantComponent({
disableMinus: Boolean
},
- watch: {
- value(value) {
- if (value === '') {
- return;
- }
-
- const newValue = this.range(value);
-
- if (typeof newValue === 'number' && +this.data.value !== newValue) {
- this.setData({ value: newValue });
- }
- },
-
- inputWidth() {
- this.set({
- inputStyle: this.computeInputStyle()
- });
- },
-
- buttonSize() {
- this.set({
- inputStyle: this.computeInputStyle(),
- buttonStyle: this.computeButtonStyle()
- });
- }
- },
-
data: {
focus: false,
inputStyle: '',
diff --git a/packages/switch/index.ts b/packages/switch/index.ts
index cd4962fd..f81548f7 100644
--- a/packages/switch/index.ts
+++ b/packages/switch/index.ts
@@ -7,7 +7,13 @@ VantComponent({
classes: ['node-class'],
props: {
- checked: null,
+ checked: {
+ type: null,
+ observer(value) {
+ const loadingColor = this.getLoadingColor(value);
+ this.setData({ value, loadingColor });
+ }
+ },
loading: Boolean,
disabled: Boolean,
activeColor: String,
@@ -26,13 +32,6 @@ VantComponent({
}
},
- watch: {
- checked(value) {
- const loadingColor = this.getLoadingColor(value);
- this.setData({ value, loadingColor });
- }
- },
-
created() {
const { checked: value } = this.data;
const loadingColor = this.getLoadingColor(value);
diff --git a/packages/tab/index.ts b/packages/tab/index.ts
index 9e6bf76e..6f9f7ea0 100644
--- a/packages/tab/index.ts
+++ b/packages/tab/index.ts
@@ -13,11 +13,26 @@ VantComponent({
},
props: {
- dot: Boolean,
- info: null,
- title: String,
- disabled: Boolean,
- titleStyle: String,
+ dot: {
+ type: Boolean,
+ observer: 'update'
+ },
+ info: {
+ type: null,
+ observer: 'update'
+ },
+ title: {
+ type: String,
+ observer: 'update'
+ },
+ disabled: {
+ type: Boolean,
+ observer: 'update'
+ },
+ titleStyle: {
+ type: String,
+ observer: 'update'
+ },
name: {
type: [Number, String],
value: '',
@@ -28,14 +43,6 @@ VantComponent({
active: false
},
- watch: {
- title: 'update',
- disabled: 'update',
- dot: 'update',
- info: 'update',
- titleStyle: 'update'
- },
-
methods: {
getComputedName() {
if (this.data.name !== '') {