[improvement] AddressList: functional (#2757)

2019-02-16 08:41:03 +08:00
parent 880f574b9a
commit 9aee819c29
2 changed files with 106 additions and 96 deletions
@@ -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);