mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add support to disable slider

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-22 11:53:29 +01:00
parent ee33fc1c20
commit 014be5ce5f
1 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/elements/Slider.tsx
View file

@ -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 />
{ this.props.disabled ?
null :
<div className="mx_Slider_selection"> <div className="mx_Slider_selection">
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} /> <div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
<hr style={{width: offset + "%"}} /> <hr style={{width: offset + "%"}} />
</div> </div>
}
</div> </div>
<div className="mx_Slider_dotContainer"> <div className="mx_Slider_dotContainer">
{dots} {dots}
@ -79,11 +85,17 @@ 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} />