Issue #3265755 by ctrlADel: Upgrade to mui5 and react-jsonschema-form 4 (a3c4ce9e) · Commits · project / rjsf

js/editor.es6.js

+60 −18

Original line number	Diff line number	Diff line
		import React from 'react';
		import ReactDOM from 'react-dom';
		import {withTheme} from '@rjsf/core';
		import { Theme as MaterialUITheme } from '@rjsf/material-ui';
		import {ThemeProvider} from "@material-ui/styles";
		import {createTheme} from "@material-ui/core";
		import {Theme5 as MaterialUITheme} from '@rjsf/material-ui';
		import {createTheme, ThemeProvider} from "@mui/material";

		let widgetsLoaded = false;
		let widgets = {};
		@@ -17,8 +16,8 @@ let formats = {
		const theme = createTheme();

		/**
		* Take the widget definitions and go through the process of adding the module federation
		* entry point and then loading the RJSF widget settings.
		* Take the widget definitions and go through the process of adding the module
		* federation entry point and then loading the RJSF widget settings.
		*/
		async function loadWidgets() {
		let promises = [];
		@@ -80,14 +79,41 @@ async function loadRemoteModules(scope, module) {

		const Form = withTheme(MaterialUITheme);

		/**
		* Search a page for the given selector and if found remove it.
		*
		* @param selector
		* The css selection rule to remove.
		*/
		function removeCssStyle(selector) {
		for (let i = 0; i < document.styleSheets.length; i++) {
		let stylesheet = document.styleSheets[i];

		try {
		stylesheet.cssRules.length;
		}
		catch (e) {
		continue;
		}

		for (let r = 0; r < stylesheet.cssRules.length; r++) {
		let rule = stylesheet.cssRules[r].selectorText;
		if (rule === selector) {
		document.styleSheets[i].deleteRule(r);
		}
		}
		}
		}

		(function ($, Drupal) {
		'use strict';

		/**
		* Run the initEditors function on script load. This is required for proper interaction with
		* layout builder dialogs. Because the editor is attached to the block form on the first load
		* of a RJSF element the events for attach and dialog have already been fired before the js
		* finished loading. This necessitates running an editor init when the script is loaded.
		* Run the initEditors function on script load. This is required for proper
		* interaction with layout builder dialogs. Because the editor is attached to
		* the block form on the first load of a RJSF element the events for attach
		* and dialog have already been fired before the js finished loading. This
		* necessitates running an editor init when the script is loaded.
		*/
		initEditors();

		@@ -116,6 +142,23 @@ const Form = withTheme(MaterialUITheme);
		else {
		renderEditor(target, drupalSettings.rjsf[target]);
		}

		// The resets and styling provided by Drupal/Gin/Gin LB are aggressive
		// and hard to work around. Until MUI properly supports shadow doms
		// we are stuck either providing our own more specific rules or
		// removing conflicting ones. https://github.com/mui/material-ui/issues/17473
		const rules = [
		'#drupal-off-canvas.ui-dialog-content div',
		'.glb-form-wrapper label, .glb-form-composite label',
		'.ui-dialog fieldset:not(.fieldgroup)',
		'fieldset:not(.fieldgroup)',
		'.ui-dialog fieldset:not(.fieldgroup) > legend',
		'fieldset:not(.fieldgroup)>legend',
		];

		rules.forEach((rule) => {
		removeCssStyle(rule);
		});
		});
		}

		@@ -167,9 +210,8 @@ const Form = withTheme(MaterialUITheme);

		const editorTarget = document.getElementById(target).querySelector(' [data-rjsf-selector="rjsf-editor-target"]');

		// @TODO Render this in a shadow root? Could fix any issues with nested form elements.
		// @TODO Render this in a shadow root one supported by MUI https://github.com/mui/material-ui/issues/17473
		// @TODO figure out how to support omitExtraData and liveOmit with entity reference fields. Global definitions perhaps?

		// omitExtraData and liveOmit can not be enabled without defining the entity_reference schema for every entity reference field in every form which is annoying.
		ReactDOM.render((
		<ThemeProvider theme={theme}>
		@@ -199,11 +241,11 @@ const Form = withTheme(MaterialUITheme);
		*/
		function checkRjsfFormValidity(form) {
		/**
		* This seems to be the cleanest way to force RJSF to validate forms when it doesn't
		* correctly capture the submit event like on layout builder ajax forms.
		* This seems to be the cleanest way to force RJSF to validate forms when
		* it doesn't correctly capture the submit event like on layout builder
		* ajax forms.
		*/
		return form.reportValidity();
		}

		})(jQuery, Drupal);

modules/rjsf_entity_autocomplete/js/entityAutocomplete.widget.rjsf.js

+3 −4

Original line number	Diff line number	Diff line
		import React, {useEffect} from 'react';
		import {Autocomplete} from "@material-ui/lab";
		import {TextField} from "@material-ui/core";
		import {Autocomplete, Box, TextField} from "@mui/material";

		// @TODO add a spinner to the field?
		// @TODO how to support a views handler?
		@@ -167,7 +166,7 @@ function EntityAutocomplete ({
		},[displayValue, inputValue]);

		return (
		<div>
		<Box>
		<Autocomplete
		multiple={isMultiple()}
		id={id}
		@@ -207,7 +206,7 @@ function EntityAutocomplete ({
		/>
		}
		/>
		</div>
		</Box>
		);
		}

modules/rjsf_entity_autocomplete/package.json

+12 −12

Original line number	Diff line number	Diff line
		@@ -3,29 +3,29 @@
		"version": "1.0.0",
		"description": "",
		"main": "index.js",
		"dependencies": {
		"generate-json-webpack-plugin": "^2.0.0",
		"glob": "^7.1.6",
		"path": "^0.12.7"
		},
		"dependencies": { },
		"devDependencies": {
		"@drupal-rjsf/federation": "^1.0.0-alpha.1",
		"@babel/core": "^7.12.10",
		"@babel/plugin-proposal-class-properties": "^7.12.1",
		"@babel/plugin-transform-runtime": "^7.12.10",
		"@babel/preset-env": "^7.12.11",
		"@babel/preset-react": "^7.12.10",
		"@drupal-rjsf/federation": "^1.0.0-alpha.1",
		"babel-loader": "^8.2.2",
		"generate-json-webpack-plugin": "^2.0.0",
		"glob": "^7.1.6",
		"path": "^0.12.7",
		"webpack": "^5.36.1",
		"webpack-cli": "^4.6.0"
		},
		"peerDependencies": {
		"@material-ui/core": "4.12.3",
		"@material-ui/icons": "4.11.2",
		"@material-ui/lab": "4.0.0-alpha.60",
		"@material-ui/styles": "4.11.4",
		"@rjsf/core": "3.2.1",
		"@rjsf/material-ui": "3.2.1",
		"@emotion/react": "^11.7.0",
		"@emotion/styled": "^11.6.0",
		"@mui/icons-material": "^5.4.4",
		"@mui/material": "^5.4.4",
		"@mui/styles": "^5.4.4",
		"@rjsf/core": "4.0.1",
		"@rjsf/material-ui": "4.0.1",
		"react": "17.0.2",
		"react-dom": "17.0.2"
		},

modules/rjsf_entity_autocomplete/widget.webpack.config.js

+7 −6

Original line number	Diff line number	Diff line
		@@ -38,10 +38,11 @@ module.exports = {
		"react-dom": { singleton: true, eager: true },
		"@rjsf/core": {singleton: true, eager: true },
		"@rjsf/material-ui": {singleton: true, eager: true },
		"@material-ui/core": { singleton: true, eager: true },
		"@material-ui/icons": { singleton: true, eager: true },
		"@material-ui/styles": {singleton: true, eager: true },
		"@material-ui/lab": { singleton: true, eager: true }
		"@mui/styles": {singleton: true, eager: true },
		"@mui/material": {singleton: true, eager: true },
		"@mui/icons-material": {singleton: true, eager: true },
		"@emotion/react": {singleton: true, eager: true },
		"@emotion/styled": {singleton: true, eager: true }
		},
		}),
		]

modules/rjsf_entity_browser/js/components/GridPreview.js

+3 −2

Original line number	Diff line number	Diff line
		import {Box, Grid, IconButton, makeStyles} from "@material-ui/core";
		import {DeleteOutline} from "@material-ui/icons";
		import {Box, Grid, IconButton} from "@mui/material";
		import {DeleteOutline} from "@mui/icons-material";
		import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
		import React from "react";
		import {makeStyles} from "@mui/styles";

		function PreviewItem({item, index, removeItem}) {
		const useStyles = makeStyles((theme) => ({