Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Icon): icon harmony adaptation #2788

Merged
merged 3 commits into from
Nov 22, 2024
Merged

feat(Icon): icon harmony adaptation #2788

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b380bcf
feat(Icon): icon harmony adaptation
xiaoyatong Nov 22, 2024
a518f89
fix: incorrect icon removed
xiaoyatong Nov 22, 2024
fe8b0db
chore: update deps
oasis-cloud Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
"author": "hanyuxinting"
},
{
"version": "2.0.0",
"version": "3.0.0",
"name": "Icon",
"type": "component",
"cName": "图标",
Expand Down
17 changes: 4 additions & 13 deletions src/packages/icon/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Toast } from '@nutui/nutui-react-taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import Header from '@/sites/components/header'
import Demo1 from './demos/taro/demo1'
import Demo2 from './demos/taro/demo2'
import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
Expand All @@ -16,28 +15,22 @@ import Demo7 from './demos/taro/demo7'
const IconDemo = () => {
const [translated] = useTranslate({
'zh-CN': {
'84aa6bce': '基础用法',
svg: 'SVG 按需使用',
'84aa6bce': '基础用法: SVG',
dab8a74f: '图片链接',
'52c15454': '图标颜色',
'7aeb5407': '图标大小',
f2e6c6d6: '基础图标',
},
'zh-TW': {
'84aa6bce': '基礎用法',
svg: 'SVG 按需使用',
'84aa6bce': '基礎用法: SVG',
dab8a74f: '圖片連結',
'52c15454': '圖示顏色',
'7aeb5407': '圖示大小',
f2e6c6d6: '基礎圖示',
},
'en-US': {
'84aa6bce': 'Basic Usage',
svg: 'SVG import On Demand',
'84aa6bce': 'Basic Usage: SVG',
dab8a74f: 'Image Link',
'52c15454': 'IconFont Color',
'7aeb5407': 'IconFont Size',
f2e6c6d6: 'Base IconFont',
},
})

Expand Down Expand Up @@ -72,10 +65,8 @@ const IconDemo = () => {
})
}}
/>
<View className="h2">{translated.svg}</View>
<Demo1 />
<View className="h2">{translated['84aa6bce']}</View>
<Demo2 />
<Demo1 />
<View className="h2">{translated.dab8a74f}</View>
<Demo3 />
<View className="h2">{translated['52c15454']}</View>
Expand Down
5 changes: 3 additions & 2 deletions src/packages/icon/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React from 'react'
import { Cell } from '@nutui/nutui-react-taro'
import { Add, Dongdong, UserAdd } from '@nutui/icons-react-taro'
import { Add, Dongdong, UserAdd, Minus } from '@nutui/icons-react-taro'

const Demo1 = () => {
return (
<Cell>
<Add color="red" style={{ marginRight: '10px' }} />
<UserAdd style={{ marginRight: '10px' }} />
<Dongdong />
<Dongdong style={{ marginRight: '10px' }} />
<Minus />
</Cell>
)
}
Expand Down
14 changes: 0 additions & 14 deletions src/packages/icon/demos/taro/demo2.tsx
View file
Open in desktop

This file was deleted.

3 changes: 2 additions & 1 deletion src/packages/icon/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ const Demo3 = () => {
return (
<Cell>
<IconFont
size="40"
size={40}
style={{ width: 40, height: 40 }}
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
/>
</Cell>
Expand Down
16 changes: 4 additions & 12 deletions src/packages/icon/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import React from 'react'
import { Cell } from '@nutui/nutui-react-taro'
import { IconFont } from '@nutui/icons-react-taro'
import { Dongdong } from '@nutui/icons-react-taro'

const Demo4 = () => {
return (
<Cell>
<IconFont
name="dongdong"
color="#FF0F23"
style={{ marginRight: '10px' }}
/>
<IconFont
name="dongdong"
color="#64b578"
style={{ marginRight: '10px' }}
/>
<IconFont name="dongdong" color="#ffd700" />
<Dongdong color="#FF0F23" style={{ marginRight: '10px' }} />
<Dongdong color="#64b578" style={{ marginRight: '10px' }} />
<Dongdong color="#ffd700" />
</Cell>
)
}
Expand Down
8 changes: 4 additions & 4 deletions src/packages/icon/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react'
import { Cell } from '@nutui/nutui-react-taro'
import { IconFont } from '@nutui/icons-react-taro'
import { Dongdong } from '@nutui/icons-react-taro'

const Demo5 = () => {
return (
<Cell style={{ alignItems: 'center' }}>
<IconFont name="dongdong" size="16" style={{ marginRight: '10px' }} />
<IconFont name="dongdong" size="20" style={{ marginRight: '10px' }} />
<IconFont name="dongdong" size="24" />
<Dongdong size="16" style={{ marginRight: '10px' }} />
<Dongdong size="20" style={{ marginRight: '10px' }} />
<Dongdong size="24" />
Comment on lines +3 to +10
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要完成 H5 版本的图标组件迁移

在代码库中发现以下问题：

  • H5 演示文件中仍在使用旧的 IconFont 组件显示 dongdong 图标：
    • src/packages/icon/demos/h5/demo2.tsx
    • src/packages/icon/demos/h5/demo4.tsx
    • src/packages/icon/demos/h5/demo5.tsx

请将这些文件中的 IconFont 组件替换为新的 Dongdong 组件，以保持组件使用的一致性。

🔗 Analysis chain

验证图标组件迁移的完整性

需要确保所有使用 "dongdong" 图标的地方都已经迁移到新的 Dongdong 组件。

Let me check the content of those files to better understand the migration status.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查是否还有其他文件使用旧的 IconFont 组件显示 dongdong 图标

# 搜索可能遗留的 IconFont dongdong 使用
echo "检查 IconFont dongdong 的使用..."
rg -l "IconFont.*dongdong" src/

# 搜索新 Dongdong 组件的使用情况
echo "检查 Dongdong 组件的使用情况..."
rg -l "import.*Dongdong.*from.*@nutui/icons-react" src/

Length of output: 730

Script:

#!/bin/bash
# 检查 IconFont dongdong 的具体使用情况
echo "IconFont dongdong 的使用内容："
rg "IconFont.*dongdong" src/packages/icon/demos/h5/demo*.tsx -A 2

# 检查新 Dongdong 组件的具体使用情况
echo "\n新 Dongdong 组件的使用内容："
rg "import.*Dongdong.*from.*@nutui/icons-react" -A 2 src/packages/icon/demos/h5/demo*.tsx src/packages/icon/demos/taro/demo*.tsx

Length of output: 2642

</Cell>
)
}
Expand Down
18 changes: 11 additions & 7 deletions src/packages/icon/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, { useState } from 'react'
import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
import * as iconfonts from '@nutui/icons-react-taro'
import { Cell, Toast } from '@nutui/nutui-react-taro'
import { View } from '@tarojs/components'
import { camelCase } from '@/utils/camel-case'

const Demo6 = () => {
const generateCopyText = (name: string) => {
return `<${camelCase(name, { pascalCase: true })} />`
}

const copyTag = (text: string) => {
const input = document.createElement('input')
document.body.appendChild(input)
Expand All @@ -25,11 +27,11 @@ const Demo6 = () => {
return (
<>
<Toast visible={state.visible} content={state.content} type="text" />
{(IconFontConfig as any).data.map((item: any) => {
{(iconfonts.IconFontConfig as any).data.map((item: any) => {
return (
<Cell.Group key={item.name} title={item.name}>
<Cell>
<ul
<View
style={{
display: 'flex',
flexWrap: 'wrap',
Expand All @@ -39,7 +41,7 @@ const Demo6 = () => {
>
{item.icons.map((icon: any) => {
return (
<li
<View
key={Math.random()}
onClick={() => {
copyTag(generateCopyText(icon))
Expand All @@ -59,11 +61,13 @@ const Demo6 = () => {
justifyContent: 'center',
}}
>
<IconFont name={icon} />
</li>
{React.createElement(
iconfonts[camelCase(icon, { pascalCase: true })]
)}
</View>
)
})}
</ul>
</View>
</Cell>
</Cell.Group>
)
Expand Down
23 changes: 13 additions & 10 deletions src/packages/icon/demos/taro/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from 'react'
import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
import * as iconfonts from '@nutui/icons-react-taro'
import { Cell, Toast } from '@nutui/nutui-react-taro'
import { View } from '@tarojs/components'
import { camelCase } from '@/utils/camel-case'

const Demo7 = () => {
Expand All @@ -27,11 +28,11 @@ const Demo7 = () => {
return (
<>
<Toast visible={state.visible} content={state.content} type="text" />
{(IconFontConfig as any).style.map((item: any) => {
{(iconfonts.IconFontConfig as any).style.map((item: any) => {
return (
Comment on lines +31 to 32
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

🛠️ Refactor suggestion

Based on the analysis of the codebase, I can now provide the final response:

建议对 IconFontConfig 的使用添加类型定义和错误处理

  1. 当前代码中 IconFontConfig 被直接使用 as any 类型转换，缺乏类型安全保障
  2. 没有对 style 和 data 属性的存在性进行检查
  3. 缺少对无效数据的容错处理

建议添加以下改进：

interface IconStyle {
  name: string;
  icons: Array<{
    name: string;
    'animation-name'?: string;
    'animation-time'?: string;
  }>;
}

interface IconFontConfigType {
  style: IconStyle[];
  data: IconStyle[];
}

// 使用时添加类型检查和错误处理
{
  (() => {
    try {
      const config = iconfonts.IconFontConfig as IconFontConfigType;
      if (!Array.isArray(config?.style)) {
        return null;
      }
      return config.style.map((item) => (
        // ... 原有渲染逻辑
      ));
    } catch (err) {
      console.error('图标配置解析错误:', err);
      return null;
    }
  })()
}
🔗 Analysis chain

建议添加错误处理和类型检查

当前代码缺少对无效图标名称的错误处理和类型检查机制。

建议添加以下改进：

  1. 添加类型定义
  2. 添加错误边界处理
  3. 添加图标名称验证
interface IconConfig {
  name: string;
  icons: Array<{
    name: string;
    'animation-name': string;
    'animation-time': string;
  }>;
}

// 添加类型检查
const iconConfig = (iconfonts.IconFontConfig as any).style as IconConfig[];
if (!Array.isArray(iconConfig)) {
  console.error('Invalid icon configuration');
  return null;
}

Let me gather more information about the IconFontConfig structure and its usage.

Let me check the IconFontConfig usage and error handling patterns in the icon package.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查是否存在类型定义文件
fd -e d.ts -e tsx "icon.*types?" src/packages/icon

# 检查是否有其他文件使用了类似的错误处理模式
rg "IconFontConfig.*style.*map" -A 5

Length of output: 975

Script:

#!/bin/bash
# Check the IconFontConfig definition and structure
rg -g "!*.d.ts" "IconFontConfig.*=|type.*IconFontConfig|interface.*IconFontConfig" -B 2 -A 5

# Check if there are any error handling patterns in icon related files
fd "icon" -e tsx -e ts | xargs rg "try.*catch|Error|throw|console\.(error|warn)"

# Look for any type definitions in icon package
ast-grep --pattern 'interface $_ {
  $$$
}'

Length of output: 92277

Script:

#!/bin/bash
# Check IconFontConfig definition and usage
rg "IconFontConfig" -B 3 -A 3 src/packages/icon/

# Check if there are any error handling patterns in icon demos
rg "try|catch|error|throw" src/packages/icon/demos/

Length of output: 2811

<Cell.Group key={item.name} title={item.name}>
<Cell>
<ul
<View
style={{
display: 'flex',
flexWrap: 'wrap',
Expand All @@ -41,7 +42,7 @@ const Demo7 = () => {
>
{item.icons.map((icon: any) => {
return (
<li
<View
key={icon.name}
onClick={() => {
copyTag(generateAMCopyText(icon))
Expand All @@ -61,14 +62,16 @@ const Demo7 = () => {
justifyContent: 'center',
}}
>
<IconFont
name={icon.name}
className={`nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`}
/>
</li>
{React.createElement(
iconfonts[camelCase(icon.name, { pascalCase: true })],
{
className: `nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`,
}
)}
</View>
)
})}
</ul>
</View>
</Cell>
</Cell.Group>
)
Expand Down
Loading