@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.
- package/dist/demo/filters/single-select-filter.d.ts +1 -0
- package/dist/demo/filters/single-select-filter.d.ts.map +1 -1
- package/dist/demo/filters/single-select-filter.js +14 -0
- package/dist/demo/filters/single-select-filter.js.map +1 -1
- package/dist/filters/single-select/single-select-filter.d.ts +1 -0
- package/dist/filters/single-select/single-select-filter.d.ts.map +1 -1
- package/dist/filters/single-select/single-select-filter.js +8 -5
- package/dist/filters/single-select/single-select-filter.js.map +1 -1
- package/dist/filters/single-select/single-select-filter.stories.d.ts +2 -1
- package/dist/filters/single-select/single-select-filter.stories.d.ts.map +1 -1
- package/dist/filters/single-select/single-select-filter.stories.js +3 -2
- package/dist/filters/single-select/single-select-filter.stories.js.map +1 -1
- package/package.json +6 -6
- package/src/demo/filters/single-select-filter.tsx +38 -0
- package/src/filters/single-select/single-select-filter.stories.tsx +6 -2
- package/src/filters/single-select/single-select-filter.tsx +11 -3
@@ -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":";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;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAO,OAAO,CAAC;IACvD,UAAU,EAAE,CAAC,UAAU,CAAC;CAC3B,CAAC,CACE,QAAQ,CAAC,GAAG,EAAE;IACV,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAErD,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,MAAM,OAAO,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAEzD,OAAO,4BAA4B,CAAC;YAChC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,uBAAuB,CAAC;YACzE,cAAc,EAAE,CAAC,MAAc,EAAE,KAAa,EAAE,EAAE,CAC9C,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;SACpE,CAAC,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,MAAC,QAAQ,eACL,MAAC,MAAM,kBAAC,KAAK,EAAC,mCAAmC,EAAC,SAAS,EAAC,OAAO,+JAG/D,cAAM,qEAED,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,IACR,KAAK,EAAC,aAAa,EACnB,KAAK,EAAC,4CAA4C,EAClD,UAAU,EAAE,uBAAuB,GACrC,KACE,IACD,CACd,CAAC;AACN,CAAC,CAAC,CACL,CAAC"}
|
@@ -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;
|
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
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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;
|
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
|
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":";;;;
|
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
|
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,
|
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.
|
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.
|
40
|
+
"@servicetitan/data-query": "^24.3.2",
|
41
41
|
"@servicetitan/design-system": ">=12.4.1",
|
42
|
-
"@servicetitan/form": "^24.3.
|
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.
|
56
|
+
"@servicetitan/data-query": "^24.3.2",
|
57
57
|
"@servicetitan/design-system": ">=12.4.1",
|
58
|
-
"@servicetitan/form": "^24.3.
|
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": "
|
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 {
|
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
|
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
|
-
|
49
|
-
operator: value ? 'equals' : '',
|
57
|
+
...filter,
|
50
58
|
syntheticEvent: event,
|
51
59
|
});
|
52
60
|
};
|