fix: icon 适配

jdf2e · Nov 7, 2024 · e122e64 · e122e64
1 parent f478704
commit e122e64
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^1.0.5",
-    "@nutui/icons-react-taro": "^1.0.5",
+    "@nutui/icons-react-taro": "2.0.0-beta.0",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@react-spring/web": "~9.6.1",

diff --git a/src/packages/searchbar/demos/taro/demo5.tsx b/src/packages/searchbar/demos/taro/demo5.tsx
@@ -7,57 +7,35 @@ import {
   Close,
   Star,
 } from '@nutui/icons-react-taro'
-import { Icon } from '@tarojs/components'
-import { harmony } from '@/utils/platform-taro'
 
 const Demo5 = () => {
-  // TODO:harmony 下图标为了适配展示使用，待icon适配之后统一移除
-  const isHarmony = harmony()
   return (
     <>
       <SearchBar
         left={
-          isHarmony ? (
-            <>
-              <Icon type="waiting" size={20} />
-              <Icon type="cancel" size={20} color="#c2c4cc" />
-            </>
-          ) : (
-            <>
-              <ArrowLeft size={20} />
-              <Close size={20} />
-            </>
-          )
+          <>
+            <ArrowLeft size={20} />
+            <Close size={20} />
+          </>
         }
         right={
-          isHarmony ? (
-            <>
-              <Icon type="cancel" size={20} />
-              <Icon type="info" size={20} />
-            </>
-          ) : (
-            <>
-              <Star
-                size={20}
-                style={{
-                  color: 'var(--nutui-color-primary)',
-                }}
-              />
-              <More size={20} />
-            </>
-          )
-        }
-        rightIn={
-          isHarmony ? (
-            <Icon type="download" size={20} />
-          ) : (
-            <Photograph
-              size={16}
-              onClick={() => {
-                console.log('Photograph right in')
+          <>
+            <Star
+              size={20}
+              style={{
+                color: 'var(--nutui-color-primary)',
               }}
             />
-          )
+            <More size={20} />
+          </>
+        }
+        rightIn={
+          <Photograph
+            size={16}
+            onClick={() => {
+              console.log('Photograph right in')
+            }}
+          />
         }
       />
     </>

diff --git a/src/packages/searchbar/searchbar.harmony.css b/src/packages/searchbar/searchbar.harmony.css
@@ -51,10 +51,17 @@
 .nut-searchbar-left > span {
   margin-right: 16px;
 }
+.nut-searchbar-left > i {
+  margin-right: 16px;
+}
 .nut-searchbar-left > svg {
   margin-right: 16px;
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left .nut-icon {
+  margin-right: 16px;
+}
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
@@ -66,10 +73,17 @@
 .nut-searchbar-right > span {
   margin-left: 16px;
 }
+.nut-searchbar-right > i {
+  margin-left: 16px;
+}
 .nut-searchbar-right > svg {
   margin-left: 16px;
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right .nut-icon {
+  margin-left: 16px;
+}
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text {

diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
@@ -50,7 +50,8 @@
     & > div,
     & > span,
     & > i,
-    & > svg {
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -61,11 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
     & > i,
-    & > svg {
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {

diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
@@ -1,10 +1,9 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
-import { View, ITouchEvent, Input as TaroInput, Icon } from '@tarojs/components'
+import { View, ITouchEvent, Input as TaroInput } from '@tarojs/components'
 import { MaskClose, Search, ArrowLeft } from '@nutui/icons-react-taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
-import { harmony } from '@/utils/platform-taro'
 
 export interface SearchBarProps extends BasicComponent {
   value?: string
@@ -28,9 +27,6 @@ export interface SearchBarProps extends BasicComponent {
   onInputClick?: (event: MouseEvent<HTMLInputElement>) => void
 }
 
-// TODO:harmony 下图标为了适配展示使用，待icon适配之后统一移除
-const isHarmony = harmony()
-
 const defaultProps = {
   ...ComponentDefaults,
   placeholder: '',
@@ -44,7 +40,7 @@ const defaultProps = {
   left: '',
   right: '',
   rightIn: '',
-  leftIn: isHarmony ? <Icon type="search" size={16} /> : <Search size="16" />,
+  leftIn: <Search size="16" />,
 } as SearchBarProps
 export const SearchBar: FunctionComponent<
   Partial<SearchBarProps> &
@@ -171,11 +167,7 @@ export const SearchBar: FunctionComponent<
         className={`${classPrefix}-clear  ${classPrefix}-icon`}
         onClick={(e: any) => clearaVal(e)}
       >
-        {isHarmony ? (
-          <Icon type="cancel" size={16} color="#c2c4cc" />
-        ) : (
-          <MaskClose size={16} />
-        )}
+        <MaskClose size={16} />
       </View>
     )
   }