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

feat(grid): update icon #2710

Merged
merged 1 commit into from
Nov 8, 2024
Merged

feat(grid): update icon #2710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>
import { Image } from '@nutui/icons-react-taro'

const Demo1 = () => {
return (
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo10.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Image } from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>

const Demo10 = () => {
const onClick = (item: any, index: number) => {
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>
import { Image } from '@nutui/icons-react-taro'

const Demo2 = () => {
return (
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>
import { Image } from '@nutui/icons-react-taro'

const Demo3 = () => {
return (
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>
import { Image } from '@nutui/icons-react-taro'

const Demo4 = () => {
return (
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'
import { Image } from '@nutui/icons-react-taro'
import pxTransform from '@/utils/px-transform'

const Image = () => <Text>T</Text>

const Demo5 = () => {
const style = { height: pxTransform(100) }
return (
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>
import { Image } from '@nutui/icons-react-taro'

const Demo6 = () => {
return (
Expand Down
5 changes: 1 addition & 4 deletions src/packages/grid/demos/taro/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'

const Image = () => <Text>T</Text>
import { Image } from '@nutui/icons-react-taro'

const Demo7 = () => {
return (
Expand Down
22 changes: 7 additions & 15 deletions src/packages/grid/demos/taro/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,27 @@
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
// import { Image } from '@nutui/icons-react-taro'
import { Text } from '@tarojs/components'
import pxTransform from '@/utils/px-transform'
import { Image } from '@nutui/icons-react-taro'

const Demo8 = () => {
return (
<Grid columns="3">
<Grid.Item text="文字">
{/* <Image size={16} /> */}
<Text style={{ fontSize: pxTransform(16) }}>T</Text>
<Image size={16} />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image color="red" /> */}
<Text style={{ color: 'red' }}>T</Text>
<Image color="red" />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image size={30} color="#478EF2" /> */}
<Text style={{ color: '#478EF2', fontSize: pxTransform(30) }}>T</Text>
<Image size={30} color="#478EF2" />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image size={16} /> */}
<Text style={{ fontSize: pxTransform(16) }}>T</Text>
<Image size={16} />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image color="red" /> */}
<Text style={{ color: 'red' }}>T</Text>
<Image color="red" />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image size={30} color="#478EF2" /> */}
<Text style={{ color: '#478EF2', fontSize: pxTransform(30) }}>T</Text>
<Image size={30} color="#478EF2" />
Comment on lines +9 to +24
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

建议优化 Image 组件的使用方式

目前的实现存在以下问题：

  1. 部分 Image 组件缺少 size 属性
  2. size 值不一致（16 和 30）
  3. 缺少无障碍支持的 alt 属性
  4. 代码结构重复，可以进行优化

建议按照以下方式重构：

import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
import { Image } from '@nutui/icons-react-taro'

+const GRID_ITEMS = [
+  { size: 16, color: undefined },
+  { color: 'red' },
+  { size: 30, color: '#478EF2' },
+  { size: 16, color: undefined },
+  { color: 'red' },
+  { size: 30, color: '#478EF2' },
+]

const Demo8 = () => {
  return (
    <Grid columns="3">
-      <Grid.Item text="文字">
-        <Image size={16} />
-      </Grid.Item>
-      <Grid.Item text="文字">
-        <Image color="red" />
-      </Grid.Item>
-      <Grid.Item text="文字">
-        <Image size={30} color="#478EF2" />
-      </Grid.Item>
-      <Grid.Item text="文字">
-        <Image size={16} />
-      </Grid.Item>
-      <Grid.Item text="文字">
-        <Image color="red" />
-      </Grid.Item>
-      <Grid.Item text="文字">
-        <Image size={30} color="#478EF2" />
-      </Grid.Item>
+      {GRID_ITEMS.map((item, index) => (
+        <Grid.Item text="文字" key={index}>
+          <Image
+            size={item.size || 20}
+            color={item.color}
+            alt={`图标 ${index + 1}`}
+          />
+        </Grid.Item>
+      ))}
    </Grid>
  )
}

优化说明：

  1. 使用数组配置统一管理图标属性
  2. 为未设置 size 的图标提供默认值 20
  3. 添加 alt 属性支持无障碍访问
  4. 使用 map 减少代码重复
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Image size={16} />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image color="red" /> */}
<Text style={{ color: 'red' }}>T</Text>
<Image color="red" />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image size={30} color="#478EF2" /> */}
<Text style={{ color: '#478EF2', fontSize: pxTransform(30) }}>T</Text>
<Image size={30} color="#478EF2" />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image size={16} /> */}
<Text style={{ fontSize: pxTransform(16) }}>T</Text>
<Image size={16} />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image color="red" /> */}
<Text style={{ color: 'red' }}>T</Text>
<Image color="red" />
</Grid.Item>
<Grid.Item text="文字">
{/* <Image size={30} color="#478EF2" /> */}
<Text style={{ color: '#478EF2', fontSize: pxTransform(30) }}>T</Text>
<Image size={30} color="#478EF2" />
import React from 'react'
import { Grid } from '@nutui/nutui-react-taro'
import { Image } from '@nutui/icons-react-taro'
const GRID_ITEMS = [
{ size: 16, color: undefined },
{ color: 'red' },
{ size: 30, color: '#478EF2' },
{ size: 16, color: undefined },
{ color: 'red' },
{ size: 30, color: '#478EF2' },
]
const Demo8 = () => {
return (
<Grid columns="3">
{GRID_ITEMS.map((item, index) => (
<Grid.Item text="文字" key={index}>
<Image
size={item.size || 20}
color={item.color}
alt={`图标 ${index + 1}`}
/>
</Grid.Item>
))}
</Grid>
)
}

</Grid.Item>
</Grid>
)
Expand Down
Loading