mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-10 10:02:02 +05:30
Вроде бы сделал анимацию
This commit is contained in:
parent
1acabe5fdc
commit
bea442c04b
@ -21,7 +21,7 @@
|
||||
"react": "^0.14.0",
|
||||
"react-dom": "^0.14.3",
|
||||
"react-helmet": "^2.3.1",
|
||||
"react-intl": "^2.0.0-pr-3",
|
||||
"react-intl": "^2.0.0-beta-2",
|
||||
"react-motion": "^0.3.1",
|
||||
"react-redux": "^4.0.0",
|
||||
"react-router": "^2.0.0-rc5",
|
||||
|
13
src/index.js
13
src/index.js
@ -22,6 +22,19 @@ import routes from 'routes';
|
||||
|
||||
import 'index.scss';
|
||||
|
||||
// TODO: временная мера против Intl, который беспощадно спамит консоль
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const originalConsoleError = console.error;
|
||||
if (console.error === originalConsoleError) {
|
||||
console.error = (...args) => {
|
||||
if (args[0].indexOf('[React Intl] Missing message:') === 0) {
|
||||
return;
|
||||
}
|
||||
originalConsoleError.call(console, ...args);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const reducer = combineReducers({
|
||||
...reducers,
|
||||
routing: routeReducer
|
||||
|
@ -82,6 +82,7 @@ class AuthPage extends Component {
|
||||
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import Helmet from 'react-helmet';
|
||||
import ReactHeight from 'react-height';
|
||||
|
||||
import panelStyles from 'components/ui/panel.scss';
|
||||
import buttons from 'components/ui/buttons.scss';
|
||||
@ -97,29 +98,30 @@ import passwordMessages from 'components/auth/Password.messages';
|
||||
const opacitySpringConfig = [200, 20];
|
||||
const heightSpringConfig = [200, 18];
|
||||
const transformSpringConfig = [500, 20];
|
||||
const firstPageHeight = 70;
|
||||
const secondPageHeight = 280;
|
||||
|
||||
// TODO: сделать более быстрый фейд на горизонтальном скролле
|
||||
|
||||
class TheDemo extends Component {
|
||||
state = {
|
||||
isFirstPage: true
|
||||
isFirstPage: true,
|
||||
height: {}
|
||||
};
|
||||
|
||||
render() {
|
||||
var {isFirstPage} = this.state;
|
||||
|
||||
var path = `page${isFirstPage ? '1' : '2'}`;
|
||||
|
||||
return (
|
||||
<TransitionMotion
|
||||
styles={{
|
||||
[`page${isFirstPage ? '1' : '2'}`]: {
|
||||
[path]: {
|
||||
isFirstPage,
|
||||
transformSpring: spring(0),
|
||||
opacitySpring: spring(1)
|
||||
},
|
||||
common: {
|
||||
heightSpring: spring(this.state.isFirstPage ? firstPageHeight : secondPageHeight, heightSpringConfig)
|
||||
heightSpring: spring(this.state.height[path] || 0, heightSpringConfig)
|
||||
}
|
||||
}}
|
||||
willEnter={this.willEnter}
|
||||
@ -128,7 +130,7 @@ class TheDemo extends Component {
|
||||
{(items) => {
|
||||
var keys = Object.keys(items).filter((key) => key !== 'common');
|
||||
return (
|
||||
<div style={{height: '500px'}}>
|
||||
<div>
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<div style={{
|
||||
@ -203,11 +205,11 @@ class TheDemo extends Component {
|
||||
};
|
||||
|
||||
return (isFirstPage ? (
|
||||
<div key={`body${key}`} style={style}>
|
||||
<ReactHeight key={`body${key}`} style={style} onHeightReady={this.updateHeight}>
|
||||
<Input icon="envelope" type="email" placeholder={messages.emailOrUsername} />
|
||||
</div>
|
||||
</ReactHeight>
|
||||
) : (
|
||||
<div key={`body${key}`} style={style}>
|
||||
<ReactHeight key={`body${key}`} style={style} onHeightReady={this.updateHeight}>
|
||||
<Input icon="user" color="blue" type="text" placeholder={regMessages.yourNickname} />
|
||||
<Input icon="envelope" color="blue" type="email" placeholder={regMessages.yourEmail} />
|
||||
<Input icon="key" color="blue" type="password" placeholder={regMessages.accountPassword} />
|
||||
@ -222,10 +224,19 @@ class TheDemo extends Component {
|
||||
)
|
||||
}} />
|
||||
} />
|
||||
</div>
|
||||
</ReactHeight>
|
||||
));
|
||||
}
|
||||
|
||||
updateHeight = (height) => {
|
||||
this.setState({
|
||||
height: {
|
||||
...this.state.height,
|
||||
[`page${this.state.isFirstPage ? '1' : '2'}`]: height
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getFooter(key, props) {
|
||||
var {isFirstPage, opacitySpring} = props;
|
||||
|
||||
|
@ -14,6 +14,7 @@ var iconfontImporter = require('./webpack/node-sass-iconfont-importer');
|
||||
* TODO: dev tools https://github.com/freeqaz/redux-simple-router-example/blob/master/index.jsx
|
||||
* https://github.com/glenjamin/ultimate-hot-reloading-example ( обратить внимание на плагины babel )
|
||||
* https://github.com/gajus/react-css-modules ( + BrowserSync)
|
||||
* https://github.com/reactuate/reactuate
|
||||
*
|
||||
* Inspiration projects:
|
||||
* https://github.com/davezuko/react-redux-starter-kit
|
||||
|
Loading…
Reference in New Issue
Block a user