style(snippets/MultiselectCheckbox.md): lint with prettier

This commit is contained in:
rishichawda
2019-01-29 09:57:47 +05:30
parent e4b0e4dd33
commit ee917a5bfb

View File

@ -8,27 +8,26 @@ Initially, all the items in the `options` array only have label ( and / or other
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. 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 ```jsx
export default class MultiCheckbox extends React.Component { export default class MultiCheckbox extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.style = { this.style = {
listContainer: { listContainer: {
listStyle: 'none', listStyle: "none",
paddingLeft: 0, paddingLeft: 0
}, },
itemStyle: { itemStyle: {
cursor: 'pointer', cursor: "pointer",
padding: 5, padding: 5
}
} }
};
this.state = { this.state = {
options: props.options, options: props.options
} };
} }
toggle = (item) => { toggle = item => {
const { options } = this.state; const { options } = this.state;
const { onChange } = this.props; const { onChange } = this.props;
options.map((_, key) => { options.map((_, key) => {
@ -36,50 +35,42 @@ export default class MultiCheckbox extends React.Component {
options[key].checked = !item.checked; options[key].checked = !item.checked;
} }
}); });
this.setState({ this.setState(
options, {
}, () => { options
},
() => {
onChange(options); onChange(options);
});
} }
);
};
render() { render() {
const { options } = this.state; const { options } = this.state;
return ( return (
<ul style={this.style.listContainer}> <ul style={this.style.listContainer}>
{ {options.map(item => (
options.map(item => ( <li style={this.style.itemStyle} onClick={() => this.toggle(item)}>
<li <input readOnly type="checkbox" checked={item.checked || false} />
style={this.style.itemStyle}
onClick={() => this.toggle(item)}
>
<input
readOnly
type="checkbox"
checked={item.checked || false}
/>
{item.label} {item.label}
</li> </li>
)) ))}
}
</ul> </ul>
) );
} }
} }
``` ```
```jsx
const options = [ ```jsx
{ label: 'Item One' }, const options = [{ label: "Item One" }, { label: "Item Two" }];
{ label: 'Item Two' }
];
ReactDOM.render( ReactDOM.render(
<MultiCheckbox <MultiCheckbox
options={options} options={options}
onChange={(data) => { onChange={data => {
console.log(data); console.log(data);
}} }}
/>, />,
document.getElementById('root')); document.getElementById("root")
);
``` ```