feat: add/remove styles

Related to #796

packages/form-js-editor/src/features/properties-panel/entries/ReadonlyEntry.js

@@ -19,7 +19,7 @@ export default function ReadonlyEntry(props) {
 
   const entries = [];
 
-  if (INPUTS.includes(type)) {
+  if (INPUTS.includes(type) || type === 'dynamiclist') {
     entries.push({
       id: 'readonly',
       component: Readonly,

packages/form-js-editor/src/features/properties-panel/entries/RepeatableAppearanceEntry.js

@@ -1,4 +1,4 @@
-import { zeroPositiveIntegerEntryFactory } from './factories';
+import { simpleBoolEntryFactory, zeroPositiveIntegerEntryFactory } from './factories';
 
 export default function RepeatableDefaultEntry(props) {
   const {
@@ -14,13 +14,25 @@ export default function RepeatableDefaultEntry(props) {
   }
 
   const entries = [
-    zeroPositiveIntegerEntryFactory({
+    simpleBoolEntryFactory({
+      id: 'disableCollapse',
+      path: [ 'disableCollapse' ],
+      label: 'Disable collapse',
+      props
+    })
+  ];
+
+  if (!field.disableCollapse) {
+    const nonCollapseItemsEntry = zeroPositiveIntegerEntryFactory({
       id: 'nonCollapsedItems',
       path: [ 'nonCollapsedItems' ],
       label: 'Number of non-collapsing items',
       props
-    })
-  ];
+    });
+
+    // @ts-ignore
+    entries.push(nonCollapseItemsEntry);
+  }
 
   return entries;
 }

packages/form-js-viewer/assets/form-js-base.css

@@ -935,45 +935,38 @@
 }
 
 .fjs-container .fjs-repeat-row-container {
-  position: relative;
-}
-
-.fjs-container .fjs-repeat-row-container:focus-within .fjs-repeat-row-delete,
-.fjs-container .fjs-repeat-row-container:hover .fjs-repeat-row-delete-container .fjs-repeat-row-delete,
-.fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete-container:hover .fjs-repeat-row-delete {
-	display: flex;
-}
-
-.fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete-container {
   display: flex;
-	position: absolute;
-  height: 100px;
-  width: 30px;
-  top: calc(50% - 45px);
-	right: -35px;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
 }
 
 .fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete {
-  display: none;
-	font-family: inherit;
-	font-size: inherit;
+	display: flex;
 	cursor: pointer;
-	color: var(--color-accent);
-	background: white;
-	border: 2px solid var(--color-accent);
-  height: 24px;
+	background: transparent;
+	border: none;
+	width: 32px;
+	color: var(--color-black);
+	align-items: center;
+	justify-content: center;
+  margin-left: 1rem;
+  margin-right: -1rem;
+}
+
+.fjs-container .fjs-repeat-row-container:hover .fjs-repeat-render-footer-spacer {
   width: 24px;
-  align-items: center;
-  justify-content: center;
+}
+
+.fjs-container .fjs-repeat-row-container .fjs-repeat-row-delete:hover {
+  color: var(--color-warning);
 }
 
 .fjs-container .fjs-repeat-render-footer {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 5px;
+  justify-content: space-between;
+  padding: 16px;
 }
 
 .fjs-container .fjs-repeat-render-footer button {

packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js

@@ -4,7 +4,9 @@ import LocalExpressionContext from '../../render/context/LocalExpressionContext'
 
 import ExpandSvg from '../../render/components/form-fields/icons/Expand.svg';
 import CollapseSvg from '../../render/components/form-fields/icons/Collapse.svg';
-import XMarkSvg from '../../render/components/form-fields/icons/XMark.svg';
+import AddSvg from '../../render/components/form-fields/icons/Add.svg';
+import DeleteSvg from '../../render/components/form-fields/icons/Delete.svg';
+
 import { wrapExpressionContext } from '../../util';
 
 export default class RepeatRenderManager {
@@ -85,11 +87,9 @@ export default class RepeatRenderManager {
             <LocalExpressionContext.Provider value={ localExpressionContext }>
               <RowsRenderer { ...elementProps } />
             </LocalExpressionContext.Provider>
-            <div class="fjs-repeat-row-delete-container">
-              <button class="fjs-repeat-row-delete" onClick={ () => onDeleteItem(index) }>
-                <XMarkSvg />
-              </button>
-            </div>
+            <button class="fjs-repeat-row-delete" onClick={ () => onDeleteItem(index) }>
+              <DeleteSvg />
+            </button>
           </div>;
         })}
       </>
@@ -98,17 +98,16 @@ export default class RepeatRenderManager {
 
   RepeatFooter(props) {
 
-    const { useSharedState, indexes } = props;
+    const { useSharedState, indexes, field: repeaterField } = props;
     const [ sharedRepeatState, setSharedRepeatState ] = useSharedState;
 
     const { data } = this._form._state;
 
-    const repeaterField = props.field;
     const dataPath = this._pathRegistry.getValuePath(repeaterField, { indexes });
     const values = get(data, dataPath) || [];
 
     const nonCollapsedItems = this._getNonCollapsedItems(repeaterField);
-    const togglingEnabled = values.length > nonCollapsedItems;
+    const collapseEnabled = !repeaterField.disableCollapse && (values.length > nonCollapsedItems);
     const isCollapsed = sharedRepeatState.isCollapsed;
 
     const toggle = () => {
@@ -129,17 +128,25 @@ export default class RepeatRenderManager {
         value: updatedValues,
         indexes
       });
+
+      setSharedRepeatState(state => ({ ...state, isCollapsed: false }))
     };
 
-    return <div className="fjs-repeat-render-footer">
-      <button onClick={ onAddItem }>add</button>
-      { togglingEnabled ? <button onClick={ toggle }>
-        {
-          isCollapsed
-            ? <><ExpandSvg /> { `Expand all (${values.length})` }</>
-            : <><CollapseSvg /> { 'Collapse' }</>
-        }
-      </button> : null }
+    return <div className="fjs-repeat-render-footer" style={ !repeaterField.readonly ? { marginRight: 32 } : {} }>
+      {
+        !repeaterField.readonly ? <button onClick={ onAddItem }>
+          <><AddSvg /> { 'Add new' }</>
+        </button> : null
+      }
+      {
+        collapseEnabled ? <button onClick={ toggle }>
+          {
+            isCollapsed
+              ? <><ExpandSvg /> { `Expand all (${values.length})` }</>
+              : <><CollapseSvg /> { 'Collapse' }</>
+          }
+        </button> : null
+      }
     </div>;
   }