@jsonforms/material-renderers 3.0.0-beta.2 → 3.0.0-beta.5
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/README.md +71 -13
- package/docs/assets/js/search.json +1 -1
- package/docs/globals.html +103 -52
- package/docs/index.html +79 -13
- package/docs/interfaces/inputref.html +168 -0
- package/lib/additional/MaterialListWithDetailRenderer.d.ts +1 -1
- package/lib/jsonforms-react-material.cjs.js +47 -19
- package/lib/jsonforms-react-material.cjs.js.map +1 -1
- package/lib/jsonforms-react-material.esm.js +50 -15
- package/lib/jsonforms-react-material.esm.js.map +1 -1
- package/lib/layouts/MaterialArrayLayoutRenderer.d.ts +1 -1
- package/lib/util/datejs.d.ts +17 -1
- package/package.json +7 -7
- package/src/additional/MaterialListWithDetailRenderer.tsx +5 -3
- package/src/complex/MaterialTableControl.tsx +1 -1
- package/src/controls/MaterialDateControl.tsx +23 -6
- package/src/controls/MaterialDateTimeControl.tsx +23 -6
- package/src/controls/MaterialTimeControl.tsx +24 -7
- package/src/layouts/ExpandPanelRenderer.tsx +2 -1
- package/src/layouts/MaterialArrayLayoutRenderer.tsx +3 -25
- package/src/mui-controls/MuiAutocomplete.tsx +1 -0
- package/src/util/datejs.tsx +73 -0
- package/stats.html +1 -1
- package/test/renderers/MaterialArrayLayout.test.tsx +32 -1
- package/test/renderers/MaterialDateControl.test.tsx +27 -0
- package/test/renderers/MaterialDateTimeControl.test.tsx +27 -0
- package/test/renderers/MaterialTimeControl.test.tsx +27 -0
- package/src/util/datejs.ts +0 -32
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html class="default no-js">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<title>InputRef | JSON Forms React Material Renderers</title>
|
|
7
|
+
<meta name="description" content="Documentation for JSON Forms React Material Renderers">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
9
|
+
<link rel="stylesheet" href="../assets/css/main.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<header>
|
|
13
|
+
<div class="tsd-page-toolbar">
|
|
14
|
+
<div class="container">
|
|
15
|
+
<div class="table-wrap">
|
|
16
|
+
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
|
|
17
|
+
<div class="field">
|
|
18
|
+
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
|
19
|
+
<input id="tsd-search-field" type="text" />
|
|
20
|
+
</div>
|
|
21
|
+
<ul class="results">
|
|
22
|
+
<li class="state loading">Preparing search index...</li>
|
|
23
|
+
<li class="state failure">The search index is not available</li>
|
|
24
|
+
</ul>
|
|
25
|
+
<a href="../index.html" class="title">JSON Forms React Material Renderers</a>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="table-cell" id="tsd-widgets">
|
|
28
|
+
<div id="tsd-filter">
|
|
29
|
+
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
|
30
|
+
<div class="tsd-filter-group">
|
|
31
|
+
<div class="tsd-select" id="tsd-filter-visibility">
|
|
32
|
+
<span class="tsd-select-label">All</span>
|
|
33
|
+
<ul class="tsd-select-list">
|
|
34
|
+
<li data-value="public">Public</li>
|
|
35
|
+
<li data-value="protected">Public/Protected</li>
|
|
36
|
+
<li data-value="private" class="selected">All</li>
|
|
37
|
+
</ul>
|
|
38
|
+
</div>
|
|
39
|
+
<input type="checkbox" id="tsd-filter-inherited" checked />
|
|
40
|
+
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
|
|
41
|
+
<input type="checkbox" id="tsd-filter-only-exported" />
|
|
42
|
+
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="tsd-page-title">
|
|
51
|
+
<div class="container">
|
|
52
|
+
<ul class="tsd-breadcrumb">
|
|
53
|
+
<li>
|
|
54
|
+
<a href="../globals.html">Globals</a>
|
|
55
|
+
</li>
|
|
56
|
+
<li>
|
|
57
|
+
<a href="inputref.html">InputRef</a>
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
<h1>Interface InputRef</h1>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</header>
|
|
64
|
+
<div class="container container-main">
|
|
65
|
+
<div class="row">
|
|
66
|
+
<div class="col-8 col-content">
|
|
67
|
+
<section class="tsd-panel tsd-hierarchy">
|
|
68
|
+
<h3>Hierarchy</h3>
|
|
69
|
+
<ul class="tsd-hierarchy">
|
|
70
|
+
<li>
|
|
71
|
+
<span class="target">InputRef</span>
|
|
72
|
+
</li>
|
|
73
|
+
</ul>
|
|
74
|
+
</section>
|
|
75
|
+
<section class="tsd-panel-group tsd-index-group">
|
|
76
|
+
<h2>Index</h2>
|
|
77
|
+
<section class="tsd-panel tsd-index-panel">
|
|
78
|
+
<div class="tsd-index-content">
|
|
79
|
+
<section class="tsd-index-section ">
|
|
80
|
+
<h3>Properties</h3>
|
|
81
|
+
<ul class="tsd-index-list">
|
|
82
|
+
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="inputref.html#lastinput" class="tsd-kind-icon">last<wbr>Input</a></li>
|
|
83
|
+
<li class="tsd-kind-property tsd-parent-kind-interface"><a href="inputref.html#toshow" class="tsd-kind-icon">to<wbr>Show</a></li>
|
|
84
|
+
</ul>
|
|
85
|
+
</section>
|
|
86
|
+
</div>
|
|
87
|
+
</section>
|
|
88
|
+
</section>
|
|
89
|
+
<section class="tsd-panel-group tsd-member-group ">
|
|
90
|
+
<h2>Properties</h2>
|
|
91
|
+
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
|
|
92
|
+
<a name="lastinput" class="tsd-anchor"></a>
|
|
93
|
+
<h3>last<wbr>Input</h3>
|
|
94
|
+
<div class="tsd-signature tsd-kind-icon">last<wbr>Input<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
|
|
95
|
+
<aside class="tsd-sources">
|
|
96
|
+
<ul>
|
|
97
|
+
<li>Defined in packages/material/src/util/datejs.tsx:38</li>
|
|
98
|
+
</ul>
|
|
99
|
+
</aside>
|
|
100
|
+
</section>
|
|
101
|
+
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
|
|
102
|
+
<a name="toshow" class="tsd-anchor"></a>
|
|
103
|
+
<h3>to<wbr>Show</h3>
|
|
104
|
+
<div class="tsd-signature tsd-kind-icon">to<wbr>Show<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
|
|
105
|
+
<aside class="tsd-sources">
|
|
106
|
+
<ul>
|
|
107
|
+
<li>Defined in packages/material/src/util/datejs.tsx:39</li>
|
|
108
|
+
</ul>
|
|
109
|
+
</aside>
|
|
110
|
+
</section>
|
|
111
|
+
</section>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
114
|
+
<nav class="tsd-navigation primary">
|
|
115
|
+
<ul>
|
|
116
|
+
<li class="globals ">
|
|
117
|
+
<a href="../globals.html"><em>Globals</em></a>
|
|
118
|
+
</li>
|
|
119
|
+
</ul>
|
|
120
|
+
</nav>
|
|
121
|
+
<nav class="tsd-navigation secondary menu-sticky">
|
|
122
|
+
<ul class="before-current">
|
|
123
|
+
</ul>
|
|
124
|
+
<ul class="current">
|
|
125
|
+
<li class="current tsd-kind-interface">
|
|
126
|
+
<a href="inputref.html" class="tsd-kind-icon">Input<wbr>Ref</a>
|
|
127
|
+
<ul>
|
|
128
|
+
<li class=" tsd-kind-property tsd-parent-kind-interface">
|
|
129
|
+
<a href="inputref.html#lastinput" class="tsd-kind-icon">last<wbr>Input</a>
|
|
130
|
+
</li>
|
|
131
|
+
<li class=" tsd-kind-property tsd-parent-kind-interface">
|
|
132
|
+
<a href="inputref.html#toshow" class="tsd-kind-icon">to<wbr>Show</a>
|
|
133
|
+
</li>
|
|
134
|
+
</ul>
|
|
135
|
+
</li>
|
|
136
|
+
</ul>
|
|
137
|
+
<ul class="after-current">
|
|
138
|
+
</ul>
|
|
139
|
+
</nav>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
<footer class="with-border-bottom">
|
|
144
|
+
<div class="container">
|
|
145
|
+
<h2>Legend</h2>
|
|
146
|
+
<div class="tsd-legend-group">
|
|
147
|
+
<ul class="tsd-legend">
|
|
148
|
+
<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
|
|
149
|
+
<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
|
|
150
|
+
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
|
|
151
|
+
</ul>
|
|
152
|
+
<ul class="tsd-legend">
|
|
153
|
+
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
|
|
154
|
+
<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
|
|
155
|
+
</ul>
|
|
156
|
+
<ul class="tsd-legend">
|
|
157
|
+
<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
|
|
158
|
+
</ul>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</footer>
|
|
162
|
+
<div class="container tsd-generator">
|
|
163
|
+
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="overlay"></div>
|
|
166
|
+
<script src="../assets/js/main.js"></script>
|
|
167
|
+
</body>
|
|
168
|
+
</html>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
export declare const MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config }: ArrayLayoutProps) => JSX.Element;
|
|
3
|
+
export declare const MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema }: ArrayLayoutProps) => JSX.Element;
|
|
4
4
|
export declare const materialListWithDetailTester: RankedTester;
|
|
5
5
|
declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
|
|
6
6
|
export default _default;
|
|
@@ -270,7 +270,7 @@ var TableRows = function (_a) {
|
|
|
270
270
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
271
271
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, range__default["default"](data).map(function (index) {
|
|
272
272
|
var childPath = core.Paths.compose(path, "" + index);
|
|
273
|
-
return (React__default["default"].createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons, enabled: enabled, cells: cells, path: path }));
|
|
273
|
+
return (React__default["default"].createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path }));
|
|
274
274
|
})));
|
|
275
275
|
};
|
|
276
276
|
var MaterialTableControl = (function (_super) {
|
|
@@ -455,13 +455,13 @@ var MuiSelect = React__default["default"].memo(function (props) {
|
|
|
455
455
|
});
|
|
456
456
|
|
|
457
457
|
dayjs__default["default"].extend(customParsing__default["default"]);
|
|
458
|
-
var createOnChangeHandler = function (path, handleChange, saveFormat) { return function (time) {
|
|
458
|
+
var createOnChangeHandler = function (path, handleChange, saveFormat) { return function (time, textInputValue) {
|
|
459
459
|
if (!time) {
|
|
460
460
|
handleChange(path, undefined);
|
|
461
461
|
return;
|
|
462
462
|
}
|
|
463
463
|
var result = dayjs__default["default"](time).format(saveFormat);
|
|
464
|
-
handleChange(path, result === 'Invalid Date' ?
|
|
464
|
+
handleChange(path, result === 'Invalid Date' ? textInputValue : result);
|
|
465
465
|
}; };
|
|
466
466
|
var getData = function (data, saveFormat) {
|
|
467
467
|
if (!data) {
|
|
@@ -473,6 +473,23 @@ var getData = function (data, saveFormat) {
|
|
|
473
473
|
}
|
|
474
474
|
return dayjsData;
|
|
475
475
|
};
|
|
476
|
+
var ResettableTextField = function (_a) {
|
|
477
|
+
var rawValue = _a.rawValue, dayjsValueIsValid = _a.dayjsValueIsValid, valueInInputFormat = _a.valueInInputFormat, focused = _a.focused, inputProps = _a.inputProps, props = __rest(_a, ["rawValue", "dayjsValueIsValid", "valueInInputFormat", "focused", "inputProps"]);
|
|
478
|
+
var value = React.useRef({ lastInput: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value, toShow: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value });
|
|
479
|
+
if (!focused) {
|
|
480
|
+
if (!dayjsValueIsValid) {
|
|
481
|
+
value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue);
|
|
482
|
+
}
|
|
483
|
+
else {
|
|
484
|
+
value.current.toShow = valueInInputFormat;
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
if (focused && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== value.current.lastInput) {
|
|
488
|
+
value.current.lastInput = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
|
|
489
|
+
value.current.toShow = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
|
|
490
|
+
}
|
|
491
|
+
return React__default["default"].createElement(material.TextField, __assign({}, props, { inputProps: __assign(__assign({}, inputProps), { value: value.current.toShow || '' }) }));
|
|
492
|
+
};
|
|
476
493
|
|
|
477
494
|
var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
|
|
478
495
|
return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: path + "-" + index, xs: true },
|
|
@@ -681,7 +698,7 @@ var ListWithDetailMasterItem = function (_a) {
|
|
|
681
698
|
var ListWithDetailMasterItem$1 = react.withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
|
|
682
699
|
|
|
683
700
|
var MaterialListWithDetailRenderer = function (_a) {
|
|
684
|
-
var uischemas = _a.uischemas, schema = _a.schema, uischema = _a.uischema, path = _a.path, errors = _a.errors, visible = _a.visible, label = _a.label, required = _a.required, removeItems = _a.removeItems, addItem = _a.addItem, data = _a.data, renderers = _a.renderers, cells = _a.cells, config = _a.config;
|
|
701
|
+
var uischemas = _a.uischemas, schema = _a.schema, uischema = _a.uischema, path = _a.path, errors = _a.errors, visible = _a.visible, label = _a.label, required = _a.required, removeItems = _a.removeItems, addItem = _a.addItem, data = _a.data, renderers = _a.renderers, cells = _a.cells, config = _a.config, rootSchema = _a.rootSchema;
|
|
685
702
|
var _b = React.useState(undefined), selectedIndex = _b[0], setSelectedIndex = _b[1];
|
|
686
703
|
var handleRemoveItem = React.useCallback(function (p, value) { return function () {
|
|
687
704
|
removeItems(p, [value])();
|
|
@@ -695,8 +712,8 @@ var MaterialListWithDetailRenderer = function (_a) {
|
|
|
695
712
|
var handleListItemClick = React.useCallback(function (index) { return function () { return setSelectedIndex(index); }; }, [setSelectedIndex]);
|
|
696
713
|
var handleCreateDefaultValue = React.useCallback(function () { return core.createDefaultValue(schema); }, [core.createDefaultValue]);
|
|
697
714
|
var foundUISchema = React.useMemo(function () {
|
|
698
|
-
return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema);
|
|
699
|
-
}, [uischemas, schema, uischema.scope, path, uischema]);
|
|
715
|
+
return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
|
|
716
|
+
}, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
|
|
700
717
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
701
718
|
return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
|
|
702
719
|
React__default["default"].createElement(ArrayLayoutToolbar, { label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
|
|
@@ -763,7 +780,7 @@ var MuiAutocomplete = function (props) {
|
|
|
763
780
|
handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
|
|
764
781
|
}, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
|
|
765
782
|
setInputValue(newInputValue);
|
|
766
|
-
}, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), style: { marginTop: 16 }, renderInput: function (params) { return (React__default["default"].createElement(material.Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })); }, renderOption: renderOption, filterOptions: filterOptions }));
|
|
783
|
+
}, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, style: { marginTop: 16 }, renderInput: function (params) { return (React__default["default"].createElement(material.Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })); }, renderOption: renderOption, filterOptions: filterOptions }));
|
|
767
784
|
};
|
|
768
785
|
|
|
769
786
|
var MaterialEnumControl = function (props) {
|
|
@@ -790,14 +807,15 @@ var materialNativeControlTester = core.rankWith(2, core.or(core.isDateControl, c
|
|
|
790
807
|
var MaterialNativeControl$1 = react.withJsonFormsControlProps(MaterialNativeControl);
|
|
791
808
|
|
|
792
809
|
var MaterialDateControl = function (props) {
|
|
793
|
-
var _a, _b;
|
|
794
|
-
var
|
|
810
|
+
var _a, _b, _c;
|
|
811
|
+
var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
|
|
795
812
|
var description = props.description, id = props.id, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
|
|
796
813
|
var isValid = errors.length === 0;
|
|
797
814
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
798
815
|
var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
|
|
799
816
|
var format = (_a = appliedUiSchemaOptions.dateFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD';
|
|
800
817
|
var saveFormat = (_b = appliedUiSchemaOptions.dateSaveFormat) !== null && _b !== void 0 ? _b : 'YYYY-MM-DD';
|
|
818
|
+
var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day'];
|
|
801
819
|
var firstFormHelperText = showDescription
|
|
802
820
|
? description
|
|
803
821
|
: !isValid
|
|
@@ -805,9 +823,11 @@ var MaterialDateControl = function (props) {
|
|
|
805
823
|
: null;
|
|
806
824
|
var secondFormHelperText = showDescription && !isValid ? errors : null;
|
|
807
825
|
var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
|
|
826
|
+
var value = getData(data, saveFormat);
|
|
827
|
+
var valueInInputFormat = value ? value.format(format) : '';
|
|
808
828
|
return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
|
|
809
829
|
React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
|
|
810
|
-
React__default["default"].createElement(lab.DatePicker, { label: label, value:
|
|
830
|
+
React__default["default"].createElement(lab.DatePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
|
|
811
831
|
React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
|
|
812
832
|
React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
|
|
813
833
|
};
|
|
@@ -815,14 +835,15 @@ var materialDateControlTester = core.rankWith(4, core.isDateControl);
|
|
|
815
835
|
var MaterialDateControl$1 = react.withJsonFormsControlProps(MaterialDateControl);
|
|
816
836
|
|
|
817
837
|
var MaterialDateTimeControl = function (props) {
|
|
818
|
-
var _a, _b;
|
|
819
|
-
var
|
|
838
|
+
var _a, _b, _c;
|
|
839
|
+
var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
|
|
820
840
|
var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
|
|
821
841
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
822
842
|
var isValid = errors.length === 0;
|
|
823
843
|
var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
|
|
824
844
|
var format = (_a = appliedUiSchemaOptions.dateTimeFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD HH:mm';
|
|
825
845
|
var saveFormat = (_b = appliedUiSchemaOptions.dateTimeSaveFormat) !== null && _b !== void 0 ? _b : undefined;
|
|
846
|
+
var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day', 'hours', 'minutes'];
|
|
826
847
|
var firstFormHelperText = showDescription
|
|
827
848
|
? description
|
|
828
849
|
: !isValid
|
|
@@ -830,9 +851,11 @@ var MaterialDateTimeControl = function (props) {
|
|
|
830
851
|
: null;
|
|
831
852
|
var secondFormHelperText = showDescription && !isValid ? errors : null;
|
|
832
853
|
var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
|
|
854
|
+
var value = getData(data, saveFormat);
|
|
855
|
+
var valueInInputFormat = value ? value.format(format) : '';
|
|
833
856
|
return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
|
|
834
857
|
React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
|
|
835
|
-
React__default["default"].createElement(lab.DateTimePicker, { label: label, value:
|
|
858
|
+
React__default["default"].createElement(lab.DateTimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
|
|
836
859
|
React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
|
|
837
860
|
React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
|
|
838
861
|
};
|
|
@@ -840,14 +863,15 @@ var materialDateTimeControlTester = core.rankWith(2, core.isDateTimeControl);
|
|
|
840
863
|
var MaterialDateTimeControl$1 = react.withJsonFormsControlProps(MaterialDateTimeControl);
|
|
841
864
|
|
|
842
865
|
var MaterialTimeControl = function (props) {
|
|
843
|
-
var _a, _b;
|
|
844
|
-
var
|
|
866
|
+
var _a, _b, _c;
|
|
867
|
+
var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
|
|
845
868
|
var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
|
|
846
869
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
847
870
|
var isValid = errors.length === 0;
|
|
848
871
|
var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
|
|
849
872
|
var format = (_a = appliedUiSchemaOptions.timeFormat) !== null && _a !== void 0 ? _a : 'HH:mm';
|
|
850
873
|
var saveFormat = (_b = appliedUiSchemaOptions.timeSaveFormat) !== null && _b !== void 0 ? _b : 'HH:mm:ss';
|
|
874
|
+
var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['hours', 'minutes'];
|
|
851
875
|
var firstFormHelperText = showDescription
|
|
852
876
|
? description
|
|
853
877
|
: !isValid
|
|
@@ -855,9 +879,11 @@ var MaterialTimeControl = function (props) {
|
|
|
855
879
|
: null;
|
|
856
880
|
var secondFormHelperText = showDescription && !isValid ? errors : null;
|
|
857
881
|
var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
|
|
882
|
+
var value = getData(data, saveFormat);
|
|
883
|
+
var valueInInputFormat = value ? value.format(format) : '';
|
|
858
884
|
return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
|
|
859
885
|
React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
|
|
860
|
-
React__default["default"].createElement(lab.TimePicker, { label: label, value:
|
|
886
|
+
React__default["default"].createElement(lab.TimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
|
|
861
887
|
React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
|
|
862
888
|
React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
|
|
863
889
|
};
|
|
@@ -1112,6 +1138,7 @@ var ExpandPanelRendererComponent = function (props) {
|
|
|
1112
1138
|
return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
|
|
1113
1139
|
}, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
|
|
1114
1140
|
var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
|
|
1141
|
+
var showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
|
|
1115
1142
|
return (React__default["default"].createElement(material.Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
|
|
1116
1143
|
React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], null) },
|
|
1117
1144
|
React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
|
|
@@ -1125,7 +1152,7 @@ var ExpandPanelRendererComponent = function (props) {
|
|
|
1125
1152
|
React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-end' },
|
|
1126
1153
|
React__default["default"].createElement(material.Grid, { item: true },
|
|
1127
1154
|
React__default["default"].createElement(material.Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
|
|
1128
|
-
|
|
1155
|
+
showSortButtons ? (React__default["default"].createElement(React.Fragment, null,
|
|
1129
1156
|
React__default["default"].createElement(material.Grid, { item: true },
|
|
1130
1157
|
React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": "Move up", size: 'large' },
|
|
1131
1158
|
React__default["default"].createElement(ArrowUpward__default["default"], null))),
|
|
@@ -1201,12 +1228,12 @@ var MaterialArrayLayoutComponent = function (props) {
|
|
|
1201
1228
|
var MaterialArrayLayout$1 = React__default["default"].memo(MaterialArrayLayoutComponent);
|
|
1202
1229
|
|
|
1203
1230
|
var MaterialArrayLayoutRenderer = function (_a) {
|
|
1204
|
-
var visible = _a.visible,
|
|
1231
|
+
var visible = _a.visible, addItem = _a.addItem, props = __rest(_a, ["visible", "addItem"]);
|
|
1205
1232
|
var addItemCb = React.useCallback(function (p, value) { return addItem(p, value); }, [
|
|
1206
1233
|
addItem
|
|
1207
1234
|
]);
|
|
1208
1235
|
return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
|
|
1209
|
-
React__default["default"].createElement(MaterialArrayLayout$1, {
|
|
1236
|
+
React__default["default"].createElement(MaterialArrayLayout$1, __assign({ visible: visible, addItem: addItemCb }, props))));
|
|
1210
1237
|
};
|
|
1211
1238
|
var materialArrayLayoutTester = core.rankWith(4, core.isObjectArrayWithNesting);
|
|
1212
1239
|
var MaterialArrayLayout = react.withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
|
|
@@ -1432,6 +1459,7 @@ exports.MuiInputNumberFormat = MuiInputNumberFormat;
|
|
|
1432
1459
|
exports.MuiInputText = MuiInputText;
|
|
1433
1460
|
exports.MuiInputTime = MuiInputTime;
|
|
1434
1461
|
exports.MuiSelect = MuiSelect;
|
|
1462
|
+
exports.ResettableTextField = ResettableTextField;
|
|
1435
1463
|
exports.Unwrapped = Unwrapped;
|
|
1436
1464
|
exports.createOnChangeHandler = createOnChangeHandler;
|
|
1437
1465
|
exports.getData = getData;
|