1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
8 |
|
9 | var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
10 |
|
11 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _extends3 = require('babel-runtime/helpers/extends');
|
16 |
|
17 | var _extends4 = _interopRequireDefault(_extends3);
|
18 |
|
19 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
20 |
|
21 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
22 |
|
23 | var _react = require('react');
|
24 |
|
25 | var _react2 = _interopRequireDefault(_react);
|
26 |
|
27 | var _helperFunctions = require('./helperFunctions');
|
28 |
|
29 | var _SVGExpandMore = require('./svg/SVGExpandMore');
|
30 |
|
31 | var _SVGExpandMore2 = _interopRequireDefault(_SVGExpandMore);
|
32 |
|
33 | var _SVGExpandLess = require('./svg/SVGExpandLess');
|
34 |
|
35 | var _SVGExpandLess2 = _interopRequireDefault(_SVGExpandLess);
|
36 |
|
37 | var _Button = require('./Button');
|
38 |
|
39 | var _Button2 = _interopRequireDefault(_Button);
|
40 |
|
41 | var _RTGTransition = require('./RTGTransition');
|
42 |
|
43 | var _RTGTransition2 = _interopRequireDefault(_RTGTransition);
|
44 |
|
45 | var _SVGDir = require('./svg/SVGDir');
|
46 |
|
47 | var _SVGDir2 = _interopRequireDefault(_SVGDir);
|
48 |
|
49 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
50 |
|
51 | var iconSize = '50';
|
52 | var scrollOptions = { block: 'start', behavior: 'smooth' };
|
53 |
|
54 | var ContainerNav = function ContainerNav(_ref) {
|
55 | var containerId = _ref.containerId,
|
56 | children = _ref.children;
|
57 |
|
58 | var _useReducer = (0, _react.useReducer)(function (state, newState) {
|
59 | return (0, _extends4.default)({}, state, newState);
|
60 | }, {
|
61 | showContainerNav: false,
|
62 | isMounted: false
|
63 | }),
|
64 | _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
|
65 | state = _useReducer2[0],
|
66 | setState = _useReducer2[1];
|
67 |
|
68 | var showContainerNav = state.showContainerNav;
|
69 |
|
70 | var setShowContainerNavTo = function setShowContainerNavTo(value) {
|
71 | return setState({ showContainerNav: value });
|
72 | };
|
73 |
|
74 | var handleScroll = function handleScroll() {
|
75 | var container = document.getElementById(containerId);
|
76 | if (container.offsetTop < window.scrollY && container.offsetTop + container.offsetHeight > window.scrollY + window.screen.height) {
|
77 | setShowContainerNavTo(true);
|
78 | }
|
79 | if (container.offsetTop > window.scrollY || container.offsetTop + container.offsetHeight < window.scrollY + window.screen.height) {
|
80 | setShowContainerNavTo(false);
|
81 | }
|
82 | };
|
83 | (0, _react.useEffect)(function () {
|
84 | if (typeof window !== 'undefined') {
|
85 | window.addEventListener('scroll', handleScroll);
|
86 | }
|
87 | return function () {
|
88 | if (typeof window !== 'undefined') {
|
89 | window.removeEventListener('scroll', handleScroll);
|
90 | }
|
91 | };
|
92 | }, []);
|
93 |
|
94 | var sharedStyle = {
|
95 | position: 'fixed',
|
96 | left: '2rem'
|
97 | };
|
98 | var container = document.getElementById(containerId);
|
99 | var renderIcon = function renderIcon(_ref2) {
|
100 | var direction = _ref2.direction,
|
101 | props = (0, _objectWithoutProperties3.default)(_ref2, ['direction']);
|
102 | return _react2.default.createElement(_SVGDir2.default, (0, _extends4.default)({ dir: direction }, props));
|
103 | };
|
104 |
|
105 | var UP = 'Up';
|
106 | var DOWN = 'Down';
|
107 | return _react2.default.createElement(
|
108 | _RTGTransition2.default,
|
109 | { transitionType: 'fade', duration: 1000, in: showContainerNav },
|
110 | function (_ref3) {
|
111 | var transitionStyle = _ref3.style;
|
112 |
|
113 | var getNavButtonProps = function getNavButtonProps() {
|
114 | var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : UP;
|
115 | return function () {
|
116 | var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
117 |
|
118 | var _onClick = _ref4.onClick,
|
119 | className = _ref4.className,
|
120 | style = _ref4.style,
|
121 | props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
|
122 | return (0, _extends4.default)({
|
123 | onClick: function onClick(e) {
|
124 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
125 | args[_key - 1] = arguments[_key];
|
126 | }
|
127 |
|
128 | e.stopPropagation();
|
129 | direction === UP ? container.scrollIntoView(scrollOptions) : container.scrollIntoView((0, _extends4.default)({}, scrollOptions, {
|
130 | block: 'end'
|
131 | })), _onClick && _onClick.apply(undefined, [e].concat(args));
|
132 | },
|
133 | className: (0, _helperFunctions.flippyClass)(showContainerNav, 'containernav__navbutton', 'show', 'hide') + ' ' + (0, _helperFunctions.flippyClass)(showContainerNav, 'containernav__navbutton__' + direction, 'show', 'hide'),
|
134 | style: (0, _extends4.default)({}, sharedStyle, transitionStyle, (0, _defineProperty3.default)({}, direction === UP ? 'top' : 'bottom', '2rem'), style)
|
135 | }, props);
|
136 | };
|
137 | };
|
138 | return typeof children === 'function' ? children({ getNavButtonProps: getNavButtonProps, renderIcon: renderIcon }) : _react2.default.createElement(
|
139 | _react2.default.Fragment,
|
140 | null,
|
141 | _react2.default.createElement(
|
142 | _Button2.default,
|
143 | (0, _extends4.default)({}, getNavButtonProps(UP)()),
|
144 | renderIcon({ direction: UP, size: iconSize })
|
145 | ),
|
146 | _react2.default.createElement(
|
147 | _Button2.default,
|
148 | (0, _extends4.default)({}, getNavButtonProps(DOWN)()),
|
149 | renderIcon({ direction: DOWN, size: iconSize })
|
150 | )
|
151 | );
|
152 | }
|
153 | );
|
154 | };
|
155 |
|
156 | exports.default = ContainerNav; |
\ | No newline at end of file |