Add support to disable slider
This commit is contained in:
parent
ee33fc1c20
commit
014be5ce5f
1 changed files with 20 additions and 8 deletions
|
@ -30,6 +30,8 @@ type IProps = {
|
||||||
// A function for formatting the the values
|
// A function for formatting the the values
|
||||||
displayFunc: (value: number) => string;
|
displayFunc: (value: number) => string;
|
||||||
|
|
||||||
|
// Whether the slider is disabled
|
||||||
|
disabled: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Slider extends React.Component<IProps> {
|
export default class Slider extends React.Component<IProps> {
|
||||||
|
@ -47,8 +49,9 @@ export default class Slider extends React.Component<IProps> {
|
||||||
const dots = this.props.values.map(v =>
|
const dots = this.props.values.map(v =>
|
||||||
<Dot active={v <= this.props.value}
|
<Dot active={v <= this.props.value}
|
||||||
label={this.props.displayFunc(v)}
|
label={this.props.displayFunc(v)}
|
||||||
onClick={() => this.props.onSelectionChange(v)}
|
onClick={this.props.disabled ? () => {} : () => this.props.onSelectionChange(v)}
|
||||||
key={v}
|
key={v}
|
||||||
|
disabled={this.props.disabled}
|
||||||
/>);
|
/>);
|
||||||
|
|
||||||
const offset = this._offset(this.props.values, this.props.value);
|
const offset = this._offset(this.props.values, this.props.value);
|
||||||
|
@ -57,10 +60,13 @@ export default class Slider extends React.Component<IProps> {
|
||||||
<div>
|
<div>
|
||||||
<div className="mx_Slider_bar">
|
<div className="mx_Slider_bar">
|
||||||
<hr />
|
<hr />
|
||||||
<div className="mx_Slider_selection">
|
{ this.props.disabled ?
|
||||||
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
|
null :
|
||||||
<hr style={{width: offset + "%"}} />
|
<div className="mx_Slider_selection">
|
||||||
</div>
|
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
|
||||||
|
<hr style={{width: offset + "%"}} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="mx_Slider_dotContainer">
|
<div className="mx_Slider_dotContainer">
|
||||||
{dots}
|
{dots}
|
||||||
|
@ -79,18 +85,24 @@ type DotIProps = {
|
||||||
|
|
||||||
// The label on the dot
|
// The label on the dot
|
||||||
label: string,
|
label: string,
|
||||||
|
|
||||||
|
// Whether the slider is disabled
|
||||||
|
disabled: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
class Dot extends React.Component<DotIProps> {
|
class Dot extends React.Component<DotIProps> {
|
||||||
render(): React.ReactNode {
|
render(): React.ReactNode {
|
||||||
const className = "mx_Slider_dot" + (this.props.active ? " mx_Slider_dotActive" : "");
|
let className = "mx_Slider_dot"
|
||||||
|
if (!this.props.disabled && this.props.active) {
|
||||||
|
className += " mx_Slider_dotActive";
|
||||||
|
}
|
||||||
|
|
||||||
return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
|
return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
|
||||||
<div className={className} />
|
<div className={className} />
|
||||||
<div className="mx_Slider_labelContainer">
|
<div className="mx_Slider_labelContainer">
|
||||||
<div className="mx_Slider_label">
|
<div className="mx_Slider_label">
|
||||||
{this.props.label}
|
{this.props.label}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</span>;
|
</span>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue