@nordicsemiconductor/pc-nrfconnect-shared 60.0.0-pre1 → 60.0.0-pre2

package/src/Slider/Handle.tsx

@@ -1,121 +0,0 @@
-/*
- * 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

@@ -1,25 +0,0 @@
-/*
- * 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

@@ -1,91 +0,0 @@
-/*
- * 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

@@ -1,54 +0,0 @@
-/*
- * 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

@@ -1,50 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-/*
- * 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

@@ -1,24 +0,0 @@
-/*
- * 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

@@ -1,32 +0,0 @@
-/*
- * 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

@@ -1,67 +0,0 @@
-/*
- * 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

@@ -1,92 +0,0 @@
-/*
- * 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

@@ -1,14 +0,0 @@
-/*
- * 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

@@ -1,28 +0,0 @@
-/*
- * 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

@@ -1,16 +0,0 @@
-/*
- * 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;