UNPKG

15.4 kBJavaScriptView Raw
1'use strict';
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.SC = undefined;
7
8var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
9
10var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
11
12var _extends2 = require('babel-runtime/helpers/extends');
13
14var _extends3 = _interopRequireDefault(_extends2);
15
16var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
17
18var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
19
20var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
21
22var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
23
24var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n grid-area: image;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n '], ['\n grid-area: image;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n ']),
25 _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n grid-area: belt;\n '], ['\n grid-area: belt;\n ']),
26 _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n justify-content: center;\n align-items: center;\n display: flex;\n cursor: pointer;\n '], ['\n justify-content: center;\n align-items: center;\n display: flex;\n cursor: pointer;\n ']),
27 _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n grid-area: info;\n flex-direction: column;\n justify-content: space-between;\n display: flex;\n '], ['\n grid-area: info;\n flex-direction: column;\n justify-content: space-between;\n display: flex;\n ']),
28 _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n display: grid;\n @media (max-width: ', 'px) {\n grid-template-columns: 1fr 240px 1fr;\n grid-template-rows: 40px auto 40px auto auto auto auto auto;\n grid-template-areas:\n \'nw n-nav ne\'\n \'w-nav image e-nav\'\n \'sw s-nav se\'\n \'info info info\'\n \'belt belt belt\';\n }\n @media (min-width: ', 'px) {\n grid-template-columns: 1fr 320px 400px 1fr;\n grid-template-rows: 40px 13.25rem auto auto 40px auto auto;\n grid-template-areas:\n \'nw n-nav n-nav ne\'\n \'w-nav image info e-nav\'\n \'w-nav image info e-nav\'\n \'w-nav image info e-nav\'\n \'sw s-nav s-nav se\'\n \'belt belt belt belt\';\n }\n '], ['\n display: grid;\n @media (max-width: ', 'px) {\n grid-template-columns: 1fr 240px 1fr;\n grid-template-rows: 40px auto 40px auto auto auto auto auto;\n grid-template-areas:\n \'nw n-nav ne\'\n \'w-nav image e-nav\'\n \'sw s-nav se\'\n \'info info info\'\n \'belt belt belt\';\n }\n @media (min-width: ', 'px) {\n grid-template-columns: 1fr 320px 400px 1fr;\n grid-template-rows: 40px 13.25rem auto auto 40px auto auto;\n grid-template-areas:\n \'nw n-nav n-nav ne\'\n \'w-nav image info e-nav\'\n \'w-nav image info e-nav\'\n \'w-nav image info e-nav\'\n \'sw s-nav s-nav se\'\n \'belt belt belt belt\';\n }\n ']); /*
29 - allow calling item externally
30 - abstract the media query
31 */
32
33var _react = require('react');
34
35var _react2 = _interopRequireDefault(_react);
36
37var _helperFunctions = require('./helperFunctions');
38
39var _styledComponents = require('styled-components');
40
41var _styledComponents2 = _interopRequireDefault(_styledComponents);
42
43var _ResizeListener = require('./ResizeListener');
44
45var _Button = require('./Button');
46
47var _Button2 = _interopRequireDefault(_Button);
48
49function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
50
51var SC = exports.SC = {
52 Image: _styledComponents2.default.div(_templateObject),
53 Belt: _styledComponents2.default.div(_templateObject2),
54 Nav: (0, _styledComponents2.default)(_Button2.default)(_templateObject3),
55 Info: _styledComponents2.default.div(_templateObject4),
56 Container: _styledComponents2.default.div(_templateObject5, function (_ref) {
57 var widthThreshold = _ref.widthThreshold;
58 return widthThreshold;
59 }, function (_ref2) {
60 var widthThreshold = _ref2.widthThreshold;
61 return widthThreshold;
62 })
63};
64
65var Showcase = function Showcase(_ref3) {
66 var _ref3$externallyLoade = _ref3.externallyLoadedId,
67 externallyLoadedId = _ref3$externallyLoade === undefined ? '' : _ref3$externallyLoade,
68 items = _ref3.items,
69 children = _ref3.children;
70
71 var _useReducer = (0, _react.useReducer)(function (state, newState) {
72 return (0, _extends3.default)({}, state, newState);
73 }, {
74 activeId: externallyLoadedId ? externallyLoadedId : items[0].id,
75 beltIsRendered: true
76 }),
77 _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
78 state = _useReducer2[0],
79 updateState = _useReducer2[1];
80
81 var activeId = state.activeId,
82 beltIsRendered = state.beltIsRendered;
83
84
85 (0, _react.useEffect)(function () {
86 if (externallyLoadedId.length > 0) {
87 updateState({ activeId: externallyLoadedId });
88 }
89 }, [externallyLoadedId]);
90
91 var ids = items.map(function (item) {
92 return item.id;
93 });
94 var nextId = ids.indexOf(activeId) === ids.length - 1 ? ids[0] : ids[ids.indexOf(activeId) + 1];
95 var prevId = ids.indexOf(activeId) === 0 ? ids[ids.length - 1] : ids[ids.indexOf(activeId) - 1];
96 var nextItem = items.find(function (item) {
97 return item.id === nextId;
98 });
99 var prevItem = items.find(function (item) {
100 return item.id === prevId;
101 });
102
103 var getContainerProps = function getContainerProps(_ref4) {
104 var style = _ref4.style,
105 className = _ref4.className,
106 _onClick = _ref4.onClick,
107 props = (0, _objectWithoutProperties3.default)(_ref4, ['style', 'className', 'onClick']);
108 return (0, _extends3.default)({
109 style: style,
110 className: className ? className + ' showcase__container' : 'showcase__container',
111 onClick: function onClick(e) {
112 for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
113 args[_key - 1] = arguments[_key];
114 }
115
116 e.stopPropagation();
117 _onClick && _onClick.apply(undefined, [e].concat(args));
118 }
119 }, props);
120 };
121 var getImageProps = function getImageProps() {
122 var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
123
124 var style = _ref5.style,
125 className = _ref5.className,
126 _onClick2 = _ref5.onClick,
127 props = (0, _objectWithoutProperties3.default)(_ref5, ['style', 'className', 'onClick']);
128 return (0, _extends3.default)({
129 style: style,
130 className: className ? className + ' showcase__image' : 'showcase__image',
131 onClick: function onClick(e) {
132 for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
133 args[_key2 - 1] = arguments[_key2];
134 }
135
136 e.stopPropagation();
137 _onClick2 && _onClick2.apply(undefined, [e].concat(args));
138 }
139 }, props);
140 };
141 var getInfoProps = function getInfoProps() {
142 var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
143
144 var style = _ref6.style,
145 className = _ref6.className,
146 _onClick3 = _ref6.onClick,
147 props = (0, _objectWithoutProperties3.default)(_ref6, ['style', 'className', 'onClick']);
148 return (0, _extends3.default)({
149 style: style,
150 className: className ? className + ' showcase__info' : 'showcase__info',
151 onClick: function onClick(e) {
152 for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
153 args[_key3 - 1] = arguments[_key3];
154 }
155
156 e.stopPropagation();
157 _onClick3 && _onClick3.apply(undefined, [e].concat(args));
158 }
159 }, props);
160 };
161 var getBeltProps = function getBeltProps() {
162 var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
163
164 var style = _ref7.style,
165 className = _ref7.className,
166 _onClick4 = _ref7.onClick,
167 props = (0, _objectWithoutProperties3.default)(_ref7, ['style', 'className', 'onClick']);
168 return (0, _extends3.default)({
169 style: style,
170 className: className ? className + ' showcase__belt' : 'showcase__belt',
171 onClick: function onClick(e) {
172 for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
173 args[_key4 - 1] = arguments[_key4];
174 }
175
176 e.stopPropagation();
177 _onClick4 && _onClick4.apply(undefined, [e].concat(args));
178 }
179 }, props);
180 };
181 var getNavProps = function getNavProps() {
182 var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
183
184 var style = _ref8.style,
185 className = _ref8.className,
186 _onClick5 = _ref8.onClick,
187 cardinal = _ref8.cardinal,
188 props = (0, _objectWithoutProperties3.default)(_ref8, ['style', 'className', 'onClick', 'cardinal']);
189 return (0, _extends3.default)({
190 style: (0, _extends3.default)({ gridArea: cardinal + '-nav' }, style),
191 className: className ? className + ' showcase__nav showcase__' + cardinal + '-nav' : 'showcase__nav showcase__' + cardinal + '-nav',
192 onClick: function onClick(e) {
193 for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
194 args[_key5 - 1] = arguments[_key5];
195 }
196
197 e.stopPropagation();
198 if (cardinal === 'w') {
199 updateState({ activeId: prevId });
200 }
201 if (cardinal === 'e') {
202 updateState({ activeId: nextId });
203 }
204 _onClick5 && _onClick5.apply(undefined, [e].concat(args));
205 }
206 }, props);
207 };
208
209 return _react2.default.createElement(
210 _react.Fragment,
211 null,
212 items.map(function (item, i) {
213 return item.id === activeId ? _react2.default.createElement(
214 _react.Fragment,
215 { key: i },
216 children({
217 getContainerProps: getContainerProps,
218 getImageProps: getImageProps,
219 getBeltProps: getBeltProps,
220 getNavProps: getNavProps,
221 getInfoProps: getInfoProps,
222 beltIsRendered: beltIsRendered,
223 updateState: updateState,
224 item: item,
225 nextItem: nextItem,
226 prevItem: prevItem
227 })
228 ) : null;
229 })
230 );
231};
232
233Showcase.propTypes = {};
234
235//const enhance = compose()
236// onlyUpdateForKeys([``])
237
238exports.default = Showcase;
\No newline at end of file