Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 14:52:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix checkbox

Browse source
This commit is contained in:
svetlagasheva 2018-11-09 11:19:48 +02:00
parent e0fc858280
commit 52ffe794b7
3 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/Checkbox/Checkbox.js
View file

@ -18,16 +18,14 @@ class Checkbox extends Component {
render() {
return (
<div style={{height: this.props.iconHeight, width: this.props.iconWidth}} className={classnames(styles.root, this.props.checked ? styles['checkbox-checked'] : null, !this.props.enabled ? styles['checkbox-disabled'] : null)} onClick={this.onClick}>
<Icon style={{width: this.props.iconWidth}} className={classnames(styles['icon'], this.props.checked ? styles['checked'] : null)} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}></Icon>
<div className={classnames(styles['root'], styles[this.props.className], this.props.checked ? styles['checkbox-checked'] : null, this.props.enabled ? null : styles['checkbox-disabled'])} onClick={this.onClick}>
<Icon className={classnames(styles['icon'], this.props.checked ? styles['checked'] : null)} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}></Icon>
</div>
);
}
}
Checkbox.propTypes = {
iconHeight: PropTypes.number,
iconWidth: PropTypes.number,
className: PropTypes.string,
enabled: PropTypes.bool.isRequired,
checked: PropTypes.bool.isRequired,

3
src/common/Checkbox/styles.less
View file

@ -1,7 +1,6 @@
@import 'stremio-colors';
.root {
margin: 30px;
display: flex;
cursor: pointer;
@ -16,6 +15,8 @@
}
.icon {
width: 100%;
height: 100%;
margin: auto;
fill: @colorwhite60;

8
stories/index.stories.js
View file

@ -20,10 +20,10 @@ storiesOf('Addon', module)
storiesOf('Checkbox', module)
.add('checkbox', () => (
<div style={{padding: '10px'}} className={styles['app']}>
<Checkbox iconHeight={20} iconWidth={20} checked={true} enabled={false}></Checkbox>
<Checkbox iconHeight={30} iconWidth={30} checked={false} enabled={false}></Checkbox>
<Checkbox iconHeight={10} iconWidth={10} checked={false} enabled={true}></Checkbox>
<Checkbox iconHeight={40} iconWidth={40} checked={true} enabled={true}></Checkbox>
<Checkbox checked={true} enabled={false}></Checkbox>
<Checkbox checked={false} enabled={false}></Checkbox>
<Checkbox checked={false} enabled={true}></Checkbox>
<Checkbox checked={true} enabled={true}></Checkbox>
</div>
))