react-misc-toolbox
Version:
[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll
370 lines (338 loc) • 13 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _from = require('babel-runtime/core-js/array/from');
var _from2 = _interopRequireDefault(_from);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _recompose = require('recompose');
var _InnerWidthListener = require('./InnerWidthListener');
var _InnerWidthListener2 = _interopRequireDefault(_InnerWidthListener);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var GridBox = function GridBox(_ref) {
var style = _ref.style,
renderItem = _ref.renderItem,
itemSize = _ref.itemSize,
showStarboard = _ref.showStarboard,
items = _ref.items,
page = _ref.page,
show = _ref.show,
settings = _ref.settings;
var containerClass = '\n gridbox__container \n gridbox__container--' + itemSize + ' \n gridbox__container--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + ' \n ' + (show === true ? 'gridbox--show' : 'gridbox--hide') + '\n\n ' + page + '__gridbox__container \n ' + page + '__gridbox__container--' + itemSize + '\n ' + page + '__gridbox__container--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + ' \n ' + (show === true ? page + '__gridbox--show' : page + '__gridbox--hide') + '\n ';
var wrapperClass = '\n gridbox__item \n gridbox__item--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + '\n ' + page + '__gridbox__item \n ' + page + '__gridbox__item--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + '\n ';
var starboardClass = '\n gridbox__starboard \n gridbox__starboard--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + '\n ' + page + '__gridbox__starboard \n ' + page + '__gridbox__starboard--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + '\n ';
var sternClass = '\n gridbox__stern \n gridbox__stern--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + '\n ' + page + '__gridbox__stern \n ' + page + '__gridbox__stern--' + itemSize + (showStarboard ? '--showstarboard' : '--hidestarboard') + '\n ';
var imageClass = '\n gridbox__image \n gridbox__image--' + itemSize + ' \n gridbox__grow ' + (showStarboard ? 'gridbox__grow--showstarboard' : 'gridbox__grow--hidestarboard') + '\n ' + page + '__gridbox__image \n ' + page + '__gridbox__image--' + itemSize + ' \n ';
var defaultStyle = (0, _extends3.default)({
factorM: 1,
factorL: 1,
heightBaseM: 210,
heightBaseL: 300,
aspectRatioM: 2 / 3,
aspectRatioL: 2 / 3,
marginItemM: 30,
marginItemL: 50,
widthStarboardM: 30,
widthStarboardL: 30,
sizeSpeed: '1s',
moveSpeed: '0.25s'
}, settings);
var factorM = defaultStyle.factorM,
factorL = defaultStyle.factorL,
heightBaseM = defaultStyle.heightBaseM,
heightBaseL = defaultStyle.heightBaseL,
aspectRatioM = defaultStyle.aspectRatioM,
aspectRatioL = defaultStyle.aspectRatioL,
marginItemM = defaultStyle.marginItemM,
marginItemL = defaultStyle.marginItemL,
widthStarboardM = defaultStyle.widthStarboardM,
widthStarboardL = defaultStyle.widthStarboardL,
sizeSpeed = defaultStyle.sizeSpeed,
moveSpeed = defaultStyle.moveSpeed;
var heightM = heightBaseM * factorM;
var heightItemM = heightM + marginItemM;
var heightImageM = heightM;
var widthM = heightM * aspectRatioM * factorM;
var widthItemM = widthM;
var widthImageM = widthM;
var heightL = heightBaseL * factorL;
var heightItemL = heightL + marginItemL;
var heightImageL = heightL;
var widthL = heightL * aspectRatioL * factorL;
var widthItemL = widthL;
var widthImageL = widthL;
var widthItemLnoSB = widthItemL;
var widthItemLwithSB = widthItemL + widthStarboardL;
var widthItemMnoSB = widthItemM;
var widthItemMwithSB = widthItemM + widthStarboardM;
var columnWidth = 1;
var getDefaultStarboardStyle = function getDefaultStarboardStyle() {
var styles = void 0;
if (itemSize === 'M' && showStarboard === true) {
styles = {
width: widthStarboardM,
height: heightImageM,
marginLeft: '2px',
transform: 'translateX(0)',
opacity: '1'
};
}
if (itemSize === 'M' && showStarboard === false) {
styles = {
width: '0px',
height: '0px',
transform: 'translateX(-30px)',
opacity: '0',
zIndex: '-9999'
};
}
if (itemSize === 'L' && showStarboard === true) {
styles = {
width: widthStarboardL,
height: heightImageL,
marginLeft: '2px',
transform: 'translateX(0)',
opacity: '1'
};
}
if (itemSize === 'L' && showStarboard === false) {
styles = {
width: '0px',
height: '0px',
transform: 'translateX(-30px)',
opacity: '0',
zIndex: '-9999'
};
}
return (0, _extends3.default)({
transition: 'transform ' + moveSpeed + ' ease-in-out, opacity ' + moveSpeed + ' ease-in-out'
}, styles);
};
var getDefaultWrapperStyle = function getDefaultWrapperStyle() {
var height = void 0,
width = void 0;
if (itemSize === 'M' && showStarboard === true) {
height = '' + heightItemM;
width = '' + (widthItemM + widthStarboardM);
}
if (itemSize === 'M' && showStarboard === false) {
height = '' + heightItemM;
width = '' + widthItemM;
}
if (itemSize === 'L' && showStarboard === true) {
height = '' + heightItemL;
width = '' + (widthItemL + widthStarboardL);
}
if (itemSize === 'L' && showStarboard === false) {
height = '' + heightItemL;
width = '' + widthItemL;
}
var other = void 0;
if (show) {
other = {
opacity: 1
};
} else {
other = {
opacity: '0',
height: '0',
padding: '0',
overflow: 'hidden'
};
}
return (0, _extends3.default)({
marginBottom: '1rem',
display: 'flex',
flexDirection: 'column',
position: 'relative',
alignSelf: 'center',
justifySelf: 'center',
transition: 'width ' + sizeSpeed + ' ease-in-out, height ' + sizeSpeed + ' ease-in-out',
height: height + 'px',
width: width + 'px'
}, other);
};
var getDefaultSternStyle = function getDefaultSternStyle() {
return {
zIndex: '1',
margin: '0.375rem 0',
background: 'rgba(246, 246, 246, 0.5)',
borderRadius: '0.5rem',
width: '100%'
};
};
var getDefaultImageStyle = function getDefaultImageStyle() {
var height = void 0,
width = void 0;
if (itemSize === 'M') {
height = '' + heightImageM;
width = '' + widthImageM;
}
if (itemSize === 'L') {
height = '' + heightImageL;
width = '' + widthImageL;
}
return {
alignSelf: 'flex-start',
justifySelf: 'center',
cursor: 'pointer',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
objectFit: 'contain',
transition: 'transform 0.25s ease-in-out, width ' + sizeSpeed + ' ease-in-out, height ' + sizeSpeed + ' ease-in-out',
height: height + 'px',
width: width + 'px'
};
};
var getImageProps = function getImageProps() {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick = _ref2.onClick,
className = _ref2.className,
style = _ref2.style,
props = (0, _objectWithoutProperties3.default)(_ref2, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
e.stopPropagation();
_onClick && _onClick.apply(undefined, [e].concat(args));
},
style: (0, _extends3.default)({}, getDefaultImageStyle(), style),
className: imageClass
}, props);
};
var getSternProps = function getSternProps() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick2 = _ref3.onClick,
className = _ref3.className,
style = _ref3.style,
props = (0, _objectWithoutProperties3.default)(_ref3, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
e.stopPropagation();
_onClick2 && _onClick2.apply(undefined, [e].concat(args));
},
style: (0, _extends3.default)({}, getDefaultSternStyle(), style),
className: sternClass
}, props);
};
var getWrapperProps = function getWrapperProps() {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick3 = _ref4.onClick,
className = _ref4.className,
style = _ref4.style,
props = (0, _objectWithoutProperties3.default)(_ref4, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
e.stopPropagation();
_onClick3 && _onClick3.apply(undefined, [e].concat(args));
},
style: (0, _extends3.default)({}, getDefaultWrapperStyle(), style),
className: className + ' ' + wrapperClass
}, props);
};
var getStarboardProps = function getStarboardProps() {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _onClick4 = _ref5.onClick,
className = _ref5.className,
style = _ref5.style,
props = (0, _objectWithoutProperties3.default)(_ref5, ['onClick', 'className', 'style']);
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
args[_key4 - 1] = arguments[_key4];
}
e.stopPropagation();
_onClick4 && _onClick4.apply(undefined, [e].concat(args));
},
style: (0, _extends3.default)({}, getDefaultStarboardStyle(), style),
className: starboardClass
}, props);
};
return _react2.default.createElement(
'div',
{
className: containerClass,
style: (0, _extends3.default)({
display: 'flex',
flexWrap: 'wrap'
}, style)
},
items.map(function (item) {
return renderItem({
item: item,
imageClass: imageClass,
getSternProps: getSternProps,
getImageProps: getImageProps,
getStarboardProps: getStarboardProps,
getWrapperProps: getWrapperProps
});
})
);
};
GridBox.defaultProps = {
renderItem: function renderItem(_ref6) {
var item = _ref6.item,
getWrapperProps = _ref6.getWrapperProps,
getSternProps = _ref6.getSternProps,
getStarboardProps = _ref6.getStarboardProps,
getImageProps = _ref6.getImageProps;
return _react2.default.createElement(
'div',
(0, _extends3.default)({
key: item.id
}, getWrapperProps({
style: { margin: '0 1rem' }
})),
_react2.default.createElement(
'div',
{ style: { display: 'flex', justifyContent: 'space-between' } },
_react2.default.createElement(
'div',
(0, _extends3.default)({}, getImageProps({ style: { backgroundImage: 'url(' + item.imageS + ')' } })),
'IMAGE'
),
_react2.default.createElement(
'div',
(0, _extends3.default)({}, getStarboardProps({
style: {
writingMode: 'vertical-rl'
}
})),
'STARBOARD'
)
),
_react2.default.createElement(
'div',
(0, _extends3.default)({}, getSternProps()),
'STERN || ',
item.title
)
);
},
items: (0, _from2.default)({ length: 50 }, function (_, i) {
return {
title: 'item' + i,
id: i,
imageS: 'http://via.placeholder.com/210x300'
};
}),
itemSize: 'M',
showStarboard: false,
page: 'gallery',
show: true
};
var enhance = (0, _recompose.compose)();
exports.default = enhance(GridBox);