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-28 12:59:00 +00:00
|
|
|
interface IProps {
|
|
|
|
// A callback for the selected value
|
|
|
|
onSelectionChange: (value: number) => void;
|
2020-04-21 09:46:33 +00:00
|
|
|
|
2020-04-28 12:59:00 +00:00
|
|
|
// The current value of the slider
|
|
|
|
value: number;
|
2020-04-21 09:46:33 +00:00
|
|
|
|
2020-04-28 12:59:00 +00:00
|
|
|
// The range and values of the slider
|
|
|
|
// Currently only supports an ascending, constant interval range
|
|
|
|
values: number[];
|
2020-04-21 09:46:33 +00:00
|
|
|
|
2020-04-28 12:59:00 +00:00
|
|
|
// A function for formatting the the values
|
|
|
|
displayFunc: (value: number) => string;
|
2020-04-21 09:46:33 +00:00
|
|
|
|
2020-04-28 12:59:00 +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-23 09:27:41 +00:00
|
|
|
// offset is a terrible inverse approximation.
|
2020-04-23 13:39:11 +00:00
|
|
|
// if the values represents some function f(x) = y where x is the
|
2020-04-23 09:27:41 +00:00
|
|
|
// index of the array and y = values[x] then offset(f, y) = x
|
|
|
|
// s.t f(x) = y.
|
|
|
|
// it assumes a monotonic function and interpolates linearly between
|
|
|
|
// y values.
|
|
|
|
// Offset is used for finding the location of a value on a
|
|
|
|
// non linear slider.
|
2020-04-28 13:09:54 +00:00
|
|
|
private offset(values: number[], value: number): number {
|
2020-04-23 09:27:41 +00:00
|
|
|
// the index of the first number greater than value.
|
|
|
|
let closest = values.reduce((prev, curr) => {
|
|
|
|
return (value > curr ? prev + 1 : prev);
|
2020-05-06 16:25:54 +00:00
|
|
|
}, 0);
|
2020-04-22 09:24:29 +00:00
|
|
|
|
2020-04-23 09:27:41 +00:00
|
|
|
// Off the left
|
2020-04-23 13:39:11 +00:00
|
|
|
if (closest === 0) {
|
2020-04-23 09:27:41 +00:00
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Off the right
|
2020-04-23 13:39:11 +00:00
|
|
|
if (closest === values.length) {
|
2020-04-23 09:27:41 +00:00
|
|
|
return 100;
|
|
|
|
}
|
|
|
|
|
2020-04-23 13:39:11 +00:00
|
|
|
// Now
|
2020-04-23 09:27:41 +00:00
|
|
|
const closestLessValue = values[closest - 1];
|
|
|
|
const closestGreaterValue = values[closest];
|
|
|
|
|
|
|
|
const intervalWidth = 1 / (values.length - 1);
|
|
|
|
|
|
|
|
const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
|
|
|
|
|
|
|
|
return 100 * (closest - 1 + linearInterpolation) * intervalWidth
|
2020-04-22 09:24:29 +00:00
|
|
|
|
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-28 13:09:54 +00:00
|
|
|
let selection = null;
|
|
|
|
|
2020-04-28 14:48:54 +00:00
|
|
|
if (!this.props.disabled) {
|
2020-04-28 13:09:54 +00:00
|
|
|
const offset = this.offset(this.props.values, this.props.value);
|
|
|
|
selection = <div className="mx_Slider_selection">
|
|
|
|
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
|
|
|
|
<hr style={{width: offset + "%"}} />
|
|
|
|
</div>
|
|
|
|
}
|
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-05-20 12:07:33 +00:00
|
|
|
<hr onClick={this.props.disabled ? () => {} : this.onClick.bind(this)}/>
|
2020-04-28 13:09:54 +00:00
|
|
|
{ selection }
|
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-05-20 12:07:33 +00:00
|
|
|
|
|
|
|
onClick(event: React.MouseEvent) {
|
|
|
|
const width = (event.target as HTMLElement).clientWidth;
|
|
|
|
// nativeEvent is safe to use because https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX
|
|
|
|
// is supported by all modern browsers
|
|
|
|
const relativeClick = (event.nativeEvent.offsetX / width);
|
|
|
|
const nearestValue = this.props.values[Math.round(relativeClick * (this.props.values.length - 1))];
|
|
|
|
this.props.onSelectionChange(nearestValue);
|
|
|
|
}
|
2020-04-16 09:33:23 +00:00
|
|
|
}
|
|
|
|
|
2020-04-28 13:09:54 +00:00
|
|
|
interface IDotProps {
|
2020-04-22 09:19:17 +00:00
|
|
|
// 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-28 13:09:54 +00:00
|
|
|
class Dot extends React.PureComponent<IDotProps> {
|
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
|
|
|
}
|