Filter Bar

docs/documentation/docs/controls/FilterBar.md

@@ -0,0 +1,88 @@
+# FilterBar
+
+This control allows you to render a bar of filters that looks exactly the same as in modern lists.
+
+Here is an example of the control in action:
+
+![FilterBar control](../assets/FilterBar.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- In your component file, import the `FilterBar` control as follows:
+
+```TypeScript
+import { FilterBar } from "@pnp/spfx-controls-react/lib/FilterBar";
+```
+
+- Use the `FilterBar` control in your code as follows:
+
+```TypeScript
+// Initial state
+this.state = {
+      filters: [{
+            label: "Title",
+            value: "title 1"
+        },
+        {
+            label: "Field1",
+            value: "value 1"
+        },
+        {
+            label: "Title",
+            value: "title 2"
+        }
+    ]
+}
+...
+...
+// Events 
+private onClearFilters = () => {
+    console.log("Cleared all filters");
+    this.setState({ filters: []});
+}
+
+private onRemoveFilter = (label: string, value: string) => {
+    console.log(`Cleared ${label} ${value}`);
+    const itm = this.state.filters.find(i => i.label === label && i.value === value);
+    if (itm) {
+        const index = this.state.filters.indexOf(itm);
+        this.state.filters.splice(index, 1)
+
+        this.setState({
+          filters: [...this.state.filters]
+        });
+    }
+}
+
+...
+...
+
+//Render the filter bar
+<FilterBar
+    items={this.state.items}
+    inlineItemCount={3}
+    onClearFilters={this.onClearFilters} 
+    onRemoveFilter={this.onRemoveFilter}>
+</FilterBar>
+```
+
+## Implementation
+
+The `FilterBar` control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| items | [IFilterBarItem[]](#ifilterbaritem) | yes | Filters to be displayed. Multiple filters with the same label are grouped together | |
+| inlineItemCount | number | no | Number of filters, after which filters start showing as overflow | 5 |
+| onClearFilters | () => void | no | Callback function called after the next item button is clicked. Not used when triggerPageEvent is specified. | |
+| onRemoveFilter | (label: string, value: string) => void | no | Callback function called after clicking a singular filter pill | |
+
+## IFilterBarItem
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| label | string | yes | Filter label | |
+| value | string | yes | Filter value | |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FilterBar)

docs/documentation/docs/index.md

@@ -79,6 +79,7 @@ The following controls are currently available:
 - [FieldPicker](./controls/FieldPicker) (control to pick one or multiple fields from a list or a site)
 - [FilePicker](./controls/FilePicker) (control that allows to browse and select a file from various places)
 - [FileTypeIcon](./controls/FileTypeIcon) (Control that shows the icon of a specified file path or application)
+- [FilterBar](./controls/FilterBar) (Control that renders filters in a similar way to modern lists)
 - [FolderExplorer](./controls/FolderExplorer) (Control that allows to browse the folders and sub-folders from a root folder)
 - [FolderPicker](./controls/FolderPicker) (Control that allows to browse and select a folder)
 - [GridLayout](./controls/GridLayout) (control that renders a responsive grid layout for your web parts)

docs/documentation/mkdocs.yml

@@ -36,6 +36,7 @@ nav:
     - FieldPicker: 'controls/FieldPicker.md'
     - FilePicker: 'controls/FilePicker.md'
     - FileTypeIcon: 'controls/FileTypeIcon.md'
+    - FilterBar: 'controls/FilterBar.md'
     - FolderExplorer: 'controls/FolderExplorer.md'
     - FolderPicker: 'controls/FolderPicker.md'
     - GridLayout: 'controls/GridLayout.md'

src/FilterBar.ts

@@ -0,0 +1 @@
+export * from './controls/filterBar';

src/controls/filterBar/FilterBar.module.scss

@@ -0,0 +1,109 @@
+@import '~@fluentui/react/dist/sass/References.scss';
+
+$--ms-semanticColors-listBackground: #ffffff;
+$--ms-effects-roundedCorner6: 6px;
+$--ms-effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
+
+.container {
+    padding: 0 16px;
+    align-items: center;
+    background: $--ms-semanticColors-listBackground;
+    position: relative;
+    height: 42px;
+    white-space: pre;
+    display: flex;
+    color: "[theme:neutralSecondary, default:#{$ms-color-neutralSecondary}]";
+    overflow: hidden;
+    border-radius: $--ms-effects-roundedCorner6 $--ms-effects-roundedCorner6 0 0;
+    box-shadow: $--ms-effects-elevation4;
+}
+
+.pillGroup {
+    display: flex;
+    align-items: center;
+}
+
+html[dir=ltr] {
+    .label {
+        margin-right: 4px;
+        //         @extend .overflow;
+        //         margin-left: 0;
+    }
+    .overflow {
+        .label {
+            margin-left: 0;
+        }
+    }
+    .pill {
+        padding-left: 8px;
+    }
+
+    .icon {
+        margin-right: 0;
+    }
+    .clearAll {
+        margin-right: 0;
+    }
+    .clearAll {
+        margin-left: auto;
+    }
+}
+html[dir=ltr] {
+    .label {
+        margin-left: 8px;
+    }
+
+
+    .pill {
+        padding-right: 8px;
+    }
+    .icon {
+        margin-left: 10px;
+    }
+}
+
+.pill {
+
+    background: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
+    border-radius: 12px;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    height: 24px;
+    margin: 0 4px;
+    cursor: pointer;
+    z-index: 2;
+    color: inherit;
+}
+
+.pillText {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-bottom: 2px;
+}
+
+.icon {
+    font-size: 12px;
+}
+.overflow {
+    padding: 2px 8px;
+
+    .pillGroup {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .pill {
+        margin: 6px 0;
+    }
+}
+
+.clearAll {
+    background: 0 0;
+    border: 1px solid "[theme:neutralSecondary, default:#{$ms-color-neutralSecondary}]";
+    height: 22px;
+}
+
+

src/controls/filterBar/FilterlBar.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import styles from "./FilterBar.module.scss";
+import { PillGroup } from './PillGroup';
+import { Pill } from './Pill';
+import { OverflowPill } from './OverflowPill';
+import { IFilterBarItem } from './IFilterBarItem';
+import { IFilterBarItemGroup } from './IFilterBarItemGroup';
+import * as strings from "ControlStrings";
+import { findLastIndex, uniq} from "lodash";
+import { ThemeProvider } from '@fluentui/react/lib/Theme';
+import { getTheme } from '@fluentui/react/lib/Styling';
+
+export interface IFilterPillBarProps {
+    /**
+        Filters to be displayed. Multiple filters with the same label are grouped together
+    */
+    items: IFilterBarItem[];
+    /**
+        Number of filters, after which filters start showing as overflow
+    */
+    inlineItemCount?: number;
+    /**
+        Callback function called after clicking 'Clear filters' pill.
+    */
+    onClearFilters?: () => void;
+    /**
+        Callback function called after clicking a singular filter pill
+    */
+    onRemoveFilter?: (label: string, value: string) => void; 
+}
+
+export const FilterBar: React.FunctionComponent<IFilterPillBarProps> = (props: IFilterPillBarProps) => {
+
+    const orderedArray = (arr: IFilterBarItem[]) => {
+        const ret: IFilterBarItem[] = [];
+        arr.map(i => {
+            const index = findLastIndex(ret, r => r.label === i.label);
+            if (index > -1)
+            {
+                ret.splice(index + 1, 0, i);
+            }
+            else {
+                ret.push(i);
+            }
+        });
+        return ret;
+    }
+
+    const groupItems = (itms: IFilterBarItem[]): IFilterBarItemGroup[] => itms.reduce((acc: IFilterBarItemGroup[], itm: IFilterBarItem) => {
+        const label = itm.label;
+        let obj = acc.find(i => i.label === label);
+        if (!obj) {
+            obj = {
+                label: label,
+                values: [itm.value]
+            };
+            acc.push(obj);
+        }
+        else {
+            if (!obj.values.find(v => v === itm.value)) {
+                obj.values.push(itm.value);
+            }
+        }
+
+        return acc;
+    }, []);
+
+    const clearAll = () => {
+
+        if (props.onClearFilters) {
+            props.onClearFilters();
+        }
+    }
+
+    const pillClick = (label?: string, value?: string) => {
+        console.log(label, value);
+        if (props.onRemoveFilter) {
+            props.onRemoveFilter(label as string, value as string);
+        }
+
+    }
+    //const [items, setItems] = React.useState());
+    const defaultInlineItemCount = 5;
+    const [inlineCount, setInlineCount] = React.useState(defaultInlineItemCount);
+
+    const groupedItems: IFilterBarItemGroup[] = React.useMemo(() => groupItems(orderedArray(uniq(props.items))), [props.items]);
+
+    React.useEffect(() => {
+        setInlineCount(props.inlineItemCount ?? defaultInlineItemCount);
+    }, [props.inlineItemCount])
+
+    return (
+        <>
+            <ThemeProvider theme={getTheme()}>
+            {
+                groupedItems && groupedItems.length > 0 && (
+                    <div className={styles.container} aria-label={strings.AppliedFiltersAriaLabel} role='region'>
+                        {
+                            groupedItems.slice(0, inlineCount).map((i, index) => <PillGroup item={i} key={index} onRemoveFilter={pillClick} />)
+                        }
+                        {
+                            groupedItems.length > inlineCount && (
+                                <OverflowPill items={groupedItems.slice(inlineCount)} onClick={pillClick} />
+                            )
+                        }
+                        <Pill clearAll={true} onClick={clearAll} />
+                    </div>
+                )
+            }
+            </ThemeProvider>
+        </>
+    );
+};

src/controls/filterBar/IFilterBarItem.ts

@@ -0,0 +1,14 @@
+/**
+ * Public properties of the FilterBarItem
+ *
+ */
+export interface IFilterBarItem {
+    /**
+        Label of the filter
+    */
+    label: string;
+    /**
+        Value of the filter
+    */
+    value: string;
+}

src/controls/filterBar/IFilterBarItemGroup.ts

@@ -0,0 +1,4 @@
+export interface IFilterBarItemGroup {
+    label: string;
+    values: string[];
+}