diff --git a/src/chrome/SettingsSheet.tsx b/src/chrome/SettingsSheet.tsx
index ec44fa0cf..7f6981a05 100644
--- a/src/chrome/SettingsSheet.tsx
+++ b/src/chrome/SettingsSheet.tsx
@@ -5,26 +5,16 @@
* @format
*/
-import {
- FlexColumn,
- Button,
- styled,
- Text,
- FlexRow,
- Spacer,
- Input,
- colors,
- Glyph,
-} from 'flipper';
-import React, {Component, useState} from 'react';
+import {FlexColumn, Button, styled, Text, FlexRow, Spacer} from 'flipper';
+import React, {Component} from 'react';
import {updateSettings, Action} from '../reducers/settings';
import {connect} from 'react-redux';
import {State as Store} from '../reducers';
import {Settings} from '../reducers/settings';
import {flush} from '../utils/persistor';
-import {promises as fs} from 'fs';
+import ToggledSection from './settings/ToggledSection';
+import {FilePathConfigField} from './settings/configFields';
import {remote} from 'electron';
-import path from 'path';
import isEqual from 'lodash.isequal';
const Container = styled(FlexColumn)({
@@ -39,26 +29,6 @@ const Title = styled(Text)({
fontSize: '40px',
});
-const InfoText = styled(Text)({
- lineHeight: 1.35,
- paddingTop: 5,
-});
-
-const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
- marginRight: 0,
- flexGrow: 1,
- fontFamily: 'monospace',
- color: isValid ? undefined : colors.red,
- marginLeft: 10,
- marginTop: 'auto',
- marginBottom: 'auto',
-}));
-
-const CenteredGlyph = styled(Glyph)({
- margin: 'auto',
- marginLeft: 10,
-});
-
type OwnProps = {
onHide: () => void;
};
@@ -75,56 +45,9 @@ type State = {
updatedSettings: Settings;
};
-function FilePathConfigField(props: {
- label: string;
- defaultValue: string;
- onChange: (path: string) => void;
-}) {
- const [value, setValue] = useState(props.defaultValue);
- const [isValid, setIsValid] = useState(true);
- fs.stat(value)
- .then(stat => setIsValid(stat.isDirectory()))
- .catch(_ => setIsValid(false));
- return (
-
- {props.label}
- {
- setValue(e.target.value);
- props.onChange(e.target.value);
- fs.stat(e.target.value)
- .then(stat => setIsValid(stat.isDirectory()))
- .catch(_ => setIsValid(false));
- }}
- />
-
- remote.dialog.showOpenDialog(
- {
- properties: ['openDirectory', 'showHiddenFiles'],
- defaultPath: path.resolve('/'),
- },
- (paths: Array | undefined) => {
- paths && setValue(paths[0]);
- paths && props.onChange(paths[0]);
- },
- )
- }>
-
-
- {isValid ? null : (
-
- )}
-
- );
-}
-
type Props = OwnProps & StateFromProps & DispatchFromProps;
-class SignInSheet extends Component {
- state = {
+class SettingsSheet extends Component {
+ state: State = {
updatedSettings: {...this.props.settings},
};
@@ -141,18 +64,31 @@ class SignInSheet extends Component {
return (
Settings
- {
this.setState({
updatedSettings: {
...this.state.updatedSettings,
- androidHome: v,
+ enableAndroid: v,
},
});
- }}
- />
+ }}>
+ {
+ this.setState({
+ updatedSettings: {
+ ...this.state.updatedSettings,
+ androidHome: v,
+ },
+ });
+ }}
+ />
+
+
@@ -176,4 +112,4 @@ class SignInSheet extends Component {
export default connect(
({settingsState}) => ({settings: settingsState}),
{updateSettings},
-)(SignInSheet);
+)(SettingsSheet);
diff --git a/src/chrome/settings/ToggledSection.tsx b/src/chrome/settings/ToggledSection.tsx
new file mode 100644
index 000000000..399326ffe
--- /dev/null
+++ b/src/chrome/settings/ToggledSection.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
+import React from 'react';
+
+const IndentedSection = styled(FlexColumn)({
+ paddingLeft: 50,
+});
+const GreyedOutOverlay = styled('div')({
+ backgroundColor: '#EFEEEF',
+ borderRadius: 4,
+ opacity: 0.6,
+ height: '100%',
+ position: 'absolute',
+ left: 50,
+ right: 0,
+});
+
+export default function ToggledSection(props: {
+ label: string;
+ enabled: boolean;
+ onChange: (value: boolean) => void;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ props.onChange(!props.enabled)}
+ toggled={props.enabled}
+ />
+
+
+ {props.children}
+ {props.enabled ? null : }
+
+
+ );
+}
diff --git a/src/chrome/settings/configFields.tsx b/src/chrome/settings/configFields.tsx
new file mode 100644
index 000000000..804771012
--- /dev/null
+++ b/src/chrome/settings/configFields.tsx
@@ -0,0 +1,85 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {FlexColumn, styled, Text, FlexRow, Input, colors, Glyph} from 'flipper';
+import React, {useState} from 'react';
+import {promises as fs} from 'fs';
+import {remote} from 'electron';
+import path from 'path';
+
+const ConfigFieldContainer = styled(FlexRow)({
+ paddingLeft: 10,
+ paddingRight: 10,
+});
+
+const InfoText = styled(Text)({
+ lineHeight: 1.35,
+ paddingTop: 5,
+});
+
+const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
+ marginRight: 0,
+ flexGrow: 1,
+ fontFamily: 'monospace',
+ color: isValid ? undefined : colors.red,
+ marginLeft: 10,
+ marginTop: 'auto',
+ marginBottom: 'auto',
+}));
+
+const CenteredGlyph = styled(Glyph)({
+ margin: 'auto',
+ marginLeft: 10,
+});
+
+export function FilePathConfigField(props: {
+ label: string;
+ defaultValue: string;
+ onChange: (path: string) => void;
+}) {
+ const [value, setValue] = useState(props.defaultValue);
+ const [isValid, setIsValid] = useState(true);
+ fs.stat(value)
+ .then(stat => setIsValid(stat.isDirectory()))
+ .catch(_ => setIsValid(false));
+
+ return (
+
+ {props.label}
+ {
+ setValue(e.target.value);
+ props.onChange(e.target.value);
+ fs.stat(e.target.value)
+ .then(stat => setIsValid(stat.isDirectory()))
+ .catch(_ => setIsValid(false));
+ }}
+ />
+
+ remote.dialog.showOpenDialog(
+ {
+ properties: ['openDirectory', 'showHiddenFiles'],
+ defaultPath: path.resolve('/'),
+ },
+ (paths: Array | undefined) => {
+ paths && setValue(paths[0]);
+ paths && props.onChange(paths[0]);
+ },
+ )
+ }>
+
+
+ {isValid ? null : (
+
+ )}
+
+ );
+}
diff --git a/src/reducers/settings.tsx b/src/reducers/settings.tsx
index 466d00dda..648978cbf 100644
--- a/src/reducers/settings.tsx
+++ b/src/reducers/settings.tsx
@@ -9,6 +9,7 @@ import {Actions} from './index';
export type Settings = {
androidHome: string;
+ enableAndroid: boolean;
};
export type Action =
@@ -20,6 +21,7 @@ export type Action =
const initialState: Settings = {
androidHome: '/opt/android_sdk',
+ enableAndroid: true,
};
export default function reducer(