[improvement] AddressList: functional (#2757)

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({
+function AddressItem(h, props, slots, ctx) {
-  props: {
+  const { disabled, switchable } = props;
-    data: Object,
-    disabled: Boolean,
-    switchable: Boolean
-  },
 
-  methods: {
+  const renderRightIcon = () => (
-    onSelect() {
+    <Icon
-      if (this.switchable) {
+      name="edit"
-        this.$emit('select');
+      class={bem('edit')}
-      }
+      onClick={event => {
-    },
+        event.stopPropagation();
+        emit(ctx, 'edit');
+      }}
+    />
+  );
 
-    onClickRightIcon(event) {
+  const renderContent = () => {
-      event.stopPropagation();
+    const { data } = props;
-      this.$emit('edit');
+    const Info = [
-    },
+      <div class={bem('name')}>{`${data.name}，${data.tel}`}</div>,
+      <div class={bem('address')}>{data.address}</div>
+    ];
 
-    renderRightIcon() {
+    return props.disabled ? Info : <Radio name={data.id}>{Info}</Radio>;
-      return <Icon name="edit" class={bem('edit')} onClick={this.onClickRightIcon} />;
+  };
-    },
 
-    renderContent() {
+  const onSelect = () => {
-      const { data } = this;
+    if (props.switchable) {
-      const Info = [
+      emit(ctx, 'select');
-        <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>;
     }
-  },
+  };
 
-  render(h) {
+  return (
-    const { disabled, switchable } = this;
+    <Cell
+      class={bem({ disabled, unswitchable: !switchable })}
+      valueClass={bem('value')}
+      isLink={!disabled && switchable}
+      scopedSlots={{
+        default: renderContent,
+        'right-icon': renderRightIcon
+      }}
+      onClick={onSelect}
+      {...inherit(ctx)}
+    />
+  );
+}
 
-    return (
+AddressItem.props = {
-      <Cell
+  data: Object,
-        class={bem({ disabled, unswitchable: !switchable })}
+  disabled: Boolean,
-        valueClass={bem('value')}
+  switchable: Boolean
-        isLink={!disabled && switchable}
+};
-        scopedSlots={{
+
-          default: this.renderContent,
+export default sfc(AddressItem);
-          'right-icon': this.renderRightIcon
-        }}
-        onClick={this.onSelect}
-      />
-    );
-  }
-});

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({
+function AddressList(h, props, slots, ctx) {
-  props: {
+  const getList = (list, disabled) =>
-    list: Array,
+    list.map((item, index) => (
-    disabledList: Array,
+      <AddressItem
-    disabledText: String,
+        data={item}
-    addButtonText: String,
+        key={item.id}
-    value: [String, Number],
+        disabled={disabled}
-    switchable: {
+        switchable={props.switchable && !disabled}
-      type: Boolean,
+        onSelect={() => {
-      default: true
+          emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
-    }
+        }}
-  },
+        onEdit={() => {
+          emit(ctx, disabled ? 'edit-disabled' : 'edit', item, index);
+        }}
+      />
+    ));
 
-  render(h) {
+  const List = getList(props.list);
-    const getList = (list, disabled) =>
+  const DisabledList = getList(props.disabledList, true);
-      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);
+  return (
-    const DisabledList = getList(this.disabledList, true);
+    <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 (
+AddressList.props = {
-      <div class={bem()}>
+  list: Array,
-        {this.slots('top')}
+  disabledList: Array,
-        <RadioGroup value={this.value} onInput={event => this.$emit('input', event)}>
+  disabledText: String,
-          {List}
+  addButtonText: String,
-        </RadioGroup>
+  value: [String, Number],
-        {this.disabledText && <div class={bem('disabled-text')}>{this.disabledText}</div>}
+  switchable: {
-        {DisabledList}
+    type: Boolean,
-        {this.slots()}
+    default: true
-        <Button
-          square
-          size="large"
-          type="danger"
-          class={bem('add')}
-          text={this.addButtonText || t('add')}
-          onClick={() => {
-            this.$emit('add');
-          }}
-        />
-      </div>
-    );
   }
-});
+};
+
+export default sfc(AddressList);