lib: Add validation handlers do DynamicListForm

cockpit-project · Aug 28, 2023 · bf0fb9f · bf0fb9f
1 parent 97cc456
commit bf0fb9f
Showing 1 changed file with 42 additions and 2 deletions.
diff --git a/pkg/lib/DynamicListForm.jsx b/pkg/lib/DynamicListForm.jsx
@@ -19,10 +19,15 @@ export class DynamicListForm extends React.Component {
         this.onItemChange = this.onItemChange.bind(this);
     }
 
-    removeItem(idx, field, value) {
+    removeItem(idx) {
         this.setState(state => {
+            const validationFailedDelta = this.props.validationFailed ? [...this.props.validationFailed] : [];
+            validationFailedDelta.splice(idx, 1);
+            this.props.onValidationChange(validationFailedDelta);
+
             const items = state.list.concat();
             items.splice(idx, 1);
+
             return { list: items };
         }, () => this.props.onChange(this.state.list.concat()));
     }
@@ -42,7 +47,7 @@ export class DynamicListForm extends React.Component {
     }
 
     render () {
-        const { id, label, actionLabel, formclass, emptyStateString, helperText } = this.props;
+        const { id, label, actionLabel, formclass, emptyStateString, helperText, validationFailed, onValidationChange } = this.props;
         const dialogValues = this.state;
         return (
             <FormFieldGroup header={
@@ -65,6 +70,16 @@ export class DynamicListForm extends React.Component {
                                     additem: this.addItem,
                                     options: this.props.options,
                                     itemCount: Object.keys(dialogValues.list).length,
+                                    validationFailed: validationFailed && validationFailed[idx],
+                                    onValidationChange: value => {
+                                        const delta = validationFailed ? [...validationFailed] : [];
+                                        delta[idx] = value;
+
+                                        if (Object.keys(delta[idx]).length == 0)
+                                            delete delta[idx];
+
+                                        onValidationChange(delta);
+                                    },
                                 });
                             })
                             }
@@ -92,3 +107,28 @@ DynamicListForm.propTypes = {
     formclass: PropTypes.string,
     options: PropTypes.object,
 };
+
+export const validationClear = (validationFailed, key, onValidationChange) => {
+    if (!validationFailed)
+        return;
+
+    const delta = { ...validationFailed };
+    delete delta[key];
+    onValidationChange(delta);
+};
+
+export const dynamicValidate = (list, validationFailed, key, onValidationChange, validate) => {
+    const delta = validate(list, key, validationFailed);
+
+    onValidationChange(delta);
+};
+
+export const dynamicListOnValidationChange = (value, key, validationFailed, onValueChanged) => {
+    const validationFailedDelta = { ...validationFailed };
+    validationFailedDelta[key] = value;
+
+    if (validationFailedDelta[key].length == 0 || validationFailedDelta[key].every(a => a === undefined))
+        delete validationFailedDelta[key];
+
+    onValueChanged('validationFailed', validationFailedDelta);
+};