@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1

package/src/Slider/Handle.tsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, MouseEventHandler, useRef, useState } from 'react';
+
+import classNames from '../utils/classNames';
+import {
+    constrainedToPercentage,
+    fromPercentage,
+    toPercentage,
+} from './percentage';
+import { RangeOrValues } from './range';
+
+import './handle.scss';
+
+const useAutoupdatingRef = (value: (number: number) => void) => {
+    const ref = useRef(value);
+    if (ref.current !== value) ref.current = value;
+    return ref;
+};
+
+interface Props {
+    value: number;
+    disabled: boolean;
+    range: RangeOrValues;
+    onChange: (number: number) => void;
+    onChangeComplete?: () => void;
+    sliderWidth?: number;
+}
+
+const noop = () => {};
+const Handle: FC<Props> = ({
+    value,
+    disabled,
+    range,
+    onChange,
+    onChangeComplete = noop,
+    sliderWidth,
+}) => {
+    const [currentlyDragged, setCurrentlyDragged] = useState(false);
+    const percentage = toPercentage(value, range);
+
+    const onMouseDragStart = useRef<{
+        mousePosition: number;
+        percentage: number;
+        lastValue: number;
+    }>();
+
+    // We have to put the callbacks into refs, so that we do not call outdated references later
+    const onChangeRef = useAutoupdatingRef(onChange);
+    const onChangeCompleteRef = useAutoupdatingRef(onChangeComplete);
+
+    const grabHandle: MouseEventHandler<HTMLDivElement> = (
+        event: React.MouseEvent
+    ) => {
+        const sliderWidthStillUnknown = sliderWidth == null;
+        if (sliderWidthStillUnknown) return;
+
+        const mousePosition = event.clientX;
+        const lastValue = value;
+        onMouseDragStart.current = { mousePosition, percentage, lastValue };
+        setCurrentlyDragged(true);
+
+        window.addEventListener('mousemove', dragHandle);
+        window.addEventListener('mouseup', releaseHandle);
+    };
+
+    const dragHandle = (event: MouseEvent) => {
+        const oldMousePosition = onMouseDragStart.current
+            ?.mousePosition as number;
+        const newMousePosition = event.clientX;
+        const percentageChange =
+            ((oldMousePosition - newMousePosition) * 100) /
+            (sliderWidth as number);
+
+        const oldPercentage = onMouseDragStart.current?.percentage as number;
+        const newPercentage = constrainedToPercentage(
+            oldPercentage - percentageChange
+        );
+
+        const lastValue = onMouseDragStart.current?.lastValue as number;
+
+        const newValue = fromPercentage(
+            lastValue,
+            newPercentage,
+            range,
+            event.movementX > 0
+        );
+        onMouseDragStart.current = {
+            mousePosition: oldMousePosition,
+            percentage: oldPercentage,
+            lastValue: newValue,
+        };
+        onChangeRef.current(newValue);
+    };
+
+    const releaseHandle = () => {
+        window.removeEventListener('mousemove', dragHandle);
+        window.removeEventListener('mouseup', releaseHandle);
+        setCurrentlyDragged(false);
+        onChangeCompleteRef.current(0);
+    };
+
+    return (
+        <div
+            className={classNames('handle', currentlyDragged && 'dragged')}
+            style={{ left: `${percentage}%` }}
+            onMouseDown={disabled ? noop : grabHandle}
+            role="slider"
+            tabIndex={disabled ? -1 : 0}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={value}
+        />
+    );
+};
+
+export default Handle;

package/src/Slider/Slider.test.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2022 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import render from '../../test/testrenderer';
+import Slider from './Slider';
+
+describe('Slider component', () => {
+    it('renders correct with ticks', () => {
+        expect(
+            render(
+                <Slider
+                    ticks
+                    values={[2]}
+                    range={{ min: 0, max: 5 }}
+                    onChange={[() => {}]}
+                />
+            ).baseElement
+        ).toMatchSnapshot();
+    });
+});

package/src/Slider/Slider.tsx

@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, useEffect } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import classNames from '../utils/classNames';
+import Bar from './Bar';
+import Handle from './Handle';
+import { toPercentage } from './percentage';
+import { getMin, RangeOrValues, useValidatedRangeOrValues } from './range';
+import Ticks from './Ticks';
+
+import './slider.scss';
+
+const useValidatedArraySizes = (
+    values: readonly number[],
+    onChange: ((v: number) => void)[]
+) => {
+    useEffect(() => {
+        if (values.length === 0)
+            console.error('"values" must contain at least on element');
+        if (values.length !== onChange.length)
+            console.error(
+                `Props 'values' and 'onChange' must have the same size but were ${values} and ${onChange}`
+            );
+    }, [onChange, values]);
+};
+
+export interface Props {
+    id?: string;
+    title?: string;
+    disabled?: boolean;
+    values: readonly number[];
+    range: RangeOrValues;
+    ticks?: boolean;
+    onChange: ((v: number) => void)[];
+    onChangeComplete?: () => void;
+}
+
+const Slider: FC<Props> = ({
+    id,
+    title,
+    disabled = false,
+    values,
+    range: rangeOrValues,
+    ticks,
+    onChange,
+    onChangeComplete,
+}) => {
+    useValidatedArraySizes(values, onChange);
+    useValidatedRangeOrValues(rangeOrValues);
+
+    const { width, ref } = useResizeDetector();
+
+    const valueRange = {
+        min: values.length === 1 ? getMin(rangeOrValues) : Math.min(...values),
+        max: Math.max(...values),
+    };
+
+    return (
+        <div
+            className={classNames('slider', disabled && 'disabled')}
+            id={id}
+            title={title}
+            ref={ref as React.MutableRefObject<HTMLDivElement>}
+        >
+            <Bar
+                start={toPercentage(valueRange.min, rangeOrValues)}
+                end={toPercentage(valueRange.max, rangeOrValues)}
+            />
+            {ticks && <Ticks valueRange={valueRange} range={rangeOrValues} />}
+            {values.map((value, index) => (
+                <Handle
+                    key={index} // eslint-disable-line react/no-array-index-key
+                    value={value}
+                    range={rangeOrValues}
+                    disabled={disabled}
+                    onChange={onChange[index]}
+                    onChangeComplete={onChangeComplete}
+                    sliderWidth={width}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default Slider;

package/src/Slider/Ticks.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, useEffect } from 'react';
+import lodashRange from 'lodash.range';
+
+import classNames from '../utils/classNames';
+import { getStep, isValues, RangeOrValues } from './range';
+
+import './ticks.scss';
+
+interface Props {
+    range: RangeOrValues;
+    valueRange: { min: number; max: number };
+}
+
+const Ticks: FC<Props> = ({ valueRange, range: rangeOrValues }) => {
+    useEffect(() => {
+        if (isValues(rangeOrValues)) {
+            console.error(
+                'Ticks are not yet implemented for explicit values. Not showing ticks.'
+            );
+        }
+    }, [rangeOrValues]);
+
+    if (isValues(rangeOrValues)) {
+        return null;
+    }
+
+    const range = rangeOrValues;
+
+    const step = getStep(range);
+    const isSelected = (value: number) =>
+        value >= valueRange.min && value <= valueRange.max;
+
+    return (
+        <div className="ticks">
+            {lodashRange(range.min, range.max + step, step).map(value => (
+                <div
+                    key={String(value)}
+                    className={classNames(
+                        'tick',
+                        isSelected(value) && 'selected'
+                    )}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default Ticks;

package/src/Slider/__snapshots__/Slider.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider component renders correct with ticks 1`] = `
+<body>
+  <div>
+    <div
+      class="slider"
+    >
+      <div
+        class="bar background"
+      />
+      <div
+        class="bar foreground"
+        style="left: 0%; width: 40%;"
+      />
+      <div
+        class="ticks"
+      >
+        <div
+          class="tick selected"
+        />
+        <div
+          class="tick selected"
+        />
+        <div
+          class="tick selected"
+        />
+        <div
+          class="tick"
+        />
+        <div
+          class="tick"
+        />
+        <div
+          class="tick"
+        />
+      </div>
+      <div
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="2"
+        class="handle"
+        role="slider"
+        style="left: 40%;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</body>
+`;

package/src/Slider/bar.scss

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "./variables";
+
+.slider .bar {
+    position: absolute;
+    top: $handle-radius-selected - 0.5 * $bar-height;
+    height: $bar-height;
+    margin: 0 (-$handle-radius);
+
+    &.background {
+        left: 0;
+        right: 0;
+        background-color: $color-unselected;
+    }
+
+    &.foreground {
+        background-color: $color-selected;
+    }
+}

package/src/Slider/factor.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+// We only care about the decimals of the divisor i.e if divisor has 2 decimal points
+// we will only care if the dividend up to 2 decimal points is divisable by the divisor
+
+export const isFactor = (dividend: number, divisor: number): boolean => {
+    let exp = 0;
+    const originalDivisor = divisor;
+
+    while (divisor !== Number(divisor.toFixed(0))) {
+        divisor = originalDivisor;
+        exp += 1;
+        divisor *= 10 ** exp;
+    }
+
+    divisor = Number(divisor.toFixed(0));
+    dividend = Number((dividend * 10 ** exp).toFixed(0));
+
+    return dividend % divisor === 0;
+};

package/src/Slider/handle.scss

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "./variables";
+
+.slider .handle {
+    position: absolute;
+    border-style: solid;
+    border-radius: 50%;
+    outline: 0;
+
+    border-color: $color-selected;
+    border-width: $handle-radius;
+    top: $handle-radius-selected - $handle-radius;
+    margin-left: -$handle-radius;
+
+    transition-property: border-color, border-width, top, margin-left;
+    transition-duration: 100ms;
+}
+
+.slider:not(.disabled) {
+    .handle:hover, .handle.dragged {
+        border-width: $handle-radius-selected;
+        top: 0;
+        margin-left: -$handle-radius-selected;
+
+        z-index: 1;
+    }
+}

package/src/Slider/percentage.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { getMax, getMin, isValues, RangeOrValues } from './range';
+
+export const constrainedToPercentage = (percentage: number) => {
+    if (percentage < 0) return 0;
+    if (percentage > 100) return 100;
+    return percentage;
+};
+
+export const toPercentage = (value: number, rangeOrValues: RangeOrValues) => {
+    const min = getMin(rangeOrValues);
+    const max = getMax(rangeOrValues);
+
+    return ((value - min) * 100) / (max - min);
+};
+
+export const fromPercentage = (
+    lastValue: number,
+    value: number,
+    rangeOrValues: RangeOrValues,
+    directionForward: boolean
+) => {
+    const min = getMin(rangeOrValues);
+    const max = getMax(rangeOrValues);
+
+    if (isValues(rangeOrValues)) {
+        const values = rangeOrValues;
+        const noOfIndexes = values.length - 1;
+        const computedValue = (value * (max - min)) / 100 + min;
+
+        const lastValueIndex = values.indexOf(lastValue);
+        const closestPrevIndex = lastValueIndex === 0 ? 0 : lastValueIndex - 1;
+        const closestNextIndex =
+            lastValueIndex === noOfIndexes ? noOfIndexes : lastValueIndex + 1;
+
+        let closestIndex = -1;
+
+        if (directionForward) {
+            closestIndex =
+                values[closestNextIndex] > computedValue
+                    ? lastValueIndex
+                    : closestNextIndex;
+        } else {
+            closestIndex =
+                values[closestPrevIndex] < computedValue
+                    ? lastValueIndex
+                    : closestPrevIndex;
+        }
+
+        return values[closestIndex];
+    }
+
+    const range = rangeOrValues;
+    if (range.step != null) {
+        const noOfSteps = (max - min) / range.step;
+        const closestStep = Math.round((value / 100) * noOfSteps);
+
+        return Number((min + closestStep * range.step).toFixed(range.decimals));
+    }
+
+    return Number(((value * (max - min)) / 100 + min).toFixed(range.decimals));
+};

package/src/Slider/range.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { useEffect } from 'react';
+
+import { isFactor } from './factor';
+
+export type Values = readonly number[];
+export type Range = {
+    min: number;
+    max: number;
+    decimals?: number;
+    step?: number; // positive number
+};
+
+export type RangeOrValues = Range | Values;
+
+export const isValues = (
+    rangeOrValues: RangeOrValues
+): rangeOrValues is Values => Array.isArray(rangeOrValues);
+
+export const getMin = (rangeOrValues: RangeOrValues) =>
+    isValues(rangeOrValues) ? rangeOrValues[0] : rangeOrValues.min;
+
+export const getMax = (rangeOrValues: RangeOrValues) =>
+    isValues(rangeOrValues)
+        ? rangeOrValues[rangeOrValues.length - 1]
+        : rangeOrValues.max;
+
+export const getStep = (range: Range) =>
+    range.step != null ? range.step : 0.1 ** (range.decimals ?? 0);
+
+const assert = (expectedToBeTrue: boolean, warning: string) => {
+    if (!expectedToBeTrue) {
+        console.error(warning);
+    }
+};
+
+const validateValues = (values: Values) => {
+    for (let i = 0; i < values.length - 1; i += 1) {
+        assert(
+            values[i] < values[i + 1],
+            `The values of the range must be sorted correctly, but ${
+                values[i]
+            } is larger then ${values[i + 1]} in ${values}`
+        );
+    }
+};
+
+const validateRange = (range: Range) => {
+    assert(
+        !(`explicitRange` in range),
+        'Using `explicitRange` is not supported anymore, use only an array instead of a range object.'
+    );
+
+    assert(
+        range.min < range.max,
+        `range.min must not be higher than range.max: ${JSON.stringify(range)}`
+    );
+
+    if (range.decimals != null)
+        assert(
+            range.decimals >= 0 && Number.isInteger(range.decimals),
+            `range.decimals must be non-negative integer but is ${range.decimals}`
+        );
+
+    if (range.step != null) {
+        assert(
+            range.step > 0,
+            `range.step must be larger than zero but is ${range.step}`
+        );
+        assert(
+            isFactor(range.max - range.min, range.step),
+            `range.step must be a factor of range.max - range.min: ${JSON.stringify(
+                range
+            )}`
+        );
+    }
+};
+
+export const useValidatedRangeOrValues = (rangeOrValues: RangeOrValues) => {
+    useEffect(() => {
+        if (isValues(rangeOrValues)) {
+            validateValues(rangeOrValues);
+        } else {
+            validateRange(rangeOrValues);
+        }
+    }, [rangeOrValues]);
+};

package/src/Slider/slider.scss

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "./variables";
+
+.slider {
+    height: 2*$handle-radius-selected;
+
+    position: relative;
+    margin: 0 $handle-radius;
+}

package/src/Slider/ticks.scss

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "./variables";
+
+.slider .ticks {
+    display: flex;
+    justify-content: space-between;
+    margin-right: -$handle-radius;
+
+    .tick {
+        border-style: solid;
+        border-radius: 50%;
+        outline: 0;
+
+        border-color: $color-unselected;
+        border-width: $tick-radius;
+        margin-top: $handle-radius-selected - $tick-radius;
+        margin-left: -$handle-radius;
+
+        &.selected {
+            border-color: $color-selected;
+        }
+    }
+}

package/src/Slider/variables.scss

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+$bar-height: 2px;
+$handle-radius: 6px;
+$handle-radius-selected: 8px;
+
+$tick-radius: 3px;
+
+$color-selected: $gray-700;
+$color-unselected: $gray-200;