Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-05 23:19:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

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

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