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

package/src/Device/DeviceSelector/DeviceSelector.tsx

@@ -1,173 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { DeviceTraits } from '@nordicsemiconductor/nrf-device-lib-js';
-
-import useHotKey from '../../utils/useHotKey';
-import {
-    clearWaitForDevice,
-    getWaitingToAutoReselect,
-    setAutoSelectDevice,
-} from '../deviceAutoSelectSlice';
-import { startWatchingDevices, stopWatchingDevices } from '../deviceLister';
-import { DeviceSetupConfig, setupDevice } from '../deviceSetup';
-import DeviceSetupView from '../DeviceSetup/DeviceSetupView';
-import {
-    deselectDevice,
-    Device,
-    deviceIsSelected as deviceIsSelectedSelector,
-    selectDevice,
-    selectedSerialNumber,
-} from '../deviceSlice';
-import DeviceList from './DeviceList/DeviceList';
-import SelectDevice from './SelectDevice';
-import SelectedDevice from './SelectedDevice';
-
-interface OutdatedDeviceTraits {
-    serialPort?: boolean;
-    serialport?: boolean;
-}
-
-export interface Props {
-    deviceListing: DeviceTraits & OutdatedDeviceTraits;
-    deviceSetupConfig?: DeviceSetupConfig;
-    onDeviceSelected?: (device: Device, autoReselected: boolean) => void;
-    onDeviceDeselected?: () => void;
-    onDeviceConnected?: (device: Device) => void;
-    onDeviceDisconnected?: (device: Device) => void;
-    onDeviceIsReady?: (device: Device) => void;
-    deviceFilter?: (device: Device) => boolean;
-}
-
-const noop = () => {};
-export default ({
-    deviceListing,
-    deviceSetupConfig,
-    onDeviceSelected = noop,
-    onDeviceDeselected = noop,
-    onDeviceConnected = noop,
-    onDeviceDisconnected = noop,
-    onDeviceIsReady = noop,
-    deviceFilter,
-}: Props) => {
-    const dispatch = useDispatch();
-    const [deviceListVisible, setDeviceListVisible] = useState(false);
-
-    const deviceIsSelected = useSelector(deviceIsSelectedSelector);
-    const selectedSN = useSelector(selectedSerialNumber);
-    const waitingToAutoReconnect = useSelector(getWaitingToAutoReselect);
-    const showSelectedDevice = deviceIsSelected || waitingToAutoReconnect;
-
-    const doDeselectDevice = useCallback(() => {
-        onDeviceDeselected();
-        dispatch(deselectDevice());
-        dispatch(clearWaitForDevice());
-        dispatch(setAutoSelectDevice(undefined));
-    }, [dispatch, onDeviceDeselected]);
-
-    // Ensure that useCallback is
-    // not updated frequently as this
-    // will have a side effect to stop and start the hotplug events
-    const doSelectDevice = useCallback(
-        (device: Device, autoReselected: boolean) => {
-            dispatch(clearWaitForDevice());
-            setDeviceListVisible(false);
-            dispatch(selectDevice(device));
-            dispatch(setAutoSelectDevice(device));
-            onDeviceSelected(device, autoReselected);
-            if (deviceSetupConfig) {
-                dispatch(
-                    setupDevice(
-                        device,
-                        deviceSetupConfig,
-                        onDeviceIsReady,
-                        doDeselectDevice
-                    )
-                );
-            }
-        },
-        [
-            deviceSetupConfig,
-            dispatch,
-            doDeselectDevice,
-            onDeviceIsReady,
-            onDeviceSelected,
-        ]
-    );
-
-    const doStartWatchingDevices = useCallback(() => {
-        const patchedDeviceListing = {
-            serialPorts: deviceListing.serialPort || deviceListing.serialport,
-            ...deviceListing,
-        };
-        dispatch(
-            startWatchingDevices(
-                patchedDeviceListing,
-                onDeviceConnected,
-                onDeviceDisconnected,
-                onDeviceDeselected,
-                doSelectDevice
-            )
-        );
-    }, [
-        deviceListing,
-        dispatch,
-        onDeviceConnected,
-        onDeviceDisconnected,
-        onDeviceDeselected,
-        doSelectDevice,
-    ]);
-
-    const toggleDeviceListVisible = () =>
-        setDeviceListVisible(!deviceListVisible);
-
-    useEffect(() => {
-        doStartWatchingDevices();
-        return stopWatchingDevices;
-    }, [doStartWatchingDevices]);
-
-    useHotKey({
-        hotKey: 'alt+s',
-        title: 'Select device',
-        isGlobal: true,
-        action: () => toggleDeviceListVisible(),
-    });
-
-    return (
-        <div className="core19-device-selector">
-            {showSelectedDevice ? (
-                <SelectedDevice
-                    doDeselectDevice={doDeselectDevice}
-                    toggleDeviceListVisible={toggleDeviceListVisible}
-                />
-            ) : (
-                <SelectDevice
-                    deviceListVisible={deviceListVisible}
-                    toggleDeviceListVisible={toggleDeviceListVisible}
-                />
-            )}
-            <DeviceList
-                isVisible={deviceListVisible}
-                doSelectDevice={(device, autoReselected) => {
-                    if (device.serialNumber === selectedSN) {
-                        setDeviceListVisible(false);
-                        return;
-                    }
-
-                    if (deviceIsSelected) {
-                        doDeselectDevice();
-                    }
-
-                    doSelectDevice(device, autoReselected);
-                }}
-                deviceFilter={deviceFilter}
-            />
-            <DeviceSetupView />
-        </div>
-    );
-};

package/src/Device/DeviceSelector/Favorite.tsx

@@ -1,49 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { FC } from 'react';
-import { useDispatch } from 'react-redux';
-
-import PseudoButton from '../../PseudoButton/PseudoButton';
-import { Device, toggleDeviceFavorited } from '../deviceSlice';
-
-import './favorite.scss';
-
-export const MakeDeviceFavorite: FC<{ device: Device }> = ({ device }) => {
-    const dispatch = useDispatch();
-
-    const toggleFavorite = () => {
-        dispatch(toggleDeviceFavorited(device.serialNumber));
-    };
-
-    return (
-        <PseudoButton className="make-favorite" onClick={toggleFavorite}>
-            <span
-                className={`mdi star ${
-                    device.favorite ? 'mdi-star-off' : 'mdi-star'
-                }`}
-            />
-            {device.favorite ? 'Un-favorite' : 'Favorite'}
-        </PseudoButton>
-    );
-};
-
-export const FavoriteIndicator: FC<{ device: Device }> = ({ device }) => {
-    const dispatch = useDispatch();
-
-    const toggleFavorite = () => {
-        dispatch(toggleDeviceFavorited(device.serialNumber));
-    };
-
-    return (
-        <PseudoButton
-            className={`mdi ${
-                device.favorite ? 'mdi-star' : 'mdi-star-outline'
-            }`}
-            onClick={toggleFavorite}
-        />
-    );
-};

package/src/Device/DeviceSelector/SelectDevice.tsx

@@ -1,36 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-
-import PseudoButton from '../../PseudoButton/PseudoButton';
-import classNames from '../../utils/classNames';
-import chevron from './arrow-down.svg';
-
-import './select-device.scss';
-
-interface Props {
-    deviceListVisible: boolean;
-    toggleDeviceListVisible: () => void;
-}
-
-export default ({ deviceListVisible, toggleDeviceListVisible }: Props) => (
-    <PseudoButton
-        title="alt+s"
-        className={classNames(
-            'select-device',
-            deviceListVisible && 'device-list-visible'
-        )}
-        onClick={toggleDeviceListVisible}
-    >
-        <div>Select device</div>
-        <img
-            className={classNames(deviceListVisible && 'img-rotate')}
-            src={chevron}
-            alt=""
-        />
-    </PseudoButton>
-);

package/src/Device/DeviceSelector/SelectedDevice.tsx

@@ -1,65 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-import PseudoButton from '../../PseudoButton/PseudoButton';
-import {
-    getAutoReselectDevice,
-    getWaitingForDeviceTimeout,
-    getWaitingToAutoReselect,
-} from '../deviceAutoSelectSlice';
-import { selectedDevice } from '../deviceSlice';
-import BasicDeviceInfo from './BasicDeviceInfo';
-
-import './selected-device.scss';
-
-const DisconnectDevice = ({
-    doDeselectDevice,
-}: {
-    doDeselectDevice: () => void;
-}) => (
-    <PseudoButton
-        className="mdi mdi-24px mdi-eject disconnect"
-        onClick={doDeselectDevice}
-        title="Disconnect device"
-        testId="disconnect-device"
-    />
-);
-
-export default ({
-    doDeselectDevice,
-    toggleDeviceListVisible,
-}: {
-    doDeselectDevice: () => void;
-    toggleDeviceListVisible: () => void;
-}) => {
-    const waitingForAutoReselect = useSelector(getWaitingToAutoReselect);
-    const waitingForDevice = useSelector(getWaitingForDeviceTimeout);
-    const selDevice = useSelector(selectedDevice);
-    const autoReconnectDevice = useSelector(getAutoReselectDevice);
-    const device = selDevice ?? autoReconnectDevice;
-
-    return (
-        <PseudoButton
-            className={`selected-device ${
-                waitingForAutoReselect || waitingForDevice ? 'reconnecting' : ''
-            }`}
-            onClick={toggleDeviceListVisible}
-        >
-            {device && (
-                <BasicDeviceInfo
-                    device={device}
-                    toggles={
-                        <DisconnectDevice doDeselectDevice={doDeselectDevice} />
-                    }
-                    showWaitingStatus
-                />
-            )}
-        </PseudoButton>
-    );
-};

package/src/Device/DeviceSelector/arrow-down.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" /></svg>

package/src/Device/DeviceSelector/basic-device-info.scss

@@ -1,62 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../../variables';
-
-.core19-device-selector {
-    .basic-device-info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-
-        .details {
-            width: inherit;
-
-            display: flex;
-            flex-direction: column;
-
-            line-height: 1;
-
-            .name {
-                font-size: 14px;
-                font-weight: $font-weight-bold;
-                text-overflow: ellipsis;
-
-                &:not(:focus) {
-                    pointer-events: none;
-                }
-            }
-            .reconnecting {
-                border-bottom-style: solid;
-                border-bottom-width: 1px;
-                border-bottom-color: transparent;
-
-                font-size: 14px;
-                font-weight: $font-weight-bold;
-
-                &:not(:focus) {
-                    pointer-events: none;
-                }
-            }
-
-            .serial-number {
-                overflow-wrap: break-word;
-                max-width: 155px;
-                text-overflow: ellipsis;
-            }
-        }
-
-        .toggles {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            width: 44px;
-            margin-right: 10px;
-        }
-    }
-}

package/src/Device/DeviceSelector/device-icon.scss

@@ -1,27 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../../variables";
-
-.core19-device-selector {
-    .icon {
-        width: 68px;
-        flex-shrink: 0;
-        padding-left: 27px;
-
-        fill: $gray-700;
-
-        .mdi {
-            display: flex;
-            flex-direction: column;
-            font-size: 27px;
-        }
-    }
-
-    .selected-device:hover .icon {
-        fill: $primary;
-    }
-}

package/src/Device/DeviceSelector/favorite.scss

@@ -1,17 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../../variables";
-
-.core19-device-selector {
-    .make-favorite .star {
-        margin-right: 1ex;
-    }
-
-    .mdi-star-outline { visibility: hidden; }
-
-    .device:hover .mdi-star-outline { visibility: visible; }
-}

package/src/Device/DeviceSelector/select-device.scss

@@ -1,38 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import "../../variables";
-
-.core19-device-selector {
-    .select-device {
-        font-size: 16px;
-        background: $primary;
-
-        padding-left: 68px;
-        text-transform: uppercase;
-
-        color: $white;
-
-        height: $nav-bar-height;
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        &:hover,&.device-list-visible {
-            background: $primary-darkened;
-        }
-
-        img {
-            margin-right: 10px !important;
-            transition: transform 100ms linear;
-            &.img-rotate {
-                transform: rotate(180deg);
-            }
-        }
-    }
-}

package/src/Device/DeviceSelector/selected-device.scss

@@ -1,57 +0,0 @@
-/*
- * Copyright (c) 2021 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-@import '../../variables';
-
-@keyframes alert {
-    0% {
-        background: $white;
-    }
-    50% {
-        background: $gray-100;
-    }
-    100% {
-        background: $white;
-    }
-}
-
-.core19-device-selector {
-    .selected-device {
-        height: $nav-bar-height;
-
-        font-size: 16px;
-        color: $gray-700;
-        background: $white;
-
-        &.reconnecting {
-            background: $gray-100;
-            animation: alert 2s infinite;
-        }
-
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .serial-number {
-            font-weight: $font-weight-light;
-            font-size: 11px;
-        }
-
-        .waiting-to-reconnect {
-            font-weight: $font-weight-light;
-            font-size: 11px;
-        }
-
-        .disconnect {
-            color: $gray-700;
-        }
-
-        &:hover,
-        *:hover {
-            color: $primary;
-        }
-    }
-}

package/src/Device/DeviceSetup/DeviceSetupView.tsx

@@ -1,102 +0,0 @@
-/*
- * Copyright (c) 2015 Nordic Semiconductor ASA
- *
- * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
- */
-
-import React, { useState } from 'react';
-import { ProgressBar } from 'react-bootstrap';
-import Form from 'react-bootstrap/Form';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { Dialog, DialogButton } from '../../Dialog/Dialog';
-import {
-    deviceSetupUserInputReceived,
-    getDeviceSetupChoices,
-    getDeviceSetupMessage,
-    getDeviceSetupProgress,
-    getDeviceSetupProgressMessage,
-    getDeviceSetupUserInputCallback,
-    isDeviceSetupDialogVisible,
-} from '../deviceSetupSlice';
-
-export default () => {
-    const dispatch = useDispatch();
-    const [selectedChoices, setSelectedChoices] = useState<number>(0);
-    const isVisible = useSelector(isDeviceSetupDialogVisible);
-    const message = useSelector(getDeviceSetupMessage);
-    const progressMessage = useSelector(getDeviceSetupProgressMessage);
-    const progress = useSelector(getDeviceSetupProgress);
-    const choices = useSelector(getDeviceSetupChoices);
-    const onUserInput = useSelector(getDeviceSetupUserInputCallback);
-
-    const isInProgress = progress !== undefined;
-
-    return (
-        <Dialog isVisible={isVisible}>
-            <Dialog.Header
-                showSpinner={isInProgress}
-                title="Confirm"
-                headerIcon=""
-            />
-            <Dialog.Body>
-                <Form.Group>
-                    <div>{message}</div>
-                </Form.Group>
-                {choices && (
-                    <Form.Group>
-                        {choices.map((choice, index) => (
-                            <Form.Check
-                                key={choice}
-                                name="radioGroup"
-                                type="radio"
-                                disabled={isInProgress}
-                                onClick={() => setSelectedChoices(index)}
-                                label={choice}
-                            />
-                        ))}
-                    </Form.Group>
-                )}
-                <Form.Group>
-                    {progressMessage !== undefined && (
-                        <Form.Label>
-                            <strong>Status:</strong>
-                            <span>{` ${progressMessage}`}</span>
-                        </Form.Label>
-                    )}
-                    {progress !== undefined && (
-                        <ProgressBar now={progress} style={{ height: '4px' }} />
-                    )}
-                </Form.Group>
-            </Dialog.Body>
-            <Dialog.Footer>
-                <DialogButton
-                    variant="primary"
-                    onClick={() => {
-                        if (onUserInput) {
-                            dispatch(deviceSetupUserInputReceived());
-                            onUserInput(
-                                false,
-                                choices ? selectedChoices : undefined
-                            );
-                        }
-                    }}
-                    disabled={!onUserInput || isInProgress}
-                >
-                    Program
-                </DialogButton>
-                <DialogButton
-                    onClick={() => {
-                        if (onUserInput) {
-                            dispatch(deviceSetupUserInputReceived());
-                            onUserInput(true);
-                        }
-                    }}
-                    disabled={isInProgress}
-                >
-                    {choices ? 'Cancel' : 'No'}
-                </DialogButton>
-            </Dialog.Footer>
-        </Dialog>
-    );
-};