mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-08 09:26:34 +02:00
Code Issues Releases Wiki Activity

update: common/components/Checkbox

Browse Source
This commit is contained in:
David Sevilla Martin
2020-08-08 16:11:43 -04:00
committed by Franz Liedke
parent 674f55e91d
commit cfd1f01299
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
js/src/common/components/Checkbox.js
View File

@@ -1,6 +1,8 @@
import Component from '../Component'; import Component from '../Component';
import LoadingIndicator from './LoadingIndicator'; import LoadingIndicator from './LoadingIndicator';
import icon from '../helpers/icon'; import icon from '../helpers/icon';
import classList from '../utils/classList';
import withAttr from '../utils/withAttr';
/** /**
* The `Checkbox` component defines a checkbox input. * The `Checkbox` component defines a checkbox input.
@@ -15,19 +17,24 @@ import icon from '../helpers/icon';
* - `children` A text label to display next to the checkbox. * - `children` A text label to display next to the checkbox.
*/ */
export default class Checkbox extends Component { export default class Checkbox extends Component {
view() { view(vnode) {
// Sometimes, false is stored in the DB as '0'. This is a temporary // Sometimes, false is stored in the DB as '0'. This is a temporary
// conversion layer until a more robust settings encoding is introduced // conversion layer until a more robust settings encoding is introduced
if (this.props.state === '0') this.props.state = false; if (this.attrs.state === '0') this.attrs.state = false;
let className = 'Checkbox ' + (this.props.state ? 'on' : 'off') + ' ' + (this.props.className || '');
if (this.props.loading) className += ' loading'; const className = classList([
if (this.props.disabled) className += ' disabled'; 'Checkbox',
this.attrs.state ? 'on' : 'off',
this.attrs.className,
this.attrs.loading && 'loading',
this.attrs.disabled && 'disabled',
]);
return ( return (
<label className={className}> <label className={className}>
<input type="checkbox" checked={this.props.state} disabled={this.props.disabled} onchange={m.withAttr('checked', this.onchange.bind(this))} /> <input type="checkbox" checked={this.attrs.state} disabled={this.attrs.disabled} onchange={withAttr('checked', this.onchange.bind(this))} />
<div className="Checkbox-display">{this.getDisplay()}</div> <div className="Checkbox-display">{this.getDisplay()}</div>
{this.props.children} {vnode.children}
</label> </label>
); );
} }
@@ -39,7 +46,7 @@ export default class Checkbox extends Component {
* @protected * @protected
*/ */
getDisplay() { getDisplay() {
return this.props.loading ? LoadingIndicator.component({ size: 'tiny' }) : icon(this.props.state ? 'fas fa-check' : 'fas fa-times'); return this.attrs.loading ? <LoadingIndicator size="tiny" /> : icon(this.attrs.state ? 'fas fa-check' : 'fas fa-times');
} }
/** /**
@@ -49,6 +56,6 @@ export default class Checkbox extends Component {
* @protected * @protected
*/ */
onchange(checked) { onchange(checked) {
if (this.props.onchange) this.props.onchange(checked, this); if (this.attrs.onchange) this.attrs.onchange(checked, this);
} }
} }