@tcn/ui-table 2.3.13 → 2.3.15
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/components/cells/header_cell.d.ts.map +1 -1
- package/dist/components/cells/header_cell.js +9 -8
- package/dist/components/cells/header_cell.js.map +1 -1
- package/dist/components/table_filter_panel/field_filters/number_field_filter.js +6 -6
- package/dist/components/table_filter_panel/field_filters/number_field_filter.js.map +1 -1
- package/dist/components/table_filter_panel/field_filters/string_field_filter.js +9 -9
- package/dist/components/table_filter_panel/field_filters/string_field_filter.js.map +1 -1
- package/package.json +5 -5
- package/src/components/cells/header_cell.tsx +5 -4
- package/src/components/table_filter_panel/field_filters/number_field_filter.tsx +3 -3
- package/src/components/table_filter_panel/field_filters/string_field_filter.tsx +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACR,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACR,EAAE,eAAe,2CA4CjB"}
|
|
@@ -3,18 +3,18 @@ import { useCallback as x } from "react";
|
|
|
3
3
|
import { Box as r, HStack as h } from "@tcn/ui/stacks";
|
|
4
4
|
import { TH as f } from "@tcn/ui/layouts";
|
|
5
5
|
import { c as u } from "../../cell.module-WpHnQBVu.js";
|
|
6
|
-
import { SortControl as
|
|
6
|
+
import { SortControl as C } from "./sort_control.js";
|
|
7
7
|
function H({
|
|
8
8
|
heading: n,
|
|
9
9
|
sticky: l,
|
|
10
10
|
onResize: i,
|
|
11
11
|
width: o,
|
|
12
|
-
sortMode:
|
|
13
|
-
onSortModeChange:
|
|
12
|
+
sortMode: a,
|
|
13
|
+
onSortModeChange: s,
|
|
14
14
|
canSort: d
|
|
15
15
|
}) {
|
|
16
16
|
const m = l != null ? 2 : 1, p = x(
|
|
17
|
-
(t) => {
|
|
17
|
+
({ width: t }) => {
|
|
18
18
|
i?.(Math.max(t, 20));
|
|
19
19
|
},
|
|
20
20
|
[i]
|
|
@@ -31,9 +31,10 @@ function H({
|
|
|
31
31
|
padding: "0px 8px",
|
|
32
32
|
overflow: "hidden",
|
|
33
33
|
minWidth: "24px",
|
|
34
|
+
maxWidth: "unset",
|
|
35
|
+
width: o,
|
|
34
36
|
enableResizeOnEnd: !0,
|
|
35
37
|
onWidthResize: p,
|
|
36
|
-
style: { width: `${o}px`, minWidth: "20px" },
|
|
37
38
|
onClick: (t) => t.stopPropagation(),
|
|
38
39
|
children: /* @__PURE__ */ c(h, { children: [
|
|
39
40
|
/* @__PURE__ */ e(
|
|
@@ -46,11 +47,11 @@ function H({
|
|
|
46
47
|
}
|
|
47
48
|
),
|
|
48
49
|
/* @__PURE__ */ e(
|
|
49
|
-
|
|
50
|
+
C,
|
|
50
51
|
{
|
|
51
52
|
canSort: d,
|
|
52
|
-
onSortModeChange:
|
|
53
|
-
sortMode:
|
|
53
|
+
onSortModeChange: s,
|
|
54
|
+
sortMode: a
|
|
54
55
|
}
|
|
55
56
|
)
|
|
56
57
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header_cell.js","sources":["../../../src/components/cells/header_cell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Box, HStack } from '@tcn/ui/stacks';\n\nimport { TH } from '@tcn/ui/layouts';\nimport cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\n\nexport interface HeaderCellProps extends SortControlProps {\n heading: React.ReactNode;\n index: number;\n sticky?: 'start' | 'end';\n onResize?: (width: number) => void;\n width?: number;\n}\n\nexport function HeaderCell({\n heading,\n sticky,\n onResize,\n width,\n sortMode,\n onSortModeChange,\n canSort,\n}: HeaderCellProps) {\n const zIndex = sticky != null ? 2 : 1;\n\n const handleResize = useCallback(\n (
|
|
1
|
+
{"version":3,"file":"header_cell.js","sources":["../../../src/components/cells/header_cell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Box, HStack, type OnWidthResizePayload } from '@tcn/ui/stacks';\n\nimport { TH } from '@tcn/ui/layouts';\nimport cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\n\nexport interface HeaderCellProps extends SortControlProps {\n heading: React.ReactNode;\n index: number;\n sticky?: 'start' | 'end';\n onResize?: (width: number) => void;\n width?: number;\n}\n\nexport function HeaderCell({\n heading,\n sticky,\n onResize,\n width,\n sortMode,\n onSortModeChange,\n canSort,\n}: HeaderCellProps) {\n const zIndex = sticky != null ? 2 : 1;\n\n const handleResize = useCallback(\n ({ width }: OnWidthResizePayload) => {\n onResize?.(Math.max(width, 20));\n },\n [onResize]\n );\n\n return (\n <TH\n className={cellStyles['table-cell']}\n data-stick-to={sticky}\n style={{ width: `${width}px`, zIndex }}\n >\n <Box\n padding=\"0px 8px\" // FIXME: should be on theme ideally.\n overflow=\"hidden\"\n minWidth=\"24px\"\n maxWidth=\"unset\"\n width={width}\n enableResizeOnEnd\n onWidthResize={handleResize}\n onClick={e => e.stopPropagation()}\n >\n <HStack>\n <Box\n minWidth=\"24px\"\n className=\"ellipsis\"\n style={{ alignItems: 'center', display: 'flex' }}\n >\n {heading}\n </Box>\n\n <SortControl\n canSort={canSort}\n onSortModeChange={onSortModeChange}\n sortMode={sortMode}\n />\n </HStack>\n </Box>\n </TH>\n );\n}\n"],"names":["HeaderCell","heading","sticky","onResize","width","sortMode","onSortModeChange","canSort","zIndex","handleResize","useCallback","jsx","TH","cellStyles","Box","e","HStack","SortControl"],"mappings":";;;;;;AAgBO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAASN,KAAU,OAAO,IAAI,GAE9BO,IAAeC;AAAA,IACnB,CAAC,EAAE,OAAAN,QAAkC;AACnC,MAAAD,IAAW,KAAK,IAAIC,GAAO,EAAE,CAAC;AAAA,IAChC;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,YAAY;AAAA,MAClC,iBAAeX;AAAA,MACf,OAAO,EAAE,OAAO,GAAGE,CAAK,MAAM,QAAAI,EAAA;AAAA,MAE9B,UAAA,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAS;AAAA,UACT,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAAV;AAAA,UACA,mBAAiB;AAAA,UACjB,eAAeK;AAAA,UACf,SAAS,CAAAM,MAAKA,EAAE,gBAAA;AAAA,UAEhB,4BAACC,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,UAAU,SAAS,OAAA;AAAA,gBAEvC,UAAAb;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAU;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,SAAAV;AAAA,gBACA,kBAAAD;AAAA,gBACA,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useSignalValue as
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as t, jsxs as s } from "react/jsx-runtime";
|
|
2
|
+
import { useSignalValue as o } from "@tcn/state";
|
|
3
|
+
import { ControlSet as u, Select as m, Option as p, Input as c } from "@tcn/ui/inputs";
|
|
4
4
|
import { NumberFieldFilterPresenter as d } from "./number_field_filter_presenter.js";
|
|
5
5
|
import { useFieldFilterStrategy as b } from "./use_field_filter_strategy.js";
|
|
6
6
|
import { ClearableField as f } from "./clearable_field.js";
|
|
7
7
|
const h = [">=", ">", "<=", "<", "=", "!="];
|
|
8
|
-
function N({ fieldName:
|
|
9
|
-
const r = b(d,
|
|
8
|
+
function N({ fieldName: n, label: a }) {
|
|
9
|
+
const r = b(d, n), l = o(r.broadcasts.value), i = o(r.broadcasts.operator);
|
|
10
10
|
return /* @__PURE__ */ t(
|
|
11
11
|
f,
|
|
12
12
|
{
|
|
13
13
|
label: a,
|
|
14
14
|
onClear: () => r.setValue(null),
|
|
15
15
|
isClearable: l == null,
|
|
16
|
-
children: /* @__PURE__ */ u
|
|
16
|
+
children: /* @__PURE__ */ s(u, { children: [
|
|
17
17
|
/* @__PURE__ */ t(
|
|
18
18
|
m,
|
|
19
19
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"number_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select,
|
|
1
|
+
{"version":3,"file":"number_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ComparisonOperator } from '../types.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];\n\nexport function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {\n const presenter = useFieldFilterStrategy(NumberFieldFilterPresenter, fieldName);\n\n const value = useSignalValue(presenter.broadcasts.value);\n const operator = useSignalValue(presenter.broadcasts.operator);\n\n return (\n <ClearableField\n label={label}\n onClear={() => presenter.setValue(null)}\n isClearable={value == null}\n >\n <ControlSet>\n <Select\n value={operator}\n onChange={value => presenter.setOperator(value as ComparisonOperator)}\n width=\"55px\"\n >\n {operators.map(operator => (\n <Option key={operator} value={operator} label={operator}>\n {operator}\n </Option>\n ))}\n </Select>\n <Input\n type=\"number\"\n value={String(value ?? '')}\n onChange={value => presenter.setValue(Number(value))}\n />\n </ControlSet>\n </ClearableField>\n );\n}\n"],"names":["operators","NumberFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberFieldFilterPresenter","value","useSignalValue","operator","jsx","ClearableField","ControlSet","Select","Option","Input"],"mappings":";;;;;;AAQA,MAAMA,IAAkC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjE,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,KAA2B;AACxE,QAAMC,IAAYC,EAAuBC,GAA4BJ,CAAS,GAExEK,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,SAAS,MAAMC,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACK,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOJ;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAP,EAAU,IAAI,CAAAS,MACb,gBAAAC,EAACI,GAAA,EAAsB,OAAOL,GAAU,OAAOA,GAC5C,UAAAA,EAAAA,GADUA,CAEb,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOR,KAAS,EAAE;AAAA,YACzB,UAAU,CAAAA,MAASH,EAAU,SAAS,OAAOG,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACrD,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
1
|
+
import { jsx as r, jsxs as u } from "react/jsx-runtime";
|
|
2
2
|
import { useSignalValue as o } from "@tcn/state";
|
|
3
|
-
import {
|
|
3
|
+
import { ControlSet as m, Select as d, Option as h, Input as b } from "@tcn/ui/inputs";
|
|
4
4
|
import { StringFieldFilterPresenter as f } from "./string_field_filter_presenter.js";
|
|
5
5
|
import { useFieldFilterStrategy as F } from "./use_field_filter_strategy.js";
|
|
6
|
-
import { ClearableField as
|
|
7
|
-
const
|
|
6
|
+
import { ClearableField as S } from "./clearable_field.js";
|
|
7
|
+
const g = ["is", "isNot", "has"], v = {
|
|
8
8
|
is: "=",
|
|
9
9
|
isNot: "!=",
|
|
10
10
|
has: ":"
|
|
@@ -14,24 +14,24 @@ const v = ["is", "isNot", "has"], S = {
|
|
|
14
14
|
has: "has"
|
|
15
15
|
};
|
|
16
16
|
function j({ fieldName: a, label: i, operators: n }) {
|
|
17
|
-
const t = F(f, a), l = o(t.broadcasts.value), p = o(t.broadcasts.operator),
|
|
17
|
+
const t = F(f, a), l = o(t.broadcasts.value), p = o(t.broadcasts.operator), c = n || g;
|
|
18
18
|
return /* @__PURE__ */ r(
|
|
19
|
-
|
|
19
|
+
S,
|
|
20
20
|
{
|
|
21
21
|
label: i,
|
|
22
22
|
onClear: () => t.setValue(null),
|
|
23
23
|
isClearable: l == null,
|
|
24
|
-
children: /* @__PURE__ */
|
|
24
|
+
children: /* @__PURE__ */ u(m, { children: [
|
|
25
25
|
/* @__PURE__ */ r(
|
|
26
26
|
d,
|
|
27
27
|
{
|
|
28
28
|
value: p,
|
|
29
29
|
onChange: (e) => t.setOperator(e),
|
|
30
30
|
width: "65px",
|
|
31
|
-
children:
|
|
31
|
+
children: c.map((e) => /* @__PURE__ */ r(
|
|
32
32
|
h,
|
|
33
33
|
{
|
|
34
|
-
value:
|
|
34
|
+
value: v[e],
|
|
35
35
|
label: s[e],
|
|
36
36
|
children: s[e]
|
|
37
37
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"string_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select,
|
|
1
|
+
{"version":3,"file":"string_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { StringFieldFilterPresenter } from './string_field_filter_presenter.js';\nimport { ComparisonOperator } from '../types.js';\n\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];\nconst operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {\n is: '=',\n isNot: '!=',\n has: ':',\n};\nconst operatorLabels: Record<'is' | 'isNot' | 'has', string> = {\n is: 'is',\n isNot: 'is not',\n has: 'has',\n};\n\nexport function StringFieldFilter({ fieldName, label, operators }: FieldFilterProps) {\n const presenter = useFieldFilterStrategy(StringFieldFilterPresenter, fieldName);\n\n const value = useSignalValue(presenter.broadcasts.value);\n const operator = useSignalValue(presenter.broadcasts.operator);\n\n const availableOperators = operators || allOperators;\n\n return (\n <ClearableField\n label={label}\n onClear={() => presenter.setValue(null)}\n isClearable={value == null}\n >\n <ControlSet>\n <Select\n value={operator}\n onChange={value => presenter.setOperator(value as ComparisonOperator)}\n width=\"65px\"\n >\n {availableOperators.map(operator => (\n <Option\n key={operator}\n value={operatorSymbols[operator]}\n label={operatorLabels[operator]}\n >\n {operatorLabels[operator]}\n </Option>\n ))}\n </Select>\n <Input\n type=\"text\"\n value={value ?? ''}\n onChange={value => presenter.setValue(value)}\n />\n </ControlSet>\n </ClearableField>\n );\n}\n"],"names":["allOperators","operatorSymbols","operatorLabels","StringFieldFilter","fieldName","label","operators","presenter","useFieldFilterStrategy","StringFieldFilterPresenter","value","useSignalValue","operator","availableOperators","jsx","ClearableField","ControlSet","Select","Option","Input"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC,MAAM,SAAS,KAAK,GAChEC,IAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP,GACMC,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP;AAEO,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,KAA+B;AACnF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ,GAEvDM,IAAqBP,KAAaN;AAExC,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAS,MAAME,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACM,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOL;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAG,EAAmB,IAAI,CAAAD,MACtB,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBAEC,OAAOjB,EAAgBW,CAAQ;AAAA,gBAC/B,OAAOV,EAAeU,CAAQ;AAAA,gBAE7B,YAAeA,CAAQ;AAAA,cAAA;AAAA,cAJnBA;AAAAA,YAAA,CAMR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAE;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAOT,KAAS;AAAA,YAChB,UAAU,CAAAA,MAASH,EAAU,SAASG,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7C,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tcn/ui-table",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.15",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React table component library",
|
|
6
6
|
"author": "TCN",
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
],
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"clarity-pattern-parser": "^11.5.4",
|
|
42
|
-
"@tcn/ui": "0.12.4",
|
|
43
42
|
"@tcn/icons": "2.3.0",
|
|
44
|
-
"@tcn/
|
|
45
|
-
"@tcn/
|
|
46
|
-
"@tcn/
|
|
43
|
+
"@tcn/aip-160": "1.2.5",
|
|
44
|
+
"@tcn/resource-store": "2.5.4",
|
|
45
|
+
"@tcn/state": "1.3.1",
|
|
46
|
+
"@tcn/ui": "0.12.6"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": "^18.2.0",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
|
|
3
|
-
import { Box, HStack } from '@tcn/ui/stacks';
|
|
3
|
+
import { Box, HStack, type OnWidthResizePayload } from '@tcn/ui/stacks';
|
|
4
4
|
|
|
5
5
|
import { TH } from '@tcn/ui/layouts';
|
|
6
6
|
import cellStyles from './cell.module.css';
|
|
@@ -26,8 +26,8 @@ export function HeaderCell({
|
|
|
26
26
|
const zIndex = sticky != null ? 2 : 1;
|
|
27
27
|
|
|
28
28
|
const handleResize = useCallback(
|
|
29
|
-
(
|
|
30
|
-
onResize?.(Math.max(
|
|
29
|
+
({ width }: OnWidthResizePayload) => {
|
|
30
|
+
onResize?.(Math.max(width, 20));
|
|
31
31
|
},
|
|
32
32
|
[onResize]
|
|
33
33
|
);
|
|
@@ -42,9 +42,10 @@ export function HeaderCell({
|
|
|
42
42
|
padding="0px 8px" // FIXME: should be on theme ideally.
|
|
43
43
|
overflow="hidden"
|
|
44
44
|
minWidth="24px"
|
|
45
|
+
maxWidth="unset"
|
|
46
|
+
width={width}
|
|
45
47
|
enableResizeOnEnd
|
|
46
48
|
onWidthResize={handleResize}
|
|
47
|
-
style={{ width: `${width}px`, minWidth: '20px' }}
|
|
48
49
|
onClick={e => e.stopPropagation()}
|
|
49
50
|
>
|
|
50
51
|
<HStack>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useSignalValue } from '@tcn/state';
|
|
2
|
-
import { Input, Option, Select,
|
|
2
|
+
import { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';
|
|
3
3
|
import { FieldFilterProps } from './field_filter_props.js';
|
|
4
4
|
import { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';
|
|
5
5
|
import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
|
|
@@ -20,7 +20,7 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
|
|
|
20
20
|
onClear={() => presenter.setValue(null)}
|
|
21
21
|
isClearable={value == null}
|
|
22
22
|
>
|
|
23
|
-
<
|
|
23
|
+
<ControlSet>
|
|
24
24
|
<Select
|
|
25
25
|
value={operator}
|
|
26
26
|
onChange={value => presenter.setOperator(value as ComparisonOperator)}
|
|
@@ -37,7 +37,7 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
|
|
|
37
37
|
value={String(value ?? '')}
|
|
38
38
|
onChange={value => presenter.setValue(Number(value))}
|
|
39
39
|
/>
|
|
40
|
-
</
|
|
40
|
+
</ControlSet>
|
|
41
41
|
</ClearableField>
|
|
42
42
|
);
|
|
43
43
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useSignalValue } from '@tcn/state';
|
|
2
|
-
import { Input, Option, Select,
|
|
2
|
+
import { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';
|
|
3
3
|
import { FieldFilterProps } from './field_filter_props.js';
|
|
4
4
|
import { StringFieldFilterPresenter } from './string_field_filter_presenter.js';
|
|
5
5
|
import { ComparisonOperator } from '../types.js';
|
|
@@ -33,7 +33,7 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
|
|
|
33
33
|
onClear={() => presenter.setValue(null)}
|
|
34
34
|
isClearable={value == null}
|
|
35
35
|
>
|
|
36
|
-
<
|
|
36
|
+
<ControlSet>
|
|
37
37
|
<Select
|
|
38
38
|
value={operator}
|
|
39
39
|
onChange={value => presenter.setOperator(value as ComparisonOperator)}
|
|
@@ -54,7 +54,7 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
|
|
|
54
54
|
value={value ?? ''}
|
|
55
55
|
onChange={value => presenter.setValue(value)}
|
|
56
56
|
/>
|
|
57
|
-
</
|
|
57
|
+
</ControlSet>
|
|
58
58
|
</ClearableField>
|
|
59
59
|
);
|
|
60
60
|
}
|