refactor(Search): extract render fns

src/search/index.js

@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace } from '../utils';
+import { createNamespace, pick } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 
 // Components
@@ -32,11 +32,25 @@ export default createComponent({
     },
   },
 
-  emits: ['search', 'cancel', 'keypress'],
+  emits: ['search', 'cancel'],
 
-  setup(props, { emit, slots }) {
+  setup(props, { emit, slots, attrs }) {
-    return function () {
+    const onCancel = () => {
-      function Label() {
+      if (!slots.action) {
+        emit('update:modelValue', '');
+        emit('cancel');
+      }
+    };
+
+    const onKeypress = (event) => {
+      const ENTER_CODE = 13;
+      if (event.keyCode === ENTER_CODE) {
+        preventDefault(event);
+        emit('search', props.modelValue);
+      }
+    };
+
+    const renderLabel = () => {
       if (slots.label || props.label) {
         return (
           <div class={bem('label')}>
@@ -44,22 +58,11 @@ export default createComponent({
           </div>
         );
       }
-      }
+    };
-
-      function Action() {
-        if (!props.showAction) {
-          return;
-        }
-
-        function onCancel() {
-          if (slots.action) {
-            return;
-          }
-
-          emit('update:modelValue', '');
-          emit('cancel');
-        }
 
+    const renderAction = () => {
+      if (props.showAction) {
+        const text = props.actionText || t('cancel');
         return (
           <div
             class={bem('action')}
@@ -67,51 +70,51 @@ export default createComponent({
             tabindex="0"
             onClick={onCancel}
           >
-            {slots.action ? slots.action() : props.actionText || t('cancel')}
+            {slots.action ? slots.action() : text}
           </div>
         );
       }
+    };
 
-      const fieldData = {
+    const fieldPropNames = [
-        ...this.$attrs,
+      'leftIcon',
+      'rightIcon',
+      'clearable',
+      'modelValue',
+      'clearTrigger',
+    ];
+
+    const renderField = () => {
+      const fieldAttrs = {
+        ...attrs,
+        ...pick(props, fieldPropNames),
         style: null,
         class: null,
-        onKeypress(event) {
-          // press enter
-          if (event.keyCode === 13) {
-            preventDefault(event);
-            emit('search', props.modelValue);
-          }
-          emit('keypress', event);
-        },
       };
 
       return (
+        <Field
+          v-slots={pick(slots, ['left-icon', 'right-icon'])}
+          type="search"
+          border={false}
+          onKeypress={onKeypress}
+          {...fieldAttrs}
+        />
+      );
+    };
+
+    return () => (
       <div
-          class={[bem({ 'show-action': props.showAction }), this.$attrs.class]}
+        class={[bem({ 'show-action': props.showAction }), attrs.class]}
-          style={{ background: props.background, ...this.$attrs.style }}
+        style={{ background: props.background, ...attrs.style }}
       >
         {slots.left?.()}
         <div class={bem('content', props.shape)}>
-            {Label()}
+          {renderLabel()}
-            <Field
+          {renderField()}
-              v-slots={{
-                'left-icon': slots['left-icon'],
-                'right-icon': slots['right-icon'],
-              }}
-              type="search"
-              border={false}
-              leftIcon={props.leftIcon}
-              rightIcon={props.rightIcon}
-              clearable={props.clearable}
-              modelValue={props.modelValue}
-              clearTrigger={props.clearTrigger}
-              {...fieldData}
-            />
         </div>
-          {Action()}
+        {renderAction()}
       </div>
     );
-    };
   },
 });