From 9aee819c29517a0c1f704090fa36153cfd6567ff Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 16 Feb 2019 08:41:03 +0800
Subject: [PATCH] [improvement] AddressList: functional (#2757)

---
 packages/address-list/Item.js  |  90 +++++++++++++-------------
 packages/address-list/index.js | 112 ++++++++++++++++++---------------
 2 files changed, 106 insertions(+), 96 deletions(-)

diff --git a/packages/address-list/Item.js b/packages/address-list/Item.js
index 5163a1081..55410fa3a 100644
--- a/packages/address-list/Item.js
+++ b/packages/address-list/Item.js
@@ -1,58 +1,60 @@
 import { use } from '../utils';
+import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
 
 const [sfc, bem] = use('address-item');
 
-export default sfc({
-  props: {
-    data: Object,
-    disabled: Boolean,
-    switchable: Boolean
-  },
+function AddressItem(h, props, slots, ctx) {
+  const { disabled, switchable } = props;
 
-  methods: {
-    onSelect() {
-      if (this.switchable) {
-        this.$emit('select');
-      }
-    },
+  const renderRightIcon = () => (
+    <Icon
+      name="edit"
+      class={bem('edit')}
+      onClick={event => {
+        event.stopPropagation();
+        emit(ctx, 'edit');
+      }}
+    />
+  );
 
-    onClickRightIcon(event) {
-      event.stopPropagation();
-      this.$emit('edit');
-    },
+  const renderContent = () => {
+    const { data } = props;
+    const Info = [
+      <div class={bem('name')}>{`${data.name}，${data.tel}`}</div>,
+      <div class={bem('address')}>{data.address}</div>
+    ];
 
-    renderRightIcon() {
-      return <Icon name="edit" class={bem('edit')} onClick={this.onClickRightIcon} />;
-    },
+    return props.disabled ? Info : <Radio name={data.id}>{Info}</Radio>;
+  };
 
-    renderContent() {
-      const { data } = this;
-      const Info = [
-        <div class={bem('name')}>{`${data.name}，${data.tel}`}</div>,
-        <div class={bem('address')}>{data.address}</div>
-      ];
-
-      return this.disabled ? Info : <Radio name={data.id}>{Info}</Radio>;
+  const onSelect = () => {
+    if (props.switchable) {
+      emit(ctx, 'select');
     }
-  },
+  };
 
-  render(h) {
-    const { disabled, switchable } = this;
+  return (
+    <Cell
+      class={bem({ disabled, unswitchable: !switchable })}
+      valueClass={bem('value')}
+      isLink={!disabled && switchable}
+      scopedSlots={{
+        default: renderContent,
+        'right-icon': renderRightIcon
+      }}
+      onClick={onSelect}
+      {...inherit(ctx)}
+    />
+  );
+}
 
-    return (
-      <Cell
-        class={bem({ disabled, unswitchable: !switchable })}
-        valueClass={bem('value')}
-        isLink={!disabled && switchable}
-        scopedSlots={{
-          default: this.renderContent,
-          'right-icon': this.renderRightIcon
-        }}
-        onClick={this.onSelect}
-      />
-    );
-  }
-});
+AddressItem.props = {
+  data: Object,
+  disabled: Boolean,
+  switchable: Boolean
+};
+
+export default sfc(AddressItem);
diff --git a/packages/address-list/index.js b/packages/address-list/index.js
index fc2366ec4..38103511a 100644
--- a/packages/address-list/index.js
+++ b/packages/address-list/index.js
@@ -1,63 +1,71 @@
 import { use } from '../utils';
+import { emit, inherit } from '../utils/functional';
 import Button from '../button';
 import RadioGroup from '../radio-group';
 import AddressItem from './Item';
 
 const [sfc, bem, t] = use('address-list');
 
-export default sfc({
-  props: {
-    list: Array,
-    disabledList: Array,
-    disabledText: String,
-    addButtonText: String,
-    value: [String, Number],
-    switchable: {
-      type: Boolean,
-      default: true
-    }
-  },
+function AddressList(h, props, slots, ctx) {
+  const getList = (list, disabled) =>
+    list.map((item, index) => (
+      <AddressItem
+        data={item}
+        key={item.id}
+        disabled={disabled}
+        switchable={props.switchable && !disabled}
+        onSelect={() => {
+          emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
+        }}
+        onEdit={() => {
+          emit(ctx, disabled ? 'edit-disabled' : 'edit', item, index);
+        }}
+      />
+    ));
 
-  render(h) {
-    const getList = (list, disabled) =>
-      list.map((item, index) => (
-        <AddressItem
-          data={item}
-          key={item.id}
-          disabled={disabled}
-          switchable={this.switchable && !disabled}
-          onSelect={() => {
-            this.$emit(disabled ? 'select-disabled' : 'select', item, index);
-          }}
-          onEdit={() => {
-            this.$emit(disabled ? 'edit-disabled' : 'edit', item, index);
-          }}
-        />
-      ));
+  const List = getList(props.list);
+  const DisabledList = getList(props.disabledList, true);
 
-    const List = getList(this.list);
-    const DisabledList = getList(this.disabledList, true);
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      {slots.top && slots.top()}
+      <RadioGroup
+        value={props.value}
+        onInput={event => {
+          emit(ctx, 'input', event);
+        }}
+      >
+        {List}
+      </RadioGroup>
+      {props.disabledText && (
+        <div class={bem('disabled-text')}>{props.disabledText}</div>
+      )}
+      {DisabledList}
+      {slots.default && slots.default()}
+      <Button
+        square
+        size="large"
+        type="danger"
+        class={bem('add')}
+        text={props.addButtonText || t('add')}
+        onClick={() => {
+          emit(ctx, 'add');
+        }}
+      />
+    </div>
+  );
+}
 
-    return (
-      <div class={bem()}>
-        {this.slots('top')}
-        <RadioGroup value={this.value} onInput={event => this.$emit('input', event)}>
-          {List}
-        </RadioGroup>
-        {this.disabledText && <div class={bem('disabled-text')}>{this.disabledText}</div>}
-        {DisabledList}
-        {this.slots()}
-        <Button
-          square
-          size="large"
-          type="danger"
-          class={bem('add')}
-          text={this.addButtonText || t('add')}
-          onClick={() => {
-            this.$emit('add');
-          }}
-        />
-      </div>
-    );
+AddressList.props = {
+  list: Array,
+  disabledList: Array,
+  disabledText: String,
+  addButtonText: String,
+  value: [String, Number],
+  switchable: {
+    type: Boolean,
+    default: true
   }
-});
+};
+
+export default sfc(AddressList);