diff options
Diffstat (limited to 'src/client/views/nodes/SliderBox-components.tsx')
| -rw-r--r-- | src/client/views/nodes/SliderBox-components.tsx | 114 |
1 files changed, 53 insertions, 61 deletions
diff --git a/src/client/views/nodes/SliderBox-components.tsx b/src/client/views/nodes/SliderBox-components.tsx index e19f28f08..b9f215d77 100644 --- a/src/client/views/nodes/SliderBox-components.tsx +++ b/src/client/views/nodes/SliderBox-components.tsx @@ -1,6 +1,6 @@ -import * as React from "react"; -import { SliderItem } from "react-compound-slider"; -import "./SliderBox-tooltip.css"; +import * as React from 'react'; +import { SliderItem } from 'react-compound-slider'; +import './SliderBox-tooltip.css'; const { Component, Fragment } = React; @@ -8,24 +8,24 @@ const { Component, Fragment } = React; // TOOLTIP RAIL // ******************************************************* const railStyle: React.CSSProperties = { - position: "absolute", - width: "100%", + position: 'absolute', + width: '100%', height: 40, borderRadius: 7, - cursor: "pointer", + cursor: 'pointer', opacity: 0.3, zIndex: 300, - border: "1px solid grey" + border: '1px solid grey', }; const railCenterStyle: React.CSSProperties = { - position: "absolute", - width: "100%", + position: 'absolute', + width: '100%', height: 14, borderRadius: 7, - cursor: "pointer", - pointerEvents: "none", - backgroundColor: "rgb(155,155,155)" + cursor: 'pointer', + pointerEvents: 'none', + backgroundColor: 'rgb(155,155,155)', }; interface TooltipRailProps { @@ -37,21 +37,21 @@ interface TooltipRailProps { export class TooltipRail extends Component<TooltipRailProps> { state = { value: null, - percent: null + percent: null, }; static defaultProps = { - disabled: false + disabled: false, }; onMouseEnter = () => { - document.addEventListener("mousemove", this.onMouseMove); - } + document.addEventListener('mousemove', this.onMouseMove); + }; onMouseLeave = () => { this.setState({ value: null, percent: null }); - document.removeEventListener("mousemove", this.onMouseMove); - } + document.removeEventListener('mousemove', this.onMouseMove); + }; onMouseMove = (e: Event) => { const { activeHandleID, getEventData } = this.props; @@ -61,7 +61,7 @@ export class TooltipRail extends Component<TooltipRailProps> { } else { this.setState(getEventData(e)); } - } + }; render() { const { value, percent } = this.state; @@ -73,11 +73,10 @@ export class TooltipRail extends Component<TooltipRailProps> { <div style={{ left: `${percent}%`, - position: "absolute", - marginLeft: "-11px", - marginTop: "-35px" - }} - > + position: 'absolute', + marginLeft: '-11px', + marginTop: '-35px', + }}> <div className="tooltip"> <span className="tooltiptext">Value: {value}</span> </div> @@ -87,7 +86,7 @@ export class TooltipRail extends Component<TooltipRailProps> { style={railStyle} {...getRailProps({ onMouseEnter: this.onMouseEnter, - onMouseLeave: this.onMouseLeave + onMouseLeave: this.onMouseLeave, })} /> <div style={railCenterStyle} /> @@ -110,20 +109,20 @@ interface HandleProps { export class Handle extends Component<HandleProps> { static defaultProps = { - disabled: false + disabled: false, }; state = { - mouseOver: false + mouseOver: false, }; onMouseEnter = () => { this.setState({ mouseOver: true }); - } + }; onMouseLeave = () => { this.setState({ mouseOver: false }); - } + }; render() { const { @@ -131,7 +130,7 @@ export class Handle extends Component<HandleProps> { handle: { id, value, percent }, isActive, disabled, - getHandleProps + getHandleProps, } = this.props; const { mouseOver } = this.state; @@ -141,11 +140,10 @@ export class Handle extends Component<HandleProps> { <div style={{ left: `${percent}%`, - position: "absolute", - marginLeft: "-11px", - marginTop: "-35px" - }} - > + position: 'absolute', + marginLeft: '-11px', + marginTop: '-35px', + }}> <div className="tooltip"> <span className="tooltiptext">Value: {value}</span> </div> @@ -158,21 +156,21 @@ export class Handle extends Component<HandleProps> { aria-valuenow={value} style={{ left: `${percent}%`, - position: "absolute", - marginLeft: "-11px", - marginTop: "-6px", + position: 'absolute', + marginLeft: '-11px', + marginTop: '-6px', zIndex: 400, width: 24, height: 24, - cursor: "pointer", + cursor: 'pointer', border: 0, - borderRadius: "50%", - boxShadow: "1px 1px 1px 1px rgba(0, 0, 0, 0.4)", - backgroundColor: disabled ? "#666" : "#3e1db3" + borderRadius: '50%', + boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.4)', + backgroundColor: disabled ? '#666' : '#3e1db3', }} {...getHandleProps(id, { onMouseEnter: this.onMouseEnter, - onMouseLeave: this.onMouseLeave + onMouseLeave: this.onMouseLeave, })} /> </Fragment> @@ -190,23 +188,18 @@ interface TrackProps { getTrackProps: () => object; } -export function Track({ - source, - target, - getTrackProps, - disabled = false -}: TrackProps) { +export function Track({ source, target, getTrackProps, disabled = false }: TrackProps) { return ( <div style={{ - position: "absolute", + position: 'absolute', height: 14, zIndex: 1, - backgroundColor: disabled ? "#999" : "#3e1db3", + backgroundColor: disabled ? '#999' : '#3e1db3', borderRadius: 7, - cursor: "pointer", + cursor: 'pointer', left: `${source.percent}%`, - width: `${target.percent - source.percent}%` + width: `${target.percent - source.percent}%`, }} {...getTrackProps()} /> @@ -229,25 +222,24 @@ export function Tick({ tick, count, format = defaultFormat }: TickProps) { <div> <div style={{ - position: "absolute", + position: 'absolute', marginTop: 20, width: 1, height: 5, - backgroundColor: "rgb(200,200,200)", - left: `${tick.percent}%` + backgroundColor: 'rgb(200,200,200)', + left: `${tick.percent}%`, }} /> <div style={{ - position: "absolute", + position: 'absolute', marginTop: 25, fontSize: 10, - textAlign: "center", + textAlign: 'center', marginLeft: `${-(100 / count) / 2}%`, width: `${100 / count}%`, - left: `${tick.percent}%` - }} - > + left: `${tick.percent}%`, + }}> {format(tick.value)} </div> </div> |