Allow booleans to be 'locked' (disabled but text not greyed)

sillsdev · Apr 9, 2024 · fd7762f · fd7762f
1 parent fa2ac3a
commit fd7762f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/lib/ContentPane.tsx b/lib/ContentPane.tsx
@@ -858,6 +858,10 @@ export const ConfigrBoolean: React.FunctionComponent<
       // When immediateEffect is true, overrideValue will
       // misbehave: the control will seem to work but not actually save the setting.
       immediateEffect?: boolean;
+      // When true, the control will be disabled, but the label will not be greyed out, only the checkbox.
+      // This is useful when the checkbox is one of a set and is disabled because it is the only one that
+      // is turned on; in that case, it should not look less prominent than the others.
+      locked?: boolean;
     }
   >
 > = (props) => {
@@ -870,12 +874,12 @@ export const ConfigrBoolean: React.FunctionComponent<
     window.setTimeout(() => helpers.setValue(false), 0);
   }
   const control = props.immediateEffect ? (
-    <Field component={Switch} type="checkbox" name={props.path} label={props.label} />
+    <Field component={Switch} type="checkbox" name={props.path} label={props.label} disabled={props.disabled || props.locked}/>
   ) : (
     <Field
       component={Checkbox}
       type="checkbox"
-      disabled={props.disabled}
+      disabled={props.disabled || props.locked}
       name={props.path}
       label={props.label}
     />
@@ -885,10 +889,14 @@ export const ConfigrBoolean: React.FunctionComponent<
     <ConfigrRowTwoColumns
       // clicking the row is the same as clicking the toggle control
       onClick={() => {
+        // if locked, we can't change the value, but we didn't tell the component it is disabled
+        // so we still get the click.
+        if (props.locked) return;
         helpers.setValue(!field.value);
       }}
       control={control}
       {...props}
+      disabled = {props.disabled && !props.locked}
     />
   );
 };

diff --git a/src/stories/bloom.stories.tsx b/src/stories/bloom.stories.tsx
@@ -163,6 +163,11 @@ const BloomCollectionInner: React.FunctionComponent<{
                         overrideValue={false}
                         overrideDescription="This is locked by Kyrgyzstan xmatter"
                       />
+                      <ConfigrBoolean
+                        label="This script requires taller lines (locked)"
+                        path={`${prefix}.script.tallerLines`}
+                        locked={true}
+                      />
                       <ConfigrBoolean
                         label="This script requires taller lines"
                         path={`${prefix}.script.tallerLines`}
@@ -307,7 +312,18 @@ const BloomCollectionInner: React.FunctionComponent<{
               label="Show Experimental Book Sources"
               path="feature.experimentalBookSources"
               immediateEffect={true}
+            />
+              <ConfigrBoolean
+              label="Show Experimental Book Sources (disabled)"
+              path="feature.experimentalBookSources"
+              immediateEffect={true}
               disabled={true}
+            />
+              <ConfigrBoolean
+              label="Show Experimental Book Sources (locked)"
+              path="feature.experimentalBookSources"
+              immediateEffect={true}
+              locked={true}
             />
             <ConfigrBoolean
               label="Team Collections"