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 _regenerator = require('babel-runtime/regenerator');
|
12 |
|
13 | var _regenerator2 = _interopRequireDefault(_regenerator);
|
14 |
|
15 | var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
|
16 |
|
17 | var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
|
18 |
|
19 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
20 |
|
21 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
22 |
|
23 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
24 |
|
25 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
26 |
|
27 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
28 |
|
29 | var _createClass3 = _interopRequireDefault(_createClass2);
|
30 |
|
31 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
32 |
|
33 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
34 |
|
35 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
36 |
|
37 | var _inherits3 = _interopRequireDefault(_inherits2);
|
38 |
|
39 | var _ScrollNavHorizontal$;
|
40 |
|
41 | var _style = require('styled-jsx/style');
|
42 |
|
43 | var _style2 = _interopRequireDefault(_style);
|
44 |
|
45 | var _react = require('react');
|
46 |
|
47 | var _react2 = _interopRequireDefault(_react);
|
48 |
|
49 | var _SVGPrev = require('./svg/SVGPrev');
|
50 |
|
51 | var _SVGPrev2 = _interopRequireDefault(_SVGPrev);
|
52 |
|
53 | var _SVGNext = require('./svg/SVGNext');
|
54 |
|
55 | var _SVGNext2 = _interopRequireDefault(_SVGNext);
|
56 |
|
57 | var _recompose = require('recompose');
|
58 |
|
59 | var _propTypes = require('prop-types');
|
60 |
|
61 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
62 |
|
63 | var _RTGCSSTransitionFade = require('./RTGCSSTransitionFade');
|
64 |
|
65 | var _RTGCSSTransitionFade2 = _interopRequireDefault(_RTGCSSTransitionFade);
|
66 |
|
67 | var _helperFunctions = require('./helperFunctions');
|
68 |
|
69 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
70 |
|
71 | var interval = void 0;
|
72 |
|
73 | var ScrollNavHorizontal = function (_React$Component) {
|
74 | (0, _inherits3.default)(ScrollNavHorizontal, _React$Component);
|
75 |
|
76 | function ScrollNavHorizontal() {
|
77 | var _ref,
|
78 | _this2 = this;
|
79 |
|
80 | var _temp, _this, _ret;
|
81 |
|
82 | (0, _classCallCheck3.default)(this, ScrollNavHorizontal);
|
83 |
|
84 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
85 | args[_key] = arguments[_key];
|
86 | }
|
87 |
|
88 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ScrollNavHorizontal.__proto__ || (0, _getPrototypeOf2.default)(ScrollNavHorizontal)).call.apply(_ref, [this].concat(args))), _this), _this.handleScroll = (0, _asyncToGenerator3.default)( _regenerator2.default.mark(function _callee() {
|
89 | var _this$props, containerClass, containerRef, leeway, setShowLeft, setShowRight, showLog, containerElement;
|
90 |
|
91 | return _regenerator2.default.wrap(function _callee$(_context) {
|
92 | while (1) {
|
93 | switch (_context.prev = _context.next) {
|
94 | case 0:
|
95 | _this$props = _this.props, containerClass = _this$props.containerClass, containerRef = _this$props.containerRef, leeway = _this$props.leeway, setShowLeft = _this$props.setShowLeft, setShowRight = _this$props.setShowRight, showLog = _this$props.showLog;
|
96 | containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
|
97 | _context.next = 4;
|
98 | return (0, _helperFunctions.delay)(500);
|
99 |
|
100 | case 4:
|
101 |
|
102 | showLog && console.log('// handleScroll // ', 'containerElement.scrollLeft + leeway: ', containerElement.scrollLeft + leeway, 'scrollWidth: ', containerElement.scrollWidth, 'clientWidth: ', containerElement.clientWidth, 'diff: ', containerElement.scrollWidth - containerElement.clientWidth);
|
103 |
|
104 | if (!(containerElement.scrollLeft === 0 || containerElement.scrollWidth === containerElement.clientWidth)) {
|
105 | _context.next = 11;
|
106 | break;
|
107 | }
|
108 |
|
109 | _context.next = 8;
|
110 | return setShowLeft(false);
|
111 |
|
112 | case 8:
|
113 | clearInterval(interval);
|
114 | _context.next = 14;
|
115 | break;
|
116 |
|
117 | case 11:
|
118 | if (!(containerElement.scrollLeft > 0)) {
|
119 | _context.next = 14;
|
120 | break;
|
121 | }
|
122 |
|
123 | _context.next = 14;
|
124 | return setShowLeft(true);
|
125 |
|
126 | case 14:
|
127 | if (!(containerElement.scrollLeft + leeway >= containerElement.scrollWidth - containerElement.clientWidth || containerElement.scrollWidth === containerElement.clientWidth)) {
|
128 | _context.next = 20;
|
129 | break;
|
130 | }
|
131 |
|
132 | _context.next = 17;
|
133 | return setShowRight(false);
|
134 |
|
135 | case 17:
|
136 | clearInterval(interval);
|
137 | _context.next = 23;
|
138 | break;
|
139 |
|
140 | case 20:
|
141 | if (!(containerElement.scrollWidth >= containerElement.clientWidth)) {
|
142 | _context.next = 23;
|
143 | break;
|
144 | }
|
145 |
|
146 | _context.next = 23;
|
147 | return setShowRight(true);
|
148 |
|
149 | case 23:
|
150 | case 'end':
|
151 | return _context.stop();
|
152 | }
|
153 | }
|
154 | }, _callee, _this2);
|
155 | })), _this.renderNav = function (direction) {
|
156 | var _this$props2 = _this.props,
|
157 | containerClass = _this$props2.containerClass,
|
158 | height = _this$props2.height,
|
159 | width = _this$props2.width,
|
160 | showLeft = _this$props2.showLeft,
|
161 | showRight = _this$props2.showRight,
|
162 | containerRef = _this$props2.containerRef;
|
163 |
|
164 | var containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
|
165 |
|
166 | var autoHeight = containerElement && containerElement.clientHeight;
|
167 | var autoWidth = 18;
|
168 |
|
169 | var startScroll = function startScroll(e) {
|
170 | e.stopPropagation();
|
171 | clearInterval(interval);
|
172 |
|
173 | if (containerElement) {
|
174 | interval = setInterval(function () {
|
175 | return direction === 'left' ? containerElement.scrollLeft -= 20 : containerElement.scrollLeft += 20;
|
176 | }, 50);
|
177 | }
|
178 | };
|
179 | var endScroll = function endScroll(e) {
|
180 | e.stopPropagation();
|
181 | clearInterval(interval);
|
182 | };
|
183 | return _react2.default.createElement(
|
184 | _RTGCSSTransitionFade2.default,
|
185 | {
|
186 | style: {
|
187 | width: width ? width : autoWidth,
|
188 | height: height ? height : autoHeight
|
189 | },
|
190 | onMouseDown: function onMouseDown(e) {
|
191 | return startScroll(e);
|
192 | },
|
193 | onMouseUp: function onMouseUp(e) {
|
194 | return endScroll(e);
|
195 | },
|
196 | onTouchStart: function onTouchStart(e) {
|
197 | return startScroll(e);
|
198 | },
|
199 | onTouchEnd: function onTouchEnd(e) {
|
200 | return endScroll(e);
|
201 | },
|
202 | className: 'scrollnavhorizontal__scroller scrollnavhorizontal__scroller--' + direction,
|
203 | 'in': direction === 'left' ? showLeft : showRight
|
204 | },
|
205 | _react2.default.createElement(_style2.default, {
|
206 | styleId: '1090513052',
|
207 | css: '.scrollnavhorizontal__scroller{-webkit-transition:opacity 1000ms ease-in-out,background-color 300ms ease-out;transition:opacity 1000ms ease-in-out,background-color 300ms ease-out;background-color:rgba(89,27,100,0.521);z-index:3;height:10rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;}.scrollnavhorizontal__scroller svg{background:white;}.scrollnavhorizontal__scroller:hover{background-color:rgba(89,27,100,0.267);}.scrollnavhorizontal__scroller:active{background-color:#591b64;}.scrollnavhorizontal__scroller--left{left:0;}.scrollnavhorizontal__scroller--right{right:0;}'
|
208 | }),
|
209 | direction === 'left' ? _react2.default.createElement(_SVGPrev2.default, { size: width ? width : autoWidth }) : _react2.default.createElement(_SVGNext2.default, { size: width ? width : autoWidth })
|
210 | );
|
211 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
212 | }
|
213 |
|
214 | (0, _createClass3.default)(ScrollNavHorizontal, [{
|
215 | key: 'componentDidMount',
|
216 | value: function componentDidMount() {
|
217 | var _props = this.props,
|
218 | containerClass = _props.containerClass,
|
219 | containerRef = _props.containerRef;
|
220 |
|
221 | this.handleScroll();
|
222 | var containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
|
223 | containerElement.addEventListener('scroll', this.handleScroll);
|
224 | window.addEventListener('resize', this.handleScroll);
|
225 | }
|
226 | }, {
|
227 | key: 'componentDidUpdate',
|
228 | value: function componentDidUpdate(prevProps) {
|
229 | prevProps.numberOfItems !== this.props.numberOfItems && this.handleScroll();
|
230 | }
|
231 | }, {
|
232 | key: 'componentWillUnmount',
|
233 | value: function componentWillUnmount() {
|
234 | clearInterval(interval);
|
235 | var _props2 = this.props,
|
236 | containerClass = _props2.containerClass,
|
237 | containerRef = _props2.containerRef;
|
238 |
|
239 | var containerElement = (0, _helperFunctions.getElement)({ ref: containerRef, className: containerClass });
|
240 | containerElement.removeEventListener('scroll', this.handleScroll);
|
241 | window.removeEventListener('resize', this.handleScroll);
|
242 | }
|
243 | }, {
|
244 | key: 'render',
|
245 | value: function render() {
|
246 | return typeof window !== 'undefined' && _react2.default.createElement(
|
247 | _react2.default.Fragment,
|
248 | null,
|
249 | this.renderNav('left'),
|
250 | this.props.children,
|
251 | this.renderNav('right')
|
252 | );
|
253 | }
|
254 | }]);
|
255 | return ScrollNavHorizontal;
|
256 | }(_react2.default.Component);
|
257 |
|
258 | ScrollNavHorizontal.defaultProps = {
|
259 | showLog: false,
|
260 | leeway: 0
|
261 | };
|
262 |
|
263 | ScrollNavHorizontal.propTypes = (_ScrollNavHorizontal$ = {
|
264 | containerClass: _propTypes2.default.string,
|
265 | leeway: _propTypes2.default.number,
|
266 | width: _propTypes2.default.number,
|
267 | showLeft: _propTypes2.default.bool.isRequired,
|
268 | showRight: _propTypes2.default.bool.isRequired,
|
269 | setShowLeft: _propTypes2.default.func.isRequired
|
270 | }, (0, _defineProperty3.default)(_ScrollNavHorizontal$, 'setShowLeft', _propTypes2.default.func.isRequired), (0, _defineProperty3.default)(_ScrollNavHorizontal$, 'numberOfItems', _propTypes2.default.number), _ScrollNavHorizontal$);
|
271 |
|
272 | var enhance = (0, _recompose.compose)((0, _recompose.withState)('showLeft', 'setShowLeft', false), (0, _recompose.withState)('showRight', 'setShowRight', false), (0, _recompose.onlyUpdateForKeys)(['showLeft', 'showRight', 'numberOfItems', 'children']));
|
273 |
|
274 | exports.default = enhance(ScrollNavHorizontal); |
\ | No newline at end of file |