fix: Allow default assumptions

js/repl/Repl.tsx

@@ -6,7 +6,7 @@ import React, { type ChangeEvent } from "react";
 import { prettySize, compareVersions } from "./Utils";
 import ErrorBoundary from "./ErrorBoundary";
 import CodeMirrorPanel from "./CodeMirrorPanel";
-import ReplOptions from "./ReplOptions";
+import ReplOptions, { IndeterminateCheckboxStatus } from "./ReplOptions";
 import StorageService from "./StorageService";
 import UriUtils from "./UriUtils";
 import loadBundle from "./loadBundle";
@@ -581,10 +581,15 @@ class Repl extends React.Component<Props, State> {
  }, this._pluginsUpdatedSetStateCallback);
  };
 
- _onAssumptionsChange = (value: string, isChecked: boolean) => {
+ _onAssumptionsChange = (
+ value: string,
+ status: IndeterminateCheckboxStatus
+ ) => {
  const { assumptions } = this.state.envConfig;
- if (isChecked === true) assumptions[value] = isChecked;
- else delete assumptions[value];
+ if (status === IndeterminateCheckboxStatus.Indeterminate)
+ delete assumptions[value];
+ else assumptions[value] = status === 1;
+
  this.setState((state) => {
  return { envConfig: { ...state.envConfig, assumptions } };
  }, this._pluginsUpdatedSetStateCallback);

js/repl/ReplOptions.tsx

@@ -84,7 +84,10 @@ type ToggleVersion = (event: ChangeEvent) => void;
 type ShowOfficialExternalPluginsChanged = (value: string) => void;
 type PluginSearch = (value: string) => void;
 type PluginChange = (plugin: any) => void;
-type AssumptionsChange = (value: string, isChecked: boolean) => void;
+type AssumptionsChange = (
+ value: string,
+ status: IndeterminateCheckboxStatus
+) => void;
 
 type Props = {
  babelVersion: string | undefined | null;
@@ -182,6 +185,57 @@ const PresetOption = ({
  );
 };
 
+export const enum IndeterminateCheckboxStatus {
+ Indeterminate = -1,
+ Unchecked = 0,
+ Checked = 1,
+}
+
+class IndeterminateCheckbox extends React.Component<{
+ status: IndeterminateCheckboxStatus;
+ className: string;
+ onChange: (status: IndeterminateCheckboxStatus) => void;
+}> {
+ state: { status: IndeterminateCheckboxStatus } = { status: -1 };
+ ele: HTMLInputElement = null;
+ status: IndeterminateCheckboxStatus = -1;
+ componentDidMount() {
+ this.ele.indeterminate = true;
+ this.state.status = this.props.status;
+ }
+
+ componentDidUpdate(prev) {
+ const status = this.state.status;
+
+ if (status === IndeterminateCheckboxStatus.Indeterminate) {
+ this.ele.indeterminate = true;
+ } else {
+ this.ele.indeterminate = false;
+ this.ele.checked = status === IndeterminateCheckboxStatus.Checked;
+ }
+
+ if (prev.status !== status) {
+ this.props.onChange(status);
+ }
+ }
+
+ render() {
+ return (
+ <input
+ type="checkbox"
+ className={this.props.className}
+ ref={(ele) => (this.ele = ele)}
+ onClick={(event) => {
+ event.nativeEvent.stopImmediatePropagation();
+ this.setState({
+ status: ++this.state.status > 1 ? -1 : this.state.status,
+ });
+ }}
+ />
+ );
+ }
+}
+
 export default function ReplOptions(props: Props) {
  return (
  <div className={`${styles.wrapper} ${props.className}`}>
@@ -726,8 +780,19 @@ class ExpandedContainer extends Component<Props, State> {
  {ASSUMPTIONS_OPTIONS.map((option) => {
  const isChecked =
  assumptions[option] === "undefined"
- ? false
+ ? undefined
  : assumptions[option];
+
+ const button = (
+ <IndeterminateCheckbox
+ status={isChecked == null ? -1 : isChecked ? 1 : 0}
+ className={styles.envPresetCheckbox}
+ onChange={(status) => {
+ this._onAssumptionsCheck(option, status);
+ }}
+ />
+ );
+
  return (
  <label className={styles.envPresetRow}>
  <LinkToAssumptionDocs
@@ -736,14 +801,7 @@ class ExpandedContainer extends Component<Props, State> {
  >
  {option}
  </LinkToAssumptionDocs>
- <input
- checked={isChecked}
- className={styles.envPresetCheckbox}
- onChange={(event) =>
- this._onAssumptionsCheck(option, event.target.checked)
- }
- type="checkbox"
- />
+ {button}
  </label>
  );
  })}
@@ -826,8 +884,8 @@ class ExpandedContainer extends Component<Props, State> {
  this.props.showOfficialExternalPluginsChanged(value);
  };
 
- _onAssumptionsCheck = (value, isChecked) => {
- this.props.onAssumptionsChange(value, isChecked);
+ _onAssumptionsCheck = (value, status) => {
+ this.props.onAssumptionsChange(value, status);
  };
 
  _pluginChanged = (e, plugin) => {