chore: extract function

jdf2e · Dec 4, 2024 · 9a10f48 · 9a10f48
1 parent d16bb67
commit 9a10f48
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.scss b/src/packages/hoverbuttonitem/hoverbuttonitem.scss
@@ -23,6 +23,13 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+
+      .nut-icon {
+        display: block;
+        width: 14px;
+        height: 14px;
+        font-size: 14px;
+      }
     }
   }
 
@@ -37,6 +44,7 @@
       display: block;
       width: 20px;
       height: 20px;
+      font-size: 20px;
     }
   }
 

diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.taro.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { BaseEventOrig, ITouchEvent, View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony, harmonyAndRn } from '@/utils/platform-taro'
+import { getIcon } from '@/packages/hoverbuttonitem/utils'
 
 export interface HoverButtonItemProps extends BasicComponent {
   icon?: React.ReactNode
@@ -51,15 +52,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
 
   const renderBody = () => {
     if (icon && !children)
-      return (
-        <View className={`${classPrefix}-icon`}>
-          {React.cloneElement(icon, {
-            className: 'nut-icon',
-            size: 20,
-            ...nativeProps,
-          })}
-        </View>
-      )
+      return <View className={`${classPrefix}-icon`}>{getIcon(icon)}</View>
     if (icon && children) {
       return (
         <>
@@ -68,11 +61,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
               [`${classPrefix}-text-icon`]: true,
             })}
           />
-          {React.cloneElement(icon, {
-            className: 'nut-icon',
-            size: 14,
-            ...nativeProps,
-          })}
+          {getIcon(icon)}
           <View
             className={classNames({
               [`${classPrefix}-text`]: true,

diff --git a/src/packages/hoverbuttonitem/hoverbuttonitem.tsx b/src/packages/hoverbuttonitem/hoverbuttonitem.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { getIcon } from '@/packages/hoverbuttonitem/utils'
 
 export interface HoverButtonItemProps extends BasicComponent {
   className?: string
@@ -31,16 +32,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
 
   const renderBody = () => {
     if (icon && !children)
-      return (
-        <div className={`${classPrefix}-icon`}>
-          {React.isValidElement(icon)
-            ? React.cloneElement(icon, {
-                // @ts-ignore
-                size: 20,
-              })
-            : icon}
-        </div>
-      )
+      return <div className={`${classPrefix}-icon`}>{getIcon(icon)}</div>
     if (icon && children) {
       return (
         <>
@@ -49,12 +41,7 @@ export const HoverButtonItem = (props: Partial<HoverButtonItemProps>) => {
               [`${classPrefix}-text-icon`]: true,
             })}
           />
-          {React.isValidElement(icon)
-            ? React.cloneElement(icon, {
-                // @ts-ignore
-                size: 14,
-              })
-            : icon}
+          {getIcon(icon)}
           <div
             className={classNames({
               [`${classPrefix}-text`]: true,

diff --git a/src/packages/hoverbuttonitem/utils.ts b/src/packages/hoverbuttonitem/utils.ts
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const getIcon = (icon: React.ReactNode) => {
+  return React.isValidElement(icon)
+    ? React.cloneElement(icon, {
+        // @ts-ignore
+        className: 'nut-icon',
+      })
+    : icon
+}