2020-04-16 09:33:23 +00:00
|
|
|
/*
|
|
|
|
Copyright 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2020-04-21 09:46:33 +00:00
|
|
|
import * as React from 'react';
|
2020-04-16 09:33:23 +00:00
|
|
|
|
2020-04-22 09:19:17 +00:00
|
|
|
type IProps = {
|
2020-04-21 10:01:52 +00:00
|
|
|
// A callback for the selected value
|
2020-04-22 09:19:17 +00:00
|
|
|
onSelectionChange: (value: number) => void;
|
2020-04-21 09:46:33 +00:00
|
|
|
|
|
|
|
// The current value of the slider
|
|
|
|
value: number;
|
|
|
|
|
|
|
|
// The range and values of the slider
|
|
|
|
// Currently only supports an ascending, constant interval range
|
|
|
|
values: number[];
|
|
|
|
|
|
|
|
// A function for formatting the the values
|
|
|
|
displayFunc: (value: number) => string;
|
|
|
|
|
2020-04-22 10:53:29 +00:00
|
|
|
// Whether the slider is disabled
|
|
|
|
disabled: boolean;
|
2020-04-21 09:46:33 +00:00
|
|
|
}
|
|
|
|
|
2020-04-22 09:19:17 +00:00
|
|
|
export default class Slider extends React.Component<IProps> {
|
2020-04-21 09:46:33 +00:00
|
|
|
_offset(values: number[], value: number): number {
|
2020-04-22 09:42:31 +00:00
|
|
|
const min = values[0];
|
|
|
|
const max = values[values.length - 1];
|
2020-04-22 09:24:29 +00:00
|
|
|
|
2020-04-22 09:42:31 +00:00
|
|
|
// Clamp value between min and max
|
|
|
|
value = Math.min(Math.max(value, min), max);
|
2020-04-22 09:24:29 +00:00
|
|
|
|
2020-04-22 09:42:31 +00:00
|
|
|
return (value - min) / (max - min) * 100;
|
2020-04-21 09:15:37 +00:00
|
|
|
}
|
|
|
|
|
2020-04-21 09:46:33 +00:00
|
|
|
render(): React.ReactNode {
|
2020-04-16 10:56:43 +00:00
|
|
|
const dots = this.props.values.map(v =>
|
2020-04-21 15:18:25 +00:00
|
|
|
<Dot active={v <= this.props.value}
|
2020-04-16 10:56:43 +00:00
|
|
|
label={this.props.displayFunc(v)}
|
2020-04-22 10:53:29 +00:00
|
|
|
onClick={this.props.disabled ? () => {} : () => this.props.onSelectionChange(v)}
|
2020-04-16 09:33:23 +00:00
|
|
|
key={v}
|
2020-04-22 10:53:29 +00:00
|
|
|
disabled={this.props.disabled}
|
2020-04-16 09:33:23 +00:00
|
|
|
/>);
|
|
|
|
|
2020-04-21 09:15:37 +00:00
|
|
|
const offset = this._offset(this.props.values, this.props.value);
|
2020-04-16 09:33:23 +00:00
|
|
|
|
2020-04-21 10:01:52 +00:00
|
|
|
return <div className="mx_Slider">
|
2020-04-16 09:33:23 +00:00
|
|
|
<div>
|
2020-04-21 10:01:52 +00:00
|
|
|
<div className="mx_Slider_bar">
|
2020-04-16 09:33:23 +00:00
|
|
|
<hr />
|
2020-04-22 10:53:29 +00:00
|
|
|
{ this.props.disabled ?
|
|
|
|
null :
|
|
|
|
<div className="mx_Slider_selection">
|
|
|
|
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55rem + " + offset + "%)"}} />
|
|
|
|
<hr style={{width: offset + "%"}} />
|
|
|
|
</div>
|
|
|
|
}
|
2020-04-16 09:33:23 +00:00
|
|
|
</div>
|
2020-04-21 10:01:52 +00:00
|
|
|
<div className="mx_Slider_dotContainer">
|
2020-04-16 09:33:23 +00:00
|
|
|
{dots}
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-04-16 10:56:43 +00:00
|
|
|
</div>;
|
2020-04-16 09:33:23 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-22 09:19:17 +00:00
|
|
|
type DotIProps = {
|
|
|
|
// Callback for behavior onclick
|
|
|
|
onClick: () => void,
|
2020-04-21 09:46:33 +00:00
|
|
|
|
|
|
|
// Whether the dot should appear active
|
|
|
|
active: boolean,
|
|
|
|
|
|
|
|
// The label on the dot
|
|
|
|
label: string,
|
2020-04-22 10:53:29 +00:00
|
|
|
|
|
|
|
// Whether the slider is disabled
|
|
|
|
disabled: boolean;
|
2020-04-21 09:46:33 +00:00
|
|
|
}
|
|
|
|
|
2020-04-22 09:19:17 +00:00
|
|
|
class Dot extends React.Component<DotIProps> {
|
2020-04-21 09:46:33 +00:00
|
|
|
render(): React.ReactNode {
|
2020-04-22 10:53:29 +00:00
|
|
|
let className = "mx_Slider_dot"
|
|
|
|
if (!this.props.disabled && this.props.active) {
|
|
|
|
className += " mx_Slider_dotActive";
|
|
|
|
}
|
2020-04-16 09:33:23 +00:00
|
|
|
|
2020-04-21 10:01:52 +00:00
|
|
|
return <span onClick={this.props.onClick} className="mx_Slider_dotValue">
|
2020-04-16 09:33:23 +00:00
|
|
|
<div className={className} />
|
2020-04-22 10:36:23 +00:00
|
|
|
<div className="mx_Slider_labelContainer">
|
|
|
|
<div className="mx_Slider_label">
|
2020-04-22 10:53:29 +00:00
|
|
|
{this.props.label}
|
|
|
|
</div>
|
2020-04-22 10:36:23 +00:00
|
|
|
</div>
|
2020-04-16 10:56:43 +00:00
|
|
|
</span>;
|
2020-04-16 09:33:23 +00:00
|
|
|
}
|
2020-04-16 10:56:43 +00:00
|
|
|
}
|