diff --git a/lib/ContentPane.tsx b/lib/ContentPane.tsx index 78d43ac..2a2cbf4 100644 --- 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 ? ( - + ) : ( @@ -885,10 +889,19 @@ export const ConfigrBoolean: React.FunctionComponent< { + // 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 index 551f54c..98564f2 100644 --- 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" /> + + +