[Chore] Typescript 'components/common/slider' (#1740)

Signed-off-by: Victor Belomestnov <belom88@yandex.ru>

src/components/common/animation-control/animation-control.js

@@ -118,7 +118,6 @@ function AnimationControlFactory(PlaybackControls, FloatingTimeDisplay) {
           </StyledDomain>
           <SliderWrapper className="animation-control__slider">
             <Slider
-              showValues={false}
               isRanged={false}
               step={step}
               minValue={domain ? domain[0] : 0}

src/components/common/range-slider.tsx

@@ -279,14 +279,13 @@ export default function RangeSliderFactory(RangePlot: ReturnType<typeof RangePlo
                 ) : null}
                 <Slider
                   marks={this.props.marks}
-                  showValues={false}
                   isRanged={isRanged}
                   minValue={range[0]}
                   maxValue={range[1]}
                   value0={this.props.value0}
                   value1={this.props.value1}
                   step={step}
-                  handleWidth={sliderHandleWidth}
+                  sliderHandleWidth={sliderHandleWidth}
                   onSlider0Change={this._setRangeVal0}
                   onSlider1Change={this._setRangeVal1}
                   onSliderBarChange={(val0, val1) => {

src/components/common/slider/mouse-event.ts

@@ -0,0 +1,113 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import document from 'global/document';
+import {RefObject} from 'react';
+import {StyleRangeSliderType} from './slider';
+
+function nope(...args) {}
+
+type MouseEventHandlerProps = {
+  vertical: boolean;
+  valueListener: (distance: number) => void;
+  toggleMouseOver: () => void;
+  track: RefObject<StyleRangeSliderType>;
+  setAnchor?: null | ((distance: number) => void);
+};
+
+export default class MouseEventHandler {
+  private vertical: boolean;
+  private valueListener: (distance: number) => void;
+  private toggleMouseOver: () => void;
+  private track: RefObject<StyleRangeSliderType>; // Set correct type
+  private setAnchor: null | ((distance: number) => void); // Set correct type
+
+  constructor({
+    vertical = false,
+    valueListener = nope,
+    toggleMouseOver = nope,
+    track,
+    setAnchor = null
+  }: MouseEventHandlerProps) {
+    this.vertical = vertical;
+    this.valueListener = valueListener;
+    this.toggleMouseOver = toggleMouseOver;
+    this.track = track;
+    this.setAnchor = setAnchor;
+  }
+
+  handleMouseDown = (e: MouseEvent) => {
+    document.addEventListener('mouseup', this.mouseup);
+    document.addEventListener('mousemove', this.mousemove);
+    if (this.setAnchor) {
+      const pos = this.getMousePos(e);
+      this.setAnchor(this.getDistanceToTrack(pos));
+    }
+    this.toggleMouseOver();
+  };
+
+  private getMousePos(e: MouseEvent) {
+    return this.vertical ? e.clientY : e.clientX;
+  }
+
+  private getTouchPosition(e: TouchEvent) {
+    return this.vertical ? e.touches[0].clientY : e.touches[0].clientX;
+  }
+
+  private mouseup = () => {
+    document.removeEventListener('mouseup', this.mouseup);
+    document.removeEventListener('mousemove', this.mousemove);
+    this.toggleMouseOver();
+  };
+
+  private getDistanceToTrack(pos: number) {
+    const trackRect = this.track.current.getBoundingClientRect();
+    return pos - (this.vertical ? trackRect.bottom : trackRect.left);
+  }
+
+  private mousemove = (e: MouseEvent) => {
+    e.preventDefault();
+    const pos = this.getMousePos(e);
+    this.valueListener(this.getDistanceToTrack(pos));
+  };
+
+  handleTouchStart = (e: TouchEvent) => {
+    // TODO: fix touch event
+    document.addEventListener('touchend', this.touchend);
+    document.addEventListener('touchmove', this.touchmove);
+    if (this.setAnchor) {
+      const pos = this.getTouchPosition(e);
+      this.setAnchor(this.getDistanceToTrack(pos));
+    }
+    this.toggleMouseOver();
+  };
+
+  private touchmove = (e: TouchEvent) => {
+    // TODO: touch not tested
+    const pos = this.getTouchPosition(e);
+    this.valueListener(this.getDistanceToTrack(pos));
+  };
+
+  private touchend = () => {
+    document.removeEventListener('touchend', this.touchend);
+    document.removeEventListener('touchmove', this.touchmove);
+    this.toggleMouseOver();
+  };
+}

src/components/common/slider/slider-bar-handle.js → src/components/common/slider/slider-bar-handle.tsx

@@ -18,11 +18,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component, RefObject} from 'react';
 import classnames from 'classnames';
 import styled from 'styled-components';
 import MouseEventHandler from './mouse-event';
+import {StyleRangeSliderType} from './slider';
 
 const StyledSlider = styled.div`
   position: relative;
@@ -37,22 +37,26 @@ const StyledSlider = styled.div`
 
 function nope() {}
 
-export default class SliderBarHandle extends Component {
-  static propTypes = {
-    width: PropTypes.number,
-    left: PropTypes.string,
-    sliderBarListener: PropTypes.func,
-    enableBarDrag: PropTypes.bool,
-    vertical: PropTypes.bool
-  };
+type SliderBarHandleProps = {
+  width: number;
+  v0Left: number;
+  sliderBarListener: (distance: number) => void;
+  enableBarDrag: boolean;
+  vertical: boolean;
+  track: RefObject<StyleRangeSliderType>;
+  setAnchor: (distance: number) => void;
+};
 
+export default class SliderBarHandle extends Component {
   static defaultProps = {
     sliderBarListener: nope,
     enableBarDrag: false,
     vertical: false
   };
 
-  constructor(props) {
+  public mouseEvent: MouseEventHandler;
+
+  constructor(public props: SliderBarHandleProps) {
     super(props);
     this.mouseEvent = new MouseEventHandler({
       vertical: props.vertical,

src/components/common/slider/slider-handle.js → src/components/common/slider/slider-handle.tsx

@@ -18,11 +18,11 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component, createRef} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component, createRef, CSSProperties, RefObject} from 'react';
 import classnames from 'classnames';
 import styled from 'styled-components';
 import MouseEventHandler from './mouse-event';
+import {StyleRangeSliderType} from './slider';
 
 const StyledSliderHandle = styled.span.attrs({
   className: 'kg-range-slider__handle'
@@ -107,23 +107,38 @@ const StyledSliderTooltip = styled.div`
   }
 `;
 
-const SliderTooltip = ({value, format = val => val, style, sliderHandleWidth}) => {
+type SliderTooltipProps = {
+  value?: number | null;
+  format?: (value: number | null | undefined) => number | null | undefined;
+  style: CSSProperties;
+  sliderHandleWidth: number;
+};
+
+const SliderTooltip = ({
+  value,
+  format = val => val,
+  style,
+  sliderHandleWidth
+}: SliderTooltipProps) => {
   return (
     <StyledSliderTooltip sliderHandleWidth={sliderHandleWidth} style={style}>
       {format(value)}
     </StyledSliderTooltip>
   );
 };
 
-export default class SliderHandle extends Component {
-  static propTypes = {
-    sliderHandleWidth: PropTypes.number,
-    left: PropTypes.string,
-    display: PropTypes.bool,
-    valueListener: PropTypes.func,
-    vertical: PropTypes.bool
-  };
+type SliderHandleProps = {
+  sliderHandleWidth: number;
+  left: string;
+  display: boolean;
+  valueListener: (distance: number) => void;
+  vertical: boolean;
+  track: RefObject<StyleRangeSliderType>;
+  showTooltip: boolean;
+  value?: number;
+};
 
+export default class SliderHandle extends Component {
   static defaultProps = {
     sliderHandleWidth: 12,
     left: '50%',
@@ -133,7 +148,9 @@ export default class SliderHandle extends Component {
     showTooltip: false
   };
 
-  constructor(props) {
+  public mouseEvent: MouseEventHandler;
+
+  constructor(public props: SliderHandleProps) {
     super(props);
 
     this.mouseEvent = new MouseEventHandler({