mirror of
https://github.com/usatiuk/writer.git
synced 2025-10-29 00:17:48 +01:00
use native animations (fixes #2)
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
|||||||
Switch,
|
Switch,
|
||||||
withRouter,
|
withRouter,
|
||||||
} from "react-router";
|
} from "react-router";
|
||||||
import { Transition } from "react-spring/renderprops";
|
import { animated, Transition } from "react-spring/renderprops";
|
||||||
import { IAppState } from "~redux/reducers";
|
import { IAppState } from "~redux/reducers";
|
||||||
|
|
||||||
import { Login } from "./Login";
|
import { Login } from "./Login";
|
||||||
@@ -30,6 +30,7 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
|
|||||||
) : (
|
) : (
|
||||||
<div className="animationWrapper">
|
<div className="animationWrapper">
|
||||||
<Transition
|
<Transition
|
||||||
|
native={true}
|
||||||
items={location}
|
items={location}
|
||||||
keys={location.pathname}
|
keys={location.pathname}
|
||||||
from={{
|
from={{
|
||||||
@@ -46,12 +47,12 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{(_location: any) => (style: any) => (
|
{(_location: any) => (style: any) => (
|
||||||
<div style={style}>
|
<animated.div style={style}>
|
||||||
<Switch location={_location}>
|
<Switch location={_location}>
|
||||||
<Route path="/login" component={Login} />
|
<Route path="/login" component={Login} />
|
||||||
<Route path="/signup" component={Signup} />
|
<Route path="/signup" component={Signup} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</animated.div>
|
||||||
)}
|
)}
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -107,6 +107,7 @@ export class DocumentEditComponent extends React.PureComponent<
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
this.tryLoad();
|
||||||
return this.props.spinner && <LoadingStub />;
|
return this.props.spinner && <LoadingStub />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import {
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
|
import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
|
||||||
import { config, Transition } from "react-spring/renderprops";
|
import { animated, config, Transition } from "react-spring/renderprops";
|
||||||
import { Dispatch } from "redux";
|
import { Dispatch } from "redux";
|
||||||
import { IDocumentJSON } from "~../../src/entity/Document";
|
import { IDocumentJSON } from "~../../src/entity/Document";
|
||||||
import { IUserJSON } from "~../../src/entity/User";
|
import { IUserJSON } from "~../../src/entity/User";
|
||||||
@@ -111,6 +111,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
|
|||||||
</Navbar>
|
</Navbar>
|
||||||
<div id="MainScreen" className="animationWrapper">
|
<div id="MainScreen" className="animationWrapper">
|
||||||
<Transition
|
<Transition
|
||||||
|
native={true}
|
||||||
config={{
|
config={{
|
||||||
...config.default,
|
...config.default,
|
||||||
clamp: true,
|
clamp: true,
|
||||||
@@ -132,7 +133,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{(_location: any) => (style: any) => (
|
{(_location: any) => (style: any) => (
|
||||||
<div style={style} className="viewComponent">
|
<animated.div style={style} className="viewComponent">
|
||||||
<Switch location={_location}>
|
<Switch location={_location}>
|
||||||
<Route
|
<Route
|
||||||
path="/docs/:id/edit"
|
path="/docs/:id/edit"
|
||||||
@@ -144,7 +145,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
|
|||||||
/>
|
/>
|
||||||
<Route path="/" component={Overview} />
|
<Route path="/" component={Overview} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</div>
|
</animated.div>
|
||||||
)}
|
)}
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user