Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-11 22:40:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Checkbox "reimplemented"

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-04 10:06:15 +02:00
parent 6b8858642f
commit b84eaf4eec
2 changed files with 36 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,22 +5,33 @@ import Icon from 'stremio-icons/dom';
import styles from './styles';
class Checkbox extends Component {
shouldComponentUpdate(nextProps, nextState) {
shouldComponentUpdate(nextProps) {
return nextProps.checked !== this.props.checked ||
nextProps.enabled !== this.props.enabled;
nextProps.disabled !== this.props.disabled ||
nextProps.className !== this.props.className;
}
onClick = () => {
if (this.props.enabled && typeof this.props.onClick === 'function') {
onClick = (event) => {
event.preventDefault();
if (typeof this.props.onClick === 'function') {
this.props.onClick();
}
}
render() {
return (
<div className={classnames(styles['root'], this.props.className, { [styles['checkbox-checked']]: this.props.checked }, { [styles['checkbox-disabled']]: !this.props.enabled })}>
<Icon className={classnames(styles['icon'])} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'} />
<input type={'checkbox'} className={styles['native-checkbox']} defaultChecked={this.props.checked} disabled={!this.props.enabled} onClick={this.onClick} />
<div className={classnames(this.props.className, styles['checkbox-container'], { 'checked': this.props.checked }, { 'disabled': this.props.disabled })}>
<Icon
className={styles['icon']}
icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}
/>
<input
className={styles['native-checkbox']}
type={'checkbox'}
disabled={this.props.disabled}
defaultChecked={this.props.checked}
onClick={this.onClick}
/>
</div>
);
}
@ -28,13 +39,13 @@ class Checkbox extends Component {
Checkbox.propTypes = {
className: PropTypes.string,
enabled: PropTypes.bool.isRequired,
disabled: PropTypes.bool.isRequired,
checked: PropTypes.bool.isRequired,
onClick: PropTypes.func
};
Checkbox.defaultProps = {
enabled: true,
disabled: false,
checked: false
};

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

@ -1,18 +1,14 @@
.root {
cursor: pointer;
.checkbox-container {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--background-color);
&.checkbox-checked {
background-color: var(--color-primarylight);
.icon {
padding: 10%;
fill: var(--color-surfacelighter);
}
}
&.checkbox-disabled {
opacity: 0.5;
cursor: not-allowed;
.icon {
height: 100%;
fill: var(--icon-color);
}
.native-checkbox {
@ -20,14 +16,13 @@
opacity: 0;
height: 0;
width: 0;
top: -9999px;
left: -9999px;
top: -99999999px;
left: -99999999px;
}
.icon {
width: 100%;
height: 100%;
margin: auto;
fill: var(--color-surfacelighter60);
&:global(.checked) {
.icon {
height: 55%;
}
}
}