@servicetitan/table 24.3.0 → 24.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
1
  import { FC } from 'react';
2
2
  export declare const SingleSelectDefaultExample: FC;
3
+ export declare const SingleSelectCustomFilterExample: FC;
3
4
  //# sourceMappingURL=single-select-filter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAY,MAAM,OAAO,CAAC;AAY9C,eAAO,MAAM,0BAA0B,EAAE,EAmDxC,CAAC"}
1
+ {"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAY,MAAM,OAAO,CAAC;AAY9C,eAAO,MAAM,0BAA0B,EAAE,EAmDxC,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,EAoC7C,CAAC"}
@@ -18,4 +18,18 @@ export const SingleSelectDefaultExample = provide({
18
18
  }), []);
19
19
  return (_jsxs(Fragment, { children: [_jsxs(Banner, Object.assign({ title: "Default filter with single select", className: "m-b-2" }, { children: ["Single select filter allows to choose one option from the provided list. You can pass simple options (string or number) or complex objects", _jsx("br", {}), "Use it when options list is fixed and less than 20 items"] })), _jsxs(Table, Object.assign({ tableState: tableState, striped: false }, { children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", width: "240px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In (simple single-select filter)", columnMenu: madeInColumnMenu }), _jsx(TableColumn, { field: "CategoryID", title: "Category (simple single-select filter)", columnMenu: categoryColumnMenu, cell: CategoryCell })] }))] }));
20
20
  }));
21
+ export const SingleSelectCustomFilterExample = provide({
22
+ singletons: [TableStore],
23
+ })(observer(() => {
24
+ const [{ tableState }] = useDependencies(TableStore);
25
+ const productNameCustomFilter = useMemo(() => {
26
+ const isVowel = (str) => /[aeiou]/i.test(str[0]);
27
+ return singleSelectColumnMenuFilter({
28
+ options: [0, 1],
29
+ renderItem: item => (item ? 'Start with Vowel' : 'Start with Consonants'),
30
+ filterOperator: (madeIn, value) => madeIn ? (value ? isVowel(madeIn) : !isVowel(madeIn)) : false,
31
+ });
32
+ }, []);
33
+ return (_jsxs(Fragment, { children: [_jsxs(Banner, Object.assign({ title: "Default filter with single select", className: "m-b-2" }, { children: ["Single select filter allows to choose one option from the provided list. You can pass simple options (string or number) or complex objects", _jsx("br", {}), "Custom filter allows you to provide custom filtering options"] })), _jsxs(Table, Object.assign({ tableState: tableState, striped: false }, { children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name (custom single-select filter)", columnMenu: productNameCustomFilter })] }))] }));
34
+ }));
21
35
  //# sourceMappingURL=single-select-filter.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE/D,MAAM,CAAC,MAAM,0BAA0B,GAAO,OAAO,CAAC;IAClD,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,4BAA4B,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAC9D,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACD,4BAA4B,CAAC;QACzB,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC,CACf,MAAC,QAAQ,eACL,6BAAM,SAAS,EAAC,SAAS,sCAAwB,SAAI,GAAG,CAAC,UAAU,SAC5D,CACd;QACD,aAAa,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU;KACvC,CAAC,EACN,EAAE,CACL,CAAC;IAEF,OAAO,CACH,MAAC,QAAQ,eACL,MAAC,MAAM,kBAAC,KAAK,EAAC,mCAAmC,EAAC,SAAS,EAAC,OAAO,+JAG/D,cAAM,iEAED,EACT,MAAC,KAAK,kBAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,iBACzC,KAAC,WAAW,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,OAAO,GAAG,EAC3E,KAAC,WAAW,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,OAAO,GAAG,EACtE,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,KAAK,EAAC,uCAAuC,EAC7C,UAAU,EAAE,gBAAgB,GAC9B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,YAAY,EAClB,KAAK,EAAC,wCAAwC,EAC9C,UAAU,EAAE,kBAAkB,EAC9B,IAAI,EAAE,YAAY,GACpB,KACE,IACD,CACd,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
1
+ {"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/demo/filters/single-select-filter.tsx"],"names":[],"mappings":"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"}
@@ -4,6 +4,7 @@ export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
4
4
  options: TO[];
5
5
  valueSelector?: (item: TO) => TV;
6
6
  renderItem?: (item: TO) => ReactNode | string;
7
+ filterOperator?: (listItem: any, value: TV) => boolean;
7
8
  }
8
9
  export declare function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(props: SingleSelectColumnMenuOptions<TV, TO>): (props: import("@servicetitan/design-system").TableColumnMenuProps) => JSX.Element;
9
10
  //# sourceMappingURL=single-select-filter.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAM,MAAM,OAAO,CAAC;AAKjE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AA8BlD,MAAM,WAAW,6BAA6B,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE;IACtD,OAAO,EAAE,EAAE,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,SAAS,GAAG,MAAM,CAAC;CACjD;AAED,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,MAAM,EAAE,EAAE,GAAG,EAAE,EACnE,KAAK,EAAE,6BAA6B,CAAC,EAAE,EAAE,EAAE,CAAC,sFAuB/C"}
1
+ {"version":3,"file":"single-select-filter.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAM,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAiClD,MAAM,WAAW,6BAA6B,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE;IACtD,OAAO,EAAE,EAAE,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,SAAS,GAAG,MAAM,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,OAAO,CAAC;CAC1D;AAED,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,MAAM,EAAE,EAAE,GAAG,EAAE,EACnE,KAAK,EAAE,6BAA6B,CAAC,EAAE,EAAE,EAAE,CAAC,sFA8B/C"}
@@ -17,11 +17,14 @@ export function singleSelectColumnMenuFilter(props) {
17
17
  const FilterCell = ({ value, onChange }) => {
18
18
  var _a;
19
19
  const handleChange = (value, event) => {
20
- onChange({
21
- value: value !== null && value !== void 0 ? value : '',
22
- operator: value ? 'equals' : '',
23
- syntheticEvent: event,
24
- });
20
+ var _a;
21
+ const filter = value === undefined
22
+ ? { value: '', operator: '' }
23
+ : {
24
+ value,
25
+ operator: (_a = props.filterOperator) !== null && _a !== void 0 ? _a : 'equals',
26
+ };
27
+ onChange(Object.assign(Object.assign({}, filter), { syntheticEvent: event }));
25
28
  };
26
29
  return (_jsx(SelectorRadio, { options: props.options, value: value === '' ? undefined : value, onChange: handleChange, renderer: props.renderItem, valueSelector: (_a = props.valueSelector) !== null && _a !== void 0 ? _a : (option => option) }));
27
30
  };
@@ -1 +1 @@
1
- {"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAwB,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAWtE,MAAM,aAAsB,SAAQ,SAAgC;IAChE,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACrD,OAAO;YACH,oDAAoD;YACpD,6BAAkB,SAAS,EAAC,sBAAsB,gBAC9C,KAAC,KAAK,IACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,EAChD,OAAO,EAAE,KAAK,KAAK,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,GACjE,KALK,KAAK,CAMT,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AAQD,MAAM,UAAU,4BAA4B,CACxC,KAA4C;IAE5C,MAAM,UAAU,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QACjE,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,KAAuC,EAAE,EAAE;YACpF,QAAQ,CAAC;gBACL,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE;gBAClB,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gBAC/B,cAAc,EAAE,KAAK;aACxB,CAAC,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,CACH,KAAC,aAAa,IACV,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACvC,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GAC1D,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,4BAA4B,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC"}
1
+ {"version":3,"file":"single-select-filter.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAwB,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAC;AAUtE,MAAM,aAAsB,SAAQ,SAAgC;IAChE,MAAM;QACF,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEhD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACrD,OAAO;YACH,oDAAoD;YACpD,6BAAkB,SAAS,EAAC,sBAAsB,gBAC9C,KAAC,KAAK,IACF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,EAChD,OAAO,EAAE,KAAK,KAAK,WAAW,EAC9B,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,GACjE,KALK,KAAK,CAMT,CACV,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AASD,MAAM,UAAU,4BAA4B,CACxC,KAA4C;IAE5C,MAAM,UAAU,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;;QACjE,MAAM,YAAY,GAAG,CAAC,KAAqB,EAAE,KAAuC,EAAE,EAAE;;YACpF,MAAM,MAAM,GACR,KAAK,KAAK,SAAS;gBACf,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;gBAC7B,CAAC,CAAC;oBACI,KAAK;oBACL,QAAQ,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,QAAQ;iBAC7C,CAAC;YAEZ,QAAQ,iCACD,MAAM,KACT,cAAc,EAAE,KAAK,IACvB,CAAC;QACP,CAAC,CAAC;QAEF,OAAO,CACH,KAAC,aAAa,IACV,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EACvC,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,KAAK,CAAC,UAAU,EAC1B,aAAa,EAAE,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,GAC1D,CACL,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,4BAA4B,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC"}
@@ -3,5 +3,6 @@ declare const _default: {
3
3
  title: string;
4
4
  };
5
5
  export default _default;
6
- export declare const SingleSelect: () => JSX.Element;
6
+ export declare const DefaultSingleSelect: () => JSX.Element;
7
+ export declare const CustomFilterSingleSelect: () => JSX.Element;
7
8
  //# sourceMappingURL=single-select-filter.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"single-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAEE;AAEF,eAAO,MAAM,YAAY,mBAAuC,CAAC"}
1
+ {"version":3,"file":"single-select-filter.stories.d.ts","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";;;;AAKA,wBAEE;AAEF,eAAO,MAAM,mBAAmB,mBAAuC,CAAC;AACxE,eAAO,MAAM,wBAAwB,mBAA4C,CAAC"}
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { SingleSelectDefaultExample } from '../../demo/filters/single-select-filter';
2
+ import { SingleSelectDefaultExample, SingleSelectCustomFilterExample, } from '../../demo/filters/single-select-filter';
3
3
  export default {
4
4
  title: 'Table/Filters/SingleSelect',
5
5
  };
6
- export const SingleSelect = () => _jsx(SingleSelectDefaultExample, {});
6
+ export const DefaultSingleSelect = () => _jsx(SingleSelectDefaultExample, {});
7
+ export const CustomFilterSingleSelect = () => _jsx(SingleSelectCustomFilterExample, {});
7
8
  //# sourceMappingURL=single-select-filter.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"single-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,eAAe;IACX,KAAK,EAAE,4BAA4B;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAC,0BAA0B,KAAG,CAAC"}
1
+ {"version":3,"file":"single-select-filter.stories.js","sourceRoot":"","sources":["../../../src/filters/single-select/single-select-filter.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACH,0BAA0B,EAC1B,+BAA+B,GAClC,MAAM,yCAAyC,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,4BAA4B;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,KAAC,0BAA0B,KAAG,CAAC;AACxE,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,KAAC,+BAA+B,KAAG,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/table",
3
- "version": "24.3.0",
3
+ "version": "24.3.2",
4
4
  "description": "",
5
5
  "homepage": "https://docs.st.dev/docs/frontend/table",
6
6
  "repository": {
@@ -37,9 +37,9 @@
37
37
  "memoize-one": "~6.0.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@servicetitan/data-query": "^24.3.0",
40
+ "@servicetitan/data-query": "^24.3.2",
41
41
  "@servicetitan/design-system": ">=12.4.1",
42
- "@servicetitan/form": "^24.3.0",
42
+ "@servicetitan/form": "^24.3.2",
43
43
  "@servicetitan/react-ioc": "^21.6.0",
44
44
  "@servicetitan/suppress-warnings": "^21.6.0",
45
45
  "@types/accounting": "~0.4.2",
@@ -53,9 +53,9 @@
53
53
  "react": "~17.0.2"
54
54
  },
55
55
  "peerDependencies": {
56
- "@servicetitan/data-query": "^24.3.0",
56
+ "@servicetitan/data-query": "^24.3.2",
57
57
  "@servicetitan/design-system": ">=12.4.1",
58
- "@servicetitan/form": "^24.3.0",
58
+ "@servicetitan/form": "^24.3.2",
59
59
  "@servicetitan/react-ioc": ">21.0.0",
60
60
  "@servicetitan/suppress-warnings": ">21.0.0",
61
61
  "accounting": "~0.4.1",
@@ -72,5 +72,5 @@
72
72
  "cli": {
73
73
  "webpack": false
74
74
  },
75
- "gitHead": "561a1b732af3c94e3ae57fb92e90e99396b30c15"
75
+ "gitHead": "c1b59595282a50978b190693924a2c5fdad68c09"
76
76
  }
@@ -62,3 +62,41 @@ export const SingleSelectDefaultExample: FC = provide({
62
62
  );
63
63
  })
64
64
  );
65
+
66
+ export const SingleSelectCustomFilterExample: FC = provide({
67
+ singletons: [TableStore],
68
+ })(
69
+ observer(() => {
70
+ const [{ tableState }] = useDependencies(TableStore);
71
+
72
+ const productNameCustomFilter = useMemo(() => {
73
+ const isVowel = (str: string) => /[aeiou]/i.test(str[0]);
74
+
75
+ return singleSelectColumnMenuFilter({
76
+ options: [0, 1],
77
+ renderItem: item => (item ? 'Start with Vowel' : 'Start with Consonants'),
78
+ filterOperator: (madeIn: string, value: number) =>
79
+ madeIn ? (value ? isVowel(madeIn) : !isVowel(madeIn)) : false,
80
+ });
81
+ }, []);
82
+
83
+ return (
84
+ <Fragment>
85
+ <Banner title="Default filter with single select" className="m-b-2">
86
+ Single select filter allows to choose one option from the provided list. You can
87
+ pass simple options (string or number) or complex objects
88
+ <br />
89
+ Custom filter allows you to provide custom filtering options
90
+ </Banner>
91
+ <Table tableState={tableState} striped={false}>
92
+ <TableColumn field="ProductID" title="ID" editable={false} width="100px" />
93
+ <TableColumn
94
+ field="ProductName"
95
+ title="Product Name (custom single-select filter)"
96
+ columnMenu={productNameCustomFilter}
97
+ />
98
+ </Table>
99
+ </Fragment>
100
+ );
101
+ })
102
+ );
@@ -1,7 +1,11 @@
1
- import { SingleSelectDefaultExample } from '../../demo/filters/single-select-filter';
1
+ import {
2
+ SingleSelectDefaultExample,
3
+ SingleSelectCustomFilterExample,
4
+ } from '../../demo/filters/single-select-filter';
2
5
 
3
6
  export default {
4
7
  title: 'Table/Filters/SingleSelect',
5
8
  };
6
9
 
7
- export const SingleSelect = () => <SingleSelectDefaultExample />;
10
+ export const DefaultSingleSelect = () => <SingleSelectDefaultExample />;
11
+ export const CustomFilterSingleSelect = () => <SingleSelectCustomFilterExample />;
@@ -1,9 +1,9 @@
1
1
  import { Component, SyntheticEvent, ReactNode, FC } from 'react';
2
2
 
3
+ import { IdType } from '@servicetitan/data-query';
3
4
  import { TableFilterCellProps, Radio } from '@servicetitan/design-system';
4
5
 
5
6
  import { renderCustomColumnMenuFilter } from '../column-menu-filters';
6
- import { IdType } from '@servicetitan/data-query';
7
7
 
8
8
  interface SelectorProps<TV, TO> {
9
9
  options: TO[];
@@ -37,6 +37,7 @@ export interface SingleSelectColumnMenuOptions<TV, TO = TV> {
37
37
  options: TO[];
38
38
  valueSelector?: (item: TO) => TV;
39
39
  renderItem?: (item: TO) => ReactNode | string;
40
+ filterOperator?: (listItem: any, value: TV) => boolean;
40
41
  }
41
42
 
42
43
  export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
@@ -44,9 +45,16 @@ export function singleSelectColumnMenuFilter<TV extends IdType, TO = TV>(
44
45
  ) {
45
46
  const FilterCell: FC<TableFilterCellProps> = ({ value, onChange }) => {
46
47
  const handleChange = (value: TV | undefined, event: SyntheticEvent<HTMLInputElement>) => {
48
+ const filter =
49
+ value === undefined
50
+ ? { value: '', operator: '' }
51
+ : {
52
+ value,
53
+ operator: props.filterOperator ?? 'equals',
54
+ };
55
+
47
56
  onChange({
48
- value: value ?? '',
49
- operator: value ? 'equals' : '',
57
+ ...filter,
50
58
  syntheticEvent: event,
51
59
  });
52
60
  };