export function DataBrowser()

in packages/sanddance-explorer/src/dialogs/dataBrowser.tsx [35:109]
72 lines of code
14 McCabe index (conditional complexity)

export function DataBrowser(props: Props) {
    function activateRecord(newIndex: number) {
        props.onActivate(props.data[newIndex], newIndex);
    }
    const { index } = props;
    const length = props.data && props.data.length || 0;
    return (
        <Group label={strings.labelDataBrowser} className="sanddance-dataIndex">
            <Dropdown
                label={strings.labelDataScope}
                collapseLabel={true}
                options={[
                    {
                        key: DataScopeId.AllData,
                        text: strings.selectDataSpanAll,
                        isSelected: props.selectedDataScope === DataScopeId.AllData
                    },
                    {
                        key: DataScopeId.FilteredData,
                        text: strings.selectDataSpanFilter,
                        isSelected: props.selectedDataScope === DataScopeId.FilteredData
                    },
                    {
                        key: DataScopeId.SelectedData,
                        text: strings.selectDataSpanSelection,
                        isSelected: props.selectedDataScope === DataScopeId.SelectedData
                    }
                ]}
                onChange={(e, o) => {
                    props.onDataScopeClick(o.key as DataScopeId);
                }}
            />
            {!props.data && <div dangerouslySetInnerHTML={{ __html: props.nullMessage }}></div>}
            {props.data && !props.data.length && <div>{props.zeroMessage}</div>}
            {!!length && <div>
                <div className="index">
                    <IconButton
                        themePalette={props.themePalette}
                        iconName="ChevronLeftMed"
                        onClick={e => activateRecord(index <= 0 ? length - 1 : index - 1)}
                        disabled={props.disabled || length === 1}
                        title={strings.buttonPrevDataItem}
                    />
                    <span>{strings.record(index + 1, length)}</span>
                    <IconButton
                        themePalette={props.themePalette}
                        iconName="ChevronRightMed"
                        onClick={e => activateRecord(index >= length - 1 ? 0 : index + 1)}
                        disabled={props.disabled || length === 1}
                        title={strings.buttonNextDataItem}
                    />
                </div>
                {!props.itemVisible && <div className="item-filtered">{strings.labelDataItemIsFiltered}</div>}
                <DataItem
                    columns={props.columns}
                    item={props.data[index]}
                    disabled={props.disabled}
                    onSearch={props.onSearch}
                    bingSearchDisabled={props.bingSearchDisabled}
                />
            </div>}
            {props.dataExportHandler && props.data && (
                <DataExportPicker
                    theme={props.theme}
                    initializer={{
                        fileName: `${removeExtensions(props.displayName)} (${props.data.length})`
                    }}
                    data={props.data}
                    dataExportHandler={props.dataExportHandler}
                    disabled={props.disabled}
                />
            )}
        </Group>
    );
}