react-science 19.9.1 → 19.10.1
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/lib/components/form/components/field_groups/svg_text_style.d.ts.map +1 -1
- package/lib/components/form/components/field_groups/svg_text_style.js +16 -8
- package/lib/components/form/components/field_groups/svg_text_style.js.map +1 -1
- package/lib/components/form/components/field_groups/svg_text_style.schema.js +1 -1
- package/lib/components/form/components/input_groups/form_group.d.ts.map +1 -1
- package/lib/components/form/components/input_groups/form_group.js +1 -0
- package/lib/components/form/components/input_groups/form_group.js.map +1 -1
- package/lib/components/table/index.d.ts +4 -0
- package/lib/components/table/index.d.ts.map +1 -1
- package/lib/components/table/table_body.d.ts +7 -1
- package/lib/components/table/table_body.d.ts.map +1 -1
- package/lib/components/table/table_body.js +16 -3
- package/lib/components/table/table_body.js.map +1 -1
- package/lib/components/table/table_root.d.ts +11 -1
- package/lib/components/table/table_root.d.ts.map +1 -1
- package/lib/components/table/table_root.js +4 -3
- package/lib/components/table/table_root.js.map +1 -1
- package/lib/components/table/table_row_cell.d.ts.map +1 -1
- package/lib/components/table/table_row_cell.js +2 -1
- package/lib/components/table/table_row_cell.js.map +1 -1
- package/package.json +1 -1
- package/src/components/form/components/field_groups/svg_text_style.schema.ts +1 -1
- package/src/components/form/components/field_groups/svg_text_style.tsx +33 -10
- package/src/components/form/components/input_groups/form_group.tsx +1 -0
- package/src/components/table/index.ts +5 -0
- package/src/components/table/table_body.tsx +60 -0
- package/src/components/table/table_root.tsx +29 -3
- package/src/components/table/table_row_cell.tsx +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg_text_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"svg_text_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA4DvC,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Checkbox } from '@blueprintjs/core';
|
|
2
|
+
import { Callout, Checkbox } from '@blueprintjs/core';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
|
-
import { memo } from 'react';
|
|
5
4
|
import { SVGStyledText } from '../../../svg/index.js';
|
|
6
5
|
import { withFieldGroup } from '../../context/use_ts_form.js';
|
|
7
6
|
import { FormGroup } from '../input_groups/form_group.js';
|
|
@@ -22,21 +21,30 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
|
|
|
22
21
|
defaultValues,
|
|
23
22
|
props: inferSVGTextStyleFieldsProps,
|
|
24
23
|
render: function SVGTextStyleFields({ group, label, previewText = 'Placeholder', }) {
|
|
25
|
-
return (_jsxs(Fieldset, { children: [_jsx(Legend, { children: label }), _jsx(group.AppField, { name: "fill", children: (field) => _jsx(field.ColorPicker, { label: "Color" }) }), _jsx(group.AppField, { name: "fontSize", children: (field) => _jsx(field.NumericInput, { label: "Font size" }) }), _jsx(FormGroup, { label: "Font style", children: _jsxs(TextStyleSwitchContainer, { children: [_jsx(group.Field, { name: "fontWeight", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(BoldLabel, { children: "Bold" }), name: field.name, checked: fontWeightToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontWeight(e.target.checked)), onBlur: field.handleBlur })) }), _jsx(group.Field, { name: "fontStyle", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(ItalicLabel, { children: "Italic" }), name: field.name, checked: fontStyleToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontStyle(e.target.checked)), onBlur: field.handleBlur })) })] }) }), _jsx(FormGroup, { label: "Preview", children: _jsx(group.Subscribe, { selector: (state) => state.values, children: (values) => (_jsx(TextStyleFieldPreview, { ...values, children: previewText })) }) })] }));
|
|
24
|
+
return (_jsxs(Fieldset, { children: [_jsx(Legend, { children: label }), _jsx(group.AppField, { name: "fill", children: (field) => _jsx(field.ColorPicker, { label: "Color" }) }), _jsx(group.AppField, { name: "fontSize", children: (field) => _jsx(field.NumericInput, { label: "Font size", min: 1 }) }), _jsx(FormGroup, { label: "Font style", children: _jsxs(TextStyleSwitchContainer, { children: [_jsx(group.Field, { name: "fontWeight", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(BoldLabel, { children: "Bold" }), name: field.name, checked: fontWeightToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontWeight(e.target.checked)), onBlur: field.handleBlur })) }), _jsx(group.Field, { name: "fontStyle", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(ItalicLabel, { children: "Italic" }), name: field.name, checked: fontStyleToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontStyle(e.target.checked)), onBlur: field.handleBlur })) })] }) }), _jsx(FormGroup, { label: "Preview", children: _jsx(group.Subscribe, { selector: (state) => state.values, children: (values) => (_jsx(TextStyleFieldPreview, { ...values, children: previewText })) }) })] }));
|
|
26
25
|
},
|
|
27
26
|
});
|
|
27
|
+
const TextStyleFieldPreviewErrorContainer = styled.ul `
|
|
28
|
+
& > li {
|
|
29
|
+
margin-left: 15px;
|
|
30
|
+
list-style: disc;
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
28
33
|
const TextStyleFieldPreviewContainer = styled.div `
|
|
29
34
|
display: flex;
|
|
30
35
|
align-items: center;
|
|
31
36
|
min-height: 30px;
|
|
32
37
|
`;
|
|
33
|
-
|
|
34
|
-
const
|
|
35
|
-
|
|
38
|
+
function TextStyleFieldPreview(props) {
|
|
39
|
+
const safeResult = svgTextStyleFieldsSchema.safeParse(props);
|
|
40
|
+
if (!safeResult.success) {
|
|
41
|
+
return (_jsx(Callout, { title: "Cannot render preview with invalid values", intent: "danger", children: _jsx(TextStyleFieldPreviewErrorContainer, { children: safeResult.error.issues.map((error) => (_jsxs("li", { children: [error.path.join('.'), ": $", error.message] }, `${error.path.join('.')}-${error.code}`))) }) }));
|
|
42
|
+
}
|
|
43
|
+
const fontSize = safeResult.data.fontSize ?? 16;
|
|
36
44
|
const svgHeight = Math.round(fontSize * 1.5);
|
|
37
45
|
const textY = Math.round(svgHeight / 4);
|
|
38
|
-
return (_jsx(TextStyleFieldPreviewContainer, { children: _jsx("svg", { height: svgHeight, width: "auto", children: _jsx(SVGStyledText, { dominantBaseline: "hanging", x: 0, y: textY, ...
|
|
39
|
-
}
|
|
46
|
+
return (_jsx(TextStyleFieldPreviewContainer, { children: _jsx("svg", { height: svgHeight, width: "auto", children: _jsx(SVGStyledText, { dominantBaseline: "hanging", x: 0, y: textY, ...safeResult.data, children: props.children }) }) }));
|
|
47
|
+
}
|
|
40
48
|
const BoldLabel = styled.span `
|
|
41
49
|
font-weight: bold;
|
|
42
50
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg_text_style.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"svg_text_style.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAC;AAIF,2HAA2H;AAC3H,2DAA2D;AAC3D,MAAM,aAAa,GAAuB,EAAE,CAAC;AAO7C,MAAM,4BAA4B,GAA4B;IAC5D,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,cAAc,CAAC;IACzD,aAAa;IACb,KAAK,EAAE,4BAA4B;IACnC,MAAM,EAAE,SAAS,kBAAkB,CAAC,EAClC,KAAK,EACL,KAAK,EACL,WAAW,GAAG,aAAa,GAC5B;QACC,OAAO,CACL,MAAC,QAAQ,eACP,KAAC,MAAM,cAAE,KAAK,GAAU,EACxB,KAAC,KAAK,CAAC,QAAQ,IAAC,IAAI,EAAC,MAAM,YACxB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,KAAK,CAAC,WAAW,IAAC,KAAK,EAAC,OAAO,GAAG,GAChC,EACjB,KAAC,KAAK,CAAC,QAAQ,IAAC,IAAI,EAAC,UAAU,YAC5B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,KAAK,CAAC,YAAY,IAAC,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,CAAC,GAAI,GAC7C,EACjB,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,YAC3B,MAAC,wBAAwB,eACvB,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAC,YAAY,YAC3B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,QAAQ,IACP,YAAY,EAAE,KAAC,SAAS,uBAAiB,EACzC,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAC/C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,KAAK,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAE3D,MAAM,EAAE,KAAK,CAAC,UAAU,GACxB,CACH,GACW,EACd,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAC,WAAW,YAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,QAAQ,IACP,YAAY,EAAE,KAAC,WAAW,yBAAqB,EAC/C,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAE1D,MAAM,EAAE,KAAK,CAAC,UAAU,GACxB,CACH,GACW,IACW,GACjB,EAEZ,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,YACxB,KAAC,KAAK,CAAC,SAAS,IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,YAC/C,CAAC,MAAM,EAAE,EAAE,CAAC,CACX,KAAC,qBAAqB,OAAK,MAAM,YAC9B,WAAW,GACU,CACzB,GACe,GACR,IACH,CACZ,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,mCAAmC,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAKpD,CAAC;AAEF,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIhD,CAAC;AAMF,SAAS,qBAAqB,CAAC,KAAiC;IAC9D,MAAM,UAAU,GAAG,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE7D,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;QACxB,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAC,2CAA2C,EACjD,MAAM,EAAC,QAAQ,YAEf,KAAC,mCAAmC,cACjC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtC,yBACG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAK,KAAK,CAAC,OAAO,KADhC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE,CAE3C,CACN,CAAC,GACkC,GAC9B,CACX,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;IAChD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;IAExC,OAAO,CACL,KAAC,8BAA8B,cAC7B,cAAK,MAAM,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,YAClC,KAAC,aAAa,IACZ,gBAAgB,EAAC,SAAS,EAC1B,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,KAAK,KACJ,UAAU,CAAC,IAAI,YAElB,KAAK,CAAC,QAAQ,GACD,GACZ,GACyB,CAClC,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE5B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE9B,CAAC;AAEF,SAAS,mBAAmB,CAC1B,MAAwC;IAExC,OAAO,MAAM,KAAK,MAAM,CAAC;AAC3B,CAAC;AAED,SAAS,mBAAmB,CAC1B,MAAe;IAEf,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AACpC,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAuC;IACjE,OAAO,MAAM,KAAK,QAAQ,CAAC;AAC7B,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAe;IACzC,OAAO,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;AACtC,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { stringToNumberOptional } from "../../utils/validators.js";
|
|
|
3
3
|
export const svgTextStyleFieldsSchema = z.object({
|
|
4
4
|
fill: z.string().optional(),
|
|
5
5
|
fontSize: stringToNumberOptional({
|
|
6
|
-
numSchema: z.int().min(
|
|
6
|
+
numSchema: z.int().min(1),
|
|
7
7
|
parse: (str) => Number.parseInt(str, 10),
|
|
8
8
|
}),
|
|
9
9
|
fontStyle: z.enum(['normal', 'italic']).optional(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form_group.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"form_group.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAgEhD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}
|
|
@@ -9,6 +9,7 @@ const FormContainer = styled.div `
|
|
|
9
9
|
display: grid;
|
|
10
10
|
margin: 0;
|
|
11
11
|
grid-template-columns: ${(props) => props.layout === 'inline' ? '[label] 30% [input] 70%' : '1fr'};
|
|
12
|
+
column-gap: 20px;
|
|
12
13
|
grid-template-rows: ${(props) => props.layout === 'inline' ? 'auto auto' : 'auto'};
|
|
13
14
|
`;
|
|
14
15
|
const RequiredSpan = styled.span `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form_group.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAE9B;gBACc,YAAY;;;;2BAID,CAAC,KAAK,EAAE,EAAE,CACjC,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK
|
|
1
|
+
{"version":3,"file":"form_group.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,10 @@ declare module '@tanstack/react-table' {
|
|
|
10
10
|
* Merged into the `style` prop of the default-rendered `<th>` element.
|
|
11
11
|
*/
|
|
12
12
|
thStyle?: CSSProperties;
|
|
13
|
+
/**
|
|
14
|
+
* Merged into the `style` prop of the default-rendered `<td>` element.
|
|
15
|
+
*/
|
|
16
|
+
tdStyle?: CSSProperties;
|
|
13
17
|
}
|
|
14
18
|
}
|
|
15
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AAExC,OAAO,QAAQ,uBAAuB,CAAC;IAGrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD;;WAEG;QACH,OAAO,CAAC,EAAE,aAAa,CAAC;KACzB;CACF"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AAExC,OAAO,QAAQ,uBAAuB,CAAC;IAGrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD;;WAEG;QACH,OAAO,CAAC,EAAE,aAAa,CAAC;QAExB;;WAEG;QACH,OAAO,CAAC,EAAE,aAAa,CAAC;KACzB;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Row, RowData } from '@tanstack/react-table';
|
|
2
2
|
import type { Virtualizer } from '@tanstack/react-virtual';
|
|
3
|
-
import type { CSSProperties } from 'react';
|
|
3
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
4
4
|
import type { GetTdProps, TableRowPreviewRenderer, TableRowTrRenderer } from './table_utils.js';
|
|
5
5
|
interface TableBodyProps<TData extends RowData> {
|
|
6
6
|
rows: Array<Row<TData>>;
|
|
@@ -11,6 +11,12 @@ interface TableBodyProps<TData extends RowData> {
|
|
|
11
11
|
virtualizer: Virtualizer<HTMLDivElement, Element>;
|
|
12
12
|
isReorderingEnabled: boolean;
|
|
13
13
|
renderRowPreview?: TableRowPreviewRenderer<TData>;
|
|
14
|
+
emptyContent: ReactNode;
|
|
15
|
+
emptyIcon: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Bound to `EmptyRow`, it is needed for td colSpan.
|
|
18
|
+
*/
|
|
19
|
+
columns: number;
|
|
14
20
|
}
|
|
15
21
|
export declare function TableBody<TData extends RowData>(props: TableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
16
22
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_body.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table_body.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAe,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EACV,UAAU,EACV,uBAAuB,EAEvB,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAE1B,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC/B,WAAW,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;IAClD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAElD,YAAY,EAAE,SAAS,CAAC;IACxB,SAAS,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAqF5E"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Icon } from '@blueprintjs/core';
|
|
3
|
+
import styled from '@emotion/styled';
|
|
2
4
|
import { notUndefined } from '@tanstack/react-virtual';
|
|
3
5
|
import { Fragment } from 'react';
|
|
4
6
|
import { TableDraggableRowTr } from './reorder_rows/index.js';
|
|
5
7
|
import { TableRowTr } from './table_row.js';
|
|
6
8
|
import { TableRowCell } from './table_row_cell.js';
|
|
7
9
|
export function TableBody(props) {
|
|
8
|
-
const { rows, tdStyle, getTdProps, renderRowTr = getDefaultRenderRowTr(props.isReorderingEnabled, props.renderRowPreview), virtualizer, virtualizeRows, } = props;
|
|
10
|
+
const { rows, tdStyle, getTdProps, renderRowTr = getDefaultRenderRowTr(props.isReorderingEnabled, props.renderRowPreview), virtualizer, virtualizeRows, emptyContent, emptyIcon, columns, } = props;
|
|
9
11
|
if (virtualizeRows) {
|
|
10
12
|
const virtualItems = virtualizer.getVirtualItems();
|
|
11
13
|
const [before, after] = virtualItems.length > 0
|
|
@@ -20,10 +22,21 @@ export function TableBody(props) {
|
|
|
20
22
|
virtualIndex: index,
|
|
21
23
|
});
|
|
22
24
|
return renderRowTr(trProps, row);
|
|
23
|
-
} }, virtualItem.index))), after > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: after } }) }))] }));
|
|
25
|
+
} }, virtualItem.index))), virtualItems.length === 0 && (_jsx(EmptyRow, { emptyContent: emptyContent, emptyIcon: emptyIcon, columns: columns })), after > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: after } }) }))] }));
|
|
24
26
|
}
|
|
25
|
-
return (
|
|
27
|
+
return (_jsxs("tbody", { children: [rows.map((row) => (_jsx(TableRow, { row: row, renderRowTr: (row) => renderRowTr(getTrRenderProps(row, tdStyle, getTdProps), row) }, row.id))), rows.length === 0 && (_jsx(EmptyRow, { emptyContent: emptyContent, emptyIcon: emptyIcon, columns: columns }))] }));
|
|
26
28
|
}
|
|
29
|
+
function EmptyRow(props) {
|
|
30
|
+
const { emptyIcon = _jsx(Icon, { icon: "eye-off" }), emptyContent = 'No data', columns, } = props;
|
|
31
|
+
return (_jsx("tr", { children: _jsx("td", { colSpan: columns, children: _jsxs(EmptyState, { children: [emptyIcon, emptyContent] }) }) }));
|
|
32
|
+
}
|
|
33
|
+
const EmptyState = styled.div `
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
padding: 0.25em;
|
|
38
|
+
gap: 0.5em;
|
|
39
|
+
`;
|
|
27
40
|
function TableRow({ row, renderRowTr, }) {
|
|
28
41
|
return _jsx(Fragment, { children: renderRowTr(row) });
|
|
29
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_body.js","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"table_body.js","sourceRoot":"","sources":["../../../src/components/table/table_body.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { RowData, TableOptions } from '@tanstack/react-table';
|
|
2
|
-
import type { CSSProperties, RefObject, TableHTMLAttributes } from 'react';
|
|
2
|
+
import type { CSSProperties, ReactNode, RefObject, TableHTMLAttributes } from 'react';
|
|
3
3
|
import type { HeaderCellRenderer } from './table_header_cell.js';
|
|
4
4
|
import type { GetTdProps, Scroller, TableColumnDef, TableRowPreviewRenderer, TableRowTrRenderer, VirtualScroller } from './table_utils.js';
|
|
5
5
|
interface TableBaseProps<TData extends RowData> {
|
|
@@ -100,6 +100,16 @@ interface TableBaseProps<TData extends RowData> {
|
|
|
100
100
|
* Ignored when using custom row rendering with `renderRowTr`.
|
|
101
101
|
*/
|
|
102
102
|
renderRowPreview?: TableRowPreviewRenderer<TData>;
|
|
103
|
+
/**
|
|
104
|
+
* Icon to display when the table is empty.
|
|
105
|
+
* @default `<Icon icon="eye-off" />`
|
|
106
|
+
*/
|
|
107
|
+
emptyIcon?: ReactNode;
|
|
108
|
+
/**
|
|
109
|
+
* Content to display when the table is empty.
|
|
110
|
+
* @default `'No data'`
|
|
111
|
+
*/
|
|
112
|
+
emptyContent?: ReactNode;
|
|
103
113
|
}
|
|
104
114
|
interface RegularTableProps<TData extends RowData> extends TableBaseProps<TData> {
|
|
105
115
|
virtualizeRows?: false | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,OAAO,EAEP,YAAY,EACb,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"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"}
|
|
@@ -46,7 +46,7 @@ const CustomHTMLTable = styled(HTMLTable, {
|
|
|
46
46
|
}
|
|
47
47
|
`;
|
|
48
48
|
export function Table(props) {
|
|
49
|
-
const { data, columns, bordered = false, compact = false, interactive = false, striped = false, noHeader = false, stickyHeader = false, reactTable, tableProps, className, renderRowTr, renderHeaderCell, tdStyle, getTdProps, virtualizeRows, getRowId, onRowOrderChanged, renderRowPreview, scrollToRowRef, } = props;
|
|
49
|
+
const { data, columns, bordered = false, compact = false, interactive = false, striped = false, noHeader = false, stickyHeader = false, reactTable, tableProps, className, renderRowTr, renderHeaderCell, tdStyle, getTdProps, virtualizeRows, getRowId, onRowOrderChanged, renderRowPreview, scrollToRowRef, emptyIcon, emptyContent, } = props;
|
|
50
50
|
const isReorderingEnabled = !!onRowOrderChanged;
|
|
51
51
|
const virtualScrollElementRef = useRef(null);
|
|
52
52
|
const columnDefs = useTableColumns(columns);
|
|
@@ -86,7 +86,8 @@ export function Table(props) {
|
|
|
86
86
|
columns,
|
|
87
87
|
compact,
|
|
88
88
|
}), [className, getTdProps, renderRowTr, columns, compact]);
|
|
89
|
-
|
|
89
|
+
const rows = table.getRowModel().rows;
|
|
90
|
+
return (_jsx(FlashedRowProvider, { children: _jsx(PreviewTablePropsContextProvider, { value: tablePreviewProps, children: _jsx(ItemOrderProvider, { items: rows, onOrderChanged: (items) => {
|
|
90
91
|
onRowOrderChanged?.(items.map((item) => item.original));
|
|
91
92
|
}, children: _jsx(ScrollContainer, { virtualizeRows: virtualizeRows, virtualizer: tanstackVirtualizer, table: table, scrollRef: virtualizeRows
|
|
92
93
|
? // When virtualized, ScrollContainer will render a scrollable element associated to this ref.
|
|
@@ -99,7 +100,7 @@ export function Table(props) {
|
|
|
99
100
|
// Props which are not forwarded to the HTMLTable component
|
|
100
101
|
striped: striped, noHeader: noHeader, stickyHeader: stickyHeader,
|
|
101
102
|
// Props which are forwarded to the HTMLTable component
|
|
102
|
-
ref: tableRef, bordered: bordered, compact: compact, interactive: interactive, ...tableProps, className: finalClassName, children: [!noHeader && (_jsx(TableHeader, { sticky: stickyHeader, headers: tableHeaders, renderHeaderCell: renderHeaderCell })), _jsx(TableBody, { rows:
|
|
103
|
+
ref: tableRef, bordered: bordered, compact: compact, interactive: interactive, ...tableProps, className: finalClassName, children: [!noHeader && (_jsx(TableHeader, { sticky: stickyHeader, headers: tableHeaders, renderHeaderCell: renderHeaderCell })), _jsx(TableBody, { rows: rows, renderRowTr: renderRowTr, tdStyle: tdStyle, getTdProps: getTdProps, virtualizer: tanstackVirtualizer, virtualizeRows: virtualizeRows, renderRowPreview: renderRowPreview, isReorderingEnabled: isReorderingEnabled, emptyIcon: emptyIcon, emptyContent: emptyContent, columns: table.getAllColumns().length })] }) }) }) }) }));
|
|
103
104
|
}
|
|
104
105
|
function useCheckProps(props, headers) {
|
|
105
106
|
const { onRowOrderChanged, getRowId } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_row_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO;IAC/C,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO,EAAE,aAAa,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;CAC3C;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,OAAO,EAChD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"table_row_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO;IAC/C,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO,EAAE,aAAa,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;CAC3C;AAED,wBAAgB,YAAY,CAAC,KAAK,SAAS,OAAO,EAChD,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,2CAahC"}
|
|
@@ -2,8 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { flexRender } from '@tanstack/react-table';
|
|
3
3
|
export function TableRowCell(props) {
|
|
4
4
|
const { cell, tdStyle, getTdProps } = props;
|
|
5
|
+
const tdStyleMeta = cell.column.columnDef.meta?.tdStyle;
|
|
5
6
|
const tdProps = getTdProps?.(cell);
|
|
6
|
-
const style = { ...tdStyle, ...tdProps?.style };
|
|
7
|
+
const style = { ...tdStyleMeta, ...tdStyle, ...tdProps?.style };
|
|
7
8
|
return (_jsx("td", { ...tdProps, style: style, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
|
|
8
9
|
}
|
|
9
10
|
//# sourceMappingURL=table_row_cell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table_row_cell.js","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAWnD,MAAM,UAAU,YAAY,CAC1B,KAA+B;IAE/B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE,KAAK,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"table_row_cell.js","sourceRoot":"","sources":["../../../src/components/table/table_row_cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAWnD,MAAM,UAAU,YAAY,CAC1B,KAA+B;IAE/B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC;IACxD,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,EAAE,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE,KAAK,EAAE,CAAC;IAEhE,OAAO,CACL,gBAAQ,OAAO,EAAE,KAAK,EAAE,KAAK,YAC1B,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,GACvD,CACN,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ import { stringToNumberOptional } from '../../utils/validators.ts';
|
|
|
5
5
|
export const svgTextStyleFieldsSchema = z.object({
|
|
6
6
|
fill: z.string().optional(),
|
|
7
7
|
fontSize: stringToNumberOptional({
|
|
8
|
-
numSchema: z.int().min(
|
|
8
|
+
numSchema: z.int().min(1),
|
|
9
9
|
parse: (str) => Number.parseInt(str, 10),
|
|
10
10
|
}),
|
|
11
11
|
fontStyle: z.enum(['normal', 'italic']).optional(),
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { Checkbox } from '@blueprintjs/core';
|
|
1
|
+
import { Callout, Checkbox } from '@blueprintjs/core';
|
|
2
2
|
import styled from '@emotion/styled';
|
|
3
3
|
import type { ReactNode } from 'react';
|
|
4
|
-
import { memo } from 'react';
|
|
5
4
|
import type { z } from 'zod';
|
|
6
5
|
|
|
7
6
|
import { SVGStyledText } from '../../../svg/index.js';
|
|
@@ -47,7 +46,7 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
|
|
|
47
46
|
{(field) => <field.ColorPicker label="Color" />}
|
|
48
47
|
</group.AppField>
|
|
49
48
|
<group.AppField name="fontSize">
|
|
50
|
-
{(field) => <field.NumericInput label="Font size" />}
|
|
49
|
+
{(field) => <field.NumericInput label="Font size" min={1} />}
|
|
51
50
|
</group.AppField>
|
|
52
51
|
<FormGroup label="Font style">
|
|
53
52
|
<TextStyleSwitchContainer>
|
|
@@ -94,6 +93,13 @@ export const FieldGroupSVGTextStyleFields = withFieldGroup({
|
|
|
94
93
|
},
|
|
95
94
|
});
|
|
96
95
|
|
|
96
|
+
const TextStyleFieldPreviewErrorContainer = styled.ul`
|
|
97
|
+
& > li {
|
|
98
|
+
margin-left: 15px;
|
|
99
|
+
list-style: disc;
|
|
100
|
+
}
|
|
101
|
+
`;
|
|
102
|
+
|
|
97
103
|
const TextStyleFieldPreviewContainer = styled.div`
|
|
98
104
|
display: flex;
|
|
99
105
|
align-items: center;
|
|
@@ -104,11 +110,27 @@ interface TextStyleFieldPreviewProps extends SvgTextStyleFields {
|
|
|
104
110
|
children?: ReactNode;
|
|
105
111
|
}
|
|
106
112
|
|
|
107
|
-
|
|
108
|
-
props
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
113
|
+
function TextStyleFieldPreview(props: TextStyleFieldPreviewProps) {
|
|
114
|
+
const safeResult = svgTextStyleFieldsSchema.safeParse(props);
|
|
115
|
+
|
|
116
|
+
if (!safeResult.success) {
|
|
117
|
+
return (
|
|
118
|
+
<Callout
|
|
119
|
+
title="Cannot render preview with invalid values"
|
|
120
|
+
intent="danger"
|
|
121
|
+
>
|
|
122
|
+
<TextStyleFieldPreviewErrorContainer>
|
|
123
|
+
{safeResult.error.issues.map((error) => (
|
|
124
|
+
<li key={`${error.path.join('.')}-${error.code}`}>
|
|
125
|
+
{error.path.join('.')}: ${error.message}
|
|
126
|
+
</li>
|
|
127
|
+
))}
|
|
128
|
+
</TextStyleFieldPreviewErrorContainer>
|
|
129
|
+
</Callout>
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
const fontSize = safeResult.data.fontSize ?? 16;
|
|
112
134
|
const svgHeight = Math.round(fontSize * 1.5);
|
|
113
135
|
const textY = Math.round(svgHeight / 4);
|
|
114
136
|
|
|
@@ -119,18 +141,19 @@ const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
|
|
|
119
141
|
dominantBaseline="hanging"
|
|
120
142
|
x={0}
|
|
121
143
|
y={textY}
|
|
122
|
-
{...
|
|
144
|
+
{...safeResult.data}
|
|
123
145
|
>
|
|
124
146
|
{props.children}
|
|
125
147
|
</SVGStyledText>
|
|
126
148
|
</svg>
|
|
127
149
|
</TextStyleFieldPreviewContainer>
|
|
128
150
|
);
|
|
129
|
-
}
|
|
151
|
+
}
|
|
130
152
|
|
|
131
153
|
const BoldLabel = styled.span`
|
|
132
154
|
font-weight: bold;
|
|
133
155
|
`;
|
|
156
|
+
|
|
134
157
|
const ItalicLabel = styled.span`
|
|
135
158
|
font-style: italic;
|
|
136
159
|
`;
|
|
@@ -17,6 +17,7 @@ const FormContainer = styled.div<{
|
|
|
17
17
|
margin: 0;
|
|
18
18
|
grid-template-columns: ${(props) =>
|
|
19
19
|
props.layout === 'inline' ? '[label] 30% [input] 70%' : '1fr'};
|
|
20
|
+
column-gap: 20px;
|
|
20
21
|
grid-template-rows: ${(props) =>
|
|
21
22
|
props.layout === 'inline' ? 'auto auto' : 'auto'};
|
|
22
23
|
`;
|
|
@@ -14,5 +14,10 @@ declare module '@tanstack/react-table' {
|
|
|
14
14
|
* Merged into the `style` prop of the default-rendered `<th>` element.
|
|
15
15
|
*/
|
|
16
16
|
thStyle?: CSSProperties;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Merged into the `style` prop of the default-rendered `<td>` element.
|
|
20
|
+
*/
|
|
21
|
+
tdStyle?: CSSProperties;
|
|
17
22
|
}
|
|
18
23
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Icon } from '@blueprintjs/core';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
1
3
|
import type { Row, RowData } from '@tanstack/react-table';
|
|
2
4
|
import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
|
|
3
5
|
import { notUndefined } from '@tanstack/react-virtual';
|
|
@@ -23,6 +25,14 @@ interface TableBodyProps<TData extends RowData> {
|
|
|
23
25
|
virtualizer: Virtualizer<HTMLDivElement, Element>;
|
|
24
26
|
isReorderingEnabled: boolean;
|
|
25
27
|
renderRowPreview?: TableRowPreviewRenderer<TData>;
|
|
28
|
+
|
|
29
|
+
emptyContent: ReactNode;
|
|
30
|
+
emptyIcon: ReactNode;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Bound to `EmptyRow`, it is needed for td colSpan.
|
|
34
|
+
*/
|
|
35
|
+
columns: number;
|
|
26
36
|
}
|
|
27
37
|
|
|
28
38
|
export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
|
|
@@ -36,6 +46,9 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
|
|
|
36
46
|
) as TableRowTrRenderer<TData>,
|
|
37
47
|
virtualizer,
|
|
38
48
|
virtualizeRows,
|
|
49
|
+
emptyContent,
|
|
50
|
+
emptyIcon,
|
|
51
|
+
columns,
|
|
39
52
|
} = props;
|
|
40
53
|
|
|
41
54
|
if (virtualizeRows) {
|
|
@@ -72,6 +85,13 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
|
|
|
72
85
|
}}
|
|
73
86
|
/>
|
|
74
87
|
))}
|
|
88
|
+
{virtualItems.length === 0 && (
|
|
89
|
+
<EmptyRow
|
|
90
|
+
emptyContent={emptyContent}
|
|
91
|
+
emptyIcon={emptyIcon}
|
|
92
|
+
columns={columns}
|
|
93
|
+
/>
|
|
94
|
+
)}
|
|
75
95
|
{after > 0 && (
|
|
76
96
|
<tr>
|
|
77
97
|
<td style={{ height: after }} />
|
|
@@ -91,10 +111,50 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
|
|
|
91
111
|
}
|
|
92
112
|
/>
|
|
93
113
|
))}
|
|
114
|
+
{rows.length === 0 && (
|
|
115
|
+
<EmptyRow
|
|
116
|
+
emptyContent={emptyContent}
|
|
117
|
+
emptyIcon={emptyIcon}
|
|
118
|
+
columns={columns}
|
|
119
|
+
/>
|
|
120
|
+
)}
|
|
94
121
|
</tbody>
|
|
95
122
|
);
|
|
96
123
|
}
|
|
97
124
|
|
|
125
|
+
interface EmptyRowProps {
|
|
126
|
+
emptyContent: ReactNode;
|
|
127
|
+
emptyIcon: ReactNode;
|
|
128
|
+
columns: number;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
function EmptyRow(props: EmptyRowProps) {
|
|
132
|
+
const {
|
|
133
|
+
emptyIcon = <Icon icon="eye-off" />,
|
|
134
|
+
emptyContent = 'No data',
|
|
135
|
+
columns,
|
|
136
|
+
} = props;
|
|
137
|
+
|
|
138
|
+
return (
|
|
139
|
+
<tr>
|
|
140
|
+
<td colSpan={columns}>
|
|
141
|
+
<EmptyState>
|
|
142
|
+
{emptyIcon}
|
|
143
|
+
{emptyContent}
|
|
144
|
+
</EmptyState>
|
|
145
|
+
</td>
|
|
146
|
+
</tr>
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
const EmptyState = styled.div`
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
justify-content: center;
|
|
154
|
+
padding: 0.25em;
|
|
155
|
+
gap: 0.5em;
|
|
156
|
+
`;
|
|
157
|
+
|
|
98
158
|
type TableRowRenderer<TData extends RowData> = (row: Row<TData>) => ReactNode;
|
|
99
159
|
|
|
100
160
|
function TableRow<TData>({
|
|
@@ -12,7 +12,12 @@ import {
|
|
|
12
12
|
useReactTable,
|
|
13
13
|
} from '@tanstack/react-table';
|
|
14
14
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
15
|
-
import type {
|
|
15
|
+
import type {
|
|
16
|
+
CSSProperties,
|
|
17
|
+
ReactNode,
|
|
18
|
+
RefObject,
|
|
19
|
+
TableHTMLAttributes,
|
|
20
|
+
} from 'react';
|
|
16
21
|
import { useEffect, useMemo, useRef } from 'react';
|
|
17
22
|
import { match } from 'ts-pattern';
|
|
18
23
|
|
|
@@ -185,6 +190,18 @@ interface TableBaseProps<TData extends RowData> {
|
|
|
185
190
|
* Ignored when using custom row rendering with `renderRowTr`.
|
|
186
191
|
*/
|
|
187
192
|
renderRowPreview?: TableRowPreviewRenderer<TData>;
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* Icon to display when the table is empty.
|
|
196
|
+
* @default `<Icon icon="eye-off" />`
|
|
197
|
+
*/
|
|
198
|
+
emptyIcon?: ReactNode;
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Content to display when the table is empty.
|
|
202
|
+
* @default `'No data'`
|
|
203
|
+
*/
|
|
204
|
+
emptyContent?: ReactNode;
|
|
188
205
|
}
|
|
189
206
|
|
|
190
207
|
interface RegularTableProps<
|
|
@@ -244,6 +261,9 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
244
261
|
renderRowPreview,
|
|
245
262
|
|
|
246
263
|
scrollToRowRef,
|
|
264
|
+
|
|
265
|
+
emptyIcon,
|
|
266
|
+
emptyContent,
|
|
247
267
|
} = props;
|
|
248
268
|
const isReorderingEnabled = !!onRowOrderChanged;
|
|
249
269
|
const virtualScrollElementRef = useRef<HTMLDivElement>(null);
|
|
@@ -294,13 +314,16 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
294
314
|
}),
|
|
295
315
|
[className, getTdProps, renderRowTr, columns, compact],
|
|
296
316
|
);
|
|
317
|
+
|
|
318
|
+
const rows = table.getRowModel().rows;
|
|
319
|
+
|
|
297
320
|
return (
|
|
298
321
|
<FlashedRowProvider>
|
|
299
322
|
<PreviewTablePropsContextProvider
|
|
300
323
|
value={tablePreviewProps as PreviewTablePropsContextValue<unknown>}
|
|
301
324
|
>
|
|
302
325
|
<ItemOrderProvider
|
|
303
|
-
items={
|
|
326
|
+
items={rows}
|
|
304
327
|
onOrderChanged={(items) => {
|
|
305
328
|
onRowOrderChanged?.(items.map((item) => item.original));
|
|
306
329
|
}}
|
|
@@ -341,7 +364,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
341
364
|
/>
|
|
342
365
|
)}
|
|
343
366
|
<TableBody
|
|
344
|
-
rows={
|
|
367
|
+
rows={rows}
|
|
345
368
|
renderRowTr={renderRowTr}
|
|
346
369
|
tdStyle={tdStyle}
|
|
347
370
|
getTdProps={getTdProps}
|
|
@@ -349,6 +372,9 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
|
|
|
349
372
|
virtualizeRows={virtualizeRows}
|
|
350
373
|
renderRowPreview={renderRowPreview}
|
|
351
374
|
isReorderingEnabled={isReorderingEnabled}
|
|
375
|
+
emptyIcon={emptyIcon}
|
|
376
|
+
emptyContent={emptyContent}
|
|
377
|
+
columns={table.getAllColumns().length}
|
|
352
378
|
/>
|
|
353
379
|
</CustomHTMLTable>
|
|
354
380
|
</ScrollContainer>
|
|
@@ -15,8 +15,9 @@ export function TableRowCell<TData extends RowData>(
|
|
|
15
15
|
) {
|
|
16
16
|
const { cell, tdStyle, getTdProps } = props;
|
|
17
17
|
|
|
18
|
+
const tdStyleMeta = cell.column.columnDef.meta?.tdStyle;
|
|
18
19
|
const tdProps = getTdProps?.(cell);
|
|
19
|
-
const style = { ...tdStyle, ...tdProps?.style };
|
|
20
|
+
const style = { ...tdStyleMeta, ...tdStyle, ...tdProps?.style };
|
|
20
21
|
|
|
21
22
|
return (
|
|
22
23
|
<td {...tdProps} style={style}>
|