102 lines
2.7 KiB
JavaScript
102 lines
2.7 KiB
JavaScript
|
/* @flow */
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import Flux from '../lib/flux';
|
||
|
|
import i18n from '../i18n';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import {RegionName, RegionFlag} from './common/RegionSelect';
|
||
|
|
import QuickSelect from './common/QuickSelect';
|
||
|
|
import RegionStore from '../stores/RegionStore';
|
||
|
|
import RegionActionCreators from '../actions/RegionActionCreators';
|
||
|
|
import Flex from '../uikit/Flex';
|
||
|
|
import '../styles/quick-region-select.styl';
|
||
|
|
|
||
|
|
const POPOUT_PROPS = {
|
||
|
|
position: 'bottom-right',
|
||
|
|
};
|
||
|
|
|
||
|
|
export const QUICK_REGION_SELECT_KEY = 'quick-region-select';
|
||
|
|
|
||
|
|
const DEFAULT_REGION = () => {
|
||
|
|
return {
|
||
|
|
id: 'unknown',
|
||
|
|
name: i18n.Messages.UNKNOWN_REGION,
|
||
|
|
vip: false,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
class RegionItem extends React.PureComponent {
|
||
|
|
render() {
|
||
|
|
const {region, selected} = this.props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex align={Flex.Align.CENTER} className={classNames({selected})}>
|
||
|
|
<RegionFlag region={region} />
|
||
|
|
<RegionName region={region} />
|
||
|
|
{selected ? <i className="check" /> : null}
|
||
|
|
</Flex>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class QuickRegionSelect extends React.PureComponent {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
(this: any).handleChangeVoiceRegion = this.handleChangeVoiceRegion.bind(this);
|
||
|
|
(this: any).renderOption = this.renderOption.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
if (this.props.regions == null) {
|
||
|
|
RegionActionCreators.fetchRegions(null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
renderOption(option, selected) {
|
||
|
|
return <RegionItem key={option.value.id} region={option.value} selected={selected} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {regions, call} = this.props;
|
||
|
|
|
||
|
|
if (regions == null) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const selectedRegion = regions.find(({id}) => id === call.region) || DEFAULT_REGION();
|
||
|
|
|
||
|
|
const valueRegion = {label: selectedRegion.name, value: selectedRegion};
|
||
|
|
const selectableRegions = regions
|
||
|
|
.filter(region => !region.deprecated)
|
||
|
|
.map(region => ({label: region.name, value: region, key: region.id}));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<QuickSelect
|
||
|
|
label={i18n.Messages.REGION}
|
||
|
|
options={selectableRegions}
|
||
|
|
value={valueRegion}
|
||
|
|
onChange={this.handleChangeVoiceRegion}
|
||
|
|
renderOption={this.renderOption}
|
||
|
|
popoutProps={POPOUT_PROPS}
|
||
|
|
className="quick-region-select"
|
||
|
|
popoutId={QUICK_REGION_SELECT_KEY}
|
||
|
|
popoutClassName="region-select-popout"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleChangeVoiceRegion({value: region}) {
|
||
|
|
const {channelId} = this.props.call;
|
||
|
|
RegionActionCreators.changeCallRegion(channelId, region.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Flux.connectStores([RegionStore], () => ({
|
||
|
|
regions: RegionStore.getRegions(null),
|
||
|
|
}))(QuickRegionSelect);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// WEBPACK FOOTER //
|
||
|
|
// ./discord_app/components/QuickRegionSelect.js
|