Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

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

feat: checkbox props 扩展

上级 82730d12
隐藏空白更改
内联 并排
Showing with 556 addition and 61 deletion
src/packages/checkbox/checkbox.scss
浏览文件 @ bce16719
......@@ -5,16 +5,34 @@
&--reverse {
flex-direction: row-reverse;
.nut-checkbox__label {
margin-right: 15px;
margin-right: $checkbox-label-margin-left;
margin-left: 0;
}
}
&__label {
margin-left: 15px;
font-size: 16px;
margin-left: $checkbox-label-margin-left;
font-size: $checkbox-label-font-size;
color: $checkbox-label-color;
&--disabled {
color: $checkbox-label-disable-color;
}
}
&__icon {
color: $primary-color;
font-size: $checkbox-icon-font-size;
transition-duration: 0.3s;
transition-property: color, border-color, background-color;
}
&__icon--unchecked {
color: $checkbox-icon-disable-color;
font-size: $checkbox-icon-font-size;
}
&__icon--indeterminate {
color: $primary-color;
font-size: $checkbox-icon-font-size;
}
&__icon--disable {
color: $help-color;
font-size: $checkbox-icon-font-size;
}
}
src/packages/checkbox/checkbox.tsx
浏览文件 @ bce16719
......@@ -11,6 +11,10 @@ export interface CheckBoxProps {
iconSize: string | number
iconName: string
iconActiveName: string
iconIndeterminateName: string
iconClassPrefix: string
iconFontClassName: string
indeterminate: boolean
label: string
onChange: (state: boolean, label: string) => void
}
......@@ -22,6 +26,9 @@ const defaultProps = {
iconSize: 18,
iconName: 'check-normal',
iconActiveName: 'checked',
iconClassPrefix: 'nut-icon',
iconFontClassName: 'nutui-iconfont',
iconIndeterminateName: 'check-disabled',
onChange: (state, label) => {},
} as CheckBoxProps
export const Checkbox: FunctionComponent<
......@@ -40,41 +47,78 @@ export const Checkbox: FunctionComponent<
checked,
disabled,
onChange,
indeterminate,
iconClassPrefix,
iconFontClassName,
iconIndeterminateName,
getParentVals,
max,
...rest
} = props
} = props as any
const [innerChecked, setInnerChecked] = useState(checked)
const [innerDisabled, setDisabled] = useState(disabled)
const [_indeterminate, setIndeterminate] = useState(indeterminate)
useEffect(() => {
setInnerChecked(checked)
setDisabled(disabled)
}, [disabled, checked])
useEffect(() => {
setIndeterminate(indeterminate)
}, [indeterminate])
const getIconName = () => {
if (!innerChecked) {
return iconName
}
if (_indeterminate) {
return iconIndeterminateName
}
return iconActiveName
}
const renderIcon = () => {
return (
<Icon
name={innerChecked ? iconActiveName : iconName}
name={getIconName()}
size={iconSize}
color={color()}
className={color()}
classPrefix={iconClassPrefix}
fontClassName={iconFontClassName}
/>
)
}
const color = () => {
return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5'
if (innerDisabled) {
return 'nut-checkbox__icon--disable'
}
if (innerChecked) {
if (_indeterminate) {
return 'nut-checkbox__icon--indeterminate'
}
return 'nut-checkbox__icon'
}
return 'nut-checkbox__icon--unchecked'
// return !innerDisabled ? (!innerChecked ? '#d6d6d6' : '#fa2c19') : '#f5f5f5'
}
const renderLabel = () => {
return (
<span className={`${b('label', { disabled: innerDisabled })} `}>
{label || children}
{children || label}
</span>
)
}
const handleClick = () => {
if (disabled) return
onChange && onChange(!innerChecked, label || (children as string))
return setInnerChecked(!innerChecked)
if (!disabled) {
const latest = !innerChecked
if (max !== undefined && latest && getParentVals().length >= max) return
onChange && onChange(latest, label || (children as string))
setInnerChecked(latest)
}
}
return (
......
src/packages/checkbox/demo.scss 0 → 100644
浏览文件 @ bce16719
.demo-check {
margin-right: 10px;
}
.nut-checkboxgroup {
display: flex;
flex-wrap: wrap;
}
.nut-checkbox {
display: flex;
margin-right: 20px;
.nut-checkbox__label {
margin-left: 10px;
}
}
src/packages/checkbox/demo.tsx
浏览文件 @ bce16719
import React, { useRef, useState } from 'react'
import { useTranslate } from '../../sites/assets/locale'
import './demo.scss'
import Toast from '../toast'
import { Cell } from '../cell/cell'
import { Checkbox } from './checkbox'
......@@ -11,6 +12,7 @@ interface T {
'48b50759': string
'7db1a8b2': string
f3480b64: string
f3480b646: string
f4e46058: string
'8a2e2847': string
'70ffa5d8': string
......@@ -18,6 +20,7 @@ interface T {
'9bbfbbc7': string
'45c21a9e': string
'2cd0f3be': string
'2cd0f3be1': string
b2dd27e8: string
'4584d5bf': string
'7df5c456': string
......@@ -33,6 +36,7 @@ const CheckboxDemo = () => {
'48b50759': '复选框',
'7db1a8b2': '禁用状态',
f3480b64: '未选时禁用状态',
f3480b646: '半选状态',
f4e46058: '选中时禁用状态',
'8a2e2847': '自定义尺寸',
'70ffa5d8': '自定义图标',
......@@ -46,12 +50,14 @@ const CheckboxDemo = () => {
'77fc8365': '全选和取消',
'3a5040b6': '全选',
f4d4bae5: '取消全选',
'2cd0f3be1': '反选',
},
'zh-TW': {
'74fc5d8a': '基本用法',
'48b50759': '複選框',
'7db1a8b2': '禁用狀態',
f3480b64: '未選時禁用狀態',
f3480b646: '半选状态',
f4e46058: '選中時禁用狀態',
'8a2e2847': '自定義尺寸',
'70ffa5d8': '自定義圖示',
......@@ -65,13 +71,15 @@ const CheckboxDemo = () => {
'77fc8365': '全選和取消',
'3a5040b6': '全選',
f4d4bae5: '取消全選',
'2cd0f3be1': '反選',
},
'en-US': {
'74fc5d8a': 'Basic Usage',
'48b50759': 'Checkbox',
'7db1a8b2': 'Disabled State',
f3480b64: 'Disabled state when not selected',
f4e46058: 'Disabled state when selected',
f3480b64: 'Disabled state',
f3480b646: 'Semi selective',
f4e46058: 'Disabled state',
'8a2e2847': 'Custom size',
'70ffa5d8': 'Custom Icon',
'87941cd4': 'Click Trigger Event',
......@@ -83,25 +91,24 @@ const CheckboxDemo = () => {
'7df5c456': 'Disabled',
'77fc8365': 'All Select and Cancel',
'3a5040b6': 'Select All',
'2cd0f3be1': 'reverse',
f4d4bae5: 'Cancel All Selection',
},
})
const [checked, setChecked] = useState(true)
const [checkbox1, setCheckbox1] = useState(false)
const [indeterminate, setIndeterminate] = useState(false)
const [checkboxgroup1, setCheckboxgroup1] = useState(['1'])
const [checkboxgroup2] = useState(['1'])
const [checkboxgroup3] = useState(['1'])
const [checkboxgroup4] = useState([])
const checkboxgroup2Ref = useRef(null)
const checkboxgroup3Ref = useRef(null)
return (
<>
<div className="demo">
<h2
onClick={() => {
console.log('click')
setChecked(false)
}}
>
{translated['74fc5d8a']}
</h2>
<h2>{translated['74fc5d8a']}</h2>
<Cell className="nut-cell">
<Checkbox
className="test"
......@@ -117,6 +124,15 @@ const CheckboxDemo = () => {
checked={false}
/>
</Cell>
<h2>{translated.f3480b646}</h2>
<Cell>
<Checkbox label={translated['48b50759']} checked indeterminate />
<Checkbox
label={translated['48b50759']}
checked={false}
indeterminate
/>
</Cell>
<h2>{translated['7db1a8b2']}</h2>
<Cell className="nut-cell">
<Checkbox
......@@ -166,7 +182,7 @@ const CheckboxDemo = () => {
{translated['48b50759']}
</Checkbox>
</Cell>
<h2>CheckboxGroup</h2>
<h2>checkboxGroup</h2>
<Cell>
<CheckboxGroup
checkedValue={checkboxgroup1}
......@@ -197,18 +213,10 @@ const CheckboxDemo = () => {
<h2>{translated['7df5c456']}</h2>
<Cell>
<CheckboxGroup checkedValue={checkboxgroup1} disabled>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
</Checkbox>
<Checkbox label="1">{translated['4584d5bf']}</Checkbox>
<Checkbox label="2">{translated['4584d5bf']}</Checkbox>
<Checkbox label="3">{translated['4584d5bf']}</Checkbox>
<Checkbox label="4">{translated['4584d5bf']}</Checkbox>
</CheckboxGroup>
</Cell>
<h2>{translated['77fc8365']}</h2>
......@@ -220,7 +228,7 @@ const CheckboxDemo = () => {
onChange={(value) => {
Toast.text(
`${
value.length === 2
value.length === 4
? translated['3a5040b6']
: translated.f4d4bae5
}`
......@@ -233,6 +241,12 @@ const CheckboxDemo = () => {
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
</Checkbox>
</CheckboxGroup>
</Cell>
<Cell>
......@@ -241,6 +255,7 @@ const CheckboxDemo = () => {
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleAll(true)
}}
style={{ margin: '0 20px 0 0' }}
>
{translated['3a5040b6']}
</Button>
......@@ -249,9 +264,81 @@ const CheckboxDemo = () => {
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleAll(false)
}}
style={{ margin: '0 20px 0 0' }}
>
{translated['2cd0f3be']}
</Button>
<Button
type="warning"
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleReverse()
}}
>
{translated['2cd0f3be1']}
</Button>
</Cell>
<h2>checkboxGroup使用，限制最大可选数（2个）</h2>
<Cell>
<CheckboxGroup
checkedValue={checkboxgroup3}
max={2}
onChange={(value) => {
Toast.text(value)
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
</Checkbox>
</CheckboxGroup>
</Cell>
<h2>全选/半选/取消</h2>
<Cell>
<Checkbox
checked={checkbox1}
indeterminate={indeterminate}
onChange={(state, label) => {
;(checkboxgroup3Ref.current as any).toggleAll(state)
}}
>
{translated['3a5040b6']}
</Checkbox>
<CheckboxGroup
ref={checkboxgroup3Ref}
checkedValue={checkboxgroup4}
onChange={(value) => {
if (value.length === 4) {
setIndeterminate(false)
setCheckbox1(true)
} else if (value.length && value.length < 4) {
setIndeterminate(true)
setCheckbox1(true)
} else {
setCheckbox1(false)
}
}}
>
<Checkbox checked={false} label="1">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="2">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="3">
{translated['4584d5bf']}
</Checkbox>
<Checkbox checked={false} label="4">
{translated['4584d5bf']}
</Checkbox>
</CheckboxGroup>
</Cell>
</div>
</>
......
src/packages/checkbox/doc.en-US.md
浏览文件 @ bce16719
......@@ -169,6 +169,38 @@ export default CheckBoxDemo;
:::
## CheckBoxGroup Disabled
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checkboxgroup1, setCheckboxgroup1] = useState(['1'])
return (
<CheckboxGroup checkedValue={checkboxgroup1} disabled>
<Checkbox label="1">
apple
</Checkbox>
<Checkbox label="2">
plum
</Checkbox>
<Checkbox label="3">
hawthorn
</Checkbox>
<Checkbox label="4">
pomegranate
</Checkbox>
</CheckboxGroup>
)
}
export default CheckBoxDemo;
```
:::
## CheckboxGroup Select All/Cancel
:::demo
......@@ -186,7 +218,7 @@ const CheckBoxDemo = () => {
ref={checkboxgroup2Ref}
checkedValue={checkboxgroup2}
onChange={(value) => {
Toast.text(`${value.length === 2 ? 'Select All' : 'Cancel'}`)
Toast.text(`${value.length === 4 ? 'Select All' : 'Cancel'}`)
}}
>
<Checkbox checked={false} label="1">
......@@ -195,9 +227,16 @@ const CheckBoxDemo = () => {
<Checkbox checked={false} label="2">
pomegranate
</Checkbox>
<Checkbox label="3">
hawthorn
</Checkbox>
<Checkbox label="4">
pomegranate
</Checkbox>
</CheckboxGroup>
<Button
type="primary"
style={{ margin: '0 20px 0 0' }}
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleAll(true)
}}
......@@ -206,12 +245,21 @@ const CheckBoxDemo = () => {
</Button>
<Button
type="info"
style={{ margin: '0 20px 0 0' }}
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleAll(false)
}}
>
Cancel
</Button>
<Button
type="warning"
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleReverse()
}}
>
Reverse
</Button>
</>)
}
export default CheckBoxDemo;
......@@ -219,6 +267,99 @@ export default CheckBoxDemo;
:::
## use checkboxGroup, Limit the maximum number of options (2)
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checkboxgroup2, setCheckboxgroup2] = useState(['1'])
const checkboxgroup2Ref = useRef(null)
return (<>
<CheckboxGroup
checkedValue={checkboxgroup2}
max={2}
onChange={(value) => {
Toast.text(value)
}}
>
<Checkbox checked={false} label="1">
Combined check box
</Checkbox>
<Checkbox checked={false} label="2">
Combined check box
</Checkbox>
<Checkbox checked={false} label="3">
Combined check box
</Checkbox>
<Checkbox checked={false} label="4">
Combined check box
</Checkbox>
</CheckboxGroup>
</>)
}
export default CheckBoxDemo;
```
:::
## Select all / half / cancel
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checkboxgroup2, setCheckboxgroup2] = useState(['1'])
const checkboxgroup2Ref = useRef(null)
const [checkbox1, setCheckbox1] = useState(false)
const [indeterminate, setIndeterminate] = useState(false)
return (<>
<Checkbox
checked={checkbox1}
indeterminate={indeterminate}
onChange={(state, label) => {
;(checkboxgroup2Ref.current as any).toggleAll(state)
}}
>
selectAll
</Checkbox>
<CheckboxGroup
ref={checkboxgroup2Ref}
checkedValue={checkboxgroup2}
onChange={(value) => {
if (value.length === 4) {
setIndeterminate(false)
setCheckbox1(true)
} else if (value.length && value.length < 4) {
setIndeterminate(true)
setCheckbox1(true)
} else {
setCheckbox1(false)
}
}}
>
<Checkbox checked={false} label="1">
Combined check box
</Checkbox>
<Checkbox checked={false} label="2">
Combined check box
</Checkbox>
<Checkbox checked={false} label="3">
Combined check box
</Checkbox>
<Checkbox checked={false} label="4">
Combined check box
</Checkbox>
</CheckboxGroup>
</>)
}
export default CheckBoxDemo;
```
:::
## Checkbox
| Props | Description | Type | Default |
......@@ -229,6 +370,9 @@ export default CheckBoxDemo;
| 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)，Once selected (it is recommended to modify it together with 'iconName') | String | `'checked'` |
| iconIndeterminateName | [Icon Name](#/en-US/icon)，Semi selected state | String | `'check-disabled'`|
| iconClassPrefix | Custom icon class name prefix, used to use custom icons | String | `nut-icon` |
| iconFontClassName | Basic class name of custom icon font | String | `nutui-iconfont` |
| label | The text content of the check box | String | - |
## CheckboxGroup
......@@ -237,15 +381,23 @@ export default CheckBoxDemo;
|----- | ----- | ----- | ----- |
| checkedValue | The identifier of the currently selected item, corresponding to 'label' | String | -|
| disabled | Whether to disable the selection will be used for all check boxes under it | Boolean | `false`|
| max | Limit the maximum number of options | `undefined|number` | `undefined`|
## Checkbox Event
| Props | Description | Callback parameters|
|----- | ----- | ----- |
| change | Triggers | when the value changes (state, label), 'state' represents the current state, and 'label' represents the currently selected value|
| onChange | Triggers | when the value changes (state, label), 'state' represents the current state, and 'label' represents the currently selected value|
## CheckboxGroup Event
| Props | Description | Callback parameters|
|----- | ----- | ----- |
| change | Triggered when the value changes | label, 'label' returns an array representing the collection of the currently selected items|
\ No newline at end of file
| onChange | Triggered when the value changes | label, 'label' returns an array representing the collection of the currently selected items|
## CheckboxGroup API
| 方法名 | 说明 | 参数 |
|----- | ----- | ----- |
| toggleAll | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection |
| toggleReverse | Reverse selection | - |
\ No newline at end of file
src/packages/checkbox/doc.md
浏览文件 @ bce16719
......@@ -127,7 +127,7 @@ export default CheckBoxDemo;
:::
## CheckBoxGroup使用
## CheckBoxGroup 使用
:::demo
......@@ -165,6 +165,38 @@ export default CheckBoxDemo;
:::
## CheckBoxGroup 禁用
:::demo
```tsx
import React, { useState } from "react";
import { Checkbox, CheckboxGroup } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checkboxgroup1, setCheckboxgroup1] = useState(['1'])
return (
<CheckboxGroup checkedValue={checkboxgroup1} disabled>
<Checkbox label="1">
组合复选框
</Checkbox>
<Checkbox label="2">
组合复选框
</Checkbox>
<Checkbox label="3">
组合复选框
</Checkbox>
<Checkbox label="4">
组合复选框
</Checkbox>
</CheckboxGroup>
)
}
export default CheckBoxDemo;
```
:::
## CheckboxGroup 全选/取消
:::demo
......@@ -182,7 +214,7 @@ const CheckBoxDemo = () => {
ref={checkboxgroup2Ref}
checkedValue={checkboxgroup2}
onChange={(value) => {
Toast.text(`${value.length === 2 ? '全选' : '取消全选'}`)
Toast.text(`${value.length === 4 ? '全选' : '取消全选'}`)
}}
>
<Checkbox checked={false} label="1">
......@@ -191,9 +223,16 @@ const CheckBoxDemo = () => {
<Checkbox checked={false} label="2">
组合复选框
</Checkbox>
<Checkbox checked={false} label="3">
组合复选框
</Checkbox>
<Checkbox checked={false} label="4">
组合复选框
</Checkbox>
</CheckboxGroup>
<Button
type="primary"
style={{ margin: '0 20px 0 0' }}
onClick={() => {
(checkboxgroup2Ref.current as any).toggleAll(true)
}}
......@@ -202,37 +241,142 @@ const CheckBoxDemo = () => {
</Button>
<Button
type="info"
style={{ margin: '0 20px 0 0' }}
onClick={() => {
(checkboxgroup2Ref.current as any).toggleAll(false)
}}
>
取消
</Button>
<Button
type="warning"
onClick={() => {
;(checkboxgroup2Ref.current as any).toggleReverse()
}}
>
反选
</Button>
</>)
}
export default CheckBoxDemo;
```
:::
## checkboxGroup使用，限制最大可选数（2个）
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checkboxgroup2, setCheckboxgroup2] = useState(['1'])
const checkboxgroup2Ref = useRef(null)
return (<>
<CheckboxGroup
checkedValue={checkboxgroup2}
max={2}
onChange={(value) => {
Toast.text(value)
}}
>
<Checkbox checked={false} label="1">
组合复选框
</Checkbox>
<Checkbox checked={false} label="2">
组合复选框
</Checkbox>
<Checkbox checked={false} label="3">
组合复选框
</Checkbox>
<Checkbox checked={false} label="4">
组合复选框
</Checkbox>
</CheckboxGroup>
</>)
}
export default CheckBoxDemo;
```
:::
## 全选/半选/取消
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Checkbox, CheckboxGroup, Button, Toast } from '@nutui/nutui-react';
const CheckBoxDemo = () => {
const [checkboxgroup2, setCheckboxgroup2] = useState(['1'])
const checkboxgroup2Ref = useRef(null)
const [checkbox1, setCheckbox1] = useState(false)
const [indeterminate, setIndeterminate] = useState(false)
return (<>
<Checkbox
checked={checkbox1}
indeterminate={indeterminate}
onChange={(state, label) => {
;(checkboxgroup2Ref.current as any).toggleAll(state)
}}
>
全选
</Checkbox>
<CheckboxGroup
ref={checkboxgroup2Ref}
checkedValue={checkboxgroup2}
onChange={(value) => {
if (value.length === 4) {
setIndeterminate(false)
setCheckbox1(true)
} else if (value.length && value.length < 4) {
setIndeterminate(true)
setCheckbox1(true)
} else {
setCheckbox1(false)
}
}}
>
<Checkbox checked={false} label="1">
组合复选框
</Checkbox>
<Checkbox checked={false} label="2">
组合复选框
</Checkbox>
<Checkbox checked={false} label="3">
组合复选框
</Checkbox>
<Checkbox checked={false} label="4">
组合复选框
</Checkbox>
</CheckboxGroup>
</>)
}
export default CheckBoxDemo;
```
:::
## Checkbox
| 字段 | 说明 | 类型 | 默认值 |
|----- | ----- | ----- | -----|
| checked | 是否处于选中状态 | Boolean | `false`|
| disabled | 是否禁用选择 | Boolean | `false`|
| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right`|
| iconSize | [图标尺寸](#/icon) | String、Number | `18`|
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'`|
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'checked'`|
| label | 复选框的文本内容 | String | -|
| 字段 | 说明 | 类型 | 默认值 |
|-----------------------| ----- | ----- | -----|
| checked | 是否处于选中状态 | Boolean | `false`|
| disabled | 是否禁用选择 | Boolean | `false`|
| textPosition | 文本所在的位置，可选值：`left`,`right` | String | `right`|
| iconSize | [图标尺寸](#/icon) | String、Number | `18`|
| iconName | [图标名称](#/icon)，选中前(建议和`iconActiveName`一起修改) | String | `'check-normal'`|
| iconActiveName | [图标名称](#/icon)，选中后(建议和`iconName`一起修改) | String | `'checked'`|
| iconIndeterminateName | [图标名称](#/icon)，半选状态 | String | `'check-disabled'`|
| iconClassPrefix | 自定义 icon 类名前缀，用于使用自定义图标 | String | `nut-icon` |
| iconFontClassName | 自定义 icon 字体基础类名 | String | `nutui-iconfont` |
| label | 复选框的文本内容 | String | -|
## CheckboxGroup
| 字段 | 说明 | 类型 | 默认值|
|----- | ----- | ----- | ----- |
| checkedValue | 当前选中项的标识符，和 `label` 相对应 | String | -|
| disabled | 是否禁用选择,将用于其下的全部复选框 | Boolean | `false`|
| 字段 | 说明 | 类型 | 默认值|
|--------------| ----- |-------------| -- |
| checkedValue | 当前选中项的标识符，和 `label` 相对应 | String | -|
| disabled | 是否禁用选择,将用于其下的全部复选框 | Boolean | `false`|
| max | 限制最大可选数 | `undefined|number` | `undefined`|
## Checkbox Event
......@@ -244,4 +388,11 @@ export default CheckBoxDemo;
| 字段 | 说明 | 回调参数|
|----- | ----- | ----- |
| onChange | 值变化时触发 | label,`label`返回一个数组，表示当前选中项的集合|
\ No newline at end of file
| onChange | 值变化时触发 | label,`label`返回一个数组，表示当前选中项的集合|
## CheckboxGroup API
| 方法名 | 说明 | 参数 |
|----- | ----- | ----- |
| toggleAll | 全选/取消 | `f`,传 `true`,表示全选，传 `false`,表示取消全选 |
| toggleReverse | 反选 | - |
\ No newline at end of file
src/packages/checkboxgroup/checkboxgroup.tsx
浏览文件 @ bce16719
......@@ -4,12 +4,14 @@ import bem from '@/utils/bem'
export interface CheckBoxGroupProps {
disabled: boolean
checkedValue: string[]
max: number | undefined
onChange: (value: string[]) => void
}
const defaultProps = {
disabled: false,
checkedValue: [],
max: undefined,
onChange: (value: string[]) => {},
} as CheckBoxGroupProps
export const CheckboxGroup = React.forwardRef(
......@@ -20,25 +22,36 @@ export const CheckboxGroup = React.forwardRef(
) => {
const { children } = { ...defaultProps, ...props }
const b = bem('checkboxgroup')
const { className, disabled, onChange, checkedValue, ...rest } = props
const { className, disabled, onChange, checkedValue, max, ...rest } = props
const [innerDisabled, setInnerDisabled] = useState(disabled)
const [innerValue, setInnerValue] = useState(checkedValue)
useImperativeHandle(ref, () => ({
useImperativeHandle<any, any>(ref, () => ({
toggleAll(state: boolean) {
console.log(state)
if (state === false) {
setInnerValue([])
} else {
const childrenLabel: string[] = []
React.Children.map(children, (child) => {
const childProps = (child as any).props
console.log(child)
childrenLabel.push(childProps.label || (child as any).children)
})
setInnerValue(childrenLabel)
}
},
toggleReverse() {
const childrenLabel: string[] = []
React.Children.map(children, (child) => {
const childProps = (child as any).props
childrenLabel.push(childProps.label || (child as any).children)
})
const reverse: string[] = childrenLabel.filter(
(c) => innerValue?.findIndex((v) => v === c) === -1
)
setInnerValue(reverse)
},
}))
useEffect(() => {
......@@ -47,6 +60,7 @@ export const CheckboxGroup = React.forwardRef(
}, [disabled, checkedValue])
function handleChildChange(state: boolean, label: string) {
if (max !== undefined && innerValue && innerValue.length > max) return
if (innerValue) {
let clippedValue = []
if (state) {
......@@ -65,6 +79,10 @@ export const CheckboxGroup = React.forwardRef(
return innerValue?.indexOf(child.props.label || child.children) > -1
}
function getParentVals() {
return innerValue
}
function cloneChildren() {
return React.Children.map(children, (child: any) => {
const childChecked = validateChildChecked(child)
......@@ -75,6 +93,8 @@ export const CheckboxGroup = React.forwardRef(
disabled: innerDisabled,
checked: childChecked,
onChange: handleChildChange,
getParentVals,
max,
})
})
}
......
src/packages/icon/icon.tsx
浏览文件 @ bce16719
......@@ -8,13 +8,15 @@ interface IconProps {
color: string
tag: keyof ReactHTML
click: (e: MouseEvent) => void
fontClassName: string
className: string
}
const defaultProps = {
name: '',
size: '',
classPrefix: 'nutui-iconfont',
classPrefix: 'nutui-icon',
fontClassName: 'nutui-iconfont',
color: '',
tag: 'i',
click: (e: MouseEvent) => {},
......@@ -36,6 +38,7 @@ export const Icon: FunctionComponent<
tag,
children,
className,
fontClassName,
style,
click,
...rest
......@@ -61,7 +64,9 @@ export const Icon: FunctionComponent<
{
className: isImage
? `${className || ''} ${b('img')}`
: `${className || ''} ${b(null, [classPrefix])} nut-icon-${name} `,
: `${className || ''} ${fontClassName} ${b(null, [
classPrefix,
])} nut-icon-${name} `,
style: {
color,
fontSize: pxCheck(size),
......
src/styles/variables.scss
浏览文件 @ bce16719
......@@ -315,8 +315,12 @@ $steps-process-icon-text-color: $primary-color !default;
$dialog-width: 296px;
// checkbox
$checkbox-label-color: #1d1e1e;
$checkbox-label-disable-color: #999;
$checkbox-label-color: #1d1e1e !default;
$checkbox-label-disable-color: #999 !default;
$checkbox-icon-disable-color: #d6d6d6 !default;
$checkbox-label-margin-left: 15px !default;
$checkbox-label-font-size: 14px !default;
$checkbox-icon-font-size: 18px !default;
//radio
$radio-label-font-color: #1d1e1e !default;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或