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

package/src/FactoryReset/FactoryResetButton.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC, useRef, useState } from 'react';
+
+import Button, { ButtonVariants } from '../Button/Button';
+import { Dialog, DialogButton } from '../Dialog/Dialog';
+import logger from '../logging';
+import { getAppSpecificStore as store } from '../utils/persistentStore';
+
+interface Props {
+    resetFn?: () => void;
+    label: string;
+    modalText?: string;
+    variant?: ButtonVariants;
+    classNames?: string;
+    large?: boolean;
+}
+
+const DEFAULT_MODAL_TEXT =
+    'By restoring defaults, all stored app-specific configuration values will be lost. This does not include configurations such as device renames and favorites. Are you sure you want to proceed?';
+
+const FactoryResetButton: FC<Props> = ({
+    resetFn,
+    label,
+    modalText,
+    variant = 'secondary',
+    classNames,
+    large = false,
+}) => {
+    const [showDialog, setShowDialog] = useState(false);
+    useRef(); // showdialog
+    const defaultResetFn = () => {
+        store().clear();
+        logger.info('Successfully restored defaults');
+    };
+
+    return (
+        <>
+            <Button
+                large={large}
+                variant={variant}
+                onClick={() => setShowDialog(true)}
+                className={classNames}
+            >
+                {label}
+            </Button>
+            <Dialog
+                isVisible={showDialog}
+                closeOnUnfocus
+                onHide={() => setShowDialog(false)}
+            >
+                <Dialog.Header
+                    title="Restore factory settings"
+                    headerIcon="alert"
+                />
+                <Dialog.Body>{modalText || DEFAULT_MODAL_TEXT}</Dialog.Body>
+                <Dialog.Footer>
+                    <DialogButton
+                        variant="danger"
+                        onClick={() => {
+                            if (resetFn) resetFn();
+                            else defaultResetFn();
+                            setShowDialog(false);
+                        }}
+                    >
+                        Restore
+                    </DialogButton>
+                    <DialogButton onClick={() => setShowDialog(false)}>
+                        Cancel
+                    </DialogButton>
+                </Dialog.Footer>
+            </Dialog>
+        </>
+    );
+};
+
+export default FactoryResetButton;

package/src/FlashMessage/FlashMessage.tsx

@@ -0,0 +1,159 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { mdiClose } from '@mdi/js';
+import Icon from '@mdi/react';
+
+import classNames from '../utils/classNames';
+import { colors } from '../utils/colors';
+import { FlashMessage, getMessages, removeMessage } from './FlashMessageSlice';
+
+import './flashMessage.css';
+
+const SLIDE_IN_DURATION_MS = 300;
+const SLIDE_IN_ANIMATION = `${SLIDE_IN_DURATION_MS}ms slide-in`;
+
+const SLIDE_OUT_DURATION_MS = 1000;
+const SLIDE_OUT_ANIMATION = (dismissTime: number) =>
+    `${SLIDE_OUT_DURATION_MS}ms slide-out ${
+        dismissTime - SLIDE_OUT_DURATION_MS
+    }ms`;
+
+const LOADER_ANIMATION = (dismissTime: number) =>
+    `${
+        dismissTime - SLIDE_OUT_DURATION_MS
+    }ms flash-message-loader linear forwards`;
+
+interface FlashMessageProps {
+    flashMessage: FlashMessage;
+}
+
+const FlashMessage = ({ flashMessage }: FlashMessageProps) => {
+    const { id, message, variant, dismissTime } = flashMessage;
+
+    const dispatch = useDispatch();
+    const divRef = useRef(null);
+    const [fadeoutTimer, setFadeoutTimer] = useState<string>(
+        dismissTime == null ? 'unset' : `${dismissTime}ms`
+    );
+    const timeoutHandler = useRef<NodeJS.Timeout | undefined>(undefined);
+
+    if (timeoutHandler.current == null && dismissTime != null) {
+        timeoutHandler.current = setTimeout(() => {
+            dispatch(removeMessage(id));
+        }, dismissTime);
+    }
+
+    const close = () => {
+        clearTimeout(timeoutHandler.current);
+        dispatch(removeMessage(id));
+    };
+
+    const addFadeout = () => {
+        if (dismissTime) {
+            timeoutHandler.current = setTimeout(() => {
+                dispatch(removeMessage(id));
+            }, dismissTime);
+            setFadeoutTimer(`${dismissTime}ms`);
+        }
+    };
+
+    const removeFadeout = () => {
+        clearTimeout(timeoutHandler.current);
+        setFadeoutTimer('unset');
+    };
+
+    const initialRender = () => divRef.current == null;
+
+    return (
+        <div
+            ref={divRef}
+            className={`tw-flex tw-w-full tw-flex-col tw-justify-between tw-p-4  tw-text-white ${classNames(
+                variant === 'error' && 'tw-bg-red',
+                variant === 'success' && 'tw-bg-green',
+                variant === 'info' && 'tw-bg-nordicBlue',
+                variant === 'warning' && 'tw-bg-orange'
+            )}`}
+            style={{
+                zIndex: 1000,
+                animation:
+                    fadeoutTimer !== 'unset'
+                        ? flashMessageAnimations(initialRender(), dismissTime)
+                        : 'unset',
+            }}
+            onMouseEnter={removeFadeout}
+            onMouseLeave={addFadeout}
+        >
+            <div className="tw-flex tw-w-full tw-justify-between">
+                {message}
+                <div onClick={close}>
+                    <Icon path={mdiClose} size={0.8} />
+                </div>
+            </div>
+            {dismissTime != null ? (
+                <div
+                    style={{
+                        backgroundColor: colors.white,
+                        width: 'calc(100% + 32px)',
+                        height: '2px',
+                        margin: '-16px',
+                        marginTop: '8px',
+                        animation:
+                            fadeoutTimer !== 'unset'
+                                ? LOADER_ANIMATION(dismissTime)
+                                : 'unset',
+                    }}
+                />
+            ) : null}
+        </div>
+    );
+};
+
+const FlashMessages = () => {
+    const messages = useSelector(getMessages);
+
+    if (messages.length === 0) return null;
+
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                bottom: '32px',
+                right: '16px',
+                width: '256px',
+                gap: '16px',
+                display: 'flex',
+                flexDirection: 'column-reverse',
+            }}
+        >
+            {messages.map(flashMessage => (
+                <FlashMessage
+                    key={flashMessage.id}
+                    flashMessage={flashMessage}
+                />
+            ))}
+        </div>
+    );
+};
+
+const flashMessageAnimations = (
+    initialRender2: boolean,
+    dismissTime2?: number
+): string => {
+    if (!dismissTime2) {
+        return initialRender2 ? SLIDE_IN_ANIMATION : 'unset';
+    }
+
+    return `${SLIDE_OUT_ANIMATION(dismissTime2)},${
+        initialRender2 ? SLIDE_IN_ANIMATION : ''
+    }`;
+};
+
+export default FlashMessages;

package/src/FlashMessage/FlashMessageSlice.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit';
+
+import type { AppThunk, RootState } from '../store';
+
+export interface FlashMessages {
+    messages: FlashMessage[];
+}
+
+export type FlashMessageVariant = 'success' | 'warning' | 'error' | 'info';
+
+export interface FlashMessage {
+    id: string;
+    message: string;
+    variant: FlashMessageVariant;
+    dismissTime?: number;
+}
+
+export type FlashMessagePayload = Omit<FlashMessage, 'id'>;
+
+const initialState: FlashMessages = {
+    messages: [],
+};
+
+const slice = createSlice({
+    name: 'flashMessages',
+    initialState,
+    reducers: {
+        addNewMessage: (
+            state,
+            { payload: message }: PayloadAction<FlashMessagePayload>
+        ) => {
+            state.messages.push({ ...message, id: nanoid() });
+        },
+        removeMessage: (state, { payload: id }: PayloadAction<string>) => {
+            state.messages = state.messages.filter(
+                message => message.id !== id
+            );
+        },
+    },
+});
+
+export const newCopiedFlashMessage = (): AppThunk => dispatch =>
+    dispatch(newInfoFlashMessage('Copied to clipboard!', 3000));
+
+export const newSuccessFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'success', dismissTime }));
+
+export const newWarningFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'warning', dismissTime }));
+
+export const newErrorFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'error', dismissTime }));
+
+export const newInfoFlashMessage =
+    (message: string, dismissTime?: number): AppThunk =>
+    dispatch =>
+        dispatch(newFlashMessage({ message, variant: 'info', dismissTime }));
+
+const newFlashMessage =
+    ({ message, variant, dismissTime }: FlashMessagePayload): AppThunk =>
+    dispatch => {
+        dispatch(
+            addNewMessage({
+                message,
+                variant,
+                dismissTime,
+            })
+        );
+    };
+
+export const getMessages = (state: RootState) => state.flashMessages.messages;
+
+export const {
+    reducer,
+    actions: { addNewMessage, removeMessage },
+} = slice;

package/src/FlashMessage/flashMessage.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2023 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@keyframes flash-message-loader {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0;
+    }
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(110%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-out {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(110%);
+    }
+}

package/src/InlineInput/InlineInput.tsx

@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from '../utils/classNames';
+
+import './inline-input.scss';
+
+/*
+This input component is a bit tricky, because it has several constraints:
+
+We want to be able validate the input and indicate to the user whether the current input is
+invalid.
+
+Users should be able to enter invalid values, we just want to indicate that they are invalid
+and do not use the value unless it is valid. We want to allow users to enter momentarily
+invalid values, because forbidding them to do so would be a pain. E.g. if we have a range from
+100 to 1000, then entering the number 500 would be hard if the system forbids to just type '5'
+because it is below 10).
+
+To accomplish the above we need not just one, but two values: An internal value, which is what
+is displayed to the user, can be potentially invalid, and is held in a state local to this
+component. Only when this internal value is valid, then onChange is called, which should update
+the external value, which is passed in as a prop.
+
+We want to enable other controls to also update the external value and then have it reflect in
+this input, so the external value and the internal value need to be synchronised, but the
+external value must only overwrite the internal value if the former was changed.
+useSynchronisationIfChangedFromOutside does take care of this by remembering the previous
+external value and comparing with it to determine whether it has changed.
+*/
+
+const useSynchronisationIfChangedFromOutside = (
+    externalValue: string,
+    setInternalValue: (value: string) => void
+) => {
+    const previousExternalValue = useRef(externalValue);
+    useEffect(() => {
+        if (previousExternalValue.current !== externalValue) {
+            setInternalValue(externalValue);
+            previousExternalValue.current = externalValue;
+        }
+    });
+    return previousExternalValue.current;
+};
+
+interface Props {
+    disabled?: boolean;
+    value: string;
+    isValid?: (value: string) => boolean;
+    onChange: (value: string) => void;
+    onChangeComplete?: (value: string) => void;
+    onKeyboardIncrementAction?: () => string;
+    onKeyboardDecrementAction?: () => string;
+    className?: string;
+}
+
+const InlineInput = React.forwardRef<HTMLInputElement, Props>(
+    (
+        {
+            disabled = false,
+            value: externalValue,
+            isValid = () => true,
+            onChange,
+            onChangeComplete = () => {},
+            onKeyboardIncrementAction = () => externalValue,
+            onKeyboardDecrementAction = () => externalValue,
+            className = '',
+        },
+        ref
+    ) => {
+        const [internalValue, setInternalValue] = useState(externalValue);
+        const [initialValue, setInitialValue] = useState(externalValue);
+        useSynchronisationIfChangedFromOutside(externalValue, setInternalValue);
+        const onChangeIfValid = (newValue: string) => {
+            if (disabled) {
+                return;
+            }
+
+            setInternalValue(newValue);
+            if (isValid(newValue)) {
+                if (externalValue !== newValue) {
+                    onChange(newValue);
+                }
+            }
+        };
+
+        const resetToExternalValueOrOnChangeCompleteIfValid = () => {
+            if (disabled) {
+                return;
+            }
+
+            if (isValid(internalValue)) {
+                if (initialValue !== internalValue) {
+                    setInitialValue(internalValue);
+                    onChangeComplete(internalValue);
+                }
+            } else {
+                setInternalValue(externalValue);
+            }
+        };
+
+        const onChangeCompleteIfValid = (event: React.KeyboardEvent) => {
+            if (disabled) {
+                return;
+            }
+
+            event.stopPropagation();
+
+            if (event.key === 'Enter' && isValid(internalValue)) {
+                if (initialValue !== internalValue) {
+                    setInitialValue(internalValue);
+                    onChangeComplete(internalValue);
+                }
+            }
+        };
+
+        const startKeyboardEvents = (event: React.KeyboardEvent) => {
+            if (disabled) {
+                return;
+            }
+
+            event.stopPropagation();
+
+            switch (event.key) {
+                case 'ArrowUp':
+                    onChangeIfValid(onKeyboardIncrementAction());
+                    break;
+                case 'ArrowDown':
+                    onChangeIfValid(onKeyboardDecrementAction());
+                    break;
+            }
+        };
+        const stopPropagation = (event: React.MouseEvent) =>
+            event.stopPropagation();
+
+        return (
+            <input
+                ref={ref}
+                type="text"
+                className={classNames(
+                    'inline-input',
+                    isValid(internalValue) || 'invalid',
+                    disabled && 'disabled',
+                    className
+                )}
+                size={
+                    Math.max(1, internalValue.length) +
+                    (process.platform === 'darwin' ? 2 : 0)
+                }
+                disabled={disabled}
+                value={internalValue}
+                onFocus={() => {
+                    setInitialValue(internalValue);
+                }}
+                onChange={event => onChangeIfValid(event.target.value)}
+                onBlur={resetToExternalValueOrOnChangeCompleteIfValid}
+                onKeyUp={onChangeCompleteIfValid}
+                onKeyDown={startKeyboardEvents}
+                onClick={stopPropagation}
+            />
+        );
+    }
+);
+
+export default InlineInput;

package/src/InlineInput/NumberInlineInput.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2015 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+import React, { FC } from 'react';
+
+import { isFactor } from '../Slider/factor';
+import {
+    getStep,
+    isValues,
+    Range,
+    RangeOrValues,
+    useValidatedRangeOrValues,
+    Values,
+} from '../Slider/range';
+import InlineInput from './InlineInput';
+
+import './number-inline-input.scss';
+
+export interface Props {
+    disabled?: boolean;
+    value: number;
+    range: RangeOrValues;
+    onChange: (value: number) => void;
+    onChangeComplete?: (value: number) => void;
+}
+
+const isInValues = (value: number, values: Values) => values.includes(value);
+
+const isInRange = (value: number, { min, max, decimals, step }: Range) =>
+    value >= min &&
+    value <= max &&
+    value === Number(value.toFixed(decimals)) &&
+    (step == null ? true : isFactor(value - min, step));
+
+const isValid = (value: number, rangeOrValues: RangeOrValues) =>
+    isValues(rangeOrValues)
+        ? isInValues(value, rangeOrValues)
+        : isInRange(value, rangeOrValues);
+
+const nextInValues = (
+    current: number,
+    values: Values,
+    steps: number
+): number | undefined => {
+    const currentIndex = values.indexOf(current);
+    const newIndex = currentIndex + steps;
+
+    return values[newIndex];
+};
+
+const nextInRange = (current: number, range: Range, steps: number) => {
+    const newValue = Number(
+        (current + steps * getStep(range)).toFixed(range.decimals)
+    );
+
+    if (newValue >= range.min && newValue <= range.max) {
+        return newValue;
+    }
+};
+
+const changeValueStepwise = (
+    current: number,
+    rangeOrValues: RangeOrValues,
+    steps: number
+) => {
+    const nextValue = isValues(rangeOrValues)
+        ? nextInValues(current, rangeOrValues, steps)
+        : nextInRange(current, rangeOrValues, steps);
+
+    if (nextValue != null) {
+        return nextValue;
+    }
+
+    return nextValue != null ? nextValue : current;
+};
+
+const NumberInlineInput: FC<Props> = ({
+    disabled,
+    value,
+    range,
+    onChange,
+    onChangeComplete = () => {},
+}) => {
+    useValidatedRangeOrValues(range);
+
+    return (
+        <InlineInput
+            className="number-inline-input"
+            disabled={disabled}
+            value={String(value)}
+            isValid={newValue => isValid(Number(newValue), range)}
+            onChange={newValue => onChange(Number(newValue))}
+            onChangeComplete={newValue => onChangeComplete(Number(newValue))}
+            onKeyboardIncrementAction={() =>
+                changeValueStepwise(value, range, 1).toString()
+            }
+            onKeyboardDecrementAction={() =>
+                changeValueStepwise(value, range, -1).toString()
+            }
+        />
+    );
+};
+
+export default NumberInlineInput;

package/src/InlineInput/inline-input.scss

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.inline-input {
+    all: inherit;
+
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: transparent;
+
+    overflow-x: hidden;
+
+    &:focus {
+        border-bottom-color: $gray-200;
+    }
+
+    &.invalid {
+        border-bottom-color: $brand-danger;
+    }
+
+    &.disabled {
+        // No clue why, but setting the opacity for disabled elements in shared.scss
+        // is not effective for the inline input, but it works if we set it here
+        opacity: $disabled-opacity;
+    }
+}
+
+// To prevent opacity from stacking up
+.disabled, :disabled {
+    .inline-input.disabled {
+        opacity: 1;
+    }
+}

package/src/InlineInput/number-inline-input.scss

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ *
+ * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
+ */
+
+@import "../variables";
+
+.number-inline-input {
+    text-align: center;
+    border-bottom-color: $gray-200;
+    font-size: 14px;
+
+    &:focus { background-color: $white; }
+}