Merge pull request #22 from JohnThomson/lockedBooleans

Allow booleans to be 'locked' (disabled but text not greyed) (#22)
sillsdev · Apr 9, 2024 · c4d3afd · c4d3afd
2 parents fa2ac3a + a1b7036
commit c4d3afd
Show file tree

Hide file tree

Showing 2 changed files with 31 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,19 @@ 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}
+        // If it is locked, we want it to BE disabled but not LOOK disabld (the checkbox is
+        // the control above, and will LOOK disabled for either disabled or locked or both).
+        // Note that the label will still BE disabled since we ignore clicks (above) if locked.
+        // Here, we want disabled to be false if locked, even if disabled is also true,
+        // so we get the undimmed label.
+      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"