Members
(constant) checkInvalidFieldNameCharacter
SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- Source:
(constant) FIELD_NAME_REGEX
SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- Source:
(constant) FormNoop
It is an implementation of Form no-op, it just renders the
layout and propagates any event to the instance `dispatch`.
- Source:
(constant) localDataStorage
SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- Source:
(constant) PUBLIC_EVENTS
SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- Source:
(constant) ReactFieldAdapter
This creates a compatibility layer for the Field component on React, allowing
it to be called by Metal+Soy file.
This component creates a mask for the Field component, some DDM fields access
the `usePage` and we need to bring the `usePage` here since this component
will not have a React context above it.
(constant) setValue
SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- Source:
(constant) useEvaluate
This hook is a partial function that removes the need to pass the same
properties every time they are called, this is only for thunks that use
the `evaluate` function.
- Source:
(constant) useStorage
Simple implementation to create a local storage that can be shared
independently of the React tree, Form Renderer is not an application
and can be reused more than once on the same page, so we need to share
requests and fields, they are loaded on demand, so as not to make
unnecessary requests. Use the `useStorage` hook as a way to cache data.
- Source:
Methods
getConnectedReactComponentAdapter(ReactComponent)
The Adapter creates a communication bridge between the Metal and React components.
The Adapter when it is rendered for the first time uses `ReactDOM.render` to assemble
the component and subsequent renderings are done by React. We created a tunnel with
an Observer that updates the internal state of the component in React that makes a
wrapper over the main component to force React to render at the best time, we also
ignore the rendering of Metal.
Parameters:
| Name | Type | Description |
|---|---|---|
ReactComponent |
React.createElement |
- Source:
Examples
// import getConnectedReactComponentAdapter from '/path/ReactComponentAdapter.es';
//
// const ReactComponent = ({children, className}) => <div className={className}>{children}</div>;
// const ReactComponentAdapter = getConnectedReactComponentAdapter(
// ReactComponent
// );
//
// In the rendering of Metal
// render() {
// return (
// <ReactComponentAdapter className="h1-title">
// <h1>{'Title'}</h1>
// </ReactComponentAdapter>
// );
// }
To call the React component in the context of Metal + soy, where varient is not an option,
you can use Metal's `Soy.register` to create a fake component so that you can call the React
component in Soy. The use of children from Soy components for React does not work.// import Soy from 'metal-soy';
// import getConnectedReactComponentAdapter from '/path/ReactComponentAdapter.es';
// import templates from './FakeAdapter.soy';
//
// const ReactComponent = ({className}) => <div className={className} />;
// const ReactComponentAdapter = getConnectedReactComponentAdapter(
// ReactComponent
// );
// Soy.register(ReactComponentAdapter, templates);
//
// In soy
// {call FakeAdapter.render}
// {param className: 'test' /}
// {/call}identity()
SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
- Source:
mountStruct()
This only assembles the expected structure of the Forms field
event, creates a makeup to maintain compatibility with the
mechanism, the fields in React do not need to assemble this
structure, they must only provide a native event or value in
the case of an onChange
- Source:
ObserverSubscribe()
Adds a sub observer to maintain the updated state of the
component.
- Source: