109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import Icon from '../../base/icons/components/Icon';
|
|
import { IconTrash } from '../../base/icons/svg';
|
|
import { withPixelLineHeight } from '../../base/styles/functions.web';
|
|
import Button from '../../base/ui/components/web/Button';
|
|
import { BUTTON_TYPES } from '../../base/ui/constants.any';
|
|
import { closeHidDevice, requestHidDevice } from '../../web-hid/actions';
|
|
import { getDeviceInfo, shouldRequestHIDDevice } from '../../web-hid/functions';
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
callControlContainer: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start'
|
|
},
|
|
|
|
label: {
|
|
...withPixelLineHeight(theme.typography.bodyShortRegular),
|
|
color: theme.palette.text01,
|
|
marginBottom: theme.spacing(2)
|
|
},
|
|
|
|
deviceRow: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between'
|
|
},
|
|
|
|
deleteDevice: {
|
|
cursor: 'pointer',
|
|
textAlign: 'center'
|
|
},
|
|
|
|
headerConnectedDevice: {
|
|
fontWeight: 600
|
|
},
|
|
|
|
hidContainer: {
|
|
'> span': {
|
|
marginLeft: '16px'
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Device hid container.
|
|
*
|
|
* @param {IProps} props - The props of the component.
|
|
* @returns {ReactElement}
|
|
*/
|
|
function DeviceHidContainer() {
|
|
const { t } = useTranslation();
|
|
const deviceInfo = useSelector(getDeviceInfo);
|
|
const showRequestDeviceInfo = shouldRequestHIDDevice(deviceInfo);
|
|
const { classes } = useStyles();
|
|
const dispatch = useDispatch();
|
|
|
|
const onRequestControl = useCallback(() => {
|
|
dispatch(requestHidDevice());
|
|
}, [ dispatch ]);
|
|
|
|
const onDeleteHid = useCallback(() => {
|
|
dispatch(closeHidDevice());
|
|
}, [ dispatch ]);
|
|
|
|
return (
|
|
<div
|
|
className = { classes.callControlContainer }
|
|
key = 'callControl'>
|
|
<label
|
|
className = { classes.label }
|
|
htmlFor = 'callControl'>
|
|
{t('deviceSelection.hid.callControl')}
|
|
</label>
|
|
{showRequestDeviceInfo && (
|
|
<Button
|
|
accessibilityLabel = { t('deviceSelection.hid.pairDevice') }
|
|
id = 'request-control-btn'
|
|
key = 'request-control-btn'
|
|
label = { t('deviceSelection.hid.pairDevice') }
|
|
onClick = { onRequestControl }
|
|
type = { BUTTON_TYPES.SECONDARY } />
|
|
)}
|
|
{!showRequestDeviceInfo && (
|
|
<div className = { classes.hidContainer }>
|
|
<p className = { classes.headerConnectedDevice }>{t('deviceSelection.hid.connectedDevices')}</p>
|
|
<div className = { classes.deviceRow }>
|
|
<span>{deviceInfo.device?.productName}</span>
|
|
<Icon
|
|
ariaLabel = { t('deviceSelection.hid.deleteDevice') }
|
|
className = { classes.deleteDevice }
|
|
onClick = { onDeleteHid }
|
|
role = 'button'
|
|
src = { IconTrash }
|
|
tabIndex = { 0 } />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DeviceHidContainer;
|