@@ -78,17 +85,17 @@ const App = () => {
container
justifyContent={'center'}
spacing={1}
- className={classes.container}
+ sx={classes.container}
>
-
+
Bound data
-
+
-
+
Rendered form
-
+
setData(data)}
+ onChange={({ errors, data }) => handleChange(errors, data)}
/>
-
+
diff --git a/src/MaterialDateControl.tsx b/src/MaterialDateControl.tsx
new file mode 100644
index 0000000..605524f
--- /dev/null
+++ b/src/MaterialDateControl.tsx
@@ -0,0 +1,126 @@
+/*
+ The MIT License
+
+ Copyright (c) 2017-2019 EclipseSource Munich
+ https://github.com/eclipsesource/jsonforms
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in
+ all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ THE SOFTWARE.
+*/
+import {
+ and,
+ ControlProps,
+ isDescriptionHidden,
+ RankedTester,
+ rankWith,
+ schemaMatches,
+ schemaTypeIs,
+ uiTypeIs,
+} from '@jsonforms/core';
+import {
+ createOnChangeHandler,
+ getData,
+ useFocus,
+} from '@jsonforms/material-renderers';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import merge from 'lodash/merge';
+import { useMemo } from 'react';
+
+export const MaterialDateControl = (props: ControlProps) => {
+ const [focused, onFocus, onBlur] = useFocus();
+ const {
+ description,
+ id,
+ errors,
+ label,
+ uischema,
+ visible,
+ enabled,
+ required,
+ path,
+ handleChange,
+ data,
+ config,
+ } = props;
+ const isValid = errors.length === 0;
+ const appliedUiSchemaOptions = merge({}, config, uischema.options);
+ const showDescription = !isDescriptionHidden(
+ visible,
+ description,
+ focused,
+ appliedUiSchemaOptions.showUnfocusedDescription
+ );
+
+ const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
+ const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+
+ const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+
+ const firstFormHelperText = showDescription
+ ? description
+ : !isValid
+ ? errors
+ : null;
+ const secondFormHelperText = showDescription && !isValid ? errors : null;
+ const onChange = useMemo(
+ () => createOnChangeHandler(path, handleChange, saveFormat),
+ [path, handleChange, saveFormat]
+ );
+
+ const value = getData(data, saveFormat);
+ const valueInInputFormat = value ? value.format(format) : '';
+
+ return (
+
+
+ }
+ />
+
+ {firstFormHelperText}
+
+ {secondFormHelperText}
+
+
+ );
+};
+
+export const materialDateControlTester: RankedTester = rankWith(
+ 100,
+ and(
+ uiTypeIs('Control'),
+ schemaTypeIs('string'),
+ schemaMatches((schema) => {
+ if (schema.hasOwnProperty('customRender')) {
+ let cellschema: any = schema;
+ return cellschema['customRender'] === 'MaterialDateControl';
+ }
+ return false;
+ })
+ )
+);
+
+export default withJsonFormsControlProps(MaterialDateControl);
diff --git a/src/index.tsx b/src/index.tsx
index 42b71e4..117ebdb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';
-import ReactDOM from 'react-dom';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
import App from './App';
/**
@@ -12,15 +13,21 @@ const theme = createTheme({
root: {
margin: '0.8em 0',
},
- }
+ },
},
},
});
-ReactDOM.render(
-
-
-
- ,
- document.getElementById('root')
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+ throw new Error('Could not find root element');
+}
+
+createRoot(rootElement).render(
+
+
+
+
+
+
);
diff --git a/src/schema.json b/src/schema.json
index 68c5e37..618499c 100644
--- a/src/schema.json
+++ b/src/schema.json
@@ -1,32 +1,13 @@
{
"type": "object",
"properties": {
- "name": {
- "type": "string",
- "minLength": 1
- },
- "description": {
- "title": "Long Description",
+ "date": {
"type": "string"
},
- "done": {
- "type": "boolean"
- },
- "due_date": {
+ "dateES": {
"type": "string",
- "format": "date"
- },
- "rating": {
- "type": "integer",
- "maximum": 5
- },
- "recurrence": {
- "type": "string",
- "enum": ["Never", "Daily", "Weekly", "Monthly"]
- },
- "recurrence_interval": {
- "type": "integer"
+ "title": "Date Argentina",
+ "customRender": "MaterialDateControl"
}
- },
- "required": ["name", "due_date"]
-}
+ }
+}
\ No newline at end of file
diff --git a/src/uischema.json b/src/uischema.json
index 9e57a63..31235fa 100644
--- a/src/uischema.json
+++ b/src/uischema.json
@@ -2,54 +2,27 @@
"type": "VerticalLayout",
"elements": [
{
- "type": "Control",
- "label": "Completed",
- "scope": "#/properties/done"
- },
- {
- "type": "Control",
- "scope": "#/properties/name"
- },
- {
- "type": "HorizontalLayout",
+ "type": "VerticalLayout",
"elements": [
{
"type": "Control",
- "scope": "#/properties/due_date"
- },
- {
- "type": "Control",
- "scope": "#/properties/rating"
- }
- ]
- },
- {
- "type": "HorizontalLayout",
- "elements": [
- {
- "type": "Control",
- "scope": "#/properties/recurrence"
+ "scope": "#/properties/date",
+ "options": {
+ "format": "date",
+ "dateFormat": "DD/MM/YYYY",
+ "dateSaveFormat": "DD/MM/YYYY"
+ }
},
{
"type": "Control",
- "scope": "#/properties/recurrence_interval",
- "rule": {
- "effect": "HIDE",
- "condition": {
- "type": "LEAF",
- "scope": "#/properties/recurrence",
- "expectedValue": "Never"
- }
+ "scope": "#/properties/dateES",
+ "options": {
+ "format": "date",
+ "dateFormat": "DD/MM/YYYY",
+ "dateSaveFormat": "DD/MM/YYYY"
}
}
]
- },
- {
- "type": "Control",
- "scope": "#/properties/description",
- "options": {
- "multi": true
- }
}
]
-}
+}
\ No newline at end of file