import * as React from 'react'; import { SliderItem } from 'react-compound-slider'; import './SliderBox-tooltip.css'; const { Component, Fragment } = React; // ******************************************************* // TOOLTIP RAIL // ******************************************************* const railStyle: React.CSSProperties = { position: 'absolute', width: '100%', height: 40, borderRadius: 7, cursor: 'pointer', opacity: 0.3, zIndex: 300, border: '1px solid grey', }; const railCenterStyle: React.CSSProperties = { position: 'absolute', width: '100%', height: 14, borderRadius: 7, cursor: 'pointer', pointerEvents: 'none', backgroundColor: 'rgb(155,155,155)', }; interface TooltipRailProps { activeHandleID: string; getRailProps: (props: object) => object; getEventData: (e: Event) => object; } export class TooltipRail extends Component { state = { value: null, percent: null, }; static defaultProps = { disabled: false, }; onMouseEnter = () => { document.addEventListener('mousemove', this.onMouseMove); }; onMouseLeave = () => { this.setState({ value: null, percent: null }); document.removeEventListener('mousemove', this.onMouseMove); }; onMouseMove = (e: Event) => { const { activeHandleID, getEventData } = this.props; if (activeHandleID) { this.setState({ value: null, percent: null }); } else { this.setState(getEventData(e)); } }; render() { const { value, percent } = this.state; const { activeHandleID, getRailProps } = this.props; return ( {!activeHandleID && value ? (
Value: {value}
) : null}
); } } // ******************************************************* // HANDLE COMPONENT // ******************************************************* interface HandleProps { key: string; handle: SliderItem; isActive: boolean; disabled?: boolean; domain: number[]; getHandleProps: (id: string, config: object) => object; } export class Handle extends Component { static defaultProps = { disabled: false, }; state = { mouseOver: false, }; onMouseEnter = () => { this.setState({ mouseOver: true }); }; onMouseLeave = () => { this.setState({ mouseOver: false }); }; render() { const { domain: [min, max], handle: { id, value, percent }, isActive, disabled, getHandleProps, } = this.props; const { mouseOver } = this.state; return ( {(mouseOver || isActive) && !disabled ? (
Value: {value}
) : null}
); } } // ******************************************************* // TRACK COMPONENT // ******************************************************* interface TrackProps { source: SliderItem; target: SliderItem; disabled: boolean; getTrackProps: () => object; } export function Track({ source, target, getTrackProps, disabled = false }: TrackProps) { return (
); } // ******************************************************* // TICK COMPONENT // ******************************************************* interface TickProps { tick: SliderItem; count: number; format: (val: number) => string; } const defaultFormat = () => `d`; export function Tick({ tick, count, format = defaultFormat }: TickProps) { return (
{format(tick.value)}
); }