@servicetitan/table 25.1.0 → 25.4.0

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;
+};

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

@@ -3,7 +3,10 @@ import { Component, SyntheticEvent, ReactNode, FC } from 'react';
 import { IdType } from '@servicetitan/data-query';
 import { TableFilterCellProps, Radio } from '@servicetitan/design-system';
 
-import { renderCustomColumnMenuFilter } from '../column-menu-filters';
+import {
+    CustomColumnMenuFilterSingleOpts,
+    renderCustomColumnMenuFilter,
+} from '../column-menu-filters';
 
 interface SelectorProps<TV, TO> {
     options: TO[];
@@ -33,16 +36,21 @@ class SelectorRadio<TV, TO> extends Component<SelectorProps<TV, TO>> {
     }
 }
 
-export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
+export interface SingleSelectColumnMenuOptions<TV, TO = TV>
+    extends CustomColumnMenuFilterSingleOpts {
     options: TO[];
     valueSelector?: (item: TO) => TV;
     renderItem?: (item: TO) => ReactNode | string;
     filterOperator?: (listItem: any, value: TV) => boolean;
 }
 
-export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
-    props: SingleSelectColumnMenuOptions<TV, TO>
-) {
+export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>({
+    options,
+    valueSelector,
+    renderItem,
+    filterOperator,
+    ...opts
+}: SingleSelectColumnMenuOptions<TV, TO>) {
     const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
         const handleChange = (value: TV | undefined, event: SyntheticEvent<HTMLInputElement>) => {
             const filter =
@@ -50,7 +58,7 @@ export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
                     ? { value: '', operator: '' }
                     : {
                           value,
-                          operator: props.filterOperator ?? 'equals',
+                          operator: filterOperator ?? 'equals',
                       };
 
             onChange({
@@ -61,14 +69,14 @@ export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
 
         return (
             <SelectorRadio
-                options={props.options}
+                options={options}
                 value={value === '' ? undefined : value}
                 onChange={handleChange}
-                renderer={props.renderItem}
-                valueSelector={props.valueSelector ?? (option => option)}
+                renderer={renderItem}
+                valueSelector={valueSelector ?? (option => option)}
             />
         );
     };
 
-    return renderCustomColumnMenuFilter(FilterCell);
+    return renderCustomColumnMenuFilter(FilterCell, opts);
 }

package/src/index.ts

@@ -15,6 +15,7 @@ export {
     TableColumnReorderEvent,
     TableCell,
     TableHeaderCellProps,
+    TableHeaderCell,
     TableRowProps,
     TableRowClickEvent,
     TableDetailRow,