New Component: Text Rotator

Author: pastelsky

components/text-rotater/text-rotater.jsx

@@ -0,0 +1,89 @@
+import React, { PropTypes } from 'react';
+import './text-rotater.scss';
+
+export default class TextRotater extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.calculateContentHeight = this.calculateContentHeight.bind(this);
+
+    this.state = {
+      currentIndex: 0,
+      contentHeight: 0,
+    };
+  }
+
+  componentDidMount() {
+    const { delay } = this.props;
+
+    setTimeout(() => {
+      this.calculateContentHeight();
+    }, 50);
+
+    setTimeout(() => {
+      this.textRotatorWrap.classList.add('text-rotater--slide-up');
+    }, delay);
+
+    window.addEventListener('resize', this.calculateContentHeight);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.calculateContentHeight);
+  }
+
+  calculateContentHeight() {
+    this.setState({
+      contentHeight: this.content.clientHeight,
+    });
+  }
+
+  handleTransitionEnd() {
+    const { children, repeatDelay } = this.props;
+    this.textRotatorWrap.classList.remove('text-rotater--slide-up');
+    this.setState({
+      currentIndex: (this.state.currentIndex + 1) % React.Children.count(children),
+    }, () => {
+      setTimeout(() => {
+        this.textRotatorWrap.classList.add('text-rotater--slide-up');
+      }, repeatDelay);
+    });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { currentIndex, contentHeight } = this.state;
+    const childrenCount = React.Children.count(children);
+
+    const currentChild = React.cloneElement(children[currentIndex], { ref: c => (this.content = c)});
+
+    const nextChild = React.cloneElement(children[(currentIndex + 1) % childrenCount]);
+
+    return (
+      <div className="text-rotater">
+        <div
+          className="text-rotater__wrap"
+          ref={ trw => (this.textRotatorWrap = trw) }
+          onTransitionEnd={ this.handleTransitionEnd }
+          style={ { height: contentHeight } }
+        >
+          { currentChild }
+          { nextChild }
+        </div>
+      </div>
+    );
+  }
+}
+
+TextRotater.defaultProps = {
+  delay: 0,
+  repeatDelay: 3000,
+};
+
+
+TextRotater.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node),
+  delay: PropTypes.number,
+  repeatDelay: PropTypes.number,
+};
+

components/text-rotater/text-rotater.scss

@@ -0,0 +1,41 @@
+.text-rotater {
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  padding: 0 0.3em;
+  vertical-align: bottom;
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    height: 3px;
+    left: 0;
+  }
+
+  &::after {
+    top: 0;
+    background-image: linear-gradient(#{getColor(elephant)}, transparent);
+  }
+
+  &::before {
+    bottom: 0;
+    z-index: 1;
+    background-image: linear-gradient(transparent, #{getColor(elephant)});
+  }
+
+  > * {
+    display: inline-block;
+  }
+}
+
+.text-rotater--slide-up {
+  transition: transform 1s;
+  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+  transform: translateY(-100%);
+}
+
+.text-rotater__wrap {
+  display: inline-flex;
+  flex-direction: column;
+}