react-bootstrap#ListGroup TypeScript Examples

CollectionSortOptions = (props: OptionProps) => {
    const SortByOption = SortByOptionCreator(props);

    return (
        <Popover id="collection-sort-options" style={{ borderRadius: '10px' }}>
            <Popover.Content
                style={{ padding: 0, border: 'none', width: '185px' }}>
                <ListGroup style={{ borderRadius: '8px' }}>
                    <SortByOption sortBy={COLLECTION_SORT_BY.LATEST_FILE}>
                        {constants.SORT_BY_LATEST_PHOTO}
                    </SortByOption>
                    <SortByOption sortBy={COLLECTION_SORT_BY.MODIFICATION_TIME}>
                        {constants.SORT_BY_MODIFICATION_TIME}
                    </SortByOption>
                    <SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
                        {constants.SORT_BY_COLLECTION_NAME}
                    </SortByOption>
                </ListGroup>
            </Popover.Content>
        </Popover>
    );
}

MenuItem = (props: { children: any }) => (
    <ListGroup.Item
        style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: '#282828',
            padding: 0,
        }}>
        {props.children}
    </ListGroup.Item>
)

export function ManageHostsEditor(props: ManageHostsEditorProps) {
    const hostUsernames = props.hosts.map(h => h.username);

    const hostsSoFar = props.hosts.map((host, key) => (
        <ListGroup.Item key={key}>
            <UserDisplay user={host} />
            {
                (host.id !== props.currentUser?.id)
                    && (
                        <div className='float-right'>
                            <RemoveButton
                                onRemove={() => props.onRemoveHost(host)}
                                size='sm'
                                disabled={props.disabled}
                                screenReaderLabel='Remove Host'
                            />
                        </div>
                    )
            }
        </ListGroup.Item>
    ));

    const handleSubmit = (username: string) => {
        if (!hostUsernames.includes(username)) props.onAddHost(username);
    }

    return (
        <div>
            <h2>Manage Hosts</h2>
            <h3>Add Hosts</h3>
            <p>{props.addHostTextPrefix} Add additional hosts to the queue here.</p>
            {userLoggedOnWarning}
            {props.checkHostError ? <ErrorDisplay formErrors={[props.checkHostError]} /> : undefined}
            <SingleInputField
                id="add_host"
                fieldComponent={StatelessInputGroupForm}
                formLabel='Add Host'
                placeholder="Uniqname..."
                buttonOptions={{ onSubmit: handleSubmit, buttonType: 'success' }}
                disabled={props.disabled}
                fieldSchema={uniqnameSchema}
                showRemaining={false}
            >
                + Add Host
            </SingleInputField>
            <h3>Current Hosts</h3>
            <p>
                To remove a host, select the trash icon to the right of the user's name. <strong>You cannot remove yourself as a host.</strong>
            </p>
            <ListGroup>{hostsSoFar}</ListGroup>
        </div>
    );
}

PagedList = (props: any) => {

    const displayItemCount = 12;
    const { t } = useTranslation();

    const [data, setData] = React.useState<IQTArchiv[]>();
    const [dataToFilter, setDataToFilter] = React.useState<IQTArchiv[]>([]);
    const [dataToShow, setDataToShow] = React.useState<IQTArchiv[]>([]);
    const [pages, setPages] = React.useState(0);
    const [pageinationItems, setPageinationItems] = React.useState<JSX.Element[]>();
    const [curPage, setCurPage] = React.useState(1);
    const [filter, setFilter] = React.useState<string>('');

    React.useEffect(() => {
        setData(undefined);
        setDataToShow([]);
        setPages(0);
        setFilter('');
        props.onSelected('');

        if (props && props.data) {
            setData(props.data);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.data])

    React.useEffect(() => {
        if (data) {
            setDataToFilter(data);
        }
    }, [data])

    React.useEffect(() => {
        if (pages) {
            setCurPage(1);
        }
        else {
            setCurPage(0)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pages])

    React.useEffect(() => {
        let _pages = 0;

        if (dataToFilter) {
            _pages = Math.ceil(dataToFilter.length / displayItemCount);
            setPages(_pages);
        }

        if (curPage && curPage > 0 && curPage <= _pages && dataToFilter) {

            const startIndex = (curPage - 1) * displayItemCount;
            const endIndex = (curPage === _pages)
                ? dataToFilter.length
                : (curPage * displayItemCount)

            setDataToShow(dataToFilter.slice(startIndex, endIndex));


            // pagination
            const p: JSX.Element[] = [];
            let index = (curPage === 1)
                ? curPage
                : curPage - 1;

            let max = (curPage + 1 < _pages)
                ? curPage + 1
                : curPage;

            let useBeginElipsis: boolean = (index > 2);
            let useEndElipsis: boolean = (max + 1 < _pages);

            if (1 < index) {
                p.push(<Pagination.Item
                    key={1}
                    active={curPage === 1}
                    onClick={(evt: any) => handleClick(parseInt(evt.target.text))
                    }>
                    {1}
                </Pagination.Item>);
            }

            if (useBeginElipsis) {
                p.push(<Pagination.Ellipsis
                    key='eb' />);
            }

            for (index; index <= max; index++) {
                p.push(<Pagination.Item
                    key={index}
                    active={curPage === index}
                    onClick={(evt: any) => handleClick(parseInt(evt.target.text))
                    }>
                    {index}
                </Pagination.Item>);
            }

            if (useEndElipsis) {
                p.push(<Pagination.Ellipsis
                    key='ee' />);
            }

            if (_pages > max) {
                p.push(<Pagination.Item
                    key={_pages}
                    active={curPage === _pages}
                    onClick={(evt: any) => handleClick(parseInt(evt.target.text))
                    }>
                    {_pages}
                </Pagination.Item>);
            }

            setPageinationItems(p);
        }
        else {
            setDataToShow([]);
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [curPage, dataToFilter])

    React.useEffect(() => {

        let filterData = data;
        
        if (filter && data) {
            filterData = data.filter((item) => item.hashedGuid.startsWith(filter));
        }

        if (!filterData) {
            filterData = [];
        }

        setDataToFilter(filterData);

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [filter])

    const handleListSelect = (evt: any) => {
        try {
            const hash = evt.target.dataset['rbEventKey'];

            if (hash) {
                props.onSelected(hash);
            }
        } catch (error) {

        }
    }

    const handleClick = (num: number) => {
        if (!isNaN(num)) {
            setCurPage(num);
        }
    }

    return (dataToShow === undefined
        ? <CwaSpinner background='#eeeeee' />
        :
        <>
            <Form.Control
                className='qt-input'
                value={filter}
                onChange={(evt) => setFilter(evt.currentTarget.value)}
                placeholder={t('translation:search')}
                type='text'
                maxLength={utils.shortHashLen}
            />
            { dataToShow.length === 0 ? <></> : <>
                <hr />
                <ListGroup>
                    {dataToShow.map((archiv, index) => (
                        <ListGroupItem
                            onClick={handleListSelect}
                            action
                            eventKey={archiv.hashedGuid}
                            key={archiv.hashedGuid}
                        >
                            {archiv.hashedGuid.substring(0, utils.shortHashLen)}
                        </ListGroupItem>
                    ))}
                    {pages > 1 && (<>
                        <hr />
                        <Pagination size='sm' className='mb-0 justify-content-center' >
                            <Pagination.Prev disabled={curPage === 1} onClick={() => handleClick(curPage - 1)} />

                            {pageinationItems}

                            <Pagination.Next disabled={curPage === pages} onClick={() => handleClick(curPage + 1)} />
                        </Pagination>
                    </>)}
                </ListGroup>
            </>}
            <hr />
        </>

    )
}

CollectionOptions = (props: CollectionOptionsProps) => {
    const collectionRename = async (
        selectedCollection: Collection,
        newName: string
    ) => {
        if (selectedCollection.name !== newName) {
            await renameCollection(selectedCollection, newName);
            props.syncWithRemote();
        }
    };
    const showRenameCollectionModal = () => {
        props.setCollectionNamerAttributes({
            title: constants.RENAME_COLLECTION,
            buttonText: constants.RENAME,
            autoFilledName: getSelectedCollection(
                props.selectedCollectionID,
                props.collections
            )?.name,
            callback: (newName) => {
                props.startLoading();
                collectionRename(
                    getSelectedCollection(
                        props.selectedCollectionID,
                        props.collections
                    ),
                    newName
                );
            },
        });
    };
    const confirmDeleteCollection = () => {
        props.setDialogMessage({
            title: constants.CONFIRM_DELETE_COLLECTION,
            content: constants.DELETE_COLLECTION_MESSAGE(),
            staticBackdrop: true,
            proceed: {
                text: constants.DELETE_COLLECTION,
                action: () => {
                    props.startLoading();
                    deleteCollection(
                        props.selectedCollectionID,
                        props.syncWithRemote,
                        props.redirectToAll,
                        props.setDialogMessage
                    );
                },
                variant: 'danger',
            },
            close: {
                text: constants.CANCEL,
            },
        });
    };

    const archiveCollectionHelper = () => {
        changeCollectionVisibilityHelper(
            getSelectedCollection(
                props.selectedCollectionID,
                props.collections
            ),
            props.startLoading,
            props.finishLoading,
            props.setDialogMessage,
            props.syncWithRemote
        );
    };

    const confirmDownloadCollection = () => {
        props.setDialogMessage({
            title: constants.CONFIRM_DOWNLOAD_COLLECTION,
            content: constants.DOWNLOAD_COLLECTION_MESSAGE(),
            staticBackdrop: true,
            proceed: {
                text: constants.DOWNLOAD,
                action: downloadCollectionHelper,
                variant: 'success',
            },
            close: {
                text: constants.CANCEL,
            },
        });
    };

    const downloadCollectionHelper = async () => {
        props.startLoading();
        await downloadCollection(
            props.selectedCollectionID,
            props.setDialogMessage
        );
        await sleep(1000);
        props.finishLoading();
    };

    return (
        <Popover id="collection-options" style={{ borderRadius: '10px' }}>
            <Popover.Content style={{ padding: 0, border: 'none' }}>
                <ListGroup style={{ borderRadius: '8px' }}>
                    <MenuItem>
                        <MenuLink onClick={showRenameCollectionModal}>
                            {constants.RENAME}
                        </MenuLink>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink onClick={props.showCollectionShareModal}>
                            {constants.SHARE}
                        </MenuLink>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink onClick={confirmDownloadCollection}>
                            {constants.DOWNLOAD}
                        </MenuLink>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink onClick={archiveCollectionHelper}>
                            {IsArchived(
                                getSelectedCollection(
                                    props.selectedCollectionID,
                                    props.collections
                                )
                            )
                                ? constants.UNARCHIVE
                                : constants.ARCHIVE}
                        </MenuLink>
                    </MenuItem>
                    <MenuItem>
                        <MenuLink
                            variant={ButtonVariant.danger}
                            onClick={confirmDeleteCollection}>
                            {constants.DELETE}
                        </MenuLink>
                    </MenuItem>
                </ListGroup>
            </Popover.Content>
        </Popover>
    );
}