[improvement] Functional components be just functions (#2735)

packages/button/index.js

@@ -4,75 +4,72 @@ import Loading from '../loading';
 
 const [sfc, bem] = use('button');
 
-export default sfc({
-  functional: true,
+function Button(h, props, slots, ctx) {
+  const { type, disabled, loading, loadingText } = props;
 
-  props: {
-    text: String,
-    block: Boolean,
-    plain: Boolean,
-    round: Boolean,
-    square: Boolean,
-    loading: Boolean,
-    disabled: Boolean,
-    nativeType: String,
-    loadingText: String,
-    bottomAction: Boolean,
-    tag: {
-      type: String,
-      default: 'button'
-    },
-    type: {
-      type: String,
-      default: 'default'
-    },
-    size: {
-      type: String,
-      default: 'normal'
+  const onClick = event => {
+    if (!loading && !disabled) {
+      emit(ctx, 'click', event);
     }
+  };
+
+  return (
+    <props.tag
+      type={props.nativeType}
+      disabled={disabled}
+      class={bem([
+        type,
+        props.size,
+        {
+          loading,
+          disabled,
+          block: props.block,
+          plain: props.plain,
+          round: props.round,
+          square: props.square,
+          'bottom-action': props.bottomAction
+        }
+      ])}
+      onClick={onClick}
+      {...inherit(ctx)}
+    >
+      {loading ? (
+        [
+          <Loading size="20px" color={type === 'default' ? undefined : ''} />,
+          loadingText && <span class={bem('loading-text')}>{loadingText}</span>
+        ]
+      ) : (
+        <span class={bem('text')}>
+          {slots.default ? slots.default() : props.text}
+        </span>
+      )}
+    </props.tag>
+  );
+}
+
+Button.props = {
+  text: String,
+  block: Boolean,
+  plain: Boolean,
+  round: Boolean,
+  square: Boolean,
+  loading: Boolean,
+  disabled: Boolean,
+  nativeType: String,
+  loadingText: String,
+  bottomAction: Boolean,
+  tag: {
+    type: String,
+    default: 'button'
   },
-
-  render(h, context) {
-    const { props } = context;
-    const { type, disabled, loading, loadingText } = props;
-
-    const onClick = event => {
-      if (!loading && !disabled) {
-        emit(context, 'click', event);
-      }
-    };
-
-    return (
-      <props.tag
-        type={props.nativeType}
-        disabled={disabled}
-        class={bem([
-          type,
-          props.size,
-          {
-            loading,
-            disabled,
-            block: props.block,
-            plain: props.plain,
-            round: props.round,
-            square: props.square,
-            'bottom-action': props.bottomAction
-          }
-        ])}
-        onClick={onClick}
-        {...inherit(context)}
-      >
-        {loading ? (
-          [
-            <Loading size="20px" color={type === 'default' ? undefined : ''} />,
-            loadingText && (
-              <span class={bem('loading-text')}>{loadingText}</span>
-            )
-          ]
-        ) : (
-          <span class={bem('text')}>{context.children || props.text}</span>
-        )}
-      </props.tag>
-    );
+  type: {
+    type: String,
+    default: 'default'
+  },
+  size: {
+    type: String,
+    default: 'normal'
   }
-});
+};
+
+export default sfc(Button);