mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
149b389508
* Switch to using Typescript instead of Babel * Switch all es6 / jsx file extensions to ts / tsx * Convert Utils to a TS module from module.exports style module * Move everything from module.exports to typescript exports * Define .d.ts files for mailspring-exports and component kit… Yes it seems this is the best option :( * Load up on those @types * Synthesize TS types from PropTypes for standard components * Add types to Model classes and move constructor constants to instance vars * 9800 => 7700 TS errors * 7700 => 5600 TS errors * 5600 => 5330 TS errors * 5330 => 4866 TS errors * 4866 => 4426 TS errors * 4426 => 2411 TS errors * 2411 > 1598 TS errors * 1598 > 769 TS errors * 769 > 129 TS errors * 129 > 22 TS errors * Fix runtime errors * More runtime error fixes * Remove support for custom .es6 file extension * Remove a few odd remaining references to Nylas * Don’t ship Typescript support in the compiled app for now * Fix issues in compiled app - module resolution in TS is case sensitive? * README updates * Fix a few more TS errors * Make “No Signature” option clickable + selectable * Remove flicker when saving file and reloading keymaps * Fix mail rule item height in preferences * Fix missing spacing in thread sharing popover * Fix scrollbar ticks being nested incorrectly * Add Japanese as a manually reviewed language * Prevent the thread list from “sticking” * Re-use Sheet when switching root tabs, prevent sidebar from resetting * Ensure specs run * Update package configuration to avoid shpping types * Turn eslint back on - we will opt-in to the TS rules one by one
97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { CSSTransitionGroup } from 'react-transition-group';
|
|
import { Account } from 'mailspring-exports';
|
|
import OnboardingStore from './onboarding-store';
|
|
import PageTopBar from './page-top-bar';
|
|
|
|
import WelcomePage from './page-welcome';
|
|
import TutorialPage from './page-tutorial';
|
|
import AuthenticatePage from './page-authenticate';
|
|
import AccountChoosePage from './page-account-choose';
|
|
import AccountSettingsPage from './page-account-settings';
|
|
import AccountSettingsPageGmail from './page-account-settings-gmail';
|
|
import AccountSettingsPageIMAP from './page-account-settings-imap';
|
|
import AccountOnboardingSuccess from './page-account-onboarding-success';
|
|
import InitialPreferencesPage from './page-initial-preferences';
|
|
import InitialSubscriptionPage from './page-initial-subscription';
|
|
|
|
const PageComponents = {
|
|
welcome: WelcomePage,
|
|
tutorial: TutorialPage,
|
|
authenticate: AuthenticatePage,
|
|
'account-choose': AccountChoosePage,
|
|
'account-settings': AccountSettingsPage,
|
|
'account-settings-gmail': AccountSettingsPageGmail,
|
|
'account-settings-imap': AccountSettingsPageIMAP,
|
|
'account-onboarding-success': AccountOnboardingSuccess,
|
|
'initial-preferences': InitialPreferencesPage,
|
|
'initial-subscription': InitialSubscriptionPage,
|
|
};
|
|
|
|
interface OnboardingRootState {
|
|
pageDepth: number;
|
|
page: string;
|
|
account: Account;
|
|
}
|
|
|
|
export default class OnboardingRoot extends React.Component<{}, OnboardingRootState> {
|
|
static displayName = 'OnboardingRoot';
|
|
static containerRequired = false;
|
|
|
|
unsubscribe?: () => void;
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this._getStateFromStore();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.unsubscribe = OnboardingStore.listen(this._onStateChanged, this);
|
|
AppEnv.center();
|
|
AppEnv.displayWindow();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.unsubscribe) {
|
|
this.unsubscribe();
|
|
}
|
|
}
|
|
|
|
_getStateFromStore = () => {
|
|
return {
|
|
page: OnboardingStore.page(),
|
|
pageDepth: OnboardingStore.pageDepth(),
|
|
account: OnboardingStore.account(),
|
|
};
|
|
};
|
|
|
|
_onStateChanged = () => {
|
|
this.setState(this._getStateFromStore());
|
|
};
|
|
|
|
render() {
|
|
const Component = PageComponents[this.state.page];
|
|
if (!Component) {
|
|
throw new Error(`Cannot find component for page: ${this.state.page}`);
|
|
}
|
|
|
|
return (
|
|
<div className="page-frame">
|
|
<PageTopBar
|
|
pageDepth={this.state.pageDepth}
|
|
allowMoveBack={!['initial-preferences', 'account-choose'].includes(this.state.page)}
|
|
/>
|
|
<CSSTransitionGroup
|
|
transitionName="alpha-fade"
|
|
transitionLeaveTimeout={150}
|
|
transitionEnterTimeout={150}
|
|
>
|
|
<div key={this.state.page} className="page-container">
|
|
<Component account={this.state.account} />
|
|
</div>
|
|
</CSSTransitionGroup>
|
|
</div>
|
|
);
|
|
}
|
|
}
|