Hide configuration settings marked hidden. (#144)

ThePalaceProject · Jan 27, 2025 · 831e14a · 831e14a
1 parent c88bda3
commit 831e14a
Show file tree

Hide file tree

Showing 4 changed files with 484 additions and 277 deletions.
diff --git a/src/components/EditableInput.tsx b/src/components/EditableInput.tsx
@@ -24,6 +24,7 @@ export interface EditableInputProps extends React.HTMLProps<EditableInput> {
   className?: string;
   minLength?: number;
   maxLength?: number;
+  hidden?: boolean;
 }
 
 export interface EditableInputState {
@@ -65,7 +66,11 @@ export default class EditableInput extends React.Component<
       error,
       label,
       extraContent,
+      hidden,
     } = this.props;
+    if (hidden) {
+      return this.renderHiddenElement();
+    }
     const checkboxOrRadioOrSelect = !!(
       type === "checkbox" ||
       type === "radio" ||
@@ -90,15 +95,15 @@ export default class EditableInput extends React.Component<
           <label className="control-label">
             {type !== "checkbox" && type !== "radio" && label}
             {required && <span className="required-field">Required</span>}
-            {this.renderElement(descriptionId)}
+            {this.renderElement(this.props, descriptionId)}
             {type === "checkbox" && label}
             {type === "radio" && <span>{label}</span>}
           </label>
         )}
         {(extraContent || !label) && (
           <div className={extraContent ? "with-add-on" : ""}>
             {extraContent}
-            {!label && this.renderElement(descriptionId)}
+            {!label && this.renderElement(this.props, descriptionId)}
           </div>
         )}
         {descriptionStr &&
@@ -107,7 +112,7 @@ export default class EditableInput extends React.Component<
     );
   }
 
-  renderElement(descriptionId?: string) {
+  renderElement(props, descriptionId?: string) {
     const {
       type,
       elementType,
@@ -124,7 +129,7 @@ export default class EditableInput extends React.Component<
       style,
       minLength,
       maxLength,
-    } = this.props;
+    } = props;
 
     return React.createElement(
       elementType || "input",
@@ -156,6 +161,10 @@ export default class EditableInput extends React.Component<
     );
   }
 
+  renderHiddenElement() {
+    return this.renderElement({ ...this.props, readOnly: true });
+  }
+
   renderDescription(id: string, description: string) {
     return (
       <p

diff --git a/src/components/ProtocolFormField.tsx b/src/components/ProtocolFormField.tsx
@@ -54,6 +54,11 @@ export default class ProtocolFormField extends React.Component<
 
   render(): JSX.Element {
     const setting = this.props.setting as SettingData | CustomListsSetting;
+    if (setting.hidden) {
+      // TODO: Hijacking for any hidden fields for now, but need to handle
+      //  some types (e.g., "menu", "list")  differently.
+      return this.renderHiddenElement(setting);
+    }
     if (setting.type === "select") {
       return this.renderSelectSetting(setting);
     } else if (setting.type === "list" || setting.type === "menu") {
@@ -65,6 +70,22 @@ export default class ProtocolFormField extends React.Component<
     }
   }
 
+  renderHiddenElement(setting: SettingData) {
+    const { value, disabled = false, error = null } = this.props;
+    const props = {
+      key: setting.key,
+      hidden: true,
+      elementType: "input",
+      type: "hidden",
+      name: setting.key,
+      value: defaultValueIfMissing(value, setting.default),
+      ref: this.elementRef,
+      disabled,
+      error,
+    };
+    return React.createElement(EditableInput, props, null);
+  }
+
   renderSetting(setting: SettingData): JSX.Element {
     return (
       <div className={setting.randomizable ? "randomizable" : ""}>