@aehrc/smart-forms-renderer 1.0.0-alpha.20 → 1.0.0-alpha.21
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/Renderer/FormBodyTabbed.js +8 -3
- package/lib/components/Renderer/FormBodyTabbed.js.map +1 -1
- package/lib/stores/rendererStylingStore.d.ts +3 -0
- package/lib/stores/rendererStylingStore.js +12 -10
- package/lib/stores/rendererStylingStore.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Renderer/FormBodyTabbed.tsx +13 -3
- package/src/stores/rendererStylingStore.ts +4 -0
|
@@ -22,11 +22,12 @@ import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
|
|
|
22
22
|
import GroupItem from '../FormComponents/GroupItem/GroupItem';
|
|
23
23
|
import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
|
|
24
24
|
import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
|
|
25
|
-
import { useQuestionnaireStore } from '../../stores';
|
|
25
|
+
import { useQuestionnaireStore, useRendererStylingStore } from '../../stores';
|
|
26
26
|
function FormBodyTabbed(props) {
|
|
27
27
|
const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
|
|
28
28
|
const tabs = useQuestionnaireStore.use.tabs();
|
|
29
29
|
const currentTab = useQuestionnaireStore.use.currentTabIndex();
|
|
30
|
+
const tabListFixedWidth = useRendererStylingStore.use.tabListFixedWidth();
|
|
30
31
|
const indexMap = useMemo(() => mapQItemsIndex(topLevelQItem), [topLevelQItem]);
|
|
31
32
|
const nonNullTopLevelQRItem = topLevelQRItem !== null && topLevelQRItem !== void 0 ? topLevelQRItem : createEmptyQrGroup(topLevelQItem);
|
|
32
33
|
const qItems = topLevelQItem.item;
|
|
@@ -39,11 +40,15 @@ function FormBodyTabbed(props) {
|
|
|
39
40
|
return React.createElement(React.Fragment, null, "Unable to load form");
|
|
40
41
|
}
|
|
41
42
|
const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
|
|
43
|
+
const tabListWrapperProps = typeof tabListFixedWidth === 'number'
|
|
44
|
+
? { sx: { width: tabListFixedWidth, flexShrink: 0 } }
|
|
45
|
+
: { xs: 12, md: 3, lg: 2.75 };
|
|
46
|
+
const qItemTabPanelProps = typeof tabListFixedWidth === 'number' ? { sx: { flexGrow: 1 } } : { xs: 12, md: 9, lg: 9.25 };
|
|
42
47
|
return (React.createElement(Grid, { container: true, spacing: 1.5 },
|
|
43
48
|
React.createElement(TabContext, { value: currentTab.toString() },
|
|
44
|
-
React.createElement(Grid, { item: true
|
|
49
|
+
React.createElement(Grid, Object.assign({ item: true }, tabListWrapperProps),
|
|
45
50
|
React.createElement(FormBodyTabListWrapper, { topLevelItems: qItems, currentTabIndex: currentTab, tabs: tabs })),
|
|
46
|
-
React.createElement(Grid, { item: true
|
|
51
|
+
React.createElement(Grid, Object.assign({ item: true }, qItemTabPanelProps), qItems.map((qItem, i) => {
|
|
47
52
|
var _a, _b;
|
|
48
53
|
const qrItem = qrItemsByIndex[i];
|
|
49
54
|
const isNotRepeatGroup = !Array.isArray(qrItem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormBodyTabbed.js","sourceRoot":"","sources":["../../../src/components/Renderer/FormBodyTabbed.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAKpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"FormBodyTabbed.js","sourceRoot":"","sources":["../../../src/components/Renderer/FormBodyTabbed.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ export interface RendererStyling {
|
|
|
13
13
|
itemLabelGridBreakpoints?: ItemGridBreakpoints;
|
|
14
14
|
itemFieldGridBreakpoints?: ItemGridBreakpoints;
|
|
15
15
|
showTabbedFormAt?: UseResponsiveProps;
|
|
16
|
+
tabListFixedWidth?: number | false;
|
|
16
17
|
textFieldWidth?: number;
|
|
17
18
|
inputsFlexGrow?: boolean;
|
|
18
19
|
reverseBooleanYesNo?: boolean;
|
|
@@ -34,6 +35,7 @@ export interface RendererStylingStoreType {
|
|
|
34
35
|
itemLabelGridBreakpoints: ItemGridBreakpoints;
|
|
35
36
|
itemFieldGridBreakpoints: ItemGridBreakpoints;
|
|
36
37
|
showTabbedFormAt: UseResponsiveProps;
|
|
38
|
+
tabListFixedWidth: number | false;
|
|
37
39
|
textFieldWidth: number;
|
|
38
40
|
inputsFlexGrow: boolean;
|
|
39
41
|
reverseBooleanYesNo: boolean;
|
|
@@ -56,6 +58,7 @@ export declare const useRendererStylingStore: import("zustand/vanilla").StoreApi
|
|
|
56
58
|
itemLabelGridBreakpoints: () => ItemGridBreakpoints;
|
|
57
59
|
itemFieldGridBreakpoints: () => ItemGridBreakpoints;
|
|
58
60
|
showTabbedFormAt: () => UseResponsiveProps;
|
|
61
|
+
tabListFixedWidth: () => number | false;
|
|
59
62
|
textFieldWidth: () => number;
|
|
60
63
|
inputsFlexGrow: () => boolean;
|
|
61
64
|
reverseBooleanYesNo: () => boolean;
|
|
@@ -25,6 +25,7 @@ export const rendererStylingStore = createStore()((set) => ({
|
|
|
25
25
|
itemLabelGridBreakpoints: { xs: 12, md: 4 },
|
|
26
26
|
itemFieldGridBreakpoints: { xs: 12, md: 8 },
|
|
27
27
|
showTabbedFormAt: { query: 'up', start: 'md' },
|
|
28
|
+
tabListFixedWidth: false,
|
|
28
29
|
textFieldWidth: 320,
|
|
29
30
|
inputsFlexGrow: false,
|
|
30
31
|
reverseBooleanYesNo: false,
|
|
@@ -36,22 +37,23 @@ export const rendererStylingStore = createStore()((set) => ({
|
|
|
36
37
|
disableTabButtons: false,
|
|
37
38
|
setRendererStyling: (params) => {
|
|
38
39
|
set(() => {
|
|
39
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
40
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
40
41
|
return ({
|
|
41
42
|
itemLabelFontWeight: (_a = params.itemLabelFontWeight) !== null && _a !== void 0 ? _a : 'default',
|
|
42
43
|
requiredIndicatorPosition: (_b = params.requiredIndicatorPosition) !== null && _b !== void 0 ? _b : 'start',
|
|
43
44
|
itemLabelGridBreakpoints: (_c = params.itemLabelGridBreakpoints) !== null && _c !== void 0 ? _c : { xs: 12, md: 4 },
|
|
44
45
|
itemFieldGridBreakpoints: (_d = params.itemFieldGridBreakpoints) !== null && _d !== void 0 ? _d : { xs: 12, md: 8 },
|
|
45
46
|
showTabbedFormAt: (_e = params.showTabbedFormAt) !== null && _e !== void 0 ? _e : { query: 'up', start: 'md' },
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
tabListFixedWidth: (_f = params.tabListFixedWidth) !== null && _f !== void 0 ? _f : false,
|
|
48
|
+
textFieldWidth: (_g = params.textFieldWidth) !== null && _g !== void 0 ? _g : 320,
|
|
49
|
+
inputsFlexGrow: (_h = params.inputsFlexGrow) !== null && _h !== void 0 ? _h : false,
|
|
50
|
+
reverseBooleanYesNo: (_j = params.reverseBooleanYesNo) !== null && _j !== void 0 ? _j : false,
|
|
51
|
+
hideClearButton: (_k = params.hideClearButton) !== null && _k !== void 0 ? _k : false,
|
|
52
|
+
hideQuantityComparatorField: (_l = params.hideQuantityComparatorField) !== null && _l !== void 0 ? _l : false,
|
|
53
|
+
enableWhenAsReadOnly: (_m = params.enableWhenAsReadOnly) !== null && _m !== void 0 ? _m : false,
|
|
54
|
+
disablePageCardView: (_o = params.disablePageCardView) !== null && _o !== void 0 ? _o : false,
|
|
55
|
+
disablePageButtons: (_p = params.disablePageButtons) !== null && _p !== void 0 ? _p : false,
|
|
56
|
+
disableTabButtons: (_q = params.disableTabButtons) !== null && _q !== void 0 ? _q : false
|
|
55
57
|
});
|
|
56
58
|
});
|
|
57
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rendererStylingStore.js","sourceRoot":"","sources":["../../src/stores/rendererStylingStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"rendererStylingStore.js","sourceRoot":"","sources":["../../src/stores/rendererStylingStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AA0E7C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,EAA4B,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACpF,mBAAmB,EAAE,SAAS;IAC9B,yBAAyB,EAAE,OAAO;IAClC,wBAAwB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;IAC3C,wBAAwB,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;IAC3C,gBAAgB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;IAC9C,iBAAiB,EAAE,KAAK;IACxB,cAAc,EAAE,GAAG;IACnB,cAAc,EAAE,KAAK;IACrB,mBAAmB,EAAE,KAAK;IAC1B,eAAe,EAAE,KAAK;IACtB,2BAA2B,EAAE,KAAK;IAClC,oBAAoB,EAAE,KAAK;IAC3B,mBAAmB,EAAE,KAAK;IAC1B,kBAAkB,EAAE,KAAK;IACzB,iBAAiB,EAAE,KAAK;IACxB,kBAAkB,EAAE,CAAC,MAAuB,EAAE,EAAE;QAC9C,GAAG,CAAC,GAAG,EAAE;;YAAC,OAAA,CAAC;gBACT,mBAAmB,EAAE,MAAA,MAAM,CAAC,mBAAmB,mCAAI,SAAS;gBAC5D,yBAAyB,EAAE,MAAA,MAAM,CAAC,yBAAyB,mCAAI,OAAO;gBACtE,wBAAwB,EAAE,MAAA,MAAM,CAAC,wBAAwB,mCAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;gBAC9E,wBAAwB,EAAE,MAAA,MAAM,CAAC,wBAAwB,mCAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;gBAC9E,gBAAgB,EAAE,MAAA,MAAM,CAAC,gBAAgB,mCAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACzE,iBAAiB,EAAE,MAAA,MAAM,CAAC,iBAAiB,mCAAI,KAAK;gBACpD,cAAc,EAAE,MAAA,MAAM,CAAC,cAAc,mCAAI,GAAG;gBAC5C,cAAc,EAAE,MAAA,MAAM,CAAC,cAAc,mCAAI,KAAK;gBAC9C,mBAAmB,EAAE,MAAA,MAAM,CAAC,mBAAmB,mCAAI,KAAK;gBACxD,eAAe,EAAE,MAAA,MAAM,CAAC,eAAe,mCAAI,KAAK;gBAChD,2BAA2B,EAAE,MAAA,MAAM,CAAC,2BAA2B,mCAAI,KAAK;gBACxE,oBAAoB,EAAE,MAAA,MAAM,CAAC,oBAAoB,mCAAI,KAAK;gBAC1D,mBAAmB,EAAE,MAAA,MAAM,CAAC,mBAAmB,mCAAI,KAAK;gBACxD,kBAAkB,EAAE,MAAA,MAAM,CAAC,kBAAkB,mCAAI,KAAK;gBACtD,iBAAiB,EAAE,MAAA,MAAM,CAAC,iBAAiB,mCAAI,KAAK;aACrD,CAAC,CAAA;SAAA,CAAC,CAAC;IACN,CAAC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC,oBAAoB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@ import type {
|
|
|
28
28
|
PropsWithParentIsReadOnlyAttribute,
|
|
29
29
|
PropsWithQrItemChangeHandler
|
|
30
30
|
} from '../../interfaces/renderProps.interface';
|
|
31
|
-
import { useQuestionnaireStore } from '../../stores';
|
|
31
|
+
import { useQuestionnaireStore, useRendererStylingStore } from '../../stores';
|
|
32
32
|
|
|
33
33
|
interface FormBodyTabbedProps
|
|
34
34
|
extends PropsWithQrItemChangeHandler,
|
|
@@ -43,6 +43,8 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
|
|
|
43
43
|
const tabs = useQuestionnaireStore.use.tabs();
|
|
44
44
|
const currentTab = useQuestionnaireStore.use.currentTabIndex();
|
|
45
45
|
|
|
46
|
+
const tabListFixedWidth = useRendererStylingStore.use.tabListFixedWidth();
|
|
47
|
+
|
|
46
48
|
const indexMap: Record<string, number> = useMemo(
|
|
47
49
|
() => mapQItemsIndex(topLevelQItem),
|
|
48
50
|
[topLevelQItem]
|
|
@@ -64,14 +66,22 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
|
|
|
64
66
|
|
|
65
67
|
const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
|
|
66
68
|
|
|
69
|
+
const tabListWrapperProps =
|
|
70
|
+
typeof tabListFixedWidth === 'number'
|
|
71
|
+
? { sx: { width: tabListFixedWidth, flexShrink: 0 } }
|
|
72
|
+
: { xs: 12, md: 3, lg: 2.75 };
|
|
73
|
+
|
|
74
|
+
const qItemTabPanelProps =
|
|
75
|
+
typeof tabListFixedWidth === 'number' ? { sx: { flexGrow: 1 } } : { xs: 12, md: 9, lg: 9.25 };
|
|
76
|
+
|
|
67
77
|
return (
|
|
68
78
|
<Grid container spacing={1.5}>
|
|
69
79
|
<TabContext value={currentTab.toString()}>
|
|
70
|
-
<Grid item
|
|
80
|
+
<Grid item {...tabListWrapperProps}>
|
|
71
81
|
<FormBodyTabListWrapper topLevelItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
|
|
72
82
|
</Grid>
|
|
73
83
|
|
|
74
|
-
<Grid item
|
|
84
|
+
<Grid item {...qItemTabPanelProps}>
|
|
75
85
|
{qItems.map((qItem, i) => {
|
|
76
86
|
const qrItem = qrItemsByIndex[i];
|
|
77
87
|
|
|
@@ -44,6 +44,7 @@ export interface RendererStyling {
|
|
|
44
44
|
itemLabelGridBreakpoints?: ItemGridBreakpoints;
|
|
45
45
|
itemFieldGridBreakpoints?: ItemGridBreakpoints;
|
|
46
46
|
showTabbedFormAt?: UseResponsiveProps;
|
|
47
|
+
tabListFixedWidth?: number | false;
|
|
47
48
|
textFieldWidth?: number;
|
|
48
49
|
inputsFlexGrow?: boolean;
|
|
49
50
|
reverseBooleanYesNo?: boolean;
|
|
@@ -76,6 +77,7 @@ export interface RendererStylingStoreType {
|
|
|
76
77
|
itemLabelGridBreakpoints: ItemGridBreakpoints;
|
|
77
78
|
itemFieldGridBreakpoints: ItemGridBreakpoints;
|
|
78
79
|
showTabbedFormAt: UseResponsiveProps;
|
|
80
|
+
tabListFixedWidth: number | false;
|
|
79
81
|
textFieldWidth: number;
|
|
80
82
|
inputsFlexGrow: boolean; // radio, checkbox and boolean inputs should have flexGrow: 1
|
|
81
83
|
reverseBooleanYesNo: boolean;
|
|
@@ -97,6 +99,7 @@ export const rendererStylingStore = createStore<RendererStylingStoreType>()((set
|
|
|
97
99
|
itemLabelGridBreakpoints: { xs: 12, md: 4 },
|
|
98
100
|
itemFieldGridBreakpoints: { xs: 12, md: 8 },
|
|
99
101
|
showTabbedFormAt: { query: 'up', start: 'md' },
|
|
102
|
+
tabListFixedWidth: false,
|
|
100
103
|
textFieldWidth: 320,
|
|
101
104
|
inputsFlexGrow: false,
|
|
102
105
|
reverseBooleanYesNo: false,
|
|
@@ -113,6 +116,7 @@ export const rendererStylingStore = createStore<RendererStylingStoreType>()((set
|
|
|
113
116
|
itemLabelGridBreakpoints: params.itemLabelGridBreakpoints ?? { xs: 12, md: 4 },
|
|
114
117
|
itemFieldGridBreakpoints: params.itemFieldGridBreakpoints ?? { xs: 12, md: 8 },
|
|
115
118
|
showTabbedFormAt: params.showTabbedFormAt ?? { query: 'up', start: 'md' },
|
|
119
|
+
tabListFixedWidth: params.tabListFixedWidth ?? false,
|
|
116
120
|
textFieldWidth: params.textFieldWidth ?? 320,
|
|
117
121
|
inputsFlexGrow: params.inputsFlexGrow ?? false,
|
|
118
122
|
reverseBooleanYesNo: params.reverseBooleanYesNo ?? false,
|