style(snippets/MultiselectCheckbox.md): lint with prettier
This commit is contained in:
@ -4,82 +4,73 @@
|
||||
|
||||
Renders a checkbox list with the options provided through `props`.
|
||||
|
||||
Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list.
|
||||
Initially, all the items in the `options` array only have label ( and / or other data provided by the user ) and `checked` is `undefined` if not provided. On clicking any of the items, the `checked` value for the item is toggled and state is updated with the new list.
|
||||
|
||||
The checkbox input in this case is kept as `readOnly` since click events are handled for the item ( label + input ) and not the `input` alone. An `onChange` prop can be passed to the `MultiCheckbox` component to get the updated list on every change event within the list.
|
||||
|
||||
|
||||
```jsx
|
||||
export default class MultiCheckbox extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.style = {
|
||||
listContainer: {
|
||||
listStyle: 'none',
|
||||
paddingLeft: 0,
|
||||
listStyle: "none",
|
||||
paddingLeft: 0
|
||||
},
|
||||
itemStyle: {
|
||||
cursor: 'pointer',
|
||||
padding: 5,
|
||||
cursor: "pointer",
|
||||
padding: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
this.state = {
|
||||
options: props.options,
|
||||
}
|
||||
options: props.options
|
||||
};
|
||||
}
|
||||
|
||||
toggle = (item) => {
|
||||
toggle = item => {
|
||||
const { options } = this.state;
|
||||
const { onChange } = this.props;
|
||||
options.map((_, key) => {
|
||||
if(options[key].label === item.label) {
|
||||
if (options[key].label === item.label) {
|
||||
options[key].checked = !item.checked;
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
options,
|
||||
}, () => {
|
||||
onChange(options);
|
||||
});
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
options
|
||||
},
|
||||
() => {
|
||||
onChange(options);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { options } = this.state;
|
||||
return (
|
||||
<ul style={this.style.listContainer}>
|
||||
{
|
||||
options.map(item => (
|
||||
<li
|
||||
style={this.style.itemStyle}
|
||||
onClick={() => this.toggle(item)}
|
||||
>
|
||||
<input
|
||||
readOnly
|
||||
type="checkbox"
|
||||
checked={item.checked || false}
|
||||
/>
|
||||
{item.label}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
{options.map(item => (
|
||||
<li style={this.style.itemStyle} onClick={() => this.toggle(item)}>
|
||||
<input readOnly type="checkbox" checked={item.checked || false} />
|
||||
{item.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
```jsx
|
||||
|
||||
const options = [
|
||||
{ label: 'Item One' },
|
||||
{ label: 'Item Two' }
|
||||
];
|
||||
```jsx
|
||||
const options = [{ label: "Item One" }, { label: "Item Two" }];
|
||||
|
||||
ReactDOM.render(
|
||||
<MultiCheckbox
|
||||
options={options}
|
||||
onChange={(data) => {
|
||||
console.log(data);
|
||||
onChange={data => {
|
||||
console.log(data);
|
||||
}}
|
||||
/>,
|
||||
document.getElementById('root'));
|
||||
```
|
||||
document.getElementById("root")
|
||||
);
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user