From 16be611792bcd449dc3a83842fc5920e93b2d795 Mon Sep 17 00:00:00 2001 From: John Knox Date: Thu, 10 Oct 2019 09:21:35 -0700 Subject: [PATCH] Add android enable/disable to settings screen Summary: The UI could do with a bit more fine tuning, but it's a start. Fully functional with updating the settings file. But nothing actually uses that setting yet. Reviewed By: priteshrnandgaonkar Differential Revision: D17810588 fbshipit-source-id: 791ee60616f3ee73f41813a5a442b08a5e395458 --- src/chrome/SettingsSheet.tsx | 116 ++++++------------------- src/chrome/settings/ToggledSection.tsx | 45 ++++++++++ src/chrome/settings/configFields.tsx | 85 ++++++++++++++++++ src/reducers/settings.tsx | 2 + 4 files changed, 158 insertions(+), 90 deletions(-) create mode 100644 src/chrome/settings/ToggledSection.tsx create mode 100644 src/chrome/settings/configFields.tsx 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(