Sort & Filter

Overview

A lengthy list of content may need a way to be controlled by the viewer to reveal wanted content by sorting it in a different order, or by filtering out unneeded items.

Sorting

Sorting is a method in which the set of content is arranged in a particular order. Commonly this could be alphabetically, or by date. A user might change the sort order to find particular content quickly or to line up content in a specific order to compare them.

The sort should not remove content from the set.
The default should use a non-active Filter Button.

const SortExample = () => {
    const [value, setValue] = React.useState(0);
    const [open, setOpen] = React.useState(false);

    const onChangeHandler = (e) => {
        setValue(e);
        setOpen(false);
    };

    const sortOptions = [
        {
            text: 'Name: A to Z',
            value: 0,
        },
        {
            text: 'Name: Z to A',
            value: 1,
        },
    ];

    const arr = [
        'Alaska',
        'Colorado',
        'California',
        'Michigan',
        'New York',
    ];

    const myData = value === 0 ? arr.sort((a, b) => a.localeCompare(b)) : arr.sort((a, b) => b.localeCompare(a));

    return (
        <Stack direction="column" spacing={2}>
            <Popover
                el="span"
                direction="br"
                padding="s"
                onClickOutside={() => setOpen(false)}
                open={open}
                portal // This is optional
                trigger={
                    <FilterButton
                        onClick={() => setOpen(!open)}
                        value={value !== 0 && sortOptions[value].text}
                        label="Sort"
                        expandIcon={open}
                    />
                }
            >
                <OptionList options={sortOptions} onChange={onChangeHandler} />
            </Popover>
            <Stack direction="column" spacing={1}>
                {myData.map((e, i) => <Card padding="thin" key={i}>{e}</Card>)}
            </Stack>
        </Stack>

    );
};

render (SortExample)

const SortExample = () => {
    const [value, setValue] = React.useState(0);
    const [open, setOpen] = React.useState(false);

    const onChangeHandler = (e) => {
        setValue(e);
        setOpen(false);
    };

    const sortOptions = [
        {
            text: 'Name: A to Z',
            value: 0,
        },
        {
            text: 'Name: Z to A',
            value: 1,
        },
    ];

    const arr = [
        'Alaska',
        'Colorado',
        'California',
        'Michigan',
        'New York',
    ];

    const myData = value === 0 ? arr.sort((a, b) => a.localeCompare(b)) : arr.sort((a, b) => b.localeCompare(a));

    return (
        <Stack direction="column" spacing={2}>
            <Popover
                el="span"
                direction="br"
                padding="s"
                onClickOutside={() => setOpen(false)}
                open={open}
                portal // This is optional
                trigger={
                    <FilterButton
                        onClick={() => setOpen(!open)}
                        value={value !== 0 && sortOptions[value].text}
                        label="Sort"
                        expandIcon={open}
                    />
                }
            >
                <OptionList options={sortOptions} onChange={onChangeHandler} />
            </Popover>
            <Stack direction="column" spacing={1}>
                {myData.map((e, i) => <Card padding="thin" key={i}>{e}</Card>)}
            </Stack>
        </Stack>

    );
};

render (SortExample)

Filter

A filter hides all content except the what matches the selected criteria. Common filters might be status, time frame, person assigned, category, etc. If a filter is off, that means all content is being shown.

const FilterExample = () => {
    const [value, setValue] = React.useState([]);
    const [open, setOpen] = React.useState(false);

    const onChangeHandler = (data, checked) => {
        if (checked) {
            setValue((prevState) => [...prevState, data]);
        } else {
            setValue((prevState) =>
                [...prevState].filter((item) => item !== data)
            );
        }
    };

    const multiOptions = [
        {
            text: 'Country',
            value: 0,
        },
        {
            text: 'City',
            value: 1,
        },
    ];

    const arr = [
        {name: 'Los Angeles', type: 'city'},
        {name: 'Mexico', type: 'country'},
        {name: 'Seoul', type: 'city'},
        {name: 'Spain', type: 'country'},
        {name: 'USA', type: 'country'},
    ];

    return (
        <Stack direction="column" spacing={2}>
            <Popover
                el="span"
                direction="br"
                padding="s"
                onClickOutside={() => setOpen(false)}
                open={open}
                portal // This is optional
                trigger={
                    <FilterButton
                        onClick={() => setOpen(!open)}
                        value={value.length > 0 && value.length}
                        label="Type"
                        expandIcon={open}
                    />
                }
            >
                <OptionList
                    multiple
                    options={multiOptions}
                    onChange={onChangeHandler}
                    value={value}
                />
            </Popover>
            <Stack direction="column" spacing={1}>
                {arr.map((e, i) => {
                    const valueArr = value.map((e) => multiOptions[e].text.toLowerCase());
                    if (valueArr.length === 0) return <Card padding="thin" key={i}>{e.name}</Card>
                    if (valueArr.includes(e.type)) return <Card padding="thin" key={i}>{e.name}</Card>
                })}
            </Stack>
        &