mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
Improve performance of modals and the preferences sheet animation
This commit is contained in:
parent
bf246e64e7
commit
3b15c3b887
|
@ -5,25 +5,31 @@ import { shell } from 'electron';
|
||||||
|
|
||||||
import ConfigSchemaItem from './config-schema-item';
|
import ConfigSchemaItem from './config-schema-item';
|
||||||
|
|
||||||
class DefaultMailClientItem extends React.Component<{}, { defaultClient: boolean | 'unknown' }> {
|
interface DefaultMailClientItemState {
|
||||||
|
defaultClient: boolean | 'unknown';
|
||||||
|
}
|
||||||
|
|
||||||
|
const DELAY_FOR_SHEET_ANIMATION = 25;
|
||||||
|
|
||||||
|
const helper = new DefaultClientHelper();
|
||||||
|
const service = new SystemStartService();
|
||||||
|
|
||||||
|
class DefaultMailClientItem extends React.Component<{}, DefaultMailClientItemState> {
|
||||||
_mounted: boolean = false;
|
_mounted: boolean = false;
|
||||||
|
|
||||||
_helper = new DefaultClientHelper();
|
state: DefaultMailClientItemState = { defaultClient: helper.available() ? false : 'unknown' };
|
||||||
|
|
||||||
constructor(props) {
|
async componentDidMount() {
|
||||||
super(props);
|
|
||||||
if (this._helper.available()) {
|
|
||||||
this.state = { defaultClient: false };
|
|
||||||
this._helper.isRegisteredForURLScheme('mailto', registered => {
|
|
||||||
if (this._mounted) this.setState({ defaultClient: registered });
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.state = { defaultClient: 'unknown' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this._mounted = true;
|
this._mounted = true;
|
||||||
|
|
||||||
|
if (helper.available()) {
|
||||||
|
await Promise.delay(DELAY_FOR_SHEET_ANIMATION);
|
||||||
|
if (!this._mounted) return;
|
||||||
|
helper.isRegisteredForURLScheme('mailto', registered => {
|
||||||
|
if (!this._mounted) return;
|
||||||
|
this.setState({ defaultClient: registered });
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
@ -33,10 +39,10 @@ class DefaultMailClientItem extends React.Component<{}, { defaultClient: boolean
|
||||||
toggleDefaultMailClient = event => {
|
toggleDefaultMailClient = event => {
|
||||||
if (this.state.defaultClient) {
|
if (this.state.defaultClient) {
|
||||||
this.setState({ defaultClient: false });
|
this.setState({ defaultClient: false });
|
||||||
this._helper.resetURLScheme('mailto');
|
helper.resetURLScheme('mailto');
|
||||||
} else {
|
} else {
|
||||||
this.setState({ defaultClient: true });
|
this.setState({ defaultClient: true });
|
||||||
this._helper.registerForURLScheme('mailto');
|
helper.registerForURLScheme('mailto');
|
||||||
}
|
}
|
||||||
event.target.blur();
|
event.target.blur();
|
||||||
};
|
};
|
||||||
|
@ -81,19 +87,18 @@ class LaunchSystemStartItem extends React.Component {
|
||||||
|
|
||||||
_mounted: boolean;
|
_mounted: boolean;
|
||||||
|
|
||||||
componentDidMount() {
|
async componentDidMount() {
|
||||||
this._mounted = true;
|
this._mounted = true;
|
||||||
this._service.checkAvailability().then(available => {
|
|
||||||
if (this._mounted) {
|
const available = await service.checkAvailability();
|
||||||
|
if (!this._mounted) return;
|
||||||
this.setState({ available });
|
this.setState({ available });
|
||||||
}
|
|
||||||
if (!available || !this._mounted) return;
|
if (available) {
|
||||||
this._service.doesLaunchOnSystemStart().then(launchOnStart => {
|
const launchOnStart = service.doesLaunchOnSystemStart();
|
||||||
if (this._mounted) {
|
if (!this._mounted) return;
|
||||||
this.setState({ launchOnStart });
|
this.setState({ launchOnStart });
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
@ -103,16 +108,17 @@ class LaunchSystemStartItem extends React.Component {
|
||||||
_toggleLaunchOnStart = event => {
|
_toggleLaunchOnStart = event => {
|
||||||
if (this.state.launchOnStart) {
|
if (this.state.launchOnStart) {
|
||||||
this.setState({ launchOnStart: false });
|
this.setState({ launchOnStart: false });
|
||||||
this._service.dontLaunchOnSystemStart();
|
service.dontLaunchOnSystemStart();
|
||||||
} else {
|
} else {
|
||||||
this.setState({ launchOnStart: true });
|
this.setState({ launchOnStart: true });
|
||||||
this._service.configureToLaunchOnSystemStart();
|
service.configureToLaunchOnSystemStart();
|
||||||
}
|
}
|
||||||
event.target.blur();
|
event.target.blur();
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (!this.state.available) return false;
|
if (!this.state.available) return false;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="item">
|
<div className="item">
|
||||||
<input
|
<input
|
||||||
|
|
|
@ -10,6 +10,7 @@ type ModalProps = {
|
||||||
height?: number;
|
height?: number;
|
||||||
width?: number;
|
width?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ModalState = {
|
type ModalState = {
|
||||||
animateClass: boolean;
|
animateClass: boolean;
|
||||||
offset: number;
|
offset: number;
|
||||||
|
@ -26,24 +27,21 @@ class Modal extends React.Component<ModalProps, ModalState> {
|
||||||
|
|
||||||
_mounted: boolean = false;
|
_mounted: boolean = false;
|
||||||
|
|
||||||
constructor(props) {
|
state = {
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
offset: 0,
|
offset: 0,
|
||||||
dimensions: {},
|
dimensions: {},
|
||||||
animateClass: false,
|
animateClass: false,
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this._focusImportantElement();
|
|
||||||
this._mounted = true;
|
this._mounted = true;
|
||||||
|
this._focusImportantElement();
|
||||||
window.requestAnimationFrame(() => {
|
window.requestAnimationFrame(() => {
|
||||||
if (!this._mounted) {
|
window.requestAnimationFrame(() => {
|
||||||
return;
|
if (!this._mounted) return;
|
||||||
}
|
|
||||||
this.setState({ animateClass: true });
|
this.setState({ animateClass: true });
|
||||||
});
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
|
|
@ -216,6 +216,8 @@ interface ToolbarState {
|
||||||
columnNames: string[];
|
columnNames: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let lastReportedToolbarHeight: number = 0;
|
||||||
|
|
||||||
export default class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
|
export default class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
|
||||||
static displayName = 'Toolbar';
|
static displayName = 'Toolbar';
|
||||||
|
|
||||||
|
@ -229,7 +231,6 @@ export default class Toolbar extends React.Component<ToolbarProps, ToolbarState>
|
||||||
};
|
};
|
||||||
|
|
||||||
mounted: boolean = false;
|
mounted: boolean = false;
|
||||||
lastReportedToolbarHeight: number = 0;
|
|
||||||
unlisteners: Array<() => void> = [];
|
unlisteners: Array<() => void> = [];
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -308,8 +309,8 @@ export default class Toolbar extends React.Component<ToolbarProps, ToolbarState>
|
||||||
}
|
}
|
||||||
|
|
||||||
// Record our overall height for sheets
|
// Record our overall height for sheets
|
||||||
if (el.clientHeight !== this.lastReportedToolbarHeight) {
|
if (el.clientHeight !== lastReportedToolbarHeight) {
|
||||||
this.lastReportedToolbarHeight = el.clientHeight;
|
lastReportedToolbarHeight = el.clientHeight;
|
||||||
remote.getCurrentWindow().setSheetOffset(el.clientHeight);
|
remote.getCurrentWindow().setSheetOffset(el.clientHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue