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

2019-02-14 11:56:02 +08:00
parent 166397dad4
commit 5a9143c736
21 changed files with 704 additions and 674 deletions
@@ -4,63 +4,61 @@ import Button from '../button';

 const [sfc, bem, t] = use('submit-bar');

-export default sfc({
-  functional: true,
+function SubmitBar(h, props, slots, ctx) {
+  const { tip, price } = props;
+  const hasPrice = typeof price === 'number';

-  props: {
-    tip: String,
-    label: String,
-    loading: Boolean,
-    disabled: Boolean,
-    buttonText: String,
-    price: {
-      type: Number,
-      default: null
-    },
-    currency: {
-      type: String,
-      default: '¥'
-    },
-    buttonType: {
-      type: String,
-      default: 'danger'
-    }
-  },
-
-  render(h, context) {
-    const { props, listeners } = context;
-    const { tip, price } = props;
-    const slots = context.slots();
-    const hasPrice = typeof price === 'number';
-
-    return (
-      <div class={bem()} {...inherit(context)}>
-        {slots.top}
-        {(slots.tip || tip) && (
-          <div class={bem('tip')}>
-            {tip}
-            {slots.tip}
-          </div>
-        )}
-        <div class={bem('bar')}>
-          {slots.default}
-          <div class={bem('text')}>
-            {hasPrice && [
-              <span>{props.label || t('label')}</span>,
-              <span class={bem('price')}>{`${props.currency} ${(price / 100).toFixed(2)}`}</span>
-            ]}
-          </div>
-          <Button
-            square
-            size="large"
-            type={props.buttonType}
-            loading={props.loading}
-            disabled={props.disabled}
-            text={props.loading ? '' : props.buttonText}
-            onClick={listeners.submit || noop}
-          />
+  return (
+    <div class={bem()} {...inherit(ctx)}>
+      {slots.top && slots.top()}
+      {(slots.tip || tip) && (
+        <div class={bem('tip')}>
+          {tip}
+          {slots.tip && slots.tip()}
        </div>
+      )}
+      <div class={bem('bar')}>
+        {slots.default && slots.default()}
+        <div class={bem('text')}>
+          {hasPrice && [
+            <span>{props.label || t('label')}</span>,
+            <span class={bem('price')}>{`${props.currency} ${(
+              price / 100
+            ).toFixed(2)}`}</span>
+          ]}
+        </div>
+        <Button
+          square
+          size="large"
+          type={props.buttonType}
+          loading={props.loading}
+          disabled={props.disabled}
+          text={props.loading ? '' : props.buttonText}
+          onClick={ctx.listeners.submit || noop}
+        />
      </div>
-    );
+    </div>
+  );
+}
+
+SubmitBar.props = {
+  tip: String,
+  label: String,
+  loading: Boolean,
+  disabled: Boolean,
+  buttonText: String,
+  price: {
+    type: Number,
+    default: null
+  },
+  currency: {
+    type: String,
+    default: '¥'
+  },
+  buttonType: {
+    type: String,
+    default: 'danger'
  }
-});
+};
+
+export default sfc(SubmitBar);