PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Lint Slider

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-28 14:09:54 +01:00
parent 137b94703a
commit 175b5e70b6
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -43,7 +43,7 @@ export default class Slider extends React.Component<IProps> {
// y values. // y values.
// Offset is used for finding the location of a value on a // Offset is used for finding the location of a value on a
// non linear slider. // non linear slider.
_offset(values: number[], value: number): number { private offset(values: number[], value: number): number {
// the index of the first number greater than value. // the index of the first number greater than value.
let closest = values.reduce((prev, curr) => { let closest = values.reduce((prev, curr) => {
return (value > curr ? prev + 1 : prev); return (value > curr ? prev + 1 : prev);
@ -80,19 +80,21 @@ export default class Slider extends React.Component<IProps> {
disabled={this.props.disabled} disabled={this.props.disabled}
/>); />);
const offset = this._offset(this.props.values, this.props.value); let selection = null;
if (this.props.disabled) {
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>
}
return <div className="mx_Slider"> return <div className="mx_Slider">
<div> <div>
<div className="mx_Slider_bar"> <div className="mx_Slider_bar">
<hr /> <hr />
{ this.props.disabled ? { selection }
null :
<div className="mx_Slider_selection">
<div className="mx_Slider_selectionDot" style={{left: "calc(-0.55em + " + offset + "%)"}} />
<hr style={{width: offset + "%"}} />
</div>
}
</div> </div>
<div className="mx_Slider_dotContainer"> <div className="mx_Slider_dotContainer">
{dots} {dots}
@ -102,7 +104,7 @@ export default class Slider extends React.Component<IProps> {
} }
} }
type DotIProps = { interface IDotProps {
// Callback for behavior onclick // Callback for behavior onclick
onClick: () => void, onClick: () => void,
@ -116,7 +118,7 @@ type DotIProps = {
disabled: boolean; disabled: boolean;
} }
class Dot extends React.PureComponent<DotIProps> { class Dot extends React.PureComponent<IDotProps> {
render(): React.ReactNode { render(): React.ReactNode {
let className = "mx_Slider_dot" let className = "mx_Slider_dot"
if (!this.props.disabled && this.props.active) { if (!this.props.disabled && this.props.active) {