Skip to content

Commit

Permalink
fix(Checkbox): listen for click events on the correct element (#3666)
Browse files Browse the repository at this point in the history 
* fix(Checkbox): listen for click events on the correct element

* fix: `CheckboxProps` extends HTMLAttributes<HTMLDivElement>

* fix: rename `renderMenuItemCheckbox` to `renderCheckbox`

* fix: remove useless `::after`

* fix: rename .rs-checkbox-wrapper to .rs-checkbox-control

* docs(Checkbox): update examples
  • Loading branch information
@simonguo
simonguo committed Mar 14, 2024
1 parent 6277897 commit cd43df5
Show file tree
Hide file tree
Showing 22 changed files with 385 additions and 316 deletions.
51 changes: 22 additions & 29 deletions docs/pages/components/checkbox/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ Check boxes are usually used in groups. Allow users to select one or more values

<!--{include:`disabled.md`}-->

### Indeterminate State
### Indeterminate

the `indeterminate` property is mainly used on the select all or tree structure checkbox.
The `indeterminate` property sets the Checkbox to an indeterminate state, mainly used in the select all or tree structure Checkbox.

<!--{include:`indeterminate.md`}-->

Expand All @@ -32,7 +32,7 @@ the `indeterminate` property is mainly used on the select all or tree structure

### Checkbox Group (Controlled)

<!--{include:`checkbox-group-controller.md`}-->
<!--{include:`checkbox-group-controlled.md`}-->

## Accessibility

Expand All @@ -47,32 +47,25 @@ WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox

### `<Checkbox>`

| Property | Type `(default)` | Description |
| -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| checked | boolean | Specifies whether the checkbox is selected |
| defaultChecked | boolean | Specifies the initial state: whether or not the checkbox is selected |
| disabled | boolean | Whether disabled |
| id | ElementType | Custom element type for the component |
| indeterminate | boolean | When being a checkbox , setting styles after the child part is selected |
| inline | boolean | Inline layout |
| inputRef | Ref | Ref of input element |
| name | string | Used for the name of the form |
| onChange | (value: [ValueType](#code-ts-value-type-code), checked: boolean, event) => void | Callback fired when checkbox is triggered and state changes |
| title | string | HTML title |
| value | [ValueType](#code-ts-value-type-code) | Correspond to the value of CheckboxGroup, determine whether to select |
| Property | Type `(default)` | Description |
| -------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
| checked | boolean | Specifies whether the checkbox is selected |
| defaultChecked | boolean | Specifies the initial state: whether or not the checkbox is selected |
| disabled | boolean | Whether disabled |
| id | ElementType | Custom element type for the component |
| indeterminate | boolean | When being a checkbox , setting styles after the child part is selected |
| inputRef | Ref | Ref of input element |
| name | string | Used for the name of the form |
| onChange | (value: string \| number, checked: boolean, event) => void | Callback fired when checkbox is triggered and state changes |
| title | string | HTML title |
| value | string \| number | Correspond to the value of CheckboxGroup, determine whether to select |

### `<CheckboxGroup>`

| Property | Type `(default)` | Description |
| ------------ | -------------------------------------------------------------- | ----------------------------------------------------------- |
| defaultValue | [ValueType](#code-ts-value-type-code)[] | Default value |
| inline | boolean | Inline layout |
| name | string | Used for the name of the form |
| onChange | (value:[ValueType](#code-ts-value-type-code)[], event) => void | Callback fired when checkbox is triggered and state changes |
| value | [ValueType](#code-ts-value-type-code)[] | Value of checked box (Controlled) |

### `ts:ValueType`

```ts
type ValueType = string | number;
```
| Property | Type `(default)` | Description |
| ------------ | ----------------------------------------- | ----------------------------------------------------------- |
| defaultValue | string[] \| number[] | Default value |
| inline | boolean | Inline layout |
| name | string | Used for the name of the form |
| onChange | (value:string \| number[], event) => void | Callback fired when checkbox is triggered and state changes |
| value | string[] \| number[] | Value of checked box (Controlled) |
4 changes: 2 additions & 2 deletions docs/pages/components/checkbox/fragments/basic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { Checkbox } from 'rsuite';
const App = () => (
<>
<Checkbox />
<Checkbox> Default</Checkbox>
<Checkbox defaultChecked> Checked</Checkbox>
<Checkbox>Label</Checkbox>
<Checkbox defaultChecked>Checked</Checkbox>
</>
);
ReactDOM.render(<App />, document.getElementById('root'));
Expand Down
14 changes: 5 additions & 9 deletions ...ox/fragments/checkbox-group-controller.md → ...ox/fragments/checkbox-group-controlled.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,16 @@ const App = () => {
const [value, setValue] = React.useState(['A', 'C']);
return (
<CheckboxGroup
inline
name="checkboxList"
name="checkbox-group"
value={value}
onChange={value => {
console.log(value, 'onChange');
setValue(value);
}}
>
<Checkbox value="A">Item A</Checkbox>
<Checkbox value="B">Item B</Checkbox>
<Checkbox value="C">Item C</Checkbox>
<Checkbox value="D" disabled>
Item D
</Checkbox>
<Checkbox value="A">Checkbox A</Checkbox>
<Checkbox value="B">Checkbox B</Checkbox>
<Checkbox value="C">Checkbox C</Checkbox>
<Checkbox value="D">Checkbox D</Checkbox>
</CheckboxGroup>
);
};
Expand Down
14 changes: 5 additions & 9 deletions docs/pages/components/checkbox/fragments/checkbox-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,11 @@
import { Checkbox, CheckboxGroup } from 'rsuite';

const App = () => (
<CheckboxGroup name="checkboxList">
<p>Group1</p>
<Checkbox value="A">Item A</Checkbox>
<Checkbox value="B">Item B</Checkbox>
<p>Group2</p>
<Checkbox value="C">Item C</Checkbox>
<Checkbox value="D" disabled>
Item D
</Checkbox>
<CheckboxGroup name="checkbox-group">
<Checkbox value="A">Checkbox A</Checkbox>
<Checkbox value="B">Checkbox B</Checkbox>
<Checkbox value="C">Checkbox C</Checkbox>
<Checkbox value="D">Checkbox D</Checkbox>
</CheckboxGroup>
);

Expand Down
12 changes: 5 additions & 7 deletions docs/pages/components/checkbox/fragments/checkbox-groupinline.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@
import { Checkbox, CheckboxGroup } from 'rsuite';

const App = () => (
<CheckboxGroup inline name="checkboxList">
<Checkbox value="A">Item A</Checkbox>
<Checkbox value="B">Item B</Checkbox>
<Checkbox value="C">Item C</Checkbox>
<Checkbox value="D" disabled>
Item D
</Checkbox>
<CheckboxGroup inline name="checkbox-group">
<Checkbox value="A">Checkbox A</Checkbox>
<Checkbox value="B">Checkbox B</Checkbox>
<Checkbox value="C">Checkbox C</Checkbox>
<Checkbox value="D">Checkbox D</Checkbox>
</CheckboxGroup>
);

Expand Down
38 changes: 32 additions & 6 deletions docs/pages/components/checkbox/fragments/disabled.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,52 @@ import { Checkbox } from 'rsuite';

const App = () => (
<>
<label>Disabled: </label>
<Checkbox disabled> Default</Checkbox>
<Label>Disabled</Label>
<Checkbox disabled>Default</Checkbox>
<Checkbox defaultChecked disabled>
Checked
</Checkbox>
<Checkbox indeterminate disabled>
Indeterminate
</Checkbox>

<hr />
<label>Read only: </label>
<Checkbox readOnly> Default</Checkbox>
<Label>Read only</Label>
<Checkbox readOnly>Default</Checkbox>
<Checkbox defaultChecked readOnly>
Checked
</Checkbox>
<Checkbox indeterminate readOnly>
Indeterminate
</Checkbox>
<hr />
<label>Plaintext: </label>
<Checkbox plaintext> Default</Checkbox>
<Label>Plaintext</Label>
<Checkbox plaintext>Default</Checkbox>
<Checkbox defaultChecked plaintext>
Checked
</Checkbox>
<Checkbox indeterminate plaintext>
Checked
</Checkbox>
</>
);

function Label({ children }) {
return (
<label
style={{
verticalAlign: 'middle',
display: 'inline-block',
marginRight: 10,
width: 70,
color: 'var(--rs-text-secondary)'
}}
>
{children}
</label>
);
}

ReactDOM.render(<App />, document.getElementById('root'));
```

Expand Down
21 changes: 13 additions & 8 deletions docs/pages/components/checkbox/fragments/indeterminate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,37 @@
```js
import { Checkbox, CheckboxGroup } from 'rsuite';

const data = ['A', 'B', 'C', 'D'];
const data = ['A', 'B'];

const App = () => {
const [value, setValue] = React.useState(['A', 'C']);
const [value, setValue] = React.useState(['A']);

const handleCheckAll = (value, checked) => setValue(checked ? data : []);
const handleChange = value => setValue(value);

return (
<div>
<>
<Checkbox
indeterminate={value.length > 0 && value.length < data.length}
checked={value.length === data.length}
onChange={handleCheckAll}
>
Check all
Parent Checkbox
</Checkbox>
<hr />
<CheckboxGroup inline name="checkboxList" value={value} onChange={handleChange}>

<CheckboxGroup
name="checkboxList"
value={value}
onChange={handleChange}
style={{ marginLeft: 36 }}
>
{data.map(item => (
<Checkbox key={item} value={item}>
Item {item}
Child Checkbox {item}
</Checkbox>
))}
</CheckboxGroup>
</div>
</>
);
};

Expand Down
51 changes: 22 additions & 29 deletions docs/pages/components/checkbox/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

<!--{include:`disabled.md`}-->

### Indeterminate 状态
### 不确定状态

`indeterminate` 该状态主要在全选或者树形结构 Checkbox 上使用。
使用 `indeterminate` 属性可以将 Checkbox 设置为不确定状态，主要用在全选或者树形结构 Checkbox 上。

<!--{include:`indeterminate.md`}-->

Expand All @@ -32,7 +32,7 @@

### 受控的复选框组

<!--{include:`checkbox-group-controller.md`}-->
<!--{include:`checkbox-group-controlled.md`}-->

## 无障碍设计

Expand All @@ -51,32 +51,25 @@ type ValueType = string | number;

### `<Checkbox>`

| 属性名称 | 类型 `(默认值)` | 描述 |
| -------------- | ------------------------------------------------------------------------------- | -------------------------------------------- |
| checked | boolean | 被选择（受控） |
| defaultChecked | boolean | 默认被选择 |
| disabled | boolean | 禁用 |
| id | ElementType | 为组件自定义元素类型 |
| indeterminate | boolean | 作为一个全选框时，子项部分被选择后的样式设置 |
| inline | boolean | 内联布局 |
| inputRef | Ref | HTML input 元素 |
| name | string | 用于表单对应的名称 |
| onChange | (value: [ValueType](#code-ts-value-type-code), checked: boolean, event) => void | checked 状态发生改变的回调函数 |
| title | string | HTML title |
| value | [ValueType](#code-ts-value-type-code) | 值，对应 CheckboxGroup 的值，判断是否选中 |
| 属性名称 | 类型 `(默认值)` | 描述 |
| -------------- | ---------------------------------------------------------- | -------------------------------------------- |
| checked | boolean | 被选择（受控） |
| defaultChecked | boolean | 默认被选择 |
| disabled | boolean | 禁用 |
| id | ElementType | 为组件自定义元素类型 |
| indeterminate | boolean | 作为一个全选框时，子项部分被选择后的样式设置 |
| inputRef | Ref | HTML input 元素 |
| name | string | 用于表单对应的名称 |
| onChange | (value: string \| number, checked: boolean, event) => void | checked 状态发生改变的回调函数 |
| title | string | HTML title |
| value | string \| number | 值，对应 CheckboxGroup 的值，判断是否选中 |

### `<CheckboxGroup>`

| 属性名称 | 类型 `(默认值)` | 描述 |
| ------------ | -------------------------------------------------------------- | ------------------ |
| defaultValue | [ValueType](#code-ts-value-type-code)[] | 默认值 |
| inline | boolean | 内联布局 |
| name | string | 用于表单对应的名称 |
| onChange | (value:[ValueType](#code-ts-value-type-code)[], event) => void | 值改变后的回调函数 |
| value | [ValueType](#code-ts-value-type-code)[] | 值(受控) |

### `ts:ValueType`

```ts
type ValueType = string | number;
```
| 属性名称 | 类型 `(默认值)` | 描述 |
| ------------ | ----------------------------------------- | ------------------ |
| defaultValue | string[] \| number[] | 默认值 |
| inline | boolean | 内联布局 |
| name | string | 用于表单对应的名称 |
| onChange | (value:string \| number[], event) => void | 值改变后的回调函数 |
| value | string[] \| number[] | 值(受控) |
2 changes: 1 addition & 1 deletion src/CheckPicker/styles/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
padding-left: 52px;
}

.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
left: 26px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/CheckTreePicker/styles/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
padding: 1px 0 1px 42px;
}

.rs-checkbox-wrapper {
.rs-checkbox-control {
left: (@checkbox-sense-width + 10px);
}

Expand Down Expand Up @@ -54,7 +54,7 @@
}
}

.rs-checkbox-wrapper {
.rs-checkbox-control {
left: 0;
}
}
Expand Down

0 comments on commit cd43df5

Please sign in to comment.