[Chore]: Technical: Fixed errors happening in folders/files due to th…

…e addition of @types/styled-components: components/common/slider (#1831)

* Fix errors happening in components/common/slider

Signed-off-by: Mikhail Gorbachev <mikhail.gorbachev@actionengine.com>

* fix attributes of styled components slider-handle

Signed-off-by: Mikhail Gorbachev <mikhail.gorbachev@actionengine.com>

* add changes due to code review

Signed-off-by: Mikhail Gorbachev <mikhail.gorbachev@actionengine.com>

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

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import document from 'global/document';
-import {RefObject} from 'react';
+import {RefObject, TouchEvent, TouchEventHandler, MouseEventHandler as ReactMouseEventHandler, MouseEvent} from 'react';
 import {StyleRangeSliderType} from './slider';
 
 function nope(...args) {}
@@ -53,7 +53,7 @@ export default class MouseEventHandler {
     this.setAnchor = setAnchor;
   }
 
-  handleMouseDown = (e: MouseEvent) => {
+  handleMouseDown: ReactMouseEventHandler = (e: MouseEvent) => {
     document.addEventListener('mouseup', this.mouseup);
     document.addEventListener('mousemove', this.mousemove);
     if (this.setAnchor) {
@@ -78,6 +78,9 @@ export default class MouseEventHandler {
   };
 
   private getDistanceToTrack(pos: number) {
+    if (!this.track.current) {
+      return 0;
+    }
     const trackRect = this.track.current.getBoundingClientRect();
     return pos - (this.vertical ? trackRect.bottom : trackRect.left);
   }
@@ -88,7 +91,7 @@ export default class MouseEventHandler {
     this.valueListener(this.getDistanceToTrack(pos));
   };
 
-  handleTouchStart = (e: TouchEvent) => {
+  handleTouchStart: TouchEventHandler = (e: TouchEvent) => {
     // TODO: fix touch event
     document.addEventListener('touchend', this.touchend);
     document.addEventListener('touchmove', this.touchmove);

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

@@ -24,7 +24,12 @@ import styled from 'styled-components';
 import MouseEventHandler from './mouse-event';
 import {StyleRangeSliderType} from './slider';
 
-const StyledSlider = styled.div`
+interface StyledSliderProps {
+  active?: boolean;
+  vertical?: boolean;
+}
+
+const StyledSlider = styled.div<StyledSliderProps>`
   position: relative;
   background-color: ${props =>
     props.active ? props.theme.sliderBarHoverColor : props.theme.sliderBarColor};

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

@@ -24,9 +24,15 @@ import styled from 'styled-components';
 import MouseEventHandler from './mouse-event';
 import {StyleRangeSliderType} from './slider';
 
-const StyledSliderHandle = styled.span.attrs({
-  className: 'kg-range-slider__handle'
-})`
+interface StyledSliderHandleProps {
+  vertical?: boolean;
+  sliderHandleWidth: number;
+  active?: boolean;
+}
+
+const StyledSliderHandle = styled.span.attrs(props => ({
+  className: classnames('kg-range-slider__handle', {[props.className]: props.className})
+}))<StyledSliderHandleProps>`
   position: absolute;
   z-index: 10;
   ${props => (props.vertical ? 'margin-left' : 'margin-top')}: -${props =>
@@ -64,7 +70,13 @@ const StyledSliderHandle = styled.span.attrs({
   }
 `;
 
-const StyledSliderTooltip = styled.div`
+interface StyledSliderTooltipProps {
+  vertical?: boolean;
+  sliderHandleWidth: number;
+  active?: boolean;
+}
+
+const StyledSliderTooltip = styled.div<StyledSliderTooltipProps>`
   position: absolute;
   border-radius: 3px;
   display: inline-block;
@@ -162,7 +174,7 @@ export default class SliderHandle extends Component {
   }
 
   state = {mouseOver: false};
-  ref = createRef();
+  ref = createRef<typeof StyledSliderHandle & HTMLSpanElement>(); // Set correct type
 
   toggleMouseOver = () => {
     this.setState({mouseOver: !this.state.mouseOver});

src/components/common/slider/slider.tsx

@@ -28,16 +28,25 @@ import {normalizeSliderValue, clamp} from 'utils/data-utils';
 
 function noop() {}
 
-const StyledRangeSlider = styled.div`
+interface StyledRangeSliderProps {
+  vertical?: boolean;
+}
+
+const StyledRangeSlider = styled.div<StyledRangeSliderProps>`
   position: relative;
   background-color: ${props => props.theme.sliderBarBgd};
   ${props => `${props.vertical ? 'width' : 'height'}: ${props.theme.sliderBarHeight}px`};
   ${props => `${props.vertical ? 'height' : 'width'}: 100%`};
 `;
 
-export type StyleRangeSliderType = typeof StyledRangeSlider;
+export type StyleRangeSliderType = typeof StyledRangeSlider & HTMLDivElement;
+
+interface SliderWrapperProps {
+  isRanged?: boolean;
+  vertical?: boolean;
+}
 
-const SliderWrapper = styled.div`
+const SliderWrapper = styled.div<SliderWrapperProps>`
   flex-grow: 1;
 `;
 
@@ -82,7 +91,7 @@ export default class Slider extends Component {
 
   private anchor: number = 0;
 
-  public ref: RefObject<typeof SliderWrapper> = createRef<typeof SliderWrapper>();
+  public ref: RefObject<typeof SliderWrapper & HTMLDivElement> = createRef<typeof SliderWrapper & HTMLDivElement>();
   public track: RefObject<StyleRangeSliderType> = createRef<StyleRangeSliderType>();
 
   constructor(public props: SliderProps) {
@@ -95,6 +104,9 @@ export default class Slider extends Component {
   };
 
   private getBaseDistance() {
+    if (!this.ref.current) {
+      return 0;
+    }
     return this.props.vertical ? this.ref.current.offsetHeight : this.ref.current.offsetWidth;
   }