From 650eac149aaa05e105ae95c8d8459aeaee1fba40 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Mon, 14 Sep 2020 10:53:16 +0100 Subject: [PATCH] feat(RangeSlider): Colour code ticks with thresholds --- .../src/components/_range-slider.scss | 8 ++++--- .../src/components/RangeSlider/Slider.tsx | 1 + .../src/components/RangeSlider/Tick.tsx | 23 +++++++++++++++++-- 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/css-framework/src/components/_range-slider.scss b/packages/css-framework/src/components/_range-slider.scss index cfba2454a5..8eba5ae904 100644 --- a/packages/css-framework/src/components/_range-slider.scss +++ b/packages/css-framework/src/components/_range-slider.scss @@ -122,14 +122,17 @@ $range-slider-above-thresholds: f.color("action", "500"); cursor: pointer; } +.rn-rangeslider__tick--below-first-threshold, .rn-rangeslider__track--below-first-threshold { background-color: $range-slider-track-below-first-threshold; } +.rn-rangeslider__tick--between-thresholds, .rn-rangeslider__track--between-thresholds { background-color: $range-slider-track-between-thresholds; } +.rn-rangeslider__tick--above-thresholds, .rn-rangeslider__track--above-thresholds { background-color: $range-slider-above-thresholds; } @@ -148,10 +151,9 @@ $range-slider-above-thresholds: f.color("action", "500"); width: 2px; height: 12px; transform: translateY(-50%); - background-color: $range-slider-bg-colour; - &.is-active { - background-color: $range-slider-track-colour; + &:not(.is-active) { + background-color: $range-slider-bg-colour; } } diff --git a/packages/react-component-library/src/components/RangeSlider/Slider.tsx b/packages/react-component-library/src/components/RangeSlider/Slider.tsx index d5618814ae..82a2e315f8 100644 --- a/packages/react-component-library/src/components/RangeSlider/Slider.tsx +++ b/packages/react-component-library/src/components/RangeSlider/Slider.tsx @@ -141,6 +141,7 @@ export const RangeSlider: React.FC = ({ values={sliderValues} domain={domain} isReversed={isReversed} + thresholds={thresholds} /> ))} diff --git a/packages/react-component-library/src/components/RangeSlider/Tick.tsx b/packages/react-component-library/src/components/RangeSlider/Tick.tsx index 2312c61209..df02f62cca 100644 --- a/packages/react-component-library/src/components/RangeSlider/Tick.tsx +++ b/packages/react-component-library/src/components/RangeSlider/Tick.tsx @@ -9,11 +9,12 @@ interface TickProps { values: ReadonlyArray domain: ReadonlyArray isReversed?: boolean + thresholds?: number[] } function isActive(values: ReadonlyArray, tickValue: number): boolean { - const valuesBelow = values.some(item => item <= tickValue) - const valuesAbove = values.some(item => item >= tickValue) + const valuesBelow = values.some((item) => item <= tickValue) + const valuesAbove = values.some((item) => item >= tickValue) const belowSingleHandle = values.length === 1 && values[0] >= tickValue const betweenMultipleHandles = valuesBelow && valuesAbove @@ -21,6 +22,21 @@ function isActive(values: ReadonlyArray, tickValue: number): boolean { return belowSingleHandle || betweenMultipleHandles } +function getThresholdClasses(percent: number, thresholds: number[]) { + const singleThreshold = thresholds?.length === 1 + const doubleThreshold = thresholds?.length === 2 + + return { + 'rn-rangeslider__tick--below-first-threshold': + (singleThreshold || doubleThreshold) && percent <= thresholds[0], + 'rn-rangeslider__tick--between-thresholds': + doubleThreshold && percent < thresholds[1] && percent >= thresholds[0], + 'rn-rangeslider__tick--above-thresholds': + (singleThreshold || doubleThreshold) && + percent >= thresholds[thresholds.length - 1], + } +} + export const Tick: React.FC = ({ tick, count, @@ -28,11 +44,14 @@ export const Tick: React.FC = ({ values, domain, isReversed, + thresholds, }) => { const percent: number = isReversed ? 100 - tick.percent : tick.percent // invert if reversed const tickValue: number = (domain[1] / 100) * percent + const tickClasses = classNames('rn-rangeslider__tick', { 'is-active': isActive(values, tickValue), + ...getThresholdClasses(percent, thresholds), }) return (