chore: split jsx blocks

src/dialog/Dialog.js

@@ -91,6 +91,39 @@ export default createComponent({
     onClosed() {
       this.$emit('closed');
     },
+
+    genButtons() {
+      const multiple = this.showCancelButton && this.showConfirmButton;
+
+      return (
+        <div class={[BORDER_TOP, bem('footer', { buttons: multiple })]}>
+          {this.showCancelButton && (
+            <Button
+              size="large"
+              class={bem('cancel')}
+              loading={this.loading.cancel}
+              text={this.cancelButtonText || t('cancel')}
+              style={{ color: this.cancelButtonColor }}
+              onClick={() => {
+                this.handleAction('cancel');
+              }}
+            />
+          )}
+          {this.showConfirmButton && (
+            <Button
+              size="large"
+              class={[bem('confirm'), { [BORDER_LEFT]: multiple }]}
+              loading={this.loading.confirm}
+              text={this.confirmButtonText || t('confirm')}
+              style={{ color: this.confirmButtonColor }}
+              onClick={() => {
+                this.handleAction('confirm');
+              }}
+            />
+          )}
+        </div>
+      );
+    },
   },
 
   render() {
@@ -122,36 +155,6 @@ export default createComponent({
       </div>
     );
 
-    const hasButtons = this.showCancelButton && this.showConfirmButton;
-    const ButtonGroup = (
-      <div class={[BORDER_TOP, bem('footer', { buttons: hasButtons })]}>
-        {this.showCancelButton && (
-          <Button
-            size="large"
-            class={bem('cancel')}
-            loading={this.loading.cancel}
-            text={this.cancelButtonText || t('cancel')}
-            style={{ color: this.cancelButtonColor }}
-            onClick={() => {
-              this.handleAction('cancel');
-            }}
-          />
-        )}
-        {this.showConfirmButton && (
-          <Button
-            size="large"
-            class={[bem('confirm'), { [BORDER_LEFT]: hasButtons }]}
-            loading={this.loading.confirm}
-            text={this.confirmButtonText || t('confirm')}
-            style={{ color: this.confirmButtonColor }}
-            onClick={() => {
-              this.handleAction('confirm');
-            }}
-          />
-        )}
-      </div>
-    );
-
     return (
       <transition
         name={this.transition}
@@ -167,7 +170,7 @@ export default createComponent({
         >
           {Title}
           {Content}
-          {ButtonGroup}
+          {this.genButtons()}
         </div>
       </transition>
     );

src/number-keyboard/index.js

@@ -134,83 +134,92 @@ export default createComponent({
         this.$emit('update:value', value + text);
       }
     },
+
+    genTitle() {
+      const { title, theme, closeButtonText } = this;
+      const titleLeft = this.slots('title-left');
+      const showClose = closeButtonText && theme === 'default';
+      const showTitle = title || showClose || titleLeft;
+
+      if (!showTitle) {
+        return;
+      }
+
+      return (
+        <div class={[bem('title'), BORDER_TOP]}>
+          {titleLeft && <span class={bem('title-left')}>{titleLeft}</span>}
+          {title && <span>{title}</span>}
+          {showClose && (
+            <span
+              role="button"
+              tabindex="0"
+              class={bem('close')}
+              onClick={this.onClose}
+            >
+              {closeButtonText}
+            </span>
+          )}
+        </div>
+      );
+    },
+
+    genKeys() {
+      return this.keys.map(key => (
+        <Key
+          key={key.text}
+          text={key.text}
+          type={key.type}
+          theme={key.theme}
+          onPress={this.onPress}
+        >
+          {key.type === 'delete' && this.slots('delete')}
+          {key.type === 'extra' && this.slots('extra-key')}
+        </Key>
+      ));
+    },
+
+    genSidebar() {
+      if (this.theme === 'custom') {
+        return (
+          <div class={bem('sidebar')}>
+            <Key
+              text={this.deleteText}
+              type="delete"
+              theme={DELETE_KEY_THEME}
+              onPress={this.onPress}
+            >
+              {this.slots('delete')}
+            </Key>
+            <Key
+              text={this.closeButtonText}
+              type="close"
+              theme={CLOSE_KEY_THEME}
+              onPress={this.onPress}
+            />
+          </div>
+        );
+      }
+    },
   },
 
   render() {
-    const { title, theme, onPress, closeButtonText } = this;
-
-    const titleLeftSlot = this.slots('title-left');
-    const showTitleClose = closeButtonText && theme === 'default';
-    const showTitle = title || showTitleClose || titleLeftSlot;
-
-    const Title = showTitle && (
-      <div class={[bem('title'), BORDER_TOP]}>
-        {titleLeftSlot && (
-          <span class={bem('title-left')}>{titleLeftSlot}</span>
-        )}
-        {title && <span>{title}</span>}
-        {showTitleClose && (
-          <span
-            role="button"
-            tabindex="0"
-            class={bem('close')}
-            onClick={this.onClose}
-          >
-            {closeButtonText}
-          </span>
-        )}
-      </div>
-    );
-
-    const Keys = this.keys.map(key => (
-      <Key
-        key={key.text}
-        text={key.text}
-        type={key.type}
-        theme={key.theme}
-        onPress={onPress}
-      >
-        {key.type === 'delete' && this.slots('delete')}
-        {key.type === 'extra' && this.slots('extra-key')}
-      </Key>
-    ));
-
-    const Sidebar = theme === 'custom' && (
-      <div class={bem('sidebar')}>
-        <Key
-          text={this.deleteText}
-          type="delete"
-          theme={DELETE_KEY_THEME}
-          onPress={onPress}
-        >
-          {this.slots('delete')}
-        </Key>
-        <Key
-          text={closeButtonText}
-          type="close"
-          theme={CLOSE_KEY_THEME}
-          onPress={onPress}
-        />
-      </div>
-    );
-
     return (
       <transition name={this.transition ? 'van-slide-up' : ''}>
         <div
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
           class={bem([
-            theme,
+            this.theme,
             { 'safe-area-inset-bottom': this.safeAreaInsetBottom },
           ])}
           onTouchstart={stopPropagation}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >
-          {Title}
+          {this.genTitle()}
           <div class={bem('body')}>
-            {Keys}
+            {this.genKeys()}
-            {Sidebar}
+            {this.genSidebar()}
           </div>
         </div>
       </transition>