Added simple view for single fields

README.md

@@ -10,7 +10,7 @@ Neos package for adding repeatables fields to neos-ui react
 ```bash
 composer require mireo91/repeatablefields
 ```
-
+ 
 ## Configuration
 
 Create property with type `reapeatable`.

Resources/Private/Backend/RepeatableField/src/View/Repeatable.js

@@ -292,34 +292,59 @@ export default class Repeatable extends PureComponent {
   createElement = (idx) => {
     const { options } = this.props;
     const { allowRemove, currentValue } = this.state;
-		const isPredefined = options.predefinedProperties && options.predefinedProperties[idx]?true:false;
+    const isPredefined = options.predefinedProperties && options.predefinedProperties[idx] ? true : false;
     const DragHandle = SortableHandle(() => (
       <span type="button" className={style.move}>
         <Icon icon="sort" />
       </span>
     ));
 
+    const propertiesCount = Object.keys(options.properties).length;
+    if (propertiesCount === 1) {
+      return (
+        <div className={style.simpleWrapper}>
+          {this.getProperties(idx)}
+          <div class={style.simpleButtons}>
+            {!isPredefined && options.controls.remove && allowRemove ? (
+              <IconButton
+                onClick={() => this.handleRemove(idx)}
+                className={style.delete}
+                icon="trash"
+              />
+            ) : (
+              ""
+            )}
+            {!isPredefined && options.controls.move && currentValue.length > 1 ? (
+              <DragHandle />
+            ) : (
+              ""
+            )}
+          </div>
+        </div>
+      );
+    }
+
     return (
-      <div className={style.wrapper}>
-        <div class={style.buttons}>
-          {!isPredefined && options.controls.move && currentValue.length > 1 ? (
-            <DragHandle />
-          ) : (
-            ""
-          )}
-          {!isPredefined && options.controls.remove && allowRemove ? (
-            <IconButton
-              onClick={() => this.handleRemove(idx)}
-              className={style.delete}
-              icon="trash"
-            />
-          ) : (
-            ""
-          )}
+        <div className={style.wrapper}>
+          <div class={style.buttons}>
+            {!isPredefined && options.controls.move && currentValue.length > 1 ? (
+              <DragHandle />
+            ) : (
+              ""
+            )}
+            {!isPredefined && options.controls.remove && allowRemove ? (
+              <IconButton
+                onClick={() => this.handleRemove(idx)}
+                className={style.delete}
+                icon="trash"
+              />
+            ) : (
+              ""
+            )}
+          </div>
+          {this.getProperties(idx)}
         </div>
-        {this.getProperties(idx)}
-      </div>
-    );
+      );
   };
 
   getProperties = (idx) => {
@@ -374,7 +399,7 @@ export default class Repeatable extends PureComponent {
 					editorOptions.dataSourceAdditionalData["repeatableValue"] = this.getValue();
 			}
     return (
-      <div className={style.property} hidden={propertyDefinition.hidden}>
+      <div className={Object.keys(this.props.options.properties).length > 1 ? style.property : ""} hidden={propertyDefinition.hidden}>
         <Envelope
           identifier={`repeatable-${idx}-${property}`}
           // label={propertyDefinition.label?propertyDefinition.label:''}

Resources/Private/Backend/RepeatableField/src/style.css

@@ -49,3 +49,41 @@
       background-color: #3f3f3f;
   }
 }
+
+.simpleWrapper {
+  display: flex;
+  position: relative;
+}
+
+.simpleWrapper span label span {
+  display: none;
+}
+
+.group {
+  flex: 1;
+  margin-bottom: 10px;
+}
+
+.simpleButtons {
+  margin-top: 6px;
+  margin-left: 2px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+  color: #fff;
+  font-size: 14px;
+  gap: 2px;
+
+  & > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    min-width: 40px;
+    background-color: #323232;
+  }
+
+  &:empty {
+    display: none
+  }
+}