1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
8 |
|
9 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
10 |
|
11 | var _from = require('babel-runtime/core-js/array/from');
|
12 |
|
13 | var _from2 = _interopRequireDefault(_from);
|
14 |
|
15 | var _extends2 = require('babel-runtime/helpers/extends');
|
16 |
|
17 | var _extends3 = _interopRequireDefault(_extends2);
|
18 |
|
19 | var _react = require('react');
|
20 |
|
21 | var _react2 = _interopRequireDefault(_react);
|
22 |
|
23 | var _helperFunctions = require('./helperFunctions');
|
24 |
|
25 | var _StyledGridbox = require('./StyledGridbox');
|
26 |
|
27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
28 |
|
29 | var defaultRenderItem = function defaultRenderItem(_ref) {
|
30 | var item = _ref.item,
|
31 | getWrapperProps = _ref.getWrapperProps,
|
32 | getSternProps = _ref.getSternProps,
|
33 | getStarboardProps = _ref.getStarboardProps,
|
34 | getImageProps = _ref.getImageProps;
|
35 | return _react2.default.createElement(
|
36 | _StyledGridbox.ITEM,
|
37 | (0, _extends3.default)({
|
38 | key: item.id
|
39 | }, getWrapperProps()),
|
40 | _react2.default.createElement(
|
41 | _StyledGridbox.DECK,
|
42 | null,
|
43 | _react2.default.createElement(
|
44 | _StyledGridbox.IMAGE,
|
45 | (0, _extends3.default)({}, getImageProps(), {
|
46 | imageSrc: item.imageS
|
47 | }),
|
48 | 'IMAGE'
|
49 | ),
|
50 | _react2.default.createElement(
|
51 | _StyledGridbox.STARBOARD,
|
52 | (0, _extends3.default)({}, getStarboardProps({
|
53 | style: {
|
54 | writingMode: 'vertical-rl'
|
55 | }
|
56 | })),
|
57 | 'STARBOARD'
|
58 | )
|
59 | ),
|
60 | _react2.default.createElement(
|
61 | _StyledGridbox.STERN,
|
62 | (0, _extends3.default)({}, getSternProps()),
|
63 | 'STERN || ',
|
64 | item.title
|
65 | )
|
66 | );
|
67 | };
|
68 |
|
69 | var defaultItems = (0, _from2.default)({ length: 30 }, function (_, i) {
|
70 | return {
|
71 | title: 'item' + i,
|
72 | id: i,
|
73 | imageS: 'http://via.placeholder.com/210x300'
|
74 | };
|
75 | });
|
76 |
|
77 | var GridBox = function GridBox(_ref2) {
|
78 | var _ref2$className = _ref2.className,
|
79 | className = _ref2$className === undefined ? '' : _ref2$className,
|
80 | style = _ref2.style,
|
81 | _ref2$renderItem = _ref2.renderItem,
|
82 | renderItem = _ref2$renderItem === undefined ? defaultRenderItem : _ref2$renderItem,
|
83 | _ref2$itemSize = _ref2.itemSize,
|
84 | itemSize = _ref2$itemSize === undefined ? 'm' : _ref2$itemSize,
|
85 | _ref2$showStarboard = _ref2.showStarboard,
|
86 | showStarboard = _ref2$showStarboard === undefined ? false : _ref2$showStarboard,
|
87 | _ref2$items = _ref2.items,
|
88 | items = _ref2$items === undefined ? defaultItems : _ref2$items,
|
89 | _ref2$show = _ref2.show,
|
90 | show = _ref2$show === undefined ? true : _ref2$show,
|
91 | settings = _ref2.settings;
|
92 |
|
93 | var getAreaClass = function getAreaClass(area) {
|
94 | return (0, _helperFunctions.advancedMulti)({
|
95 | hideBase: true,
|
96 | unflattenedBases: ['gridbox', '' + className],
|
97 | suffixes: ['__' + area, '__' + area + '__' + itemSize],
|
98 | flipVars: [[showStarboard, 'showstarboard', 'hidestarboard'], [show, 'on', 'off']]
|
99 | });
|
100 | };
|
101 |
|
102 | var containerClass = getAreaClass('container');
|
103 | var wrapperClass = getAreaClass('item');
|
104 | var starboardClass = getAreaClass('starboard');
|
105 | var sternClass = getAreaClass('stern');
|
106 | var imageClass = getAreaClass('image');
|
107 |
|
108 | var defaultStyle = (0, _extends3.default)({
|
109 | factorM: 1,
|
110 | factorL: 1,
|
111 | heightBaseM: 210,
|
112 | heightBaseL: 300,
|
113 | aspectRatioM: 2 / 3,
|
114 | aspectRatioL: 2 / 3,
|
115 | marginItemM: 30,
|
116 | marginItemL: 50,
|
117 | widthStarboardM: 30,
|
118 | widthStarboardL: 30,
|
119 |
|
120 | sizeSpeed: '1s',
|
121 | moveSpeed: '0.25s'
|
122 | }, settings);
|
123 | var factorM = defaultStyle.factorM,
|
124 | factorL = defaultStyle.factorL,
|
125 | heightBaseM = defaultStyle.heightBaseM,
|
126 | heightBaseL = defaultStyle.heightBaseL,
|
127 | aspectRatioM = defaultStyle.aspectRatioM,
|
128 | aspectRatioL = defaultStyle.aspectRatioL,
|
129 | marginItemM = defaultStyle.marginItemM,
|
130 | marginItemL = defaultStyle.marginItemL,
|
131 | widthStarboardM = defaultStyle.widthStarboardM,
|
132 | widthStarboardL = defaultStyle.widthStarboardL,
|
133 | sizeSpeed = defaultStyle.sizeSpeed,
|
134 | moveSpeed = defaultStyle.moveSpeed;
|
135 |
|
136 |
|
137 | var heightM = heightBaseM * factorM;
|
138 | var heightItemM = heightM + marginItemM;
|
139 | var heightImageM = heightM;
|
140 | var widthM = heightM * aspectRatioM * factorM;
|
141 | var widthItemM = widthM;
|
142 | var widthImageM = widthM;
|
143 | var heightL = heightBaseL * factorL;
|
144 | var heightItemL = heightL + marginItemL;
|
145 | var heightImageL = heightL;
|
146 | var widthL = heightL * aspectRatioL * factorL;
|
147 | var widthItemL = widthL;
|
148 | var widthImageL = widthL;
|
149 |
|
150 | var getImageProps = function getImageProps() {
|
151 | var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
152 |
|
153 | var _onClick = _ref3.onClick,
|
154 | className = _ref3.className,
|
155 | style = _ref3.style,
|
156 | props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
|
157 | return (0, _extends3.default)({
|
158 | onClick: function onClick(e) {
|
159 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
160 | args[_key - 1] = arguments[_key];
|
161 | }
|
162 |
|
163 | e.stopPropagation();
|
164 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
165 | },
|
166 | style: style,
|
167 | className: imageClass,
|
168 |
|
169 | itemSize: itemSize,
|
170 | heightImageM: heightImageM,
|
171 | heightImageL: heightImageL,
|
172 | widthImageL: widthImageL,
|
173 | widthImageM: widthImageM,
|
174 | sizeSpeed: sizeSpeed
|
175 |
|
176 | }, props);
|
177 | };
|
178 | var getSternProps = function getSternProps() {
|
179 | var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
180 |
|
181 | var _onClick2 = _ref4.onClick,
|
182 | className = _ref4.className,
|
183 | style = _ref4.style,
|
184 | props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
|
185 | return (0, _extends3.default)({
|
186 | onClick: function onClick(e) {
|
187 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
188 | args[_key2 - 1] = arguments[_key2];
|
189 | }
|
190 |
|
191 | e.stopPropagation();
|
192 | _onClick2 && _onClick2.apply(undefined, [e].concat(args));
|
193 | },
|
194 | style: style,
|
195 | className: sternClass
|
196 | }, props);
|
197 | };
|
198 | var getWrapperProps = function getWrapperProps() {
|
199 | var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
200 |
|
201 | var _onClick3 = _ref5.onClick,
|
202 | className = _ref5.className,
|
203 | style = _ref5.style,
|
204 | props = (0, _objectWithoutProperties3.default)(_ref5, ['onClick', 'className', 'style']);
|
205 | return (0, _extends3.default)({
|
206 | onClick: function onClick(e) {
|
207 | for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
208 | args[_key3 - 1] = arguments[_key3];
|
209 | }
|
210 |
|
211 | e.stopPropagation();
|
212 | _onClick3 && _onClick3.apply(undefined, [e].concat(args));
|
213 | },
|
214 | style: style,
|
215 | className: wrapperClass,
|
216 | sizeSpeed: sizeSpeed,
|
217 | heightItemM: heightItemM,
|
218 | heightItemL: heightItemL,
|
219 | widthItemM: widthItemM,
|
220 | widthItemL: widthItemL,
|
221 | widthStarboardM: widthStarboardM,
|
222 | widthStarboardL: widthStarboardL,
|
223 | itemSize: itemSize,
|
224 | showStarboard: showStarboard,
|
225 | show: show
|
226 | }, props);
|
227 | };
|
228 | var getStarboardProps = function getStarboardProps() {
|
229 | var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
230 |
|
231 | var _onClick4 = _ref6.onClick,
|
232 | className = _ref6.className,
|
233 | style = _ref6.style,
|
234 | props = (0, _objectWithoutProperties3.default)(_ref6, ['onClick', 'className', 'style']);
|
235 | return (0, _extends3.default)({
|
236 | onClick: function onClick(e) {
|
237 | for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
238 | args[_key4 - 1] = arguments[_key4];
|
239 | }
|
240 |
|
241 | e.stopPropagation();
|
242 | _onClick4 && _onClick4.apply(undefined, [e].concat(args));
|
243 | },
|
244 | style: style,
|
245 | className: starboardClass,
|
246 | itemSize: itemSize,
|
247 | showStarboard: showStarboard,
|
248 | widthStarboardM: widthStarboardM,
|
249 | widthStarboardL: widthStarboardL,
|
250 | heightImageM: heightImageM,
|
251 | heightImageL: heightImageL,
|
252 | moveSpeed: moveSpeed
|
253 | }, props);
|
254 | };
|
255 | return _react2.default.createElement(
|
256 | _StyledGridbox.CONTAINER,
|
257 | { className: containerClass, style: style },
|
258 | items.map(function (item) {
|
259 | return renderItem({
|
260 | item: item,
|
261 | getSternProps: getSternProps,
|
262 | getImageProps: getImageProps,
|
263 | getStarboardProps: getStarboardProps,
|
264 | getWrapperProps: getWrapperProps
|
265 | });
|
266 | })
|
267 | );
|
268 | };
|
269 |
|
270 | exports.default = GridBox; |
\ | No newline at end of file |