render()

in desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx [119:420]
296 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      enableAndroid,
      androidHome,
      enableIOS,
      enablePhysicalIOS,
      enablePrefetching,
      idbPath,
      reactNative,
      darkMode,
      suppressPluginErrors,
      enablePluginMarketplace,
      enablePluginMarketplaceAutoUpdate,
      marketplaceURL,
    } = this.state.updatedSettings;

    const settingsPristine =
      isEqual(this.props.settings, this.state.updatedSettings) &&
      isEqual(this.props.launcherSettings, this.state.updatedLauncherSettings);

    const forcedRestart =
      (!isEmpty(this.state.forcedRestartSettings) &&
        !isMatch(this.props.settings, this.state.forcedRestartSettings)) ||
      (!isEmpty(this.state.forcedRestartLauncherSettings) &&
        !isMatch(
          this.props.launcherSettings,
          this.state.forcedRestartLauncherSettings,
        ));

    const contents = (
      <Layout.Container gap>
        <ToggledSection
          label="Android Developer"
          toggled={enableAndroid}
          onChange={(v) => {
            this.setState({
              updatedSettings: {
                ...this.state.updatedSettings,
                enableAndroid: v,
              },
            });
          }}>
          <FilePathConfigField
            label="Android SDK location"
            resetValue={
              getRenderHostInstance().serverConfig.settings.androidHome
            }
            defaultValue={androidHome}
            onChange={(v) => {
              this.setState({
                updatedSettings: {
                  ...this.state.updatedSettings,
                  androidHome: v,
                },
              });
            }}
          />
        </ToggledSection>
        <ToggledSection
          label="iOS Developer"
          toggled={enableIOS && this.props.platform === 'darwin'}
          onChange={(v) => {
            this.setState({
              updatedSettings: {...this.state.updatedSettings, enableIOS: v},
            });
          }}>
          {' '}
          {this.props.platform === 'darwin' && (
            <ConfigText
              content={'Use "xcode-select" to switch between Xcode versions'}
            />
          )}
          {this.props.platform !== 'darwin' && (
            <ConfigText
              content={
                'iOS development has limited functionality on non-MacOS devices'
              }
            />
          )}
          <ToggledSection
            label="Enable physical iOS devices"
            toggled={enablePhysicalIOS}
            frozen={false}
            onChange={(v) => {
              this.setState({
                updatedSettings: {
                  ...this.state.updatedSettings,
                  enablePhysicalIOS: v,
                },
              });
            }}>
            <FilePathConfigField
              label="IDB binary location"
              defaultValue={idbPath}
              isRegularFile
              onChange={(v) => {
                this.setState({
                  updatedSettings: {...this.state.updatedSettings, idbPath: v},
                });
              }}
            />
          </ToggledSection>
        </ToggledSection>
        <LauncherSettingsPanel
          isPrefetchingEnabled={enablePrefetching}
          onEnablePrefetchingChange={(v) => {
            this.setState({
              updatedSettings: {
                ...this.state.updatedSettings,
                enablePrefetching: v,
              },
            });
          }}
          isLocalPinIgnored={this.state.updatedLauncherSettings.ignoreLocalPin}
          onIgnoreLocalPinChange={(v) => {
            this.setState({
              updatedLauncherSettings: {
                ...this.state.updatedLauncherSettings,
                ignoreLocalPin: v,
              },
            });
          }}
          releaseChannel={this.state.updatedLauncherSettings.releaseChannel}
          onReleaseChannelChange={(v) => {
            this.setState({
              updatedLauncherSettings: {
                ...this.state.updatedLauncherSettings,
                releaseChannel: v,
              },
              forcedRestartLauncherSettings: {
                ...this.state.forcedRestartLauncherSettings,
                releaseChannel: v,
              },
            });
          }}
        />
        <ToggledSection
          label="Suppress error notifications send from client plugins"
          toggled={suppressPluginErrors}
          onChange={(enabled) => {
            this.setState((prevState) => ({
              updatedSettings: {
                ...prevState.updatedSettings,
                suppressPluginErrors: enabled,
              },
            }));
          }}
        />
        <Layout.Container style={{paddingLeft: 15, paddingBottom: 10}}>
          Theme Selection
          <Radio.Group
            value={darkMode}
            onChange={(event) => {
              this.setState((prevState) => ({
                updatedSettings: {
                  ...prevState.updatedSettings,
                  darkMode: event.target.value,
                },
              }));
              loadTheme(event.target.value);
            }}>
            <Radio.Button value="dark">Dark</Radio.Button>
            <Radio.Button value="light">Light</Radio.Button>
            <Radio.Button value="system">Use System Setting</Radio.Button>
          </Radio.Group>
        </Layout.Container>
        <ToggledSection
          label="React Native keyboard shortcuts"
          toggled={reactNative.shortcuts.enabled}
          onChange={(enabled) => {
            this.setState((prevState) => ({
              updatedSettings: {
                ...prevState.updatedSettings,
                reactNative: {
                  ...prevState.updatedSettings.reactNative,
                  shortcuts: {
                    ...prevState.updatedSettings.reactNative.shortcuts,
                    enabled,
                  },
                },
              },
            }));
          }}>
          <KeyboardShortcutInput
            label="Reload application"
            value={reactNative.shortcuts.reload}
            onChange={(reload) => {
              this.setState((prevState) => ({
                updatedSettings: {
                  ...prevState.updatedSettings,
                  reactNative: {
                    ...prevState.updatedSettings.reactNative,
                    shortcuts: {
                      ...prevState.updatedSettings.reactNative.shortcuts,
                      reload,
                    },
                  },
                },
              }));
            }}
          />
          <KeyboardShortcutInput
            label="Open developer menu"
            value={reactNative.shortcuts.openDevMenu}
            onChange={(openDevMenu) => {
              this.setState((prevState) => ({
                updatedSettings: {
                  ...prevState.updatedSettings,
                  reactNative: {
                    ...prevState.updatedSettings.reactNative,
                    shortcuts: {
                      ...prevState.updatedSettings.reactNative.shortcuts,
                      openDevMenu,
                    },
                  },
                },
              }));
            }}
          />
        </ToggledSection>
        <NUX
          // TODO: provide link to Flipper doc with more details
          title="Plugin marketplace serve as a way to distribute private/internal plugins"
          placement="right">
          <ToggledSection
            label="Enable plugin marketplace"
            toggled={enablePluginMarketplace}
            frozen={false}
            onChange={(v) => {
              this.setState({
                updatedSettings: {
                  ...this.state.updatedSettings,
                  enablePluginMarketplace: v,
                },
              });
            }}>
            <URLConfigField
              label="Martkeplace URL"
              defaultValue={
                marketplaceURL || 'http://plugin-marketplace.local/get-plugins'
              }
              onChange={(v) => {
                this.setState({
                  updatedSettings: {
                    ...this.state.updatedSettings,
                    marketplaceURL: v,
                  },
                });
              }}
            />
            <ToggledSection
              label="Enable auto update"
              toggled={enablePluginMarketplaceAutoUpdate}
              frozen={false}
              onChange={(v) => {
                this.setState({
                  updatedSettings: {
                    ...this.state.updatedSettings,
                    enablePluginMarketplaceAutoUpdate: v,
                  },
                });
              }}
            />
          </ToggledSection>
        </NUX>
        <Layout.Right center>
          <span>Reset all new user tooltips</span>
          <ResetTooltips />
        </Layout.Right>
        <Layout.Right center>
          <span>Reset all local storage based state</span>
          <ResetLocalState />
        </Layout.Right>
      </Layout.Container>
    );

    const footer = (
      <>
        <Button onClick={this.props.onHide}>Cancel</Button>
        <Button
          disabled={settingsPristine || forcedRestart}
          onClick={this.applyChangesWithoutRestart}>
          Apply
        </Button>
        <Button
          disabled={settingsPristine}
          type="primary"
          onClick={this.applyChanges}>
          Apply and Restart
        </Button>
      </>
    );

    return this.props.noModal ? (
      <>
        {contents}
        {footer}
      </>
    ) : (
      this.renderSandyContainer(contents, footer)
    );
  }