@twreporter/react-components - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

@@ -0,1 +1,4 @@
+### 1.1.2
+- Update fade-text components
+
 ### 1.1.1
@@ -2,0 +5,0 @@ - Update header component to dynamic

fade-text-components/src/components/fade-text.js

@@ -5,2 +5,3 @@ import styled, { keyframes } from 'styled-components'
 import { screen } from '../styles/screen'
+import scrollManager from '../utils/scroll-manager'
 
@@ -94,3 +95,3 @@
   font-size: 50px;
-  font-weight: 200;
+  font-weight: 100;
   line-height: 1.6;
@@ -107,11 +108,24 @@ text-align: center;
 
-class FadeText extends PureComponent {
-  componentDidMount() {
-    const elem = document.getElementById('pageContainer')
-    elem.style.overflowY = 'hidden'
-    elem.style.height = '100vh'
+const elemId = 'pageContainer'
+const { childAnimationStoper, lockBeforeAnimation, unlockAfterAnimation } = scrollManager
+
+const lockScroll = (ifLock, node, i) => {
+  if (i === 0 && ifLock) {
+    lockBeforeAnimation(node, elemId)
+  } else {
+    childAnimationStoper(node)
   }
+}
 
+const unlockScroll = (ifUnlock, node) => {
+  if (ifUnlock) {
+    unlockAfterAnimation(node, elemId)
+  } else {
+    childAnimationStoper(node)
+  }
+}
+
+class FadeText extends PureComponent {
   render() {
-    const { bgColor, duration, textArr, fontColor, bgOutDuration } = this.props
+    const { bgColor, duration, textArr, fontColor, bgOutDuration, ifLock, ifUnlock } = this.props
 
@@ -126,2 +140,3 @@ const textFrames = () => {
             fontColor={fontColor}
+            innerRef={(node) => { lockScroll(ifLock, node, i) }}
           >
@@ -135,4 +150,9 @@ {v}
     return (
-      <Container delay={(duration * textArr.length) + bgOutDuration + FadeOutDuration}>
-        <FadeOutContainer delay={(duration * textArr.length) + bgOutDuration}>
+      <Container
+        delay={(duration * textArr.length) + bgOutDuration + FadeOutDuration}
+      >
+        <FadeOutContainer
+          delay={(duration * textArr.length) + bgOutDuration}
+          innerRef={(node) => { unlockScroll(ifUnlock, node) }}
+        >
           <Background bgColor={bgColor}>
@@ -153,4 +173,6 @@ {textFrames()}
   bgOutDuration: PropTypes.number.isRequired,
+  ifLock: PropTypes.bool.isRequired,
+  ifUnlock: PropTypes.bool.isRequired,
 }
 
 export default FadeText

fade-text-components/src/index.js

 import FadeText from './components/fade-text'
+import scrollManager from './utils/scroll-manager'
 
-export default FadeText
+export default {
+  component: FadeText,
+  scrollManager,
+}

lib/fade-text-components/src/components/fade-text.js

@@ -28,2 +28,6 @@ 'use strict';
 
+var _scrollManager = require('../utils/scroll-manager');
+
+var _scrollManager2 = _interopRequireDefault(_scrollManager);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,3 +51,3 @@
   displayName: 'fade-text__Container',
-  componentId: 's1ytyj8b-0'
+  componentId: 'gwyjt-0'
 })(['width:100%;height:100%;position:fixed;z-index:999;body:{overflow:hidden;}', ' ', ' animation:', ' 100ms linear;animation-delay:', ';animation-fill-mode:forwards;'], _screen.screen.tablet(_templateObject), _screen.screen.mobile(_templateObject2), Shrink, function (props) {
@@ -55,3 +59,3 @@ return props.delay ? props.delay + 's' : '10s';
   displayName: 'fade-text__FadeOutContainer',
-  componentId: 's1ytyj8b-1'
+  componentId: 'gwyjt-1'
 })(['animation:', ' ', 's ease-in-out;animation-delay:', ';animation-fill-mode:forwards;width:100%;height:100%;'], FadeOut, FadeOutDuration, function (props) {
@@ -63,3 +67,3 @@ return props.delay ? props.delay + 's' : '10s';
   displayName: 'fade-text__Background',
-  componentId: 's1ytyj8b-2'
+  componentId: 'gwyjt-2'
 })(['width:100%;height:100%;background-color:', ';position:relative;'], function (props) {
@@ -73,4 +77,4 @@ return props.bgColor ? props.bgColor : 'black';
   displayName: 'fade-text__TextFrame',
-  componentId: 's1ytyj8b-3'
-})(['opacity:0;color:', ';white;display:block;box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:', ' ', ' ease-in-out;animation-fill-mode:forwards;animation-delay:', ';text-align:center;width:88%;font-size:50px;font-weight:200;line-height:1.6;text-align:center;', ' ', ''], function (props) {
+  componentId: 'gwyjt-3'
+})(['opacity:0;color:', ';white;display:block;box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);animation:', ' ', ' ease-in-out;animation-fill-mode:forwards;animation-delay:', ';text-align:center;width:88%;font-size:50px;font-weight:100;line-height:1.6;text-align:center;', ' ', ''], function (props) {
   return props.fontColor ? props.fontColor : 'white';
@@ -83,2 +87,24 @@ }, FadeInOut, function (props) {
 
+var elemId = 'pageContainer';
+var childAnimationStoper = _scrollManager2.default.childAnimationStoper,
+    lockBeforeAnimation = _scrollManager2.default.lockBeforeAnimation,
+    unlockAfterAnimation = _scrollManager2.default.unlockAfterAnimation;
+
+
+var lockScroll = function lockScroll(ifLock, node, i) {
+  if (i === 0 && ifLock) {
+    lockBeforeAnimation(node, elemId);
+  } else {
+    childAnimationStoper(node);
+  }
+};
+
+var unlockScroll = function unlockScroll(ifUnlock, node) {
+  if (ifUnlock) {
+    unlockAfterAnimation(node, elemId);
+  } else {
+    childAnimationStoper(node);
+  }
+};
+
 var FadeText = function (_PureComponent) {
@@ -94,9 +120,2 @@ _inherits(FadeText, _PureComponent);
   _createClass(FadeText, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var elem = document.getElementById('pageContainer');
-      elem.style.overflowY = 'hidden';
-      elem.style.height = '100vh';
-    }
-  }, {
     key: 'render',
@@ -109,3 +128,5 @@ value: function render() {
           fontColor = _props.fontColor,
-          bgOutDuration = _props.bgOutDuration;
+          bgOutDuration = _props.bgOutDuration,
+          ifLock = _props.ifLock,
+          ifUnlock = _props.ifUnlock;
 
@@ -121,3 +142,6 @@
               key: 'fade_text_' + v,
-              fontColor: fontColor
+              fontColor: fontColor,
+              innerRef: function innerRef(node) {
+                lockScroll(ifLock, node, i);
+              }
             },
@@ -131,6 +155,13 @@ v
         Container,
-        { delay: duration * textArr.length + bgOutDuration + FadeOutDuration },
+        {
+          delay: duration * textArr.length + bgOutDuration + FadeOutDuration
+        },
         _react2.default.createElement(
           FadeOutContainer,
-          { delay: duration * textArr.length + bgOutDuration },
+          {
+            delay: duration * textArr.length + bgOutDuration,
+            innerRef: function innerRef(node) {
+              unlockScroll(ifUnlock, node);
+            }
+          },
           _react2.default.createElement(
@@ -154,5 +185,7 @@ Background,
   duration: _propTypes2.default.number.isRequired,
-  bgOutDuration: _propTypes2.default.number.isRequired
+  bgOutDuration: _propTypes2.default.number.isRequired,
+  ifLock: _propTypes2.default.bool.isRequired,
+  ifUnlock: _propTypes2.default.bool.isRequired
 };
 
 exports.default = FadeText;

lib/fade-text-components/src/index.js

@@ -11,4 +11,11 @@ 'use strict';
 
+var _scrollManager = require('./utils/scroll-manager');
+
+var _scrollManager2 = _interopRequireDefault(_scrollManager);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _fadeText2.default;
+exports.default = {
+  component: _fadeText2.default,
+  scrollManager: _scrollManager2.default
+};

package.json

@@ -5,3 +5,3 @@ {
   "license": "AGPL-3.0",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "lib/main.js",
@@ -8,0 +8,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

869227

increased by0.69%

Number of package files

149

increased by1.36%

Lines of code

15522

increased by1.19%

No dependency changes