From 4d9b4b3e234a93c873276ffb1304840bed8b911b Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 24 Aug 2020 10:52:53 +0800
Subject: [PATCH] refactor(Button): use setup

---
 src/button/index.js | 172 +++++++++++++++++++++++++-------------------
 src/picker/index.js |  14 ++--
 2 files changed, 103 insertions(+), 83 deletions(-)

diff --git a/src/button/index.js b/src/button/index.js
index c3369da1c..5628fa91b 100644
--- a/src/button/index.js
+++ b/src/button/index.js
@@ -46,103 +46,127 @@ export default createComponent({
 
   emits: ['click'],
 
-  methods: {
-    onClick() {
-      if (!this.loading && !this.disabled) {
-        this.$emit('click', event);
-        route(this.$router, this);
+  setup(props, { emit, slots }) {
+    const renderLoadingIcon = () => {
+      if (slots.loading) {
+        return slots.loading();
       }
-    },
 
-    genContent() {
-      const Content = [];
+      return (
+        <Loading
+          class={bem('loading')}
+          size={props.loadingSize}
+          type={props.loadingType}
+          color="currentColor"
+        />
+      );
+    };
 
-      if (this.loading) {
-        Content.push(
-          this.$slots.loading ? (
-            this.$slots.loading()
-          ) : (
-            <Loading
-              class={bem('loading')}
-              size={this.loadingSize}
-              type={this.loadingType}
-              color="currentColor"
-            />
-          )
-        );
-      } else if (this.icon) {
-        Content.push(
+    const renderIcon = () => {
+      if (props.loading) {
+        return renderLoadingIcon();
+      }
+
+      if (props.icon) {
+        return (
           <Icon
-            name={this.icon}
+            name={props.icon}
             class={bem('icon')}
-            classPrefix={this.iconPrefix}
+            classPrefix={props.iconPrefix}
           />
         );
       }
+    };
 
+    const renderText = () => {
       let text;
-      if (this.loading) {
-        text = this.loadingText;
+      if (props.loading) {
+        text = props.loadingText;
       } else {
-        text = this.$slots.default ? this.$slots.default() : this.text;
+        text = slots.default ? slots.default() : props.text;
       }
 
       if (text) {
-        Content.push(<span class={bem('text')}>{text}</span>);
+        return <span class={bem('text')}>{text}</span>;
       }
+    };
 
-      return Content;
-    },
-  },
+    const getStyle = () => {
+      const { color, plain } = props;
+      if (color) {
+        const style = {};
 
-  render() {
-    const { tag, type, color, plain, disabled, loading, hairline } = this;
+        style.color = plain ? color : WHITE;
 
-    const style = {};
+        if (!plain) {
+          // Use background instead of backgroundColor to make linear-gradient work
+          style.background = color;
+        }
 
-    if (color) {
-      style.color = plain ? color : WHITE;
+        // hide border when color is linear-gradient
+        if (color.indexOf('gradient') !== -1) {
+          style.border = 0;
+        } else {
+          style.borderColor = color;
+        }
 
-      if (!plain) {
-        // Use background instead of backgroundColor to make linear-gradient work
-        style.background = color;
+        return style;
       }
+    };
 
-      // hide border when color is linear-gradient
-      if (color.indexOf('gradient') !== -1) {
-        style.border = 0;
-      } else {
-        style.borderColor = color;
-      }
-    }
-
-    const classes = [
-      bem([
+    return (vm) => {
+      const {
+        tag,
         type,
-        this.size,
-        {
-          plain,
-          loading,
-          disabled,
-          hairline,
-          block: this.block,
-          round: this.round,
-          square: this.square,
-        },
-      ]),
-      { [BORDER_SURROUND]: hairline },
-    ];
+        size,
+        block,
+        round,
+        plain,
+        square,
+        loading,
+        disabled,
+        hairline,
+        nativeType,
+      } = props;
 
-    return (
-      <tag
-        style={style}
-        class={classes}
-        type={this.nativeType}
-        disabled={disabled}
-        onClick={this.onClick}
-      >
-        <div class={bem('content')}>{this.genContent()}</div>
-      </tag>
-    );
+      const onClick = () => {
+        if (!loading && !disabled) {
+          emit('click', event);
+          route(vm.$router, vm);
+        }
+      };
+
+      const classes = [
+        bem([
+          type,
+          size,
+          {
+            plain,
+            block,
+            round,
+            square,
+            loading,
+            disabled,
+            hairline,
+          },
+        ]),
+        { [BORDER_SURROUND]: hairline },
+      ];
+
+      return (
+        <tag
+          type={nativeType}
+          class={classes}
+          style={getStyle()}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          <div class={bem('content')}>
+            {renderIcon()}
+            {renderText()}
+          </div>
+        </tag>
+      );
+    };
   },
 });
diff --git a/src/picker/index.js b/src/picker/index.js
index 0e4153dc8..76b229493 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -14,14 +14,14 @@ const [createComponent, bem, t] = createNamespace('picker');
 export default createComponent({
   props: {
     ...pickerProps,
-    defaultIndex: {
-      type: [Number, String],
-      default: 0,
-    },
     columns: {
       type: Array,
       default: () => [],
     },
+    defaultIndex: {
+      type: [Number, String],
+      default: 0,
+    },
     toolbarPosition: {
       type: String,
       default: 'top',
@@ -135,11 +135,7 @@ export default createComponent({
       }
 
       if (this.dataType === 'text') {
-        this.$emit(
-          'change',
-          this.getColumnValue(0),
-          this.getColumnIndex(0)
-        );
+        this.$emit('change', this.getColumnValue(0), this.getColumnIndex(0));
       } else {
         this.$emit('change', this.getValues(), columnIndex);
       }