react-science 19.10.0 → 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/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
|
@@ -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":"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"}
|
|
@@ -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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"}
|
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
|
`;
|