focus-components-v3/button-back-to-top/index.js

Focus web components to build applications (based on Material Design)

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _class;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _button = require('../button');

var _button2 = _interopRequireDefault(_button);

var _scroll = require('../behaviours/scroll');

var _scroll2 = _interopRequireDefault(_scroll);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

var ButtonBackToTop = (0, _scroll2.default)(_class = function (_Component) {
    _inherits(ButtonBackToTop, _Component);

    function ButtonBackToTop(props) {
        _classCallCheck(this, ButtonBackToTop);

        var _this = _possibleConstructorReturn(this, _Component.call(this, props));

        _this._scrollSpy = function () {
            var currentScrollPosition = _this.scrollPosition();
            if (currentScrollPosition.top > _this.props.scrollStart) {
                if (!_this.state.isVisible) {
                    _this.setState({ isVisible: true });
                }
            } else {
                if (_this.state.isVisible) {
                    _this.setState({ isVisible: false });
                }
            }
        };

        _this.goBackToTop = function () {
            //TODO: Add animation
            scrollTo(undefined, 0);
        };

        _this.render = function () {
            var isVisible = _this.state.isVisible;

            return isVisible ? _react2.default.createElement(
                'div',
                { 'data-focus': 'back-to-top' },
                _react2.default.createElement(_button2.default, { color: 'colored', handleOnClick: _this.goBackToTop, icon: 'expand_less', shape: 'fab', type: 'button' })
            ) : null;
        };

        _this.state = {
            isVisible: false
        };
        return _this;
    }

    /**
    * Component did mount, attach the scroll spy
    */


    ButtonBackToTop.prototype.componentDidMount = function componentDidMount() {
        this._scrollCarrier = window;
        this._scrollCarrier.addEventListener('scroll', this._scrollSpy);
        this._scrollCarrier.addEventListener('resize', this._scrollSpy);
        this._scrollSpy();
    };

    ButtonBackToTop.prototype.componentWillUnmount = function componentWillUnmount() {
        this._scrollCarrier.removeEventListener('scroll', this._scrollSpy);
        this._scrollCarrier.removeEventListener('resize', this._scrollSpy);
    };

    /**
    * The scroll event handler
    * @private
    */


    /**
    * Go back to the top of the page.
    */


    return ButtonBackToTop;
}(_react.Component)) || _class;

ButtonBackToTop.displayName = 'ButtonBackToTop';
ButtonBackToTop.defaultProps = {
    iconPrefix: 'fa fa-',
    iconName: 'arrow-circle-up',
    duration: 100,
    scrollStart: 100
};
ButtonBackToTop.propTypes = {
    duration: _react.PropTypes.number,
    iconName: _react.PropTypes.string,
    iconPrefix: _react.PropTypes.string,
    scrollStart: _react.PropTypes.number
};
exports.default = ButtonBackToTop;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZyLUZSLmpzIl0sIm5hbWVzIjpbIkJ1dHRvbkJhY2tUb1RvcCIsInByb3BzIiwiX3Njcm9sbFNweSIsImN1cnJlbnRTY3JvbGxQb3NpdGlvbiIsInNjcm9sbFBvc2l0aW9uIiwidG9wIiwic2Nyb2xsU3RhcnQiLCJzdGF0ZSIsImlzVmlzaWJsZSIsInNldFN0YXRlIiwiZ29CYWNrVG9Ub3AiLCJzY3JvbGxUbyIsInVuZGVmaW5lZCIsInJlbmRlciIsImNvbXBvbmVudERpZE1vdW50IiwiX3Njcm9sbENhcnJpZXIiLCJ3aW5kb3ciLCJhZGRFdmVudExpc3RlbmVyIiwiY29tcG9uZW50V2lsbFVubW91bnQiLCJyZW1vdmVFdmVudExpc3RlbmVyIiwiZGlzcGxheU5hbWUiLCJkZWZhdWx0UHJvcHMiLCJpY29uUHJlZml4IiwiaWNvbk5hbWUiLCJkdXJhdGlvbiIsInByb3BUeXBlcyIsIm51bWJlciIsInN0cmluZyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQTs7OztBQUNBOzs7O0FBQ0E7Ozs7QUFDQTs7Ozs7Ozs7Ozs7Ozs7SUFHTUEsZTtjQUFBQSxlOztBQUNGLGFBREVBLGVBQ0YsQ0FBWUMsS0FBWixFQUFtQjtBQUFBLDhCQURqQkQsZUFDaUI7O0FBQUEscURBQ2Ysc0JBQU1DLEtBQU4sQ0FEZTs7QUFBQSxjQTBCbkJDLFVBMUJtQixHQTBCTixZQUFNO0FBQ2YsZ0JBQU1DLHdCQUF3QixNQUFLQyxjQUFMLEVBQTlCO0FBQ0EsZ0JBQUlELHNCQUFzQkUsR0FBdEIsR0FBNEIsTUFBS0osS0FBTCxDQUFXSyxXQUEzQyxFQUF3RDtBQUNwRCxvQkFBSSxDQUFDLE1BQUtDLEtBQUwsQ0FBV0MsU0FBaEIsRUFBMkI7QUFDdkIsMEJBQUtDLFFBQUwsQ0FBYyxFQUFDRCxXQUFXLElBQVosRUFBZDtBQUNIO0FBQ0osYUFKRCxNQUlPO0FBQ0gsb0JBQUksTUFBS0QsS0FBTCxDQUFXQyxTQUFmLEVBQTBCO0FBQ3RCLDBCQUFLQyxRQUFMLENBQWMsRUFBQ0QsV0FBVyxLQUFaLEVBQWQ7QUFDSDtBQUNKO0FBQ0osU0FyQ2tCOztBQUFBLGNBMENuQkUsV0ExQ21CLEdBMENMLFlBQU07QUFDaEI7QUFDQUMscUJBQVNDLFNBQVQsRUFBb0IsQ0FBcEI7QUFDSCxTQTdDa0I7O0FBQUEsY0ErQ25CQyxNQS9DbUIsR0ErQ1YsWUFBTTtBQUFBLGdCQUNKTCxTQURJLEdBQ1MsTUFBS0QsS0FEZCxDQUNKQyxTQURJOztBQUVYLG1CQUFPQSxZQUFZO0FBQUE7QUFBQSxrQkFBSyxjQUFXLGFBQWhCO0FBQThCLGtFQUFRLE9BQU0sU0FBZCxFQUF3QixlQUFlLE1BQUtFLFdBQTVDLEVBQXlELE1BQUssYUFBOUQsRUFBNEUsT0FBTSxLQUFsRixFQUF3RixNQUFLLFFBQTdGO0FBQTlCLGFBQVosR0FBMkosSUFBbEs7QUFDSCxTQWxEa0I7O0FBRWYsY0FBS0gsS0FBTCxHQUFhO0FBQ1RDLHVCQUFXO0FBREYsU0FBYjtBQUZlO0FBS2xCOztBQUVEOzs7OztBQVJFUixtQixXQVdGYyxpQixnQ0FBb0I7QUFDaEIsYUFBS0MsY0FBTCxHQUFzQkMsTUFBdEI7QUFDQSxhQUFLRCxjQUFMLENBQW9CRSxnQkFBcEIsQ0FBcUMsUUFBckMsRUFBK0MsS0FBS2YsVUFBcEQ7QUFDQSxhQUFLYSxjQUFMLENBQW9CRSxnQkFBcEIsQ0FBcUMsUUFBckMsRUFBK0MsS0FBS2YsVUFBcEQ7QUFDQSxhQUFLQSxVQUFMO0FBQ0gsSzs7QUFoQkNGLG1CLFdBa0JGa0Isb0IsbUNBQXVCO0FBQ25CLGFBQUtILGNBQUwsQ0FBb0JJLG1CQUFwQixDQUF3QyxRQUF4QyxFQUFrRCxLQUFLakIsVUFBdkQ7QUFDQSxhQUFLYSxjQUFMLENBQW9CSSxtQkFBcEIsQ0FBd0MsUUFBeEMsRUFBa0QsS0FBS2pCLFVBQXZEO0FBQ0gsSzs7QUFFRDs7Ozs7O0FBaUJBOzs7OztXQXhDRUYsZTs7O0FBc0ROQSxnQkFBZ0JvQixXQUFoQixHQUE4QixpQkFBOUI7QUFDQXBCLGdCQUFnQnFCLFlBQWhCLEdBQStCO0FBQzNCQyxnQkFBWSxRQURlO0FBRTNCQyxjQUFVLGlCQUZpQjtBQUczQkMsY0FBVSxHQUhpQjtBQUkzQmxCLGlCQUFhO0FBSmMsQ0FBL0I7QUFNQU4sZ0JBQWdCeUIsU0FBaEIsR0FBNEI7QUFDeEJELGNBQVUsaUJBQVVFLE1BREk7QUFFeEJILGNBQVUsaUJBQVVJLE1BRkk7QUFHeEJMLGdCQUFZLGlCQUFVSyxNQUhFO0FBSXhCckIsaUJBQWEsaUJBQVVvQjtBQUpDLENBQTVCO2tCQU1lMUIsZSIsImZpbGUiOiJmci1GUi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwge0NvbXBvbmVudCwgUHJvcFR5cGVzfSBmcm9tICdyZWFjdCc7XHJcbmltcG9ydCBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nO1xyXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL2J1dHRvbic7XHJcbmltcG9ydCBTY3JvbGwgZnJvbSAnLi4vYmVoYXZpb3Vycy9zY3JvbGwnO1xyXG5cclxuQFNjcm9sbFxyXG5jbGFzcyBCdXR0b25CYWNrVG9Ub3AgZXh0ZW5kcyBDb21wb25lbnQge1xyXG4gICAgY29uc3RydWN0b3IocHJvcHMpIHtcclxuICAgICAgICBzdXBlcihwcm9wcyk7XHJcbiAgICAgICAgdGhpcy5zdGF0ZSA9IHtcclxuICAgICAgICAgICAgaXNWaXNpYmxlOiBmYWxzZVxyXG4gICAgICAgIH07XHJcbiAgICB9XHJcblxyXG4gICAgLyoqXHJcbiAgICAqIENvbXBvbmVudCBkaWQgbW91bnQsIGF0dGFjaCB0aGUgc2Nyb2xsIHNweVxyXG4gICAgKi9cclxuICAgIGNvbXBvbmVudERpZE1vdW50KCkge1xyXG4gICAgICAgIHRoaXMuX3Njcm9sbENhcnJpZXIgPSB3aW5kb3c7XHJcbiAgICAgICAgdGhpcy5fc2Nyb2xsQ2Fycmllci5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCB0aGlzLl9zY3JvbGxTcHkpO1xyXG4gICAgICAgIHRoaXMuX3Njcm9sbENhcnJpZXIuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgdGhpcy5fc2Nyb2xsU3B5KTtcclxuICAgICAgICB0aGlzLl9zY3JvbGxTcHkoKTtcclxuICAgIH1cclxuXHJcbiAgICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcclxuICAgICAgICB0aGlzLl9zY3JvbGxDYXJyaWVyLnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Njcm9sbCcsIHRoaXMuX3Njcm9sbFNweSk7XHJcbiAgICAgICAgdGhpcy5fc2Nyb2xsQ2Fycmllci5yZW1vdmVFdmVudExpc3RlbmVyKCdyZXNpemUnLCB0aGlzLl9zY3JvbGxTcHkpO1xyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgKiBUaGUgc2Nyb2xsIGV2ZW50IGhhbmRsZXJcclxuICAgICogQHByaXZhdGVcclxuICAgICovXHJcbiAgICBfc2Nyb2xsU3B5ID0gKCkgPT4ge1xyXG4gICAgICAgIGNvbnN0IGN1cnJlbnRTY3JvbGxQb3NpdGlvbiA9IHRoaXMuc2Nyb2xsUG9zaXRpb24oKTtcclxuICAgICAgICBpZiAoY3VycmVudFNjcm9sbFBvc2l0aW9uLnRvcCA+IHRoaXMucHJvcHMuc2Nyb2xsU3RhcnQpIHtcclxuICAgICAgICAgICAgaWYgKCF0aGlzLnN0YXRlLmlzVmlzaWJsZSkge1xyXG4gICAgICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7aXNWaXNpYmxlOiB0cnVlfSk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICBpZiAodGhpcy5zdGF0ZS5pc1Zpc2libGUpIHtcclxuICAgICAgICAgICAgICAgIHRoaXMuc2V0U3RhdGUoe2lzVmlzaWJsZTogZmFsc2V9KTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICAvKipcclxuICAgICogR28gYmFjayB0byB0aGUgdG9wIG9mIHRoZSBwYWdlLlxyXG4gICAgKi9cclxuICAgIGdvQmFja1RvVG9wID0gKCkgPT4ge1xyXG4gICAgICAgIC8vVE9ETzogQWRkIGFuaW1hdGlvblxyXG4gICAgICAgIHNjcm9sbFRvKHVuZGVmaW5lZCwgMCk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVuZGVyID0gKCkgPT4ge1xyXG4gICAgICAgIGNvbnN0IHtpc1Zpc2libGV9ID0gdGhpcy5zdGF0ZTtcclxuICAgICAgICByZXR1cm4gaXNWaXNpYmxlID8gPGRpdiBkYXRhLWZvY3VzPSdiYWNrLXRvLXRvcCc+PEJ1dHRvbiBjb2xvcj0nY29sb3JlZCcgaGFuZGxlT25DbGljaz17dGhpcy5nb0JhY2tUb1RvcH0gaWNvbj0nZXhwYW5kX2xlc3MnIHNoYXBlPSdmYWInIHR5cGU9J2J1dHRvbicgLz48L2Rpdj4gOiBudWxsO1xyXG4gICAgfVxyXG59XHJcblxyXG5CdXR0b25CYWNrVG9Ub3AuZGlzcGxheU5hbWUgPSAnQnV0dG9uQmFja1RvVG9wJztcclxuQnV0dG9uQmFja1RvVG9wLmRlZmF1bHRQcm9wcyA9IHtcclxuICAgIGljb25QcmVmaXg6ICdmYSBmYS0nLFxyXG4gICAgaWNvbk5hbWU6ICdhcnJvdy1jaXJjbGUtdXAnLFxyXG4gICAgZHVyYXRpb246IDEwMCxcclxuICAgIHNjcm9sbFN0YXJ0OiAxMDBcclxufTtcclxuQnV0dG9uQmFja1RvVG9wLnByb3BUeXBlcyA9IHtcclxuICAgIGR1cmF0aW9uOiBQcm9wVHlwZXMubnVtYmVyLFxyXG4gICAgaWNvbk5hbWU6IFByb3BUeXBlcy5zdHJpbmcsXHJcbiAgICBpY29uUHJlZml4OiBQcm9wVHlwZXMuc3RyaW5nLFxyXG4gICAgc2Nyb2xsU3RhcnQ6IFByb3BUeXBlcy5udW1iZXJcclxufTtcclxuZXhwb3J0IGRlZmF1bHQgQnV0dG9uQmFja1RvVG9wO1xyXG4iXX0=