@servicetitan/table 25.0.1 → 25.2.0

package/src/filters/async-select/async-select-filter.tsx

@@ -10,7 +10,10 @@ import {
 } from '@servicetitan/design-system';
 import { IdType } from '@servicetitan/data-query';
 
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
 import { makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 
@@ -25,7 +28,7 @@ export interface AsyncSelectItem<TV extends IdType = IdType> {
 }
 
 interface SelectorProps<TID extends IdType, TO extends AsyncSelectItem<TID>> {
-    placeholder: string;
+    placeholder?: string;
     selected: TO[];
     dataFetcher: AsyncSelectFilterDataFetcher<TID, TO>;
     itemComponent: FC<SelectorItemProps>;
@@ -174,9 +177,10 @@ const SelectorItemMultiple: FC<SelectorItemProps> = ({ option, renderer, checked
     />
 );
 
-export interface AsyncSelectFilterOptions<TID extends IdType, TO extends AsyncSelectItem<TID>> {
+export interface AsyncSelectFilterOptions<TID extends IdType, TO extends AsyncSelectItem<TID>>
+    extends CustomColumnMenuFilterSingleOpts {
     dataFetcher: AsyncSelectFilterDataFetcher<TID, TO>;
-    placeholder: string;
+    placeholder?: string;
     multiple?: boolean;
     renderItem?: (item: TO) => ReactNode;
 }
@@ -185,13 +189,20 @@ interface TableFilterCellPropsTyped<T = any> extends Omit<TableFilterCellProps,
     value?: T;
 }
 
-export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends AsyncSelectItem<TID>>(
-    options: AsyncSelectFilterOptions<TID, TO>
-) {
+/**
+ * @deprecated use selectColumnMenuFilter instead
+ */
+export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends AsyncSelectItem<TID>>({
+    dataFetcher,
+    placeholder,
+    multiple,
+    renderItem,
+    ...opts
+}: AsyncSelectFilterOptions<TID, TO>) {
     const contains = (value: TID, options?: TO[]) => options?.some(opt => opt.value === value);
     const equals = (value: TID, option?: TO) => option?.value === value;
 
-    const FilterCell = options.multiple
+    const FilterCell = multiple
         ? ({ value, onChange }: TableFilterCellPropsTyped<TO[]>) => {
               const handleChange = (
                   option: TO,
@@ -214,9 +225,9 @@ export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends Async
                       selected={value ?? []}
                       itemComponent={SelectorItemMultiple}
                       onChange={handleChange}
-                      placeholder={options.placeholder}
-                      renderer={options.renderItem}
-                      dataFetcher={options.dataFetcher}
+                      placeholder={placeholder}
+                      renderer={renderItem}
+                      dataFetcher={dataFetcher}
                   />
               );
           }
@@ -238,12 +249,12 @@ export function asyncSelectColumnMenuFilter<TID extends IdType, TO extends Async
                       selected={value ? [value] : []}
                       onChange={handleChange}
                       itemComponent={SelectorItemSingle}
-                      placeholder={options.placeholder}
-                      renderer={options.renderItem}
-                      dataFetcher={options.dataFetcher}
+                      placeholder={placeholder}
+                      renderer={renderItem}
+                      dataFetcher={dataFetcher}
                   />
               );
           };
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }

package/src/filters/column-menu-filters.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType, CSSProperties, FC } from 'react';
 import {
     TableColumnMenuFilter,
     TableColumnMenuProps,
@@ -11,35 +11,58 @@ export const StandardColumnMenuFilter = (props: TableColumnMenuProps) => (
     <TableColumnMenuFilter {...props} expanded />
 );
 
+export interface CustomColumnMenuFilterSingleOpts {
+    contentMaxHeight?: string;
+    contentClassName?: string;
+}
+export interface CustomColumnMenuFilterDoubleOpts {
+    double?: boolean;
+    doubleContentClassName?: string;
+}
+
+export type CustomColumnMenuFilterOpts = CustomColumnMenuFilterSingleOpts &
+    CustomColumnMenuFilterDoubleOpts;
+
 export function renderCustomColumnMenuFilter(
     FilterCell: ComponentType<TableFilterCellProps>,
-    double?: boolean
+    doubleOrOptions?: boolean | CustomColumnMenuFilterOpts
 ) {
-    const filterUI: FC<TableColumnMenuFilterUIProps> = ({
+    const opts: CustomColumnMenuFilterOpts =
+        typeof doubleOrOptions === 'boolean' ? { double: doubleOrOptions } : doubleOrOptions ?? {};
+    const FilterUI: FC<TableColumnMenuFilterUIProps> = ({
         firstFilterProps,
         secondFilterProps,
         logicData,
         logicValue,
         onLogicChange,
-    }) => (
-        <div>
-            <FilterCell {...firstFilterProps} />
-            {double && (
-                <div>
-                    <DropDownList
-                        data={logicData}
-                        value={logicValue}
-                        onChange={onLogicChange}
-                        className="k-filter-and m-b-1"
-                        textField="text"
-                    />
-                    <FilterCell {...secondFilterProps} />
-                </div>
-            )}
-        </div>
-    );
+    }) => {
+        const contentStyles: CSSProperties = {};
+
+        if (opts.contentMaxHeight) {
+            contentStyles.maxHeight = opts.contentMaxHeight;
+            contentStyles.overflowY = 'auto';
+        }
+
+        return (
+            <div className={opts.contentClassName} style={contentStyles}>
+                <FilterCell {...firstFilterProps} />
+                {!!opts.double && (
+                    <div className={opts.doubleContentClassName}>
+                        <DropDownList
+                            data={logicData}
+                            value={logicValue}
+                            onChange={onLogicChange}
+                            className="k-filter-and m-b-1"
+                            textField="text"
+                        />
+                        <FilterCell {...secondFilterProps} />
+                    </div>
+                )}
+            </div>
+        );
+    };
 
     return (props: TableColumnMenuProps) => (
-        <TableColumnMenuFilter {...props} filterUI={filterUI} expanded />
+        <TableColumnMenuFilter {...props} filterUI={FilterUI} expanded />
     );
 }

package/src/filters/index.ts

@@ -8,3 +8,4 @@ export * from './multiselect-filter/multiselect-filter';
 export * from './numeric-filter-extended/numeric-filter-extended';
 export * from './single-select/single-select-filter';
 export * from './async-select/async-select-filter';
+export * from './select-filter/select-filter';

package/src/filters/multiselect-filter/multiselect-filter.tsx

@@ -2,7 +2,10 @@ import { Component, SyntheticEvent, ReactNode, FC } from 'react';
 
 import { TableFilterCellProps, Checkbox } from '@servicetitan/design-system';
 
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
 
 interface SelectorProps<T> {
     options: T[];
@@ -37,7 +40,11 @@ class Selector<T> extends Component<SelectorProps<T>> {
     }
 }
 
-export function multiSelectColumnMenuFilter<T>(data: T[], renderItem?: (item: T) => ReactNode) {
+export function multiSelectColumnMenuFilter<T>(
+    data: T[],
+    renderItem?: (item: T) => ReactNode,
+    opts?: CustomColumnMenuFilterSingleOpts
+) {
     const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
         const handleChange = (value: T[] | undefined, event: SyntheticEvent<HTMLInputElement>) => {
             onChange({
@@ -57,12 +64,13 @@ export function multiSelectColumnMenuFilter<T>(data: T[], renderItem?: (item: T)
         );
     };
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }
 
 export function complexItemMultiSelectColumnMenuFilter<T>(
     data: T[],
-    renderItem?: (item: T) => ReactNode
+    renderItem?: (item: T) => ReactNode,
+    opts?: CustomColumnMenuFilterSingleOpts
 ) {
     class FilterCell extends Component<TableFilterCellProps> {
         contains = (item: any) => {
@@ -93,12 +101,13 @@ export function complexItemMultiSelectColumnMenuFilter<T>(
         }
     }
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }
 
 export function multiItemMultiSelectColumnMenuFilter<T>(
     data: T[],
-    renderItem?: (item: T) => ReactNode
+    renderItem?: (item: T) => ReactNode,
+    opts?: CustomColumnMenuFilterSingleOpts
 ) {
     class FilterCell extends Component<TableFilterCellProps> {
         contains = (item: any) => {
@@ -129,5 +138,5 @@ export function multiItemMultiSelectColumnMenuFilter<T>(
         }
     }
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }

package/src/filters/select-filter/__tests__/object-search.test.ts

@@ -0,0 +1,32 @@
+import { objectSearch } from '../object-search';
+
+describe('objectSearch', () => {
+    const obj = () => ({
+        id: 12345,
+        name: 'Some Name',
+        active: true,
+        category: null,
+    });
+
+    test('search and find in simple string', () => {
+        expect(objectSearch('iMPl')('sImplE String')).toBe(true);
+    });
+    test('search and not find in simple string', () => {
+        expect(objectSearch('iMoPl')('sImplE String')).toBe(false);
+    });
+
+    test('search simple number', () => {
+        expect(objectSearch('23')(12345)).toBe(false);
+    });
+
+    test('search null', () => {
+        expect(objectSearch('23')(null)).toBe(false);
+    });
+
+    test('search and find in object', () => {
+        expect(objectSearch('Me ')(obj())).toBe(true);
+    });
+    test('search and not find in object', () => {
+        expect(objectSearch('Mee')(obj)).toBe(false);
+    });
+});

package/src/filters/select-filter/object-search.ts

@@ -0,0 +1,25 @@
+export const objectSearch = (search: string) => {
+    const s = search.toLowerCase().trim();
+
+    return (item: any): boolean => {
+        if (!s) {
+            return true;
+        }
+
+        if (item === null) {
+            return false;
+        }
+
+        if (typeof item === 'string') {
+            return item.toLowerCase().includes(s);
+        }
+
+        if (typeof item === 'object') {
+            return Object.values(item).some(value =>
+                typeof value === 'string' ? value.toLowerCase().includes(s) : false
+            );
+        }
+
+        return false;
+    };
+};

package/src/filters/select-filter/select-filter.stories.tsx

@@ -0,0 +1,8 @@
+import { SelectAsyncExample, SelectSyncExample } from '../../demo/filters/select-filter';
+
+export default {
+    title: 'Table/Filters/Select',
+};
+
+export const AsyncSelect = () => <SelectAsyncExample />;
+export const SyncSelect = () => <SelectSyncExample />;

package/src/filters/select-filter/select-filter.tsx

@@ -0,0 +1,320 @@
+import { Component, SyntheticEvent, ReactNode, Fragment, KeyboardEvent, FC } from 'react';
+
+import {
+    Checkbox,
+    TableFilterCellProps,
+    Radio,
+    Input,
+    Spinner,
+    BodyText,
+} from '@servicetitan/design-system';
+import { IdType } from '@servicetitan/data-query';
+
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
+import { makeObservable, observable, runInAction, toJS } from 'mobx';
+import { observer } from 'mobx-react';
+import { getSimpleValue } from './value-getter';
+import { objectSearch } from './object-search';
+
+export type SelectFilterDataFetcher<TO> = (opts: { search?: string }) => Promise<{ data: TO[] }>;
+
+export interface SelectFilterSearchOptions<TO = any> {
+    placeholder?: string;
+    filter(search: string): (item: TO) => boolean | undefined;
+}
+
+interface SelectorProps<TO> {
+    search?: SelectFilterSearchOptions<TO>;
+    selected: TO[];
+    data?: TO[];
+    dataFetcher?: SelectFilterDataFetcher<TO>;
+    itemComponent: FC<SelectorItemProps<TO>>;
+    onChange(option: TO, checked: boolean, event: SyntheticEvent<HTMLInputElement>): void;
+    valueSelector(item: TO): IdType;
+    renderItem(item: TO): ReactNode;
+}
+
+interface SelectorItemProps<TO> {
+    option: TO;
+    checked: boolean;
+    onChange(option: TO, checked: boolean, event: SyntheticEvent<HTMLInputElement>): void;
+    renderer?(item: TO): ReactNode;
+}
+
+@observer
+class SelectorAsync<TO> extends Component<SelectorProps<TO>> {
+    @observable shownOptions: TO[] = [];
+    @observable search = '';
+    @observable error = false;
+    @observable loading = false;
+
+    constructor(props: SelectorProps<TO>) {
+        super(props);
+        makeObservable(this);
+    }
+
+    componentDidMount() {
+        this.searchOptions().catch();
+    }
+
+    handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+        }
+    };
+
+    handleSearch = (_0: SyntheticEvent<HTMLInputElement>, data: { value: string }) => {
+        runInAction(() => (this.search = data.value));
+        this.searchOptions().catch();
+    };
+
+    searchOptions = async () => {
+        if (this.props.dataFetcher) {
+            runInAction(() => {
+                this.loading = true;
+            });
+        }
+
+        try {
+            const data = await this.getData();
+
+            runInAction(() => {
+                this.shownOptions = data;
+                this.error = false;
+                this.loading = false;
+            });
+        } catch {
+            runInAction(() => {
+                this.error = true;
+                this.loading = false;
+            });
+        }
+    };
+
+    render() {
+        const selectedOptions = this.props.selected;
+        const selected = new Set(selectedOptions.map(opt => this.props.valueSelector(opt)));
+        const ItemComponent = this.props.itemComponent;
+
+        return (
+            <Fragment>
+                {!!this.props.search && (
+                    <Input
+                        className="m-x-half m-t-half m-b-2"
+                        placeholder={this.props.search?.placeholder}
+                        onChange={this.handleSearch}
+                        onKeyDown={this.handleKeyDown}
+                        size="xsmall"
+                        value={this.search}
+                    />
+                )}
+                <div className="p-x-half position-relative" onKeyDown={this.handleKeyDown}>
+                    {!!selectedOptions.length && (
+                        <div className="border-bottom m-y-half">
+                            {selectedOptions.map((option, index) => (
+                                <ItemComponent
+                                    key={this.getItemKey(option, index)}
+                                    option={option}
+                                    checked
+                                    renderer={this.props.renderItem}
+                                    onChange={this.props.onChange}
+                                />
+                            ))}
+                        </div>
+                    )}
+                    {this.error ? (
+                        <BodyText className="c-red-500">Unable to load options</BodyText>
+                    ) : this.shownOptions.length ? (
+                        this.shownOptions
+                            .filter(opt => !selected.has(this.props.valueSelector(opt)))
+                            .map((option, index) => (
+                                <ItemComponent
+                                    key={this.getItemKey(option, index)}
+                                    option={option}
+                                    checked={false}
+                                    renderer={this.props.renderItem}
+                                    onChange={this.props.onChange}
+                                />
+                            ))
+                    ) : this.loading ? (
+                        <BodyText>&nbsp;</BodyText>
+                    ) : (
+                        <BodyText subdued>No options match search criteria</BodyText>
+                    )}
+
+                    {this.loading && (
+                        <div className="position-absolute top-0 bottom-0 left-0 right-0 opacity-disabled bg-white d-f justify-content-center">
+                            <Spinner size="tiny" />
+                        </div>
+                    )}
+                </div>
+            </Fragment>
+        );
+    }
+
+    private async getData(): Promise<TO[]> {
+        if (this.props.dataFetcher) {
+            const { data } = await this.props.dataFetcher({
+                search: this.search,
+            });
+
+            return data;
+        }
+
+        let data = this.props.data ?? [];
+
+        if (this.props.search?.filter) {
+            data = data.filter(this.props.search.filter(this.search));
+        }
+        return data;
+    }
+
+    private getItemKey = (item: TO, index: number) => {
+        return `${index}__${this.props.valueSelector(item)}`;
+    };
+}
+
+const SelectorItemSingle: FC<SelectorItemProps<any>> = ({
+    option,
+    renderer,
+    checked,
+    onChange,
+}) => (
+    <Radio
+        label={renderer?.(option) ?? `${option}`}
+        checked={checked}
+        onChange={(_, event) => onChange(option, true, event)}
+        className="m-b-1"
+    />
+);
+
+const SelectorItemMultiple: FC<SelectorItemProps<any>> = ({
+    option,
+    renderer,
+    checked,
+    onChange,
+}) => (
+    <Checkbox
+        label={renderer?.(option) ?? `${option}`}
+        checked={checked}
+        onChange={(_, checked, event) => onChange(option, checked, event)}
+        className="m-b-1"
+    />
+);
+
+export interface SelectFilterOptions<TO> extends CustomColumnMenuFilterSingleOpts {
+    /** Can select multiple options in filter */
+    multiple?: boolean;
+    /** Ability to search options in filter */
+    search?: boolean | Partial<SelectFilterSearchOptions>;
+    /** Static options to show in filter */
+    data?: TO[];
+    /** Method to fetch filter options asynchronously */
+    dataFetcher?: SelectFilterDataFetcher<TO>;
+    /** Search operator passed to table state */
+    operator?: ((value: any, options?: TO[]) => boolean) | ((value: any, options?: TO) => boolean);
+    /** Select item value (ex id) for complex items */
+    valueSelector?(item: TO): IdType;
+    /** Select row item value (from table source row field) for complex items */
+    rowValueSelector?(item: any): IdType | undefined;
+    /** Render option label */
+    renderItem?(item: TO): ReactNode;
+}
+
+interface TableFilterCellPropsTyped<T = any> extends Omit<TableFilterCellProps, 'value'> {
+    value?: T;
+}
+
+export function selectColumnMenuFilter<TO>({
+    dataFetcher,
+    data,
+    search,
+    multiple,
+    valueSelector = getSimpleValue,
+    rowValueSelector = getSimpleValue,
+    renderItem,
+    operator,
+    ...opts
+}: SelectFilterOptions<TO>) {
+    const renderer = renderItem ?? (item => valueSelector(item));
+
+    const contains = (value: any, options?: TO[]) =>
+        options?.some(opt => valueSelector(opt) === rowValueSelector(value));
+
+    const equals = (value: any, option?: TO) =>
+        option === undefined ? false : valueSelector(option) === rowValueSelector(value);
+
+    const searchOptions = search
+        ? {
+              filter: objectSearch,
+              ...(typeof search === 'boolean' ? {} : search),
+          }
+        : undefined;
+
+    if (multiple) {
+        const FilterCell = ({ value, onChange }: TableFilterCellPropsTyped<TO[]>) => {
+            const handleChange = (
+                option: TO,
+                checked: boolean,
+                event: SyntheticEvent<HTMLInputElement>
+            ) => {
+                const val = checked
+                    ? (value ?? []).concat(option)
+                    : (value ?? []).filter(opt =>
+                          valueSelector
+                              ? valueSelector(opt) !== valueSelector(option)
+                              : option !== opt
+                      );
+
+                onChange({
+                    value: val.length ? toJS(val) : undefined,
+                    operator: val.length ? operator ?? contains : '',
+                    syntheticEvent: event,
+                });
+            };
+
+            return (
+                <SelectorAsync
+                    selected={value ?? []}
+                    itemComponent={SelectorItemMultiple}
+                    onChange={handleChange}
+                    search={searchOptions}
+                    renderItem={renderer}
+                    dataFetcher={dataFetcher}
+                    data={data}
+                    valueSelector={valueSelector}
+                />
+            );
+        };
+
+        return renderCustomColumnMenuFilter(FilterCell, opts);
+    }
+
+    const FilterCell = ({ value, onChange }: TableFilterCellPropsTyped<TO>) => {
+        const handleChange = (option: TO, _: boolean, event: SyntheticEvent<HTMLInputElement>) => {
+            onChange({
+                value: toJS(option),
+                operator: operator ?? equals,
+                syntheticEvent: event,
+            });
+        };
+
+        return (
+            <SelectorAsync
+                selected={value ? [value] : []}
+                onChange={handleChange}
+                itemComponent={SelectorItemSingle}
+                search={searchOptions}
+                renderItem={renderer}
+                dataFetcher={dataFetcher}
+                data={data}
+                valueSelector={valueSelector}
+            />
+        );
+    };
+
+    return renderCustomColumnMenuFilter(FilterCell, opts);
+}

package/src/filters/select-filter/value-getter.ts

@@ -0,0 +1,13 @@
+import { IdType } from '@servicetitan/data-query';
+
+export const getSimpleValue = (item: any): IdType => {
+    if (item === null) {
+        return item;
+    }
+
+    if (typeof item === 'object' || typeof item === 'function') {
+        return `${item}`;
+    }
+
+    return item;
+};