APP-3311: threshold (#166)

* APP-3311: threshold * dont force color
habx · Feb 20, 2019 · 03c120d · 03c120d
1 parent 719ef7b
commit 03c120d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/src/Slider/Slider.interface.ts b/src/Slider/Slider.interface.ts
@@ -10,4 +10,5 @@ export default interface SliderProps extends Input<value> {
   step?: number
   labelFormatter?: (label) => string
   range?: boolean
+  indicators?: { color?: string, range: [number, number]}[]
 }
diff --git a/src/Slider/Slider.stories.tsx b/src/Slider/Slider.stories.tsx
@@ -55,5 +55,16 @@ storiesOf('Inputs/Slider', module)
     return <EnhancedSlider />
   })
   .add('with custom color', () => (
-    <Slider onChange={action('Slider change')} value={40} color={colors.trueBlue} />
+    <Slider onChange={action('Slider change')} value={40} color={colors.internationalOrange} />
+  ))
+  .add('with indicators', () => (
+    <Slider
+      range
+      onChange={action('Slider change')}
+      value={[40, 60]}
+      indicators={[
+        { color: colors.popstar, range: [0, 15] },
+        { color: colors.oldLace, range: [90, 100] }
+      ]}
+    />
   ))
diff --git a/src/Slider/Slider.style.tsx b/src/Slider/Slider.style.tsx
@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components'
+import colors from '../colors'
 
 export const Label = styled.span.attrs(({ value, max }) => ({
   style: {
@@ -35,6 +36,7 @@ export const RcSliderStyle = styled.div`
     border-radius: 6px;
   }
   .rc-slider-track {
+    z-index: 5;
     position: absolute;
     left: 0;
     height: 8px;
@@ -47,6 +49,7 @@ export const RcSliderStyle = styled.div`
     position: absolute;
     margin-left: -7px;
     margin-top: -5px;
+    z-index: 5;
 
     cursor: pointer;
     cursor: -webkit-grab;
@@ -269,3 +272,21 @@ export const SliderContainer = styled(RcSliderStyle)`
     filter: grayscale();
   `};
 `
+
+export const SliderIndicator = styled.div`
+  position: absolute;
+  background-color: ${({ color }) => color || colors.internationalOrange};
+  width: ${({ size }) => size}%;
+  left: ${({ position }) => position}%;
+  height: 4px;
+  top: 5px;
+  border-radius: 8px;
+  z-index: 4;
+`
+
+export const SliderHandlerIndicator = styled.div`
+  margin: 25% auto auto;
+  height: 50%;
+  width: 50%;
+  border-radius: 100%;
+`
diff --git a/src/Slider/Slider.tsx b/src/Slider/Slider.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { withTheme } from 'styled-components'
-import BaseSlider, { Range } from 'rc-slider'
-import { omit } from 'lodash'
+import BaseSlider, { Range, Handle } from 'rc-slider'
+import { omit, max as lodashMax, min as lodashMin, inRange } from 'lodash'
 
 import withLabel from '../withLabel'
 import { getMainColor } from '../_internal/colors'
 
-import { SliderContainer, Label } from './Slider.style'
+import { SliderContainer, Label, SliderIndicator, SliderHandlerIndicator } from './Slider.style'
 import SliderProps from './Slider.interface'
 
 const INTERNAL_PROPS = [
@@ -18,7 +18,8 @@ const INTERNAL_PROPS = [
   'step',
   'labelFormatter',
   'value',
-  'error'
+  'error',
+  'indicators'
 ]
 
 class Slider extends React.Component<SliderProps> {
@@ -30,7 +31,8 @@ class Slider extends React.Component<SliderProps> {
     toolTipSuffix: '',
     min: 0,
     max: 100,
-    step: 5
+    step: 5,
+    indicators: []
   }
 
   static getDerivedStateFromProps (nextProps, prevState) {
@@ -79,6 +81,7 @@ class Slider extends React.Component<SliderProps> {
       min,
       step,
       labelFormatter,
+      indicators,
       error
     } = this.props
     const { value } = this.state
@@ -98,6 +101,14 @@ class Slider extends React.Component<SliderProps> {
 
     return (
       <SliderContainer color={mainColor} {...innerProps}>
+        {indicators.map(({ color, range }) =>
+          <SliderIndicator
+            key={range.join('.')}
+            color={color}
+            size={(lodashMax(range) - lodashMin(range)) / realMax * 100}
+            position={lodashMin(range) / realMax * 100}
+          />
+        )}
         <SliderComponent
           onAfterChange={this.handleChange}
           onChange={this.handleLocalChange}
@@ -106,6 +117,18 @@ class Slider extends React.Component<SliderProps> {
           max={realMax}
           min={realMin}
           step={customValues ? 1 : step}
+          handle={handleProps => {
+            const handleColor = indicators.reduce((currentColor, indicator) =>
+              inRange(handleProps.value, lodashMin(indicator.range), lodashMax(indicator.range) + 1)
+                ? indicator.color
+                : currentColor
+              , null)
+            return (
+              <Handle {...handleProps}>
+                <SliderHandlerIndicator style={{ backgroundColor: handleColor }} />
+              </Handle>
+            )
+          }}
         />
         <Label
           value={isValueArray ? value[0] : value} max={realMax}