in src/electron/views/device-connect-view/components/android-setup/prompt-choose-device-step.tsx [49:113]
public render(): JSX.Element {
const listItems = this.getListItems();
const layoutProps: AndroidSetupStepLayoutProps = {
headerText: 'Choose which device to use',
children: (
<>
<div className={styles.deviceCount}>
{listItems.length} Android devices or emulators connected
</div>
<DefaultButton
data-automation-id={rescanAutomationId}
text="Rescan"
onClick={this.props.deps.androidSetupActionCreator.rescan}
/>
<DetailsList
setKey={'devices'}
compact={true}
ariaLabel="android devices"
className={styles.phoneList}
items={listItems}
selection={this.selection}
selectionMode={SelectionMode.single}
checkboxVisibility={CheckboxVisibility.always}
isHeaderVisible={false}
checkboxCellClassName={styles.checkmarkCell}
checkButtonAriaLabel="select"
onRenderCheckbox={checkboxProps => {
return checkboxProps?.checked ? (
<>
<FontIcon iconName="CheckMark" className={styles.checkmark} />
</>
) : null;
}}
onRenderItemColumn={item => {
return (
<DeviceDescription
className={styles.row}
deviceInfo={item.deviceInfo}
></DeviceDescription>
);
}}
/>
</>
),
leftFooterButtonProps: {
text: 'Close',
onClick: _ => this.props.deps.closeApp(),
},
rightFooterButtonProps: {
text: 'Next',
disabled: this.state.selectedDevice === null,
onClick: _ => {
const { selectedDevice } = this.state;
if (selectedDevice != null) {
this.props.deps.androidSetupActionCreator.setSelectedDevice(
selectedDevice.deviceInfo,
);
}
},
},
};
return <AndroidSetupStepLayout {...layoutProps}></AndroidSetupStepLayout>;
}