Function DataBrowser

packages/sanddance-explorer/src/dialogs/dataBrowser.tsx:37–116

(props: Props)

}

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;

    const dropdownRef = base.react.createRef<FluentUITypes.IDropdown>();
    props.explorer.dialogFocusHandler.focus = ()=> dropdownRef.current?.focus();

    return (
        <Group label={strings.labelDataBrowser} className="sanddance-dataIndex">
            <Dropdown
                componentRef={dropdownRef}
                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>}