public render()

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>;
    }