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

package/src/SidePanel/Group.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useContext, useRef } from 'react';
+import Accordion from 'react-bootstrap/Accordion';
+import AccordionContext from 'react-bootstrap/AccordionContext';
+import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
+
+import PseudoButton from '../PseudoButton/PseudoButton';
+import classNames from '../utils/classNames';
+
+import './group.scss';
+
+const Heading = ({ label, title }: { label?: string; title?: string }) =>
+    label == null ? null : (
+        <h2 className="heading" title={title}>
+            {label}
+        </h2>
+    );
+
+const ContextAwareToggle = ({
+    heading,
+    title,
+    eventKey,
+    onToggled,
+}: {
+    heading: string;
+    title?: string;
+    eventKey: string;
+    onToggled?: ((isNowExpanded: boolean) => void) | null;
+}) => {
+    const currentEventKey = useContext(AccordionContext);
+    const isCurrentEventKey = currentEventKey === eventKey;
+    const decoratedOnClick = useAccordionToggle(
+        eventKey,
+        () => onToggled && onToggled(!isCurrentEventKey)
+    );
+
+    return (
+        <PseudoButton
+            onClick={decoratedOnClick}
+            className={classNames('group-toggle', isCurrentEventKey && 'show')}
+        >
+            <Heading label={heading} title={title} />
+            <span className="mdi mdi-chevron-down" />
+        </PseudoButton>
+    );
+};
+
+export const CollapsibleGroup = ({
+    className = '',
+    heading,
+    title,
+    children = null,
+    defaultCollapsed = true,
+    onToggled,
+}: {
+    className?: string;
+    heading: string;
+    title?: string;
+    children?: React.ReactNode;
+    defaultCollapsed?: boolean | null;
+    onToggled?: ((isNowExpanded: boolean) => void) | null;
+}) => {
+    const eventKey = useRef(Math.random().toString());
+
+    return (
+        <div className={`sidepanel-group ${className}`}>
+            <Accordion
+                defaultActiveKey={defaultCollapsed ? '' : eventKey.current}
+            >
+                <div className="collapse-container">
+                    <ContextAwareToggle
+                        heading={heading}
+                        title={title}
+                        eventKey={eventKey.current}
+                        onToggled={onToggled}
+                    />
+                    <Accordion.Collapse eventKey={eventKey.current}>
+                        <div className="body">{children}</div>
+                    </Accordion.Collapse>
+                </div>
+            </Accordion>
+        </div>
+    );
+};
+
+export const Group = ({
+    className = '',
+    heading,
+    title,
+    children,
+}: {
+    className?: string;
+    heading?: string;
+    title?: string;
+    children?: React.ReactNode;
+}) => (
+    <div className={`sidepanel-group ${className}`}>
+        <Heading label={heading} title={title} />
+        <div className="body">{children}</div>
+    </div>
+);

package/src/SidePanel/SidePanel.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React from 'react';
+
+import './sidepanel.scss';
+
+const SidePanel = ({
+    children,
+    className = '',
+}: {
+    children?: React.ReactNode;
+    className?: string;
+}) => <div className={`core19-side-panel ${className}`}>{children}</div>;
+
+export default SidePanel;

package/src/SidePanel/group.scss

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+.sidepanel-group {
+    .body {
+        > * {
+            margin-bottom: 8px;
+        }
+
+        > *:last-child {
+            margin-bottom: 0px;
+        }
+    }
+
+    .heading {
+        margin-bottom: 16px;
+
+        font-size: 10px;
+        font-weight: normal;
+        letter-spacing: 0.5ex;
+
+        text-transform: uppercase;
+    }
+
+    .group-toggle {
+        display: flex;
+        justify-content: space-between;
+
+        .mdi-chevron-down::before {
+            font-size: 20px;
+            position: relative;
+            top: -9px;
+        }
+
+        &.show .mdi-chevron-down::before {
+            transform: rotate(180deg);
+        }
+    }
+}

package/src/SidePanel/sidepanel.scss

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import '../variables';
+
+.core19-side-panel {
+    font-size: 12px;
+    color: $gray-700;
+
+    > * {
+        margin-top: 32px;
+
+        &:last-child {
+            margin-bottom: 32px;
+        }
+    }
+}

package/src/Slider/Bar.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import './bar.scss';
+
+const Bar: FC<{ start: number; end: number }> = ({ start, end }) => (
+    <>
+        <div className="bar background" />
+        <div
+            className="bar foreground"
+            style={{
+                left: `${start}%`,
+                width: `${end - start}%`,
+            }}
+        />
+    </>
+);
+
+export default Bar;

package/src/Slider/Factor.test.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { isFactor } from './factor';
+
+describe('Factor', () => {
+    it('Test valid integer factors ', () => {
+        expect(isFactor(20, 5)).toBe(true);
+        expect(isFactor(28, 2)).toBe(true);
+        expect(isFactor(27, 3)).toBe(true);
+        expect(isFactor(27, 9)).toBe(true);
+        expect(isFactor(144, 12)).toBe(true);
+        expect(isFactor(21, 7)).toBe(true);
+    });
+
+    it('Test invalid integer factors ', () => {
+        expect(isFactor(20, 6)).toBe(false);
+        expect(isFactor(28, 3)).toBe(false);
+        expect(isFactor(27, 4)).toBe(false);
+        expect(isFactor(27, 10)).toBe(false);
+        expect(isFactor(144, 11)).toBe(false);
+        expect(isFactor(21, 8)).toBe(false);
+    });
+
+    it('Test valid decimal factors ', () => {
+        expect(isFactor(0.15, 0.05)).toBe(true);
+        expect(isFactor(0.2331, 0.0001)).toBe(true);
+        expect(isFactor(0.22, 0.02)).toBe(true);
+        expect(isFactor(0.2, 0.02)).toBe(true);
+        expect(isFactor(144.05, 0.01)).toBe(true);
+        expect(isFactor(74.8706915963, 37.43534579815)).toBe(true);
+        expect(isFactor(0.333333333, 0.3)).toBe(true);
+        expect(isFactor(0.2331, 0.1)).toBe(true);
+    });
+
+    it('Test invalid decimal factors ', () => {
+        expect(isFactor(0.16, 0.05)).toBe(false);
+        expect(isFactor(0.2331, 0.0002)).toBe(false);
+        expect(isFactor(0.22, 0.03)).toBe(false);
+        expect(isFactor(0.2, 0.06)).toBe(false);
+        expect(isFactor(144.05, 0.08)).toBe(false);
+        expect(isFactor(0.3433333333, 0.03)).toBe(false);
+        expect(isFactor(74.8806915963, 37.43534579815)).toBe(false);
+    });
+});

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;
+    }
+}