mirror of
https://github.com/flarum/framework.git
synced 2025-02-02 02:13:01 +08:00
common: add Checkbox, Switch, FieldSet components
This commit is contained in:
parent
dfedd585f5
commit
220a36c2e4
67
js/src/common/components/Checkbox.tsx
Normal file
67
js/src/common/components/Checkbox.tsx
Normal file
|
@ -0,0 +1,67 @@
|
|||
import Component, { ComponentProps } from '../Component';
|
||||
import LoadingIndicator from './LoadingIndicator';
|
||||
import icon from '../helpers/icon';
|
||||
|
||||
export interface CheckboxProps extends ComponentProps {
|
||||
/**
|
||||
* Whether or not the checkbox is checked
|
||||
*/
|
||||
state: boolean;
|
||||
|
||||
/**
|
||||
* Whether or not the checkbox is disabled.
|
||||
*/
|
||||
disabled: boolean;
|
||||
|
||||
/**
|
||||
* A callback to run when the checkbox is checked/unchecked.
|
||||
*/
|
||||
onchange?: Function;
|
||||
}
|
||||
|
||||
/**
|
||||
* The `Checkbox` component defines a checkbox input.
|
||||
*/
|
||||
export default class Checkbox<T extends CheckboxProps = CheckboxProps> extends Component<CheckboxProps> {
|
||||
/**
|
||||
* Whether or not the checkbox's value is in the process of being saved.
|
||||
*/
|
||||
loading = false;
|
||||
|
||||
view() {
|
||||
const className = classNames(
|
||||
'Checkbox',
|
||||
this.props.className,
|
||||
this.props.state ? 'on' : 'off',
|
||||
this.loading && 'loading',
|
||||
this.props.disabled && '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).
|
||||
*/
|
||||
protected getDisplay() {
|
||||
return this.loading ? LoadingIndicator.component({ size: 'tiny' }) : icon(this.props.state ? 'fas fa-check' : 'fas fa-times');
|
||||
}
|
||||
|
||||
/**
|
||||
* Run a callback when the state of the checkbox is changed.
|
||||
*/
|
||||
protected onchange(checked: boolean) {
|
||||
if (this.props.onchange) this.props.onchange(checked, this);
|
||||
}
|
||||
}
|
26
js/src/common/components/FieldSet.tsx
Normal file
26
js/src/common/components/FieldSet.tsx
Normal file
|
@ -0,0 +1,26 @@
|
|||
import Component, { ComponentProps } from '../Component';
|
||||
import listItems from '../helpers/listItems';
|
||||
|
||||
export interface FieldSetProps extends ComponentProps {
|
||||
/**
|
||||
* The title of this group of fields
|
||||
*/
|
||||
label: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The `FieldSet` component defines a collection of fields, displayed in a list
|
||||
* underneath a title.
|
||||
*
|
||||
* The children should be an array of items to show in the fieldset.
|
||||
*/
|
||||
export default class FieldSet extends Component<FieldSetProps> {
|
||||
view() {
|
||||
return (
|
||||
<fieldset className={this.props.className}>
|
||||
<legend>{this.props.label}</legend>
|
||||
<ul>{listItems(this.props.children)}</ul>
|
||||
</fieldset>
|
||||
);
|
||||
}
|
||||
}
|
17
js/src/common/components/Switch.tsx
Normal file
17
js/src/common/components/Switch.tsx
Normal file
|
@ -0,0 +1,17 @@
|
|||
import Checkbox from './Checkbox';
|
||||
|
||||
/**
|
||||
* The `Switch` component is a `Checkbox`, but with a switch display instead of
|
||||
* a tick/cross one.
|
||||
*/
|
||||
export default class Switch extends Checkbox {
|
||||
static initProps(props) {
|
||||
super.initProps(props);
|
||||
|
||||
props.className = `${props.className || ''} Checkbox--switch`;
|
||||
}
|
||||
|
||||
getDisplay() {
|
||||
return this.loading ? super.getDisplay() : '';
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user