101 lines
3.0 KiB
JavaScript
101 lines
3.0 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import Flux from '../lib/flux';
|
||
|
|
import {Helmet} from 'react-helmet';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import {DragDropContext} from 'react-dnd';
|
||
|
|
import HTML5Backend from 'react-dnd-html5-backend';
|
||
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||
|
|
import UserSettingsStore from '../stores/UserSettingsStore';
|
||
|
|
import AccessibilityStore from '../stores/AccessibilityStore';
|
||
|
|
import NativeUtils from '../utils/NativeUtils';
|
||
|
|
import Connecting from './Connecting';
|
||
|
|
import Overlay from './overlay/Overlay';
|
||
|
|
import PictureInPicture from './PictureInPicture';
|
||
|
|
import Popouts from './Popouts';
|
||
|
|
import Tooltips from './Tooltips';
|
||
|
|
import NativeButtons from './NativeButtons';
|
||
|
|
import TutorialIndicators from './TutorialIndicators';
|
||
|
|
import Modals from './Modals';
|
||
|
|
import IncomingCalls from './IncomingCalls';
|
||
|
|
import ContextMenu from './common/ContextMenu';
|
||
|
|
import TransitionGroup from '../lib/transitions/TransitionGroup';
|
||
|
|
|
||
|
|
export const AppOverlay = DragDropContext(HTML5Backend)(
|
||
|
|
React.createClass({
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div id="overlay-wrapper">
|
||
|
|
<Overlay />
|
||
|
|
<Tooltips />
|
||
|
|
<Popouts />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
export const App = DragDropContext(HTML5Backend)(
|
||
|
|
React.createClass({
|
||
|
|
mixins: [Flux.StoreListenerMixin(AccessibilityStore, UserSettingsStore), PureRenderMixin],
|
||
|
|
|
||
|
|
getStateFromStores() {
|
||
|
|
return {
|
||
|
|
locale: UserSettingsStore.locale,
|
||
|
|
theme: UserSettingsStore.theme,
|
||
|
|
fontScale: AccessibilityStore.fontScale,
|
||
|
|
fontScaleClass: AccessibilityStore.fontScaleClass,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillMount() {
|
||
|
|
NativeUtils.setZoomFactor(AccessibilityStore.zoom);
|
||
|
|
},
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const {theme, locale, fontScale, fontScaleClass} = this.state;
|
||
|
|
const className = classNames(fontScaleClass, {
|
||
|
|
'platform-win': NativeUtils.isWindows(),
|
||
|
|
'platform-osx': NativeUtils.isOSX(),
|
||
|
|
'platform-linux': NativeUtils.isLinux(),
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div key={locale} className={className}>
|
||
|
|
<Helmet>
|
||
|
|
<html lang={locale} style={`font-size: ${fontScale}%`} />
|
||
|
|
</Helmet>
|
||
|
|
<div className="titlebar">
|
||
|
|
<div className="titlebar-edge" />
|
||
|
|
<NativeButtons />
|
||
|
|
</div>
|
||
|
|
{React.cloneElement(this.props.children, {theme})}
|
||
|
|
<PictureInPicture />
|
||
|
|
<Tooltips />
|
||
|
|
<TutorialIndicators />
|
||
|
|
<Popouts theme={theme} />
|
||
|
|
<Modals />
|
||
|
|
<ContextMenu />
|
||
|
|
<IncomingCalls />
|
||
|
|
<Connecting />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
// Used to transition between the welcome and app views
|
||
|
|
export const AppTransition = ({children, ...props}) => {
|
||
|
|
const childElement = React.Children.only(children);
|
||
|
|
const key = childElement.type.displayName;
|
||
|
|
const clonedElement = React.cloneElement(childElement, {...props, key});
|
||
|
|
return (
|
||
|
|
<TransitionGroup component="div">
|
||
|
|
{clonedElement}
|
||
|
|
</TransitionGroup>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// WEBPACK FOOTER //
|
||
|
|
// ./discord_app/components/App.js
|