From 9d6ef0e955ac97f34f179841cb1777aec7fd90ba Mon Sep 17 00:00:00 2001 From: Waiter Date: Fri, 14 Feb 2020 16:56:37 +0800 Subject: [PATCH] refactor: refactor relation (#2760) --- packages/checkbox-group/index.ts | 8 +--- packages/checkbox/index.ts | 7 +--- packages/col/index.ts | 3 +- packages/collapse-item/index.ts | 4 +- packages/collapse/index.ts | 13 +------ packages/common/component.ts | 55 +++++++++++++++++++++++++-- packages/definitions/index.ts | 6 ++- packages/dropdown-item/index.ts | 7 +--- packages/dropdown-menu/index.ts | 10 ++--- packages/goods-action-button/index.ts | 4 +- packages/goods-action/index.ts | 10 +---- packages/grid-item/index.ts | 4 +- packages/grid/index.ts | 9 +---- packages/index-anchor/index.ts | 7 +--- packages/index-bar/index.ts | 1 + packages/radio-group/index.ts | 8 +--- packages/radio/index.ts | 7 +--- packages/row/index.ts | 1 + packages/sidebar-item/index.ts | 4 +- packages/sidebar/index.ts | 10 ++--- packages/tab/index.ts | 7 +--- packages/tabbar-item/index.ts | 3 +- packages/tabbar/index.ts | 11 +----- packages/tabs/index.ts | 11 ++---- 24 files changed, 89 insertions(+), 121 deletions(-) diff --git a/packages/checkbox-group/index.ts b/packages/checkbox-group/index.ts index be5cff64..b80fcb11 100644 --- a/packages/checkbox-group/index.ts +++ b/packages/checkbox-group/index.ts @@ -8,16 +8,10 @@ VantComponent({ relation: { name: 'checkbox', type: 'descendant', + current: 'checkbox-group', linked(target) { - this.children = this.children || []; - this.children.push(target); this.updateChild(target); }, - unlinked(target) { - this.children = this.children.filter( - (child: TrivialInstance) => child !== target - ); - } }, props: { diff --git a/packages/checkbox/index.ts b/packages/checkbox/index.ts index 0e040aa4..187ef0c0 100644 --- a/packages/checkbox/index.ts +++ b/packages/checkbox/index.ts @@ -11,12 +11,7 @@ VantComponent({ relation: { name: 'checkbox-group', type: 'ancestor', - linked(target) { - this.parent = target; - }, - unlinked() { - this.parent = null; - } + current: 'checkbox', }, classes: ['icon-class', 'label-class'], diff --git a/packages/col/index.ts b/packages/col/index.ts index 4bd77ec3..12892b8f 100644 --- a/packages/col/index.ts +++ b/packages/col/index.ts @@ -3,7 +3,8 @@ import { VantComponent } from '../common/component'; VantComponent({ relation: { name: 'row', - type: 'ancestor' + type: 'ancestor', + current: 'col', }, props: { diff --git a/packages/collapse-item/index.ts b/packages/collapse-item/index.ts index 002ddcb5..27cb4274 100644 --- a/packages/collapse-item/index.ts +++ b/packages/collapse-item/index.ts @@ -8,9 +8,7 @@ VantComponent({ relation: { name: 'collapse', type: 'ancestor', - linked(parent) { - this.parent = parent; - } + current: 'collapse-item', }, props: { diff --git a/packages/collapse/index.ts b/packages/collapse/index.ts index 7f026252..e44957e7 100644 --- a/packages/collapse/index.ts +++ b/packages/collapse/index.ts @@ -6,14 +6,7 @@ VantComponent({ relation: { name: 'collapse-item', type: 'descendant', - linked(child) { - this.children.push(child); - }, - unlinked(child) { - this.children = this.children.filter( - (item: TrivialInstance) => item !== child - ); - } + current: 'collapse', }, props: { @@ -31,10 +24,6 @@ VantComponent({ } }, - beforeCreate() { - this.children = []; - }, - methods: { updateExpanded() { this.children.forEach((child: TrivialInstance) => { diff --git a/packages/common/component.ts b/packages/common/component.ts index 7168dc3d..fad853cd 100644 --- a/packages/common/component.ts +++ b/packages/common/component.ts @@ -1,6 +1,26 @@ import { basic } from '../mixins/basic'; import { VantComponentOptions, CombinedComponentInstance } from 'definitions/index'; +const relationFunctions = { + ancestor: { + linked(parent) { + this.parent = parent; + }, + unlinked() { + this.parent = null; + }, + }, + descendant: { + linked(child) { + this.children = this.children || []; + this.children.push(child); + }, + unlinked(child) { + this.children = (this.children || []).filter(it => it !== child); + }, + }, +}; + function mapKeys(source: object, target: object, map: object) { Object.keys(map).forEach(key => { if (source[key]) { @@ -9,6 +29,37 @@ function mapKeys(source: object, target: object, map: object) { }); } +function makeRelation(options, vantOptions, relation) { + const { type, name, linked, unlinked, linkChanged } = relation; + const { beforeCreate, destroyed } = vantOptions; + if (type === 'descendant') { + options.created = function () { + beforeCreate && beforeCreate.bind(this)(); + this.children = this.children || []; + }; + options.detached = function () { + this.children = []; + destroyed && destroyed.bind(this)(); + }; + } + options.relations = Object.assign(options.relations || {}, { + [`../${name}/index`]: { + type, + linked(node) { + relationFunctions[type].linked.bind(this)(node); + linked && linked.bind(this)(node); + }, + linkChanged(node) { + linkChanged && linkChanged.bind(this)(node); + }, + unlinked(node) { + relationFunctions[type].unlinked.bind(this)(node); + unlinked && unlinked.bind(this)(node); + }, + } + }); +} + function VantComponent( vantOptions: VantComponentOptions< Data, @@ -34,9 +85,7 @@ function VantComponent( const { relation } = vantOptions; if (relation) { - options.relations = Object.assign(options.relations || {}, { - [`../${relation.name}/index`]: relation - }); + makeRelation(options, vantOptions, relation); } // add default externalClasses diff --git a/packages/definitions/index.ts b/packages/definitions/index.ts index 424d2bc5..cbf0359f 100644 --- a/packages/definitions/index.ts +++ b/packages/definitions/index.ts @@ -19,7 +19,11 @@ export interface VantComponentOptions { classes?: string[]; mixins?: string[]; props?: Props & Weapp.PropertyOption; - relation?: Weapp.RelationOption & { name: string }; + relation?: Weapp.RelationOption & { + type: 'ancestor' | 'descendant'; + name: string; + current: string; + }; relations?: { [componentName: string]: Weapp.RelationOption; }; diff --git a/packages/dropdown-item/index.ts b/packages/dropdown-item/index.ts index fe08bdcf..6e6853be 100644 --- a/packages/dropdown-item/index.ts +++ b/packages/dropdown-item/index.ts @@ -7,13 +7,10 @@ VantComponent({ relation: { name: 'dropdown-menu', type: 'ancestor', - linked(target) { - this.parent = target; + current: 'dropdown-item', + linked() { this.updateDataFromParent(); }, - unlinked() { - this.parent = null; - } }, props: { diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts index 7f8cf7a6..01d1d629 100644 --- a/packages/dropdown-menu/index.ts +++ b/packages/dropdown-menu/index.ts @@ -11,14 +11,11 @@ VantComponent({ relation: { name: 'dropdown-item', type: 'descendant', - linked(target) { - this.children.push(target); + current: 'dropdown-menu', + linked() { this.updateItemListData(); }, - unlinked(target) { - this.children = this.children.filter( - (child: TrivialInstance) => child !== target - ); + unlinked() { this.updateItemListData(); } }, @@ -65,7 +62,6 @@ VantComponent({ beforeCreate() { const { windowHeight } = wx.getSystemInfoSync(); this.windowHeight = windowHeight; - this.children = []; ARRAY.push(this); }, diff --git a/packages/goods-action-button/index.ts b/packages/goods-action-button/index.ts index 3bab17f4..67606ebd 100644 --- a/packages/goods-action-button/index.ts +++ b/packages/goods-action-button/index.ts @@ -9,9 +9,7 @@ VantComponent({ relation: { type: 'ancestor', name: 'goods-action', - linked(parent) { - this.parent = parent; - } + current: 'goods-action-button', }, props: { text: String, diff --git a/packages/goods-action/index.ts b/packages/goods-action/index.ts index 8d853521..e9266b97 100644 --- a/packages/goods-action/index.ts +++ b/packages/goods-action/index.ts @@ -4,15 +4,7 @@ VantComponent({ relation: { type: 'descendant', name: 'goods-action-button', - linked(child) { - this.children.push(child); - }, - unlinked(child) { - this.children = this.children.filter((item) => item !== child); - } - }, - beforeCreate() { - this.children = []; + current: 'goods-action', }, props: { safeAreaInsetBottom: { diff --git a/packages/grid-item/index.ts b/packages/grid-item/index.ts index ee2d2d22..a5b440e3 100644 --- a/packages/grid-item/index.ts +++ b/packages/grid-item/index.ts @@ -6,9 +6,7 @@ VantComponent({ relation: { name: 'grid', type: 'ancestor', - linked(parent) { - this.parent = parent; - } + current: 'grid-item', }, mixins: [link], diff --git a/packages/grid/index.ts b/packages/grid/index.ts index 520c1cdf..2c3f20da 100644 --- a/packages/grid/index.ts +++ b/packages/grid/index.ts @@ -5,14 +5,7 @@ VantComponent({ relation: { name: 'grid-item', type: 'descendant', - linked(child) { - this.children.push(child); - }, - unlinked(child) { - this.children = this.children.filter( - (item: WechatMiniprogram.Component.TrivialInstance) => item !== child - ); - } + current: 'grid', }, props: { diff --git a/packages/index-anchor/index.ts b/packages/index-anchor/index.ts index f4d5d409..56255ce9 100644 --- a/packages/index-anchor/index.ts +++ b/packages/index-anchor/index.ts @@ -4,12 +4,7 @@ VantComponent({ relation: { name: 'index-bar', type: 'ancestor', - linked(target) { - this.parent = target; - }, - unlinked() { - this.parent = null; - } + current: 'index-anchor', }, props: { diff --git a/packages/index-bar/index.ts b/packages/index-bar/index.ts index a93b33f5..1eacb629 100644 --- a/packages/index-bar/index.ts +++ b/packages/index-bar/index.ts @@ -16,6 +16,7 @@ VantComponent({ relation: { name: 'index-anchor', type: 'descendant', + current: 'index-bar', linked() { this.updateData(); }, diff --git a/packages/radio-group/index.ts b/packages/radio-group/index.ts index 26963cfd..af0b7d74 100644 --- a/packages/radio-group/index.ts +++ b/packages/radio-group/index.ts @@ -6,16 +6,10 @@ VantComponent({ relation: { name: 'radio', type: 'descendant', + current: 'radio-group', linked(target) { - this.children = this.children || []; - this.children.push(target); this.updateChild(target); }, - unlinked(target) { - this.children = this.children.filter( - (child: WechatMiniprogram.Component.TrivialInstance) => child !== target - ); - } }, props: { diff --git a/packages/radio/index.ts b/packages/radio/index.ts index a6b234dd..529d9d41 100644 --- a/packages/radio/index.ts +++ b/packages/radio/index.ts @@ -6,12 +6,7 @@ VantComponent({ relation: { name: 'radio-group', type: 'ancestor', - linked(target) { - this.parent = target; - }, - unlinked() { - this.parent = null; - } + current: 'radio', }, classes: ['icon-class', 'label-class'], diff --git a/packages/row/index.ts b/packages/row/index.ts index 7d964d67..17f9b3a3 100644 --- a/packages/row/index.ts +++ b/packages/row/index.ts @@ -4,6 +4,7 @@ VantComponent({ relation: { name: 'col', type: 'descendant', + current: 'row', linked(target) { if (this.data.gutter) { target.setGutter(this.data.gutter); diff --git a/packages/sidebar-item/index.ts b/packages/sidebar-item/index.ts index a140a1f7..5bd84588 100644 --- a/packages/sidebar-item/index.ts +++ b/packages/sidebar-item/index.ts @@ -9,9 +9,7 @@ VantComponent({ relation: { type: 'ancestor', name: 'sidebar', - linked(target) { - this.parent = target; - } + current: 'sidebar-item', }, props: { diff --git a/packages/sidebar/index.ts b/packages/sidebar/index.ts index f9f5c117..ce5203a4 100644 --- a/packages/sidebar/index.ts +++ b/packages/sidebar/index.ts @@ -4,14 +4,11 @@ VantComponent({ relation: { name: 'sidebar-item', type: 'descendant', - linked(target) { - this.children.push(target); + current: 'sidebar', + linked() { this.setActive(this.data.activeKey); }, - unlinked(target) { - this.children = this.children.filter( - (item: WechatMiniprogram.Component.TrivialInstance) => item !== target - ); + unlinked() { this.setActive(this.data.activeKey); } }, @@ -25,7 +22,6 @@ VantComponent({ }, beforeCreate() { - this.children = []; this.currentActive = -1; }, diff --git a/packages/tab/index.ts b/packages/tab/index.ts index 6f9f7ea0..5e102219 100644 --- a/packages/tab/index.ts +++ b/packages/tab/index.ts @@ -4,12 +4,7 @@ VantComponent({ relation: { name: 'tabs', type: 'ancestor', - linked(target) { - this.parent = target; - }, - unlinked() { - this.parent = null; - } + current: 'tab', }, props: { diff --git a/packages/tabbar-item/index.ts b/packages/tabbar-item/index.ts index 6aa210c3..4232affa 100644 --- a/packages/tabbar-item/index.ts +++ b/packages/tabbar-item/index.ts @@ -10,7 +10,8 @@ VantComponent({ relation: { name: 'tabbar', - type: 'ancestor' + type: 'ancestor', + current: 'tabbar-item', }, data: { diff --git a/packages/tabbar/index.ts b/packages/tabbar/index.ts index 4f18ffce..fa32ee45 100644 --- a/packages/tabbar/index.ts +++ b/packages/tabbar/index.ts @@ -6,15 +6,12 @@ VantComponent({ relation: { name: 'tabbar-item', type: 'descendant', + current: 'tabbar', linked(target) { - this.children.push(target); target.parent = this; target.updateFromParent(); }, - unlinked(target) { - this.children = this.children.filter( - (item: TrivialInstance) => item !== target - ); + unlinked() { this.updateChildren(); } }, @@ -50,10 +47,6 @@ VantComponent({ } }, - beforeCreate() { - this.children = []; - }, - methods: { updateChildren() { const { children } = this; diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index f594a1f6..9ab8bb89 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -13,14 +13,13 @@ VantComponent({ relation: { name: 'tab', type: 'descendant', + current: 'tabs', linked(target) { - target.index = this.children.length; - this.children.push(target); + target.index = this.children.length - 1; this.updateTabs(); }, - unlinked(target) { + unlinked() { this.children = this.children - .filter((child: TrivialInstance) => child !== target) .map((child: TrivialInstance, index: number) => { child.index = index; return child; @@ -114,10 +113,6 @@ VantComponent({ container: null }, - beforeCreate() { - this.children = []; - }, - mounted() { this.setData({ container: () => this.createSelectorQuery().select('.van-tabs')