Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 1d7b24c9 编写于 作者: O oasis-cloud
浏览文件
操作

chore(release): icon 优化

上级 6f613e3c
隐藏空白更改
内联 并排
Showing with 154 addition and 108 deletion
src/packages/audio/audio.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -6,13 +6,12 @@ import React, {
} from 'react'
import { createInnerAudioContext, InnerAudioContext } from '@tarojs/taro'
import Icon from '@/packages/icon/index.taro'
import { Service } from '@nutui/icons-react'
import Range from '@/packages/range/index.taro'
import Button from '@/packages/button/index.taro'
import bem from '@/utils/bem'
import { useConfig } from '@/packages/configprovider/configprovider.taro'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import { Service } from '@nutui/icons-react'
const b = bem('audio')
const warn = console.warn
......
src/packages/audio/audio.tsx
浏览文件 @ 1d7b24c9
......@@ -69,8 +69,6 @@ export const Audio: FunctionComponent<
onMute,
onCanPlay,
children,
iconClassPrefix,
iconFontClassName,
...rest
} = {
...defaultProps,
......
src/packages/avatar/avatar.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -164,7 +164,10 @@ export const Avatar: FunctionComponent<
<Image className="avatar-img" src={url} onError={errorEvent} />
)}
{React.isValidElement(icon)
? React.cloneElement<any>(icon, { className: 'icon' })
? React.cloneElement<any>(icon, {
...icon.props,
className: `${icon.props.className || ''} icon`,
})
: null}
{children && <span className="text">{children}</span>}
</>
......
src/packages/avatar/avatar.tsx
浏览文件 @ 1d7b24c9
......@@ -170,7 +170,12 @@ export const Avatar: FunctionComponent<
onError={errorEvent}
/>
)}
{React.isValidElement(icon) ? icon : null}
{React.isValidElement(icon)
? React.cloneElement<any>(icon, {
...icon.props,
className: `${icon.props.className || ''} icon`,
})
: null}
{children && <span className="text">{children}</span>}
</>
)}
......
src/packages/checkbox/checkbox.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -93,20 +93,20 @@ export const Checkbox: FunctionComponent<
const renderIcon = () => {
if (!innerChecked) {
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {})
React.cloneElement<any>(iconName)
) : (
<CheckNormal size={iconSize} className={color()} />
)
}
if (_indeterminate) {
return React.isValidElement(iconIndeterminateName) ? (
React.cloneElement<any>(iconIndeterminateName, {})
React.cloneElement<any>(iconIndeterminateName)
) : (
<CheckDisabled size={iconSize} className={color()} />
)
}
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {})
React.cloneElement<any>(iconActiveName)
) : (
<Checked size={iconSize} className={color()} />
)
......
src/packages/checkbox/checkbox.tsx
浏览文件 @ 1d7b24c9
......@@ -93,20 +93,20 @@ export const Checkbox: FunctionComponent<
const renderIcon = () => {
if (!innerChecked) {
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {})
React.cloneElement<any>(iconName)
) : (
<CheckNormal width={iconSize} height={iconSize} className={color()} />
)
}
if (_indeterminate) {
return React.isValidElement(iconIndeterminateName) ? (
React.cloneElement<any>(iconIndeterminateName, {})
React.cloneElement<any>(iconIndeterminateName)
) : (
<CheckDisabled width={iconSize} height={iconSize} className={color()} />
)
}
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {})
React.cloneElement<any>(iconActiveName)
) : (
<Checked width={iconSize} height={iconSize} className={color()} />
)
......
src/packages/popup/demo.taro.tsx
浏览文件 @ 1d7b24c9
import React, { useState } from 'react'
import { CircleClose, Heart } from '@nutui/icons-react-taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import '@/packages/popup/demo.scss'
import { Cell, Popup } from '@/packages/nutui.react.taro'
......@@ -181,11 +182,10 @@ const PopupDemo = () => {
}}
/>
<Popup
closeable
closeable={<CircleClose size="12px" />}
visible={showIcon}
style={{ height: '20%' }}
position="bottom"
closeIconSize="12px"
onClose={() => {
setShowIcon(false)
}}
......@@ -215,11 +215,9 @@ const PopupDemo = () => {
}}
/>
<Popup
closeable
closeIconSize="15px"
closeable={<Heart size="15px" />}
visible={showIconDefine}
style={{ height: '20%' }}
closeIcon="heart"
position="bottom"
onClose={() => {
setShowIconDefine(false)
......
src/packages/popup/demo.tsx
浏览文件 @ 1d7b24c9
import React, { useState } from 'react'
import { CircleClose, Heart } from '@nutui/icons-react'
import { useTranslate } from '../../sites/assets/locale'
import Cell from '@/packages/cell'
import Popup from '@/packages/popup'
......@@ -179,11 +180,10 @@ const PopupDemo = () => {
}}
/>
<Popup
closeable
closeable={<CircleClose width="12px" height="12px" />}
visible={showIcon}
style={{ height: '20%' }}
position="bottom"
closeIcon="12px"
onClose={() => {
setShowIcon(false)
}}
......@@ -213,11 +213,9 @@ const PopupDemo = () => {
}}
/>
<Popup
closeable
closeIconSize="15px"
closeable={<Heart width="15px" height="15px" />}
visible={showIconDefine}
style={{ height: '20%' }}
closeIcon="heart"
position="bottom"
onClose={() => {
setShowIconDefine(false)
......
src/packages/popup/doc.en-US.md
浏览文件 @ 1d7b24c9
......@@ -73,6 +73,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
import { Heart } from '@nutui/icons-react';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
......@@ -86,7 +87,7 @@ const App = () => {
<Cell title="custom icon" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } } />
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } } />
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } } />
<Popup visible={ showIconDefine } style={{ height: '20%' }} closeable={<Heart />} position="bottom" onClose={ () => { setShowIconDefine(false) } } />
</>
);
};
......
src/packages/popup/doc.md
浏览文件 @ 1d7b24c9
......@@ -73,6 +73,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
import { Heart } from '@nutui/icons-react';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
......@@ -86,7 +87,7 @@ const App = () => {
<Cell title="自定义图标" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } } />
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } } />
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } } />
<Popup visible={ showIconDefine } style={{ height: '20%' }} closeable={<Heart />} position="bottom" onClose={ () => { setShowIconDefine(false) } } />
</>
);
};
......
src/packages/popup/doc.taro.md
浏览文件 @ 1d7b24c9
......@@ -72,6 +72,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react-taro';
import { Heart } from '@nutui/icons-react-taro';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
......@@ -85,7 +86,7 @@ const App = () => {
<Cell title="自定义图标" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } } />
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } } />
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } } />
<Popup visible={ showIconDefine } style={{ height: '20%' }} closeable={<Heart />} position="bottom" onClose={ () => { setShowIconDefine(false) } } />
</>
);
};
......
src/packages/popup/doc.zh-TW.md
浏览文件 @ 1d7b24c9
......@@ -73,6 +73,7 @@ export default App;
```tsx
import React, { useState } from "react";
import { Popup, Cell } from '@nutui/nutui-react';
import { Heart } from '@nutui/icons-react';
const App = () => {
const [showIcon, setShowIcon] = useState(false);
......@@ -86,7 +87,7 @@ const App = () => {
<Cell title="自定義圖標" isLink onClick={() => { setShowIconDefine(true) }}/>
<Popup closeable visible={ showIcon } style={{ height: '20%' }} position="bottom" onClose={ () => { setShowIcon(false) } } />
<Popup closeable visible={ showIconPosition } style={{ height: '20%' }} closeIconPosition="top-left" position="bottom" onClose={ () => { setShowIconPosition(false) } } />
<Popup closeable visible={ showIconDefine } style={{ height: '20%' }} closeIcon="heart" position="bottom" onClose={ () => { setShowIconDefine(false) } } />
<Popup visible={ showIconDefine } style={{ height: '20%' }} closeable={<Heart />} position="bottom" onClose={ () => { setShowIconDefine(false) } } />
</>
);
};
......
src/packages/popup/popup.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -28,9 +28,8 @@ export interface PopupProps extends OverlayProps, BasicComponent {
transition: string
style: React.CSSProperties
popClass: string
closeable: boolean
closeable: boolean | React.ReactNode
closeIconPosition: string
closeIcon: React.ReactNode
closeIconSize?: string | number
destroyOnClose: boolean
teleport: Teleport
......@@ -52,7 +51,6 @@ const defaultProps = {
popClass: '',
closeable: false,
closeIconPosition: 'top-right',
closeIcon: '',
closeIconSize: '12px',
destroyOnClose: true,
teleport: null,
......@@ -84,7 +82,6 @@ export const Popup: FunctionComponent<
duration,
closeable,
closeIconPosition,
closeIcon,
style,
transition,
round,
......@@ -210,13 +207,14 @@ export const Popup: FunctionComponent<
return node
}
const renderIcon = () => {
if (React.isValidElement(closeable)) {
return closeable
}
if (closeable === true) {
if (closeable) {
return (
<div className={closeClasses} onClick={onHandleClickCloseIcon}>
<Close size={closeIconSize} />
{React.isValidElement(closeable) ? (
closeable
) : (
<Close width={closeIconSize} height={closeIconSize} />
)}
</div>
)
}
......
src/packages/popup/popup.tsx
浏览文件 @ 1d7b24c9
......@@ -24,9 +24,8 @@ export interface PopupProps extends OverlayProps, BasicComponent {
transition: string
style: React.CSSProperties
popClass: string
closeable: boolean
closeable: boolean | React.ReactNode
closeIconPosition: string
closeIcon: React.ReactNode
closeIconSize?: string | number
destroyOnClose: boolean
teleport: Teleport
......@@ -49,7 +48,6 @@ const defaultProps = {
popClass: '',
closeable: false,
closeIconPosition: 'top-right',
closeIcon: '',
closeIconSize: '12px',
destroyOnClose: true,
teleport: null,
......@@ -83,7 +81,6 @@ export const Popup: FunctionComponent<
duration,
closeable,
closeIconPosition,
closeIcon,
style,
transition,
round,
......@@ -207,13 +204,14 @@ export const Popup: FunctionComponent<
return node
}
const renderIcon = () => {
if (React.isValidElement(closeable)) {
return closeable
}
if (closeable === true) {
if (closeable) {
return (
<div className={closeClasses} onClick={onHandleClickCloseIcon}>
<Close width={closeIconSize} height={closeIconSize} />
{React.isValidElement(closeable) ? (
closeable
) : (
<Close width={closeIconSize} height={closeIconSize} />
)}
</div>
)
}
......
src/packages/radio/__test__/radio.spec.tsx
浏览文件 @ 1d7b24c9
......@@ -29,7 +29,7 @@ describe('radio', () => {
test('radio custom icon', () => {
const { container } = render(
<Radio iconName="checklist" iconActiveName="checklist">
<Radio icon="checklist" iconActive="checklist">
自定义图标
</Radio>
)
......
src/packages/radio/demo.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -183,10 +183,10 @@ const RadioDemo = () => {
<CellGroup>
<Cell>
<Radio.RadioGroup value="1">
<Radio value="1" iconName="checklist" iconActiveName="checklist">
<Radio value="1" icon="checklist" iconActive="checklist">
{translated['70ffa5d8']}
</Radio>
<Radio value="2" iconName="checklist" iconActiveName="checklist">
<Radio value="2" icon="checklist" iconActive="checklist">
<div>{translated['70ffa5d8']}</div>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
{translated['70ffa5d8']}
......
src/packages/radio/demo.tsx
浏览文件 @ 1d7b24c9
......@@ -182,10 +182,10 @@ const RadioDemo = () => {
<CellGroup>
<Cell>
<Radio.RadioGroup value="1">
<Radio value="1" iconName="checklist" iconActiveName="checklist">
<Radio value="1" icon="checklist" iconActive="checklist">
{translated['70ffa5d8']}
</Radio>
<Radio value="2" iconName="checklist" iconActiveName="checklist">
<Radio value="2" icon="checklist" iconActive="checklist">
<div>{translated['70ffa5d8']}</div>
<div style={{ fontSize: '12px', color: '#8c8c8c' }}>
{translated['70ffa5d8']}
......
src/packages/radio/doc.en-US.md
浏览文件 @ 1d7b24c9
......@@ -105,7 +105,7 @@ export default RadioGroupLast;
## Customize the icon
It is recommended that 'iconName' and 'iconActiveName' be modified together
It is recommended that 'icon' and 'iconActive' be modified together
:::demo
......@@ -118,10 +118,10 @@ const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>Custom icons</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>Custom icons</Radio>
<Radio value="1" icon={<CheckList/>}
iconActive={<CheckList/>}>Custom icons</Radio>
<Radio value="2" icon={<CheckList/>}
iconActive={<CheckList/>}>Custom icons</Radio>
</Radio.RadioGroup>
</>
}
......@@ -199,8 +199,8 @@ export default RadioGroupOptions;
|----------------| ----- | ----- |------------------|
| disabled | Disable the selection | `boolean` | `false` |
| iconSize | [Icon size] (#/icon) | `string`、`number` | `18` |
| iconName | [Icon Name] (#/icon), before selecting (it is recommended to modify it with 'iconActiveName') | `string` | `'check-normal'` |
| iconActiveName | [Icon Name] (#/icon), selected (it is recommended to modify it with 'iconName') | `string` | `'check-checked'` |
| icon | [Icon Name] (#/icon), before selecting (it is recommended to modify it with 'iconActive') | `string` | `'check-normal'` |
| iconActive | [Icon Name] (#/icon), selected (it is recommended to modify it with 'icon') | `string` | `'check-checked'` |
| value | Value is carrying identification, used in Group mode | `string`、`number`、`boolean` | - |
| shape | Shape, with optional values of button, round, | `string` | round |
......
src/packages/radio/doc.md
浏览文件 @ 1d7b24c9
......@@ -104,7 +104,7 @@ export default RadioGroupLast;
## 自定义图标
建议 `iconName` `iconActiveName` 一起修改
建议 `icon` `iconActive` 一起修改
:::demo
......@@ -117,10 +117,10 @@ const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="1" icon={<CheckList/>}
iconActive={<CheckList/>}>自定义图标</Radio>
<Radio value="2" icon={<CheckList/>}
iconActive={<CheckList/>}>自定义图标</Radio>
</Radio.RadioGroup>
</>
}
......@@ -198,8 +198,8 @@ export default RadioGroupOptions;
|------------------|--------------------------------------------------------------|-----------------------|------------------|
| disabled | 是否禁用选择 | `boolean` | `false` |
| iconSize | [图标尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | `ReactNode` | `'CheckChecked'` |
| icon | [图标名称](#/icon)，选中前(建议和`iconActive`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActive | [图标名称](#/icon)，选中后(建议和`icon`一起修改) | `ReactNode` | `'CheckChecked'` |
| value | 携带的标识值，用于 Group 模式 | `string`、`number`、`boolean` | - |
| shape | 形状，可选值为 button、round | `string` | round |
......
src/packages/radio/doc.taro.md
浏览文件 @ 1d7b24c9
......@@ -103,7 +103,7 @@ export default RadioGroupLast;
## 自定义图标
建议 `iconName` `iconActiveName` 一起修改
建议 `icon` `iconActive` 一起修改
:::demo
......@@ -116,10 +116,10 @@ const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="1" icon={<CheckList/>}
iconActive={<CheckList/>}>自定义图标</Radio>
<Radio value="2" icon={<CheckList/>}
iconActive={<CheckList/>}>自定义图标</Radio>
</Radio.RadioGroup>
</>
}
......@@ -197,8 +197,8 @@ export default RadioGroupOptions;
|------------------|--------------------------------------------------------------|-----------------------|------------------|
| disabled | 是否禁用选择 | `boolean` | `false` |
| iconSize | [图标尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | `ReactNode` | `'CheckChecked'` |
| icon | [图标名称](#/icon)，选中前(建议和`iconActive`一起修改) | `ReactNode` | `'CheckNormal'` |
| iconActive | [图标名称](#/icon)，选中后(建议和`icon`一起修改) | `ReactNode` | `'CheckChecked'` |
| value | 携带的标识值，用于 Group 模式 | `string`、`number`、`boolean` | - |
| shape | 形状，可选值为 button、round | `string` | round |
......
src/packages/radio/doc.zh-TW.md
浏览文件 @ 1d7b24c9
......@@ -104,7 +104,7 @@ export default RadioGroupLast;
## 自訂圖示
建議 『iconName』 'iconActiveName' 一起修改
建議 『icon』 'iconActive' 一起修改
:::demo
......@@ -117,10 +117,10 @@ const RadioGroupLast = () => {
const [radioVal] = useState('1')
return <>
<Radio.RadioGroup value={radioVal}>
<Radio value="1" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="2" iconName={<CheckList/>}
iconActiveName={<CheckList/>}>自定义图标</Radio>
<Radio value="1" icon={<CheckList/>}
iconActive={<CheckList/>}>自定义图标</Radio>
<Radio value="2" icon={<CheckList/>}
iconActive={<CheckList/>}>自定义图标</Radio>
</Radio.RadioGroup>
</>
}
......@@ -198,8 +198,8 @@ export default RadioGroupOptions;
|------------------|--------------------------------------------------------------|-------------------------|-------------------|
| disabled | 是否禁用選擇 | `boolean` | `false` |
| iconSize | [圖示尺寸](#/icon) | `string`、`number` | `18` |
| iconName | [圖示名稱](#/icon)，選中前（建議和'iconActiveName'一起修改） | `string` | `'check-normal'` |
| iconActiveName | [圖示名稱](#/icon)，選取後（建議和'iconName'一起修改） | `string` | `'check-checked'` |
| icon | [圖示名稱](#/icon)，選中前（建議和'iconActive'一起修改） | `string` | `'check-normal'` |
| iconActive | [圖示名稱](#/icon)，選取後（建議和'icon'一起修改） | `string` | `'check-checked'` |
| value | 攜帶的標識值，用於 Group 模式 | `string`、`number`、`boolean` | - |
| shape | 形狀，可選值為 button、round | `string` | round |
......
src/packages/radio/radio.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -23,8 +23,8 @@ export interface RadioProps extends BasicComponent {
shape: Shape
textPosition: Position
value: string | number | boolean
iconName: React.ReactNode
iconActiveName: React.ReactNode
icon: React.ReactNode
iconActive: React.ReactNode
iconSize: string | number
onChange: MouseEventHandler<HTMLDivElement>
}
......@@ -38,8 +38,8 @@ const defaultProps = {
shape: 'round',
value: '',
textPosition: 'right',
iconName: 'check-normal',
iconActiveName: 'check-checked',
icon: null,
iconActive: null,
iconSize: 18,
onChange: (e) => {},
} as RadioProps
......@@ -57,8 +57,8 @@ export const Radio: FunctionComponent<
shape,
textPosition,
value,
iconName,
iconActiveName,
icon,
iconActive,
iconSize,
onChange,
iconClassPrefix,
......@@ -110,11 +110,12 @@ export const Radio: FunctionComponent<
return 'nut-radio__icon--unchecked'
}
const renderIcon = () => {
const { iconName, iconSize, iconActiveName } = props
const { icon, iconSize, iconActive } = props
if (!disabledStatement && checkedStatement) {
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {
return React.isValidElement(iconActive) ? (
React.cloneElement<any>(iconActive, {
...iconActive.props,
size: iconSize,
className: color(),
})
......@@ -122,8 +123,9 @@ export const Radio: FunctionComponent<
<CheckChecked size={iconSize} className={color()} />
)
}
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {
return React.isValidElement(icon) ? (
React.cloneElement<any>(icon, {
...icon.props,
size: iconSize,
className: color(),
})
......
src/packages/radio/radio.tsx
浏览文件 @ 1d7b24c9
......@@ -23,8 +23,8 @@ export interface RadioProps extends BasicComponent {
shape: Shape
textPosition: Position
value: string | number | boolean
iconName: React.ReactNode
iconActiveName: React.ReactNode
icon: React.ReactNode
iconActive: React.ReactNode
iconSize: string | number
onChange: MouseEventHandler<HTMLDivElement>
}
......@@ -38,8 +38,8 @@ const defaultProps = {
shape: 'round',
value: '',
textPosition: 'right',
iconName: 'check-normal',
iconActiveName: 'check-checked',
icon: 'check-normal',
iconActive: 'check-checked',
iconSize: 18,
onChange: (e) => {},
} as RadioProps
......@@ -57,8 +57,8 @@ export const Radio: FunctionComponent<
shape,
textPosition,
value,
iconName,
iconActiveName,
icon,
iconActive,
iconSize,
onChange,
iconClassPrefix,
......@@ -110,11 +110,12 @@ export const Radio: FunctionComponent<
return 'nut-radio__icon--unchecked'
}
const renderIcon = () => {
const { iconName, iconSize, iconActiveName } = props
const { icon, iconSize, iconActive } = props
if (!disabledStatement && checkedStatement) {
return React.isValidElement(iconActiveName) ? (
React.cloneElement<any>(iconActiveName, {
return React.isValidElement(iconActive) ? (
React.cloneElement<any>(iconActive, {
...iconActive.props,
size: iconSize,
className: color(),
})
......@@ -122,8 +123,9 @@ export const Radio: FunctionComponent<
<CheckChecked width={iconSize} height={iconSize} className={color()} />
)
}
return React.isValidElement(iconName) ? (
React.cloneElement<any>(iconName, {
return React.isValidElement(icon) ? (
React.cloneElement<any>(icon, {
...icon.props,
size: iconSize,
className: color(),
})
......
src/packages/rate/__test__/rate.spec.tsx
浏览文件 @ 1d7b24c9
......@@ -36,7 +36,6 @@ test('spacing & count & modelValue & checkedIcon & uncheckedIcon & readonly & ic
modelValue={state.modelValue}
iconSize={state.iconSize}
checkedIcon={state.checkedIcon}
uncheckedIcon={state.uncheckedIcon}
onChange={handleChange}
/>
</>
......
src/packages/rate/demo.tsx
浏览文件 @ 1d7b24c9
import React from 'react'
import { Heart, HeartFill1 } from '@nutui/icons-react'
import { Rate } from './rate'
import Cell from '@/packages/cell'
import { useTranslate } from '@/sites/assets/locale'
......@@ -60,11 +61,7 @@ const RateDemo = () => {
<h2>{translated.customIcon}</h2>
<Cell>
<Rate
checkedIcon="heart-fill1"
uncheckedIcon="heart"
modelValue="3"
/>
<Rate checkedIcon={<HeartFill1 />} modelValue="3" />
</Cell>
<h2>{translated.customQuantity}</h2>
......
src/packages/step/step.tsx
浏览文件 @ 1d7b24c9
......@@ -81,7 +81,11 @@ export const Step: FunctionComponent<
<div className="nut-step-line" />
<div className={renderIconClass()}>
{React.isValidElement(icon)
? React.cloneElement<any>(icon, { size, color: iconColor })
? React.cloneElement<any>(icon, {
...icon.props,
size,
color: iconColor,
})
: !dot && <span className="nut-step-inner">{activeIndex}</span>}
</div>
</div>
......
src/packages/tag/demo.tsx
浏览文件 @ 1d7b24c9
import React from 'react'
import { CircleClose } from '@nutui/icons-react'
import { Tag } from './tag'
import Cell from '@/packages/cell'
import CellGroup from '@/packages/cellgroup'
......@@ -91,6 +92,19 @@ const TagDemo = () => {
</Tag>
}
/>
<Cell
title={translated.closeable}
linkSlot={
<Tag
closeable={<CircleClose />}
iconSize={12}
onClose={() => alert('Tag closed')}
type="primary"
>
{translated.tag}
</Tag>
}
/>
</CellGroup>
<h2>{translated.customColor}</h2>
......
src/packages/tag/tag.scss
浏览文件 @ 1d7b24c9
......@@ -65,4 +65,9 @@
margin-left: 4px;
cursor: pointer;
}
&-custom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
}
src/packages/tag/tag.taro.tsx
浏览文件 @ 1d7b24c9
......@@ -123,7 +123,18 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
>
{children && <span className="nut-tag-text">{children}</span>}
{React.isValidElement(closeable) ? (
React.cloneElement<any>(closeable, { size: iconSize })
<i
className="nut-tag-custom-icon"
onClick={(e) => {
setIsTagShow(false)
props.onClose && props.onClose(e)
}}
>
{React.cloneElement<any>(closeable, {
...closeable.props,
size: iconSize,
})}
</i>
) : (
<Close
size={iconSize}
......
src/packages/tag/tag.tsx
浏览文件 @ 1d7b24c9
......@@ -123,7 +123,18 @@ export const Tag: FunctionComponent<Partial<TagProps>> = (props) => {
>
{children && <span className="nut-tag-text">{children}</span>}
{React.isValidElement(closeable) ? (
closeable
<i
className="nut-tag-custom-icon"
onClick={(e) => {
setIsTagShow(false)
props.onClose && props.onClose(e)
}}
>
{React.cloneElement<any>(closeable, {
...closeable.props,
size: iconSize,
})}
</i>
) : (
<Close
width={iconSize}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或