[improvement] Functional: ContactList, NavBar, Panel, SubmitBar, SwitchCell, Tag (#2675)

packages/submit-bar/index.js

@@ -1,63 +1,66 @@
-import { use } from '../utils';
+import { use, noop } from '../utils';
 import Button from '../button';
 
 const [sfc, bem, t] = use('submit-bar');
 
-export default sfc({
-  props: {
-    tip: String,
-    label: String,
-    loading: Boolean,
-    disabled: Boolean,
-    buttonText: String,
-    price: {
-      type: Number,
-      default: null
+export default sfc(
+  {
+    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'
+      }
     },
-    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()} {...context.data}>
+          {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}
+            />
+          </div>
+        </div>
+      );
     }
   },
-
-  render(h) {
-    const { tip, price, $slots } = this;
-    const hasPrice = typeof price === 'number';
-
-    return (
-      <div class={bem()}>
-        {$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>{this.label || t('label')}</span>,
-              <span class={bem('price')}>{`${this.currency} ${(price / 100).toFixed(2)}`}</span>
-            ]}
-          </div>
-          <Button
-            square
-            size="large"
-            type={this.buttonType}
-            loading={this.loading}
-            disabled={this.disabled}
-            text={this.loading ? '' : this.buttonText}
-            onClick={() => {
-              this.$emit('submit');
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-});
+  true
+);