[improvement] AddressList: functional (#2757)

packages/address-list/Item.js

@@ -1,46 +1,40 @@
 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');
-      }
-    },
-
-    onClickRightIcon(event) {
+  const renderRightIcon = () => (
+    <Icon
+      name="edit"
+      class={bem('edit')}
+      onClick={event => {
         event.stopPropagation();
-      this.$emit('edit');
-    },
+        emit(ctx, 'edit');
+      }}
+    />
+  );
 
-    renderRightIcon() {
-      return <Icon name="edit" class={bem('edit')} onClick={this.onClickRightIcon} />;
-    },
-
-    renderContent() {
-      const { data } = this;
+  const renderContent = () => {
+    const { data } = props;
     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>;
-    }
-  },
+    return props.disabled ? Info : <Radio name={data.id}>{Info}</Radio>;
+  };
 
-  render(h) {
-    const { disabled, switchable } = this;
+  const onSelect = () => {
+    if (props.switchable) {
+      emit(ctx, 'select');
+    }
+  };
 
   return (
     <Cell
@@ -48,11 +42,19 @@ export default sfc({
       valueClass={bem('value')}
       isLink={!disabled && switchable}
       scopedSlots={{
-          default: this.renderContent,
-          'right-icon': this.renderRightIcon
+        default: renderContent,
+        'right-icon': renderRightIcon
       }}
-        onClick={this.onSelect}
+      onClick={onSelect}
+      {...inherit(ctx)}
     />
   );
-  }
-});
+}
+
+AddressItem.props = {
+  data: Object,
+  disabled: Boolean,
+  switchable: Boolean
+};
+
+export default sfc(AddressItem);

packages/address-list/index.js

@@ -1,12 +1,62 @@
 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: {
+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);
+        }}
+      />
+    ));
+
+  const List = getList(props.list);
+  const DisabledList = getList(props.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>
+  );
+}
+
+AddressList.props = {
   list: Array,
   disabledList: Array,
   disabledText: String,
@@ -16,48 +66,6 @@ export default sfc({
     type: Boolean,
     default: true
   }
-  },
+};
 
-  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(this.list);
-    const DisabledList = getList(this.disabledList, true);
-
-    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>
-    );
-  }
-});
+export default sfc(AddressList);