diff options
Diffstat (limited to 'app/components/SelectLocation.js')
| -rw-r--r-- | app/components/SelectLocation.js | 144 |
1 files changed, 80 insertions, 64 deletions
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js index 5a0b8c1101..d706e7fcc2 100644 --- a/app/components/SelectLocation.js +++ b/app/components/SelectLocation.js @@ -9,17 +9,21 @@ import Img from './Img'; import Accordion from './Accordion'; -import type { SettingsReduxState, RelayLocationRedux, RelayLocationCityRedux } from '../redux/settings/reducers'; +import type { + SettingsReduxState, + RelayLocationRedux, + RelayLocationCityRedux, +} from '../redux/settings/reducers'; import type { RelayLocation } from '../lib/ipc-facade'; export type SelectLocationProps = { settings: SettingsReduxState, - onClose: () => void; - onSelect: (location: RelayLocation) => void; + onClose: () => void, + onSelect: (location: RelayLocation) => void, }; type State = { - expanded: Array<string> + expanded: Array<string>, }; export default class SelectLocation extends React.Component<SelectLocationProps, State> { @@ -35,13 +39,13 @@ export default class SelectLocation extends React.Component<SelectLocationProps, // set initially expanded country based on relaySettings const relaySettings = this.props.settings.relaySettings; - if(relaySettings.normal) { + if (relaySettings.normal) { const { location } = relaySettings.normal; - if(location === 'any') { + if (location === 'any') { // no-op - } else if(location.country) { + } else if (location.country) { this.state.expanded.push(location.country); - } else if(location.city) { + } else if (location.city) { this.state.expanded.push(location.city[0]); } } @@ -52,7 +56,7 @@ export default class SelectLocation extends React.Component<SelectLocationProps, const cell = this._selectedCell; const scrollView = this._scrollView; - if(scrollView && cell) { + if (scrollView && cell) { //TODO: fix this when repairing the auto-scroll in customscrollbars. //scrollView.scrollToElement(cell, 'middle'); } @@ -63,24 +67,24 @@ export default class SelectLocation extends React.Component<SelectLocationProps, <Layout> <Container> <View style={styles.select_location}> - <Button style={styles.close} onPress={ this.props.onClose } testName='close'> - <Img style={styles.close_icon} source='icon-close'/> + <Button style={styles.close} onPress={this.props.onClose} testName="close"> + <Img style={styles.close_icon} source="icon-close" /> </Button> <View style={styles.container}> <View style={styles.header}> <Text style={styles.title}>Select location</Text> </View> - <CustomScrollbars autoHide={ true } ref={ (ref) => this._scrollView = ref }> + <CustomScrollbars autoHide={true} ref={(ref) => (this._scrollView = ref)}> <View> <Text style={styles.subtitle}> - While connected, your real location is masked with a private and secure location in the selected region + While connected, your real location is masked with a private and secure location + in the selected region </Text> - { this.props.settings.relayLocations.map((relayCountry) => { + {this.props.settings.relayLocations.map((relayCountry) => { return this._renderCountry(relayCountry); - }) } - + })} </View> </CustomScrollbars> </View> @@ -92,20 +96,25 @@ export default class SelectLocation extends React.Component<SelectLocationProps, _isSelected(selectedLocation: RelayLocation) { const { relaySettings } = this.props.settings; - if(relaySettings.normal) { + if (relaySettings.normal) { const otherLocation = relaySettings.normal.location; - if(selectedLocation.country && otherLocation.country && - selectedLocation.country === otherLocation.country) { + if ( + selectedLocation.country && + otherLocation.country && + selectedLocation.country === otherLocation.country + ) { return true; } - if(Array.isArray(selectedLocation.city) && Array.isArray(otherLocation.city)) { + if (Array.isArray(selectedLocation.city) && Array.isArray(otherLocation.city)) { const selectedCity = selectedLocation.city; const otherCity = otherLocation.city; - return selectedCity.length === otherCity.length && - selectedCity.every((v, i) => v === otherCity[i]); + return ( + selectedCity.length === otherCity.length && + selectedCity.every((v, i) => v === otherCity[i]) + ); } } return false; @@ -115,21 +124,23 @@ export default class SelectLocation extends React.Component<SelectLocationProps, this.setState((state) => { const expanded = state.expanded.slice(); const index = expanded.indexOf(countryCode); - if(index === -1) { + if (index === -1) { expanded.push(countryCode); } else { expanded.splice(index, 1); } return { expanded }; }); - } + }; _relayStatusIndicator(active: boolean, isSelected: boolean) { const statusClass = active ? styles.relay_status__active : styles.relay_status__inactive; - return ( isSelected ? - <Img style={ styles.tick_icon } source='icon-tick' height={24} width={24} /> : - <View style={[ styles.relay_status, statusClass ]}></View>); + return isSelected ? ( + <Img style={styles.tick_icon} source="icon-tick" height={24} width={24} /> + ) : ( + <View style={[styles.relay_status, statusClass]} /> + ); } _renderCountry(relayCountry: RelayLocationRedux) { @@ -138,9 +149,12 @@ export default class SelectLocation extends React.Component<SelectLocationProps, // either expanded by user or when the city selected within the country const isExpanded = this.state.expanded.includes(relayCountry.code); - const handleSelect = (relayCountry.hasActiveRelays && !isSelected) ? () => { - this.props.onSelect({ country: relayCountry.code }); - } : undefined; + const handleSelect = + relayCountry.hasActiveRelays && !isSelected + ? () => { + this.props.onSelect({ country: relayCountry.code }); + } + : undefined; const handleCollapse = (e) => { this._toggleCollapse(relayCountry.code); @@ -148,35 +162,34 @@ export default class SelectLocation extends React.Component<SelectLocationProps, }; return ( - <View key={ relayCountry.code } style={styles.country}> + <View key={relayCountry.code} style={styles.country}> <CellButton - cellHoverStyle={ isSelected ? styles.cell_selected : null } - style={ isSelected ? styles.cell_selected : styles.cell } - onPress={ handleSelect } + cellHoverStyle={isSelected ? styles.cell_selected : null} + style={isSelected ? styles.cell_selected : styles.cell} + onPress={handleSelect} disabled={!relayCountry.hasActiveRelays} - testName='country'> + testName="country"> + {this._relayStatusIndicator(relayCountry.hasActiveRelays, isSelected)} - { this._relayStatusIndicator(relayCountry.hasActiveRelays, isSelected) } + <Label>{relayCountry.name}</Label> - <Label> - { relayCountry.name } - </Label> - - { relayCountry.cities.length > 1 ? - <Img style={styles.collapse_button} + {relayCountry.cities.length > 1 ? ( + <Img + style={styles.collapse_button} hoverStyle={styles.expand_chevron_hover} - onPress={ handleCollapse } + onPress={handleCollapse} source={isExpanded ? 'icon-chevron-up' : 'icon-chevron-down'} height={24} - width={24} /> - : null } + width={24} + /> + ) : null} </CellButton> - { relayCountry.cities.length > 1 && - (<Accordion height={ isExpanded ? 'auto' : 0 }> - { relayCountry.cities.map((relayCity) => this._renderCity(relayCountry.code, relayCity)) } - </Accordion>) - } + {relayCountry.cities.length > 1 && ( + <Accordion height={isExpanded ? 'auto' : 0}> + {relayCountry.cities.map((relayCity) => this._renderCity(relayCountry.code, relayCity))} + </Accordion> + )} </View> ); } @@ -186,28 +199,31 @@ export default class SelectLocation extends React.Component<SelectLocationProps, const isSelected = this._isSelected(relayLocation); - const onRef = isSelected ? (element) => { - this._selectedCell = element; - } : undefined; + const onRef = isSelected + ? (element) => { + this._selectedCell = element; + } + : undefined; - const handleSelect = (relayCity.hasActiveRelays && !isSelected) ? () => { - this.props.onSelect(relayLocation); - } : undefined; + const handleSelect = + relayCity.hasActiveRelays && !isSelected + ? () => { + this.props.onSelect(relayLocation); + } + : undefined; return ( - <CellButton key={ `${countryCode}_${relayCity.code}` } - onPress={ handleSelect } + <CellButton + key={`${countryCode}_${relayCity.code}`} + onPress={handleSelect} disabled={!relayCity.hasActiveRelays} cellHoverStyle={isSelected ? styles.sub_cell__selected : null} style={isSelected ? styles.sub_cell__selected : styles.sub_cell} - testName='city' + testName="city" ref={onRef}> + {this._relayStatusIndicator(relayCity.hasActiveRelays, isSelected)} - { this._relayStatusIndicator(relayCity.hasActiveRelays, isSelected) } - - <Label> - { relayCity.name } - </Label> + <Label>{relayCity.name}</Label> </CellButton> ); } |