mirror of
https://github.com/flarum/framework.git
synced 2025-02-19 18:57:31 +08:00
1a2df2d581
* Update FontAwesome to v5.0.6 * Adapt DiscussionListItem-count icon to match FontAwesome 5 syntax * Change icon name to match FontAwesome 5.0.6 fas icon * Add font type prefix parameter to icon helper * Add Enable Icon Prefix to show icon in Extension Page * Fix invalid icon behavior * Change icon name to match FontAwesome 5.0.6 far icon * Use iconPrefix property on component * Use full icon class name * Update icon helper docblock * Full icon class syntax
68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import Component from 'flarum/Component';
|
|
import LoadingIndicator from 'flarum/components/LoadingIndicator';
|
|
import icon from 'flarum/helpers/icon';
|
|
|
|
/**
|
|
* The `Checkbox` component defines a checkbox input.
|
|
*
|
|
* ### Props
|
|
*
|
|
* - `state` Whether or not the checkbox is checked.
|
|
* - `className` The class name for the root element.
|
|
* - `disabled` Whether or not the checkbox is disabled.
|
|
* - `onchange` A callback to run when the checkbox is checked/unchecked.
|
|
* - `children` A text label to display next to the checkbox.
|
|
*/
|
|
export default class Checkbox extends Component {
|
|
init() {
|
|
/**
|
|
* Whether or not the checkbox's value is in the process of being saved.
|
|
*
|
|
* @type {Boolean}
|
|
* @public
|
|
*/
|
|
this.loading = false;
|
|
}
|
|
|
|
view() {
|
|
let className = 'Checkbox ' + (this.props.state ? 'on' : 'off') + ' ' + (this.props.className || '');
|
|
if (this.loading) className += ' loading';
|
|
if (this.props.disabled) className += ' disabled';
|
|
|
|
return (
|
|
<label className={className}>
|
|
<input type="checkbox"
|
|
checked={this.props.state}
|
|
disabled={this.props.disabled}
|
|
onchange={m.withAttr('checked', this.onchange.bind(this))}/>
|
|
<div className="Checkbox-display">
|
|
{this.getDisplay()}
|
|
</div>
|
|
{this.props.children}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Get the template for the checkbox's display (tick/cross icon).
|
|
*
|
|
* @return {*}
|
|
* @protected
|
|
*/
|
|
getDisplay() {
|
|
return this.loading
|
|
? LoadingIndicator.component({size: 'tiny'})
|
|
: icon(this.props.state ? 'fa fa-check' : 'fa fa-times');
|
|
}
|
|
|
|
/**
|
|
* Run a callback when the state of the checkbox is changed.
|
|
*
|
|
* @param {Boolean} checked
|
|
* @protected
|
|
*/
|
|
onchange(checked) {
|
|
if (this.props.onchange) this.props.onchange(checked, this);
|
|
}
|
|
}
|