1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
12 |
|
13 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
14 |
|
15 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
16 |
|
17 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
18 |
|
19 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
20 |
|
21 | var _createClass3 = _interopRequireDefault(_createClass2);
|
22 |
|
23 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
24 |
|
25 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
26 |
|
27 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
28 |
|
29 | var _inherits3 = _interopRequireDefault(_inherits2);
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _helperFunctions = require('./helperFunctions');
|
36 |
|
37 | var _SVGExpandMore = require('./svg/SVGExpandMore');
|
38 |
|
39 | var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
|
40 |
|
41 | var _SVGExpandLess = require('./svg/SVGExpandLess');
|
42 |
|
43 | var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
|
44 |
|
45 | var _Button = require('./Button');
|
46 |
|
47 | var _Button2 = _interopRequireDefault(_Button);
|
48 |
|
49 | var _RTGFade = require('./RTGFade');
|
50 |
|
51 | var _RTGFade2 = _interopRequireDefault(_RTGFade);
|
52 |
|
53 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
54 |
|
55 | var iconSize = '50';
|
56 | var scrollOptions = { block: 'start', behavior: 'smooth' };
|
57 |
|
58 | var ScrollNav = function (_Component) {
|
59 | (0, _inherits3.default)(ScrollNav, _Component);
|
60 |
|
61 | function ScrollNav() {
|
62 | var _ref;
|
63 |
|
64 | var _temp, _this, _ret;
|
65 |
|
66 | (0, _classCallCheck3.default)(this, ScrollNav);
|
67 |
|
68 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
69 | args[_key] = arguments[_key];
|
70 | }
|
71 |
|
72 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ScrollNav.__proto__ || (0, _getPrototypeOf2.default)(ScrollNav)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
73 | showScrollNav: false
|
74 | }, _this.handleScroll = function () {
|
75 | var _this$props = _this.props,
|
76 | containerId = _this$props.containerId,
|
77 | children = _this$props.children;
|
78 |
|
79 | var container = containerId ? document.getElementById(containerId) : children.ref ? children.ref.current : null;
|
80 | if (container.offsetTop < window.scrollY && container.offsetTop + container.offsetHeight > window.scrollY + window.screen.height) {
|
81 | _this.setState((0, _extends3.default)({}, _this.state, { showScrollNav: true }));
|
82 | }
|
83 | if (container.offsetTop > window.scrollY || container.offsetTop + container.offsetHeight < window.scrollY + window.screen.height) {
|
84 | _this.setState((0, _extends3.default)({}, _this.state, { showScrollNav: false }));
|
85 | }
|
86 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
87 | }
|
88 |
|
89 | (0, _createClass3.default)(ScrollNav, [{
|
90 | key: 'componentDidMount',
|
91 | value: function componentDidMount() {
|
92 | window ? window.addEventListener('scroll', this.handleScroll) : null;
|
93 | }
|
94 | }, {
|
95 | key: 'componentWillUnmount',
|
96 | value: function componentWillUnmount() {
|
97 | window.removeEventListener('scroll', this.handleScroll);
|
98 | }
|
99 | }, {
|
100 | key: 'render',
|
101 | value: function render() {
|
102 | var showScrollNav = this.state.showScrollNav,
|
103 | _props = this.props,
|
104 | containerId = _props.containerId,
|
105 | children = _props.children;
|
106 |
|
107 | var sharedStyle = {
|
108 | position: 'fixed',
|
109 | left: '2rem'
|
110 | };
|
111 | var container = containerId ? document.getElementById(containerId) : children.ref ? children.ref.current : null;
|
112 | return _react2.default.createElement(
|
113 | _react2.default.Fragment,
|
114 | null,
|
115 | _react2.default.createElement(
|
116 | _RTGFade2.default,
|
117 | { in: showScrollNav },
|
118 | function (_ref2) {
|
119 | var transitionStyle = _ref2.style;
|
120 | return _react2.default.createElement(
|
121 | _Button2.default,
|
122 | {
|
123 | style: (0, _extends3.default)({}, sharedStyle, transitionStyle, { top: '2rem' }),
|
124 | onClick: function onClick() {
|
125 | return container.scrollIntoView(scrollOptions);
|
126 | },
|
127 | className: (0, _helperFunctions.flippyClass)(showScrollNav, 'elevator', 'show', 'hide') + ' ' + (0, _helperFunctions.flippyClass)(showScrollNav, 'elevator__top', 'show', 'hide')
|
128 | },
|
129 | _react2.default.createElement(_SVGExpandLess2.default, { size: iconSize })
|
130 | );
|
131 | }
|
132 | ),
|
133 | children && children,
|
134 | _react2.default.createElement(
|
135 | _RTGFade2.default,
|
136 | { in: showScrollNav },
|
137 | function (_ref3) {
|
138 | var transitionStyle = _ref3.style;
|
139 | return _react2.default.createElement(
|
140 | _Button2.default,
|
141 | {
|
142 | style: (0, _extends3.default)({}, sharedStyle, transitionStyle, { bottom: '2rem' }),
|
143 | onClick: function onClick() {
|
144 | return container.scrollIntoView((0, _extends3.default)({}, scrollOptions, {
|
145 | block: 'end'
|
146 | }));
|
147 | },
|
148 | className: (0, _helperFunctions.flippyClass)(showScrollNav, 'elevator', 'show', 'hide') + ' ' + (0, _helperFunctions.flippyClass)(showScrollNav, 'elevator__bottom', 'show', 'hide')
|
149 | },
|
150 | _react2.default.createElement(_SVGExpandMore2.default, { size: iconSize })
|
151 | );
|
152 | }
|
153 | )
|
154 | );
|
155 | }
|
156 | }]);
|
157 | return ScrollNav;
|
158 | }(_react.Component);
|
159 |
|
160 | exports.default = ScrollNav; |
\ | No newline at end of file |