Маленький рефакторинг PanelTransition

2024-12-27 23:40:28 +05:30 · 2016-02-06 12:02:23 +02:00 · 2016-02-06 12:02:23 +02:00 · d1e8718d74
commit d1e8718d74
parent 57d30f1c79
5 changed files with 94 additions and 87 deletions
--- a/src/components/auth/PanelTransition.jsx
+++ b/src/components/auth/PanelTransition.jsx
@ -9,10 +9,9 @@ import panelStyles from 'components/ui/panel.scss';
 import icons from 'components/ui/icons.scss';


-const opacitySpringConfig = [200, 20];
+const opacitySpringConfig = [300, 20];
 const transformSpringConfig = [500, 50];
-
-// TODO: сделать более быстрый фейд на горизонтальном скролле
+const changeContextSpringConfig = [500, 20];

 export default class PanelTransition extends Component {
    state = {
@ -31,8 +30,8 @@ export default class PanelTransition extends Component {

        this.setState({
            direction,
-            forceHeight: forceHeight,
-            previousRoute: this.props.location
+            forceHeight,
+            previousRoute
        });

        if (forceHeight) {
@ -61,7 +60,7 @@ export default class PanelTransition extends Component {
                    },
                    common: {
                        heightSpring: spring(forceHeight || height[path] || 0, transformSpringConfig),
-                        switchContextHeightSpring: spring(forceHeight || contextHeight, [500, 20])
+                        switchContextHeightSpring: spring(forceHeight || contextHeight, changeContextSpringConfig)
                    }
                }}
                willEnter={this.willEnter}
@ -69,46 +68,33 @@ export default class PanelTransition extends Component {
            >
                {(items) => {
                    var keys = Object.keys(items).filter((key) => key !== 'common');
+
                    return (
                        <div>
                            <Panel>
                                <PanelHeader>
-                                    <div style={{
-                                        position: 'relative',
-                                        height: '59px',
-                                        overflow: 'hidden'
-                                    }}>
-                                        {keys.map((key) => this.getHeader(key, items[key]))}
-                                    </div>
+                                    {keys.map((key) => this.getHeader(key, items[key]))}
                                </PanelHeader>
                                <div style={{
                                    overflow: 'hidden',
                                    height: forceHeight ? items.common.switchContextHeightSpring : 'auto'
                                }}>
                                    <ReactHeight onHeightReady={this.updateContextHeight}>
-                                        <PanelBody style={{
-                                            overflow: 'hidden'
-                                        }}>
+                                        <PanelBody>
                                            <div style={{
                                                position: 'relative',
-                                                height: previousRoute ? `${items.common.heightSpring}px` : `${height[path]}px`
+                                                height: `${previousRoute ? items.common.heightSpring : height[path]}px`
                                            }}>
                                                {keys.map((key) => this.getBody(key, items[key]))}
                                            </div>
                                        </PanelBody>
                                        <PanelFooter>
-                                            <div style={{
-                                                position: 'relative',
-                                                height: '50px',
-                                                overflow: 'hidden'
-                                            }}>
-                                                {keys.map((key) => this.getFooter(key, items[key]))}
-                                            </div>
+                                            {keys.map((key) => this.getFooter(key, items[key]))}
                                        </PanelFooter>
                                    </ReactHeight>
                                </div>
                            </Panel>
-                            <div className={helpLinksStyles} style={{position: 'relative', height: '20px'}}>
+                            <div className={helpLinksStyles}>
                                {keys.map((key) => this.getLinks(key, items[key]))}
                            </div>
                        </div>
@ -119,23 +105,24 @@ export default class PanelTransition extends Component {
    }

    willEnter = (key, styles) => {
-        var map = {
-            '/login': -1,
-            '/register': -1,
-            '/password': 1,
-            '/activation': 1,
-            '/oauth/permissions': -1
-        };
-        var sign = map[key];
-
-        return {
-            ...styles,
-            transformSpring: spring(sign * 100, transformSpringConfig),
-            opacitySpring: spring(1, opacitySpringConfig)
-        };
+        return this.getTransitionStyles(key, styles);
    };

    willLeave = (key, styles) => {
+        return this.getTransitionStyles(key, styles, {isLeave: true});
+    };
+
+    /**
+     * @param  {string} key
+     * @param  {Object} styles
+     * @param  {Object} [options]
+     * @param  {Object} [options.isLeave=false] - true, if this is a leave transition
+     *
+     * @return {Object}
+     */
+    getTransitionStyles(key, styles, options = {}) {
+        var {isLeave = false} = options;
+
        var map = {
            '/login': -1,
            '/register': -1,
@ -147,10 +134,11 @@ export default class PanelTransition extends Component {

        return {
            ...styles,
+            pointerEvents: isLeave ? 'none' : 'auto',
            transformSpring: spring(sign * 100, transformSpringConfig),
-            opacitySpring: spring(0, opacitySpringConfig)
+            opacitySpring: spring(isLeave ? 0 : 1, opacitySpringConfig)
        };
-    };
+    }

    updateHeight = (height) => {
        this.setState({
@ -191,22 +179,16 @@ export default class PanelTransition extends Component {
        var {hasBackButton, transformSpring, Title} = props;

        var style = {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%'
+            ...this.getDefaultTransitionStyles(props),
+            opacity: 1 // reset default
        };

-        var scrollStyle = {
-            WebkitTransform: `translateY(${transformSpring}%)`,
-            transform: `translateY(${transformSpring}%)`
-        };
+        var scrollStyle = this.translate(transformSpring, 'Y');

        var sideScrollStyle = {
            position: 'relative',
            zIndex: 2,
-            WebkitTransform: `translateX(${-Math.abs(transformSpring)}%)`,
-            transform: `translateX(${-Math.abs(transformSpring)}%)`
+            ...this.translate(-Math.abs(transformSpring))
        };

        var backButton = (
@ -226,13 +208,10 @@ export default class PanelTransition extends Component {
    }

    getBody(key, props) {
-        var {transformSpring, opacitySpring, Body} = props;
+        var {transformSpring, Body} = props;
        var {direction} = this.state;

-        var transform = {
-            WebkitTransform: `translate${direction}(${transformSpring}%)`,
-            transform: `translate${direction}(${transformSpring}%)`
-        };
+        var transform = this.translate(transformSpring, direction);


        var verticalOrigin = 'top';
@ -242,11 +221,9 @@ export default class PanelTransition extends Component {
        }

        var style = {
-            position: 'absolute',
+            ...this.getDefaultTransitionStyles(props),
+            top: 'auto', // reset default
            [verticalOrigin]: 0,
-            left: 0,
-            width: '100%',
-            opacity: opacitySpring,
            ...transform
        };

@ -258,15 +235,9 @@ export default class PanelTransition extends Component {
    }

    getFooter(key, props) {
-        var {opacitySpring, Footer} = props;
+        var {Footer} = props;

-        var style = {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            opacity: opacitySpring
-        };
+        var style = this.getDefaultTransitionStyles(props);

        return (
            <div key={`footer${key}`} style={style}>
@ -276,15 +247,9 @@ export default class PanelTransition extends Component {
    }

    getLinks(key, props) {
-        var {opacitySpring, Links} = props;
+        var {Links} = props;

-        var style = {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            opacity: opacitySpring
-        };
+        var style = this.getDefaultTransitionStyles(props);

        return (
            <div key={`links${key}`} style={style}>
@ -292,5 +257,39 @@ export default class PanelTransition extends Component {
            </div>
        );
    }
+
+    /**
+     * @param  {Object} props
+     * @param  {string} props.pointerEvents
+     * @param  {number} props.opacitySpring
+     *
+     * @return {Object}
+     */
+    getDefaultTransitionStyles(props) {
+        var {pointerEvents, opacitySpring} = props;
+
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            opacity: opacitySpring,
+            pointerEvents
+        };
+    }
+
+    /**
+     * @param  {number} value
+     * @param  {string} direction='X' - X|Y
+     * @param  {string} unit='%' - %|px etc
+     *
+     * @return {Object}
+     */
+    translate(value, direction = 'X', unit = '%') {
+        return {
+            WebkitTransform: `translate${direction}(${value}${unit})`,
+            transform: `translate${direction}(${value}${unit})`
+        };
+    }
 }

--- a/src/components/auth/Permissions.jsx
+++ b/src/components/auth/Permissions.jsx
@ -36,7 +36,8 @@ export default function Permissions() {
                </PanelBodyHeader>
                <div className={styles.permissionsContainer}>
                    <div className={styles.permissionsTitle}>
-                        <Message {...messages.theAppNeedsAccess} />
+                        <Message {...messages.theAppNeedsAccess1} /><br />
+                        <Message {...messages.theAppNeedsAccess2} />
                    </div>
                    <ul className={styles.permissionsList}>
                        <li>Authorization for Minecraft servers</li>
--- a/src/components/auth/Permissions.messages.js
+++ b/src/components/auth/Permissions.messages.js
@ -11,10 +11,14 @@ export default defineMessages({
        defaultMessage: 'You authorized as:'
    },

-    theAppNeedsAccess: {
-        id: 'theAppNeedsAccess',
-        // Мне нельзя html? Получите неразрывный пробел! ˅˅˅˅˅˅˅˅˅˅˅
-        defaultMessage: 'This applications needs access              to your data'
+    theAppNeedsAccess1: {
+        id: 'theAppNeedsAccess1',
+        defaultMessage: 'This application needs access'
+    },
+
+    theAppNeedsAccess2: {
+        id: 'theAppNeedsAccess2',
+        defaultMessage: 'to your data'
    },

    decline: {
--- a/src/components/auth/helpLinks.scss
+++ b/src/components/auth/helpLinks.scss
@ -1,5 +1,7 @@
 .helpLinks {
    margin: 8px 0;
+    position: relative;
+    height: 20px;

    color: #444;
    text-align: center;
--- a/src/components/ui/panel.scss
+++ b/src/components/ui/panel.scss
@ -11,6 +11,8 @@ $headerHeight: 60px;
    box-sizing: border-box;
    height: $headerHeight;
    border-bottom: 1px solid lighter($black);
+    position: relative;
+    overflow: hidden;

    font-family: $font-family-title;
    text-align: center;
@ -37,6 +39,7 @@ $bodyLeftRightPadding: 20px;
 $bodyTopBottomPadding: 15px;

 .body {
+    overflow: hidden;
    padding: $bodyTopBottomPadding $bodyLeftRightPadding;
    color: #ccc;
    font-size: 18px;
@ -60,13 +63,11 @@ $bodyTopBottomPadding: 15px;
 }

 .footer {
-    display: flex;
+    position: relative;
+    overflow: hidden;
+    height: 50px;

-    > * {
-        flex-grow: 1;
-    }
-
-    button { // TODO: добавленно временно, пока не устаканится лейаут панелек
+    button {
        width: 100%;
    }
 }