Spaces:
Running
Running
File size: 3,965 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
import Box from '../box/box.jsx';
import PeripheralTile from './peripheral-tile.jsx';
import Dots from './dots.jsx';
import radarIcon from './icons/searching.png';
import refreshIcon from './icons/refresh.svg';
import styles from './connection-modal.css';
const ScanningStep = props => (
<Box className={styles.body}>
<Box className={styles.activityArea}>
{props.scanning ? (
props.peripheralList.length === 0 ? (
<div className={styles.activityAreaInfo}>
<div className={styles.centeredRow}>
<img
className={classNames(styles.radarSmall, styles.radarSpin)}
src={radarIcon}
/>
<FormattedMessage
defaultMessage="Looking for devices"
description="Text shown while scanning for devices"
id="gui.connection.scanning.lookingforperipherals"
/>
</div>
</div>
) : (
<div className={styles.peripheralTilePane}>
{props.peripheralList.map(peripheral =>
(<PeripheralTile
connectionSmallIconURL={props.connectionSmallIconURL}
key={peripheral.peripheralId}
name={peripheral.name}
peripheralId={peripheral.peripheralId}
rssi={peripheral.rssi}
onConnecting={props.onConnecting}
/>)
)}
</div>
)
) : (
<Box className={styles.instructions}>
<FormattedMessage
defaultMessage="No devices found"
description="Text shown when no devices could be found"
id="gui.connection.scanning.noPeripheralsFound"
/>
</Box>
)}
</Box>
<Box className={styles.bottomArea}>
<Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage
defaultMessage="Select your device in the list above."
description="Prompt for choosing a device to connect to"
id="gui.connection.scanning.instructions"
/>
</Box>
<Dots
className={styles.bottomAreaItem}
counter={0}
total={3}
/>
<button
className={classNames(styles.bottomAreaItem, styles.connectionButton)}
onClick={props.onRefresh}
>
<FormattedMessage
defaultMessage="Refresh"
description="Button in prompt for starting a search"
id="gui.connection.search"
/>
<img
className={styles.buttonIconRight}
src={refreshIcon}
/>
</button>
</Box>
</Box>
);
ScanningStep.propTypes = {
connectionSmallIconURL: PropTypes.string,
onConnecting: PropTypes.func,
onRefresh: PropTypes.func,
peripheralList: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
rssi: PropTypes.number,
peripheralId: PropTypes.string
})),
scanning: PropTypes.bool.isRequired
};
ScanningStep.defaultProps = {
peripheralList: [],
scanning: true
};
export default ScanningStep;
|