Merge pull request #574 from SoftwareBrothers/beta

Beta

package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-bro",
-  "version": "3.2.0",
+  "version": "3.2.1-beta.1",
   "description": "Admin panel for apps written in node.js",
   "main": "index.js",
   "types": "index.d.ts",

src/backend/utils/layout-element-parser.ts

@@ -140,7 +140,7 @@ export default layoutElementParser
 
 
 /**
- * {@link LayoutElement} is used to change the default layout of edit and show {@link Action actions}.
+ * {@link LayoutElement} is used to change the default layout of edit, show and new {@link Action actions}.
  * You define the layout as an {@link Array<LayoutElement>} and AdminBro renders it with React components.
  *
  * You don't have to know React to create usable Layout for you actions but be sure

src/frontend/components/actions/new.tsx

@@ -10,6 +10,7 @@ import RecordJSON from '../../../backend/decorators/record-json.interface'
 import useRecord from '../../hooks/use-record/use-record'
 import { appendForceRefresh } from './utils/append-force-refresh'
 import { useTranslation } from '../../hooks/use-translation'
+import LayoutElementRenderer from './utils/layout-element-renderer'
 
 const New: FC<ActionProps> = (props) => {
   const { record: initialRecord, resource, action } = props
@@ -46,7 +47,17 @@ const New: FC<ActionProps> = (props) => {
     >
       <DrawerContent>
         {action?.showInDrawer ? <ActionHeader {...props} /> : null}
-        {resource.editProperties.map(property => (
+        {action.layout ? action.layout.map((layoutElement, i) => (
+          <LayoutElementRenderer
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            layoutElement={layoutElement}
+            {...props}
+            where="edit"
+            onChange={handleChange}
+            record={record as RecordJSON}
+          />
+        )) : resource.editProperties.map(property => (
           <PropertyType
             key={property.name}
             where="edit"

src/frontend/components/property-type/index.tsx

@@ -86,7 +86,7 @@ const types: Record<PropertyType, any> = {
  *
  * ```
  * import React from 'react'
- * import { InputGroup, Label } from 'admin-bro'
+ * import { InputGroup, Label } from '@admin-bro/design-system'
  *
  * const MyReactComponent = props => {
  *   const { record, property } = props