react-misc-toolbox
Version:
[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll
238 lines (198 loc) • 15.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SC = undefined;
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
var _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 ']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n grid-area: belt;\n '], ['\n grid-area: belt;\n ']),
_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 ']),
_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 ']),
_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 ']); /*
- allow calling item externally
- abstract the media query
*/
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _helperFunctions = require('./helperFunctions');
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _ResizeListener = require('./ResizeListener');
var _Button = require('./Button');
var _Button2 = _interopRequireDefault(_Button);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var SC = exports.SC = {
Image: _styledComponents2.default.div(_templateObject),
Belt: _styledComponents2.default.div(_templateObject2),
Nav: (0, _styledComponents2.default)(_Button.StyledButton)(_templateObject3),
Info: _styledComponents2.default.div(_templateObject4),
Container: _styledComponents2.default.div(_templateObject5, function (_ref) {
var widthThreshold = _ref.widthThreshold;
return widthThreshold;
}, function (_ref2) {
var widthThreshold = _ref2.widthThreshold;
return widthThreshold;
})
};
var Showcase = function Showcase(_ref3) {
var _ref3$externallyLoade = _ref3.externallyLoadedId,
externallyLoadedId = _ref3$externallyLoade === undefined ? '' : _ref3$externallyLoade,
items = _ref3.items,
children = _ref3.children;
var _useReducer = (0, _react.useReducer)(function (state, newState) {
return (0, _extends3.default)({}, state, newState);
}, {
activeId: externallyLoadedId ? externallyLoadedId : items[0].id,
beltIsRendered: true
}),
_useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
state = _useReducer2[0],
updateState = _useReducer2[1];
var activeId = state.activeId,
beltIsRendered = state.beltIsRendered;
(0, _react.useEffect)(function () {
if (externallyLoadedId.length > 0) {
updateState({ activeId: externallyLoadedId });
}
}, [externallyLoadedId]);
var ids = items.map(function (item) {
return item.id;
});
var nextId = ids.indexOf(activeId) === ids.length - 1 ? ids[0] : ids[ids.indexOf(activeId) + 1];
var prevId = ids.indexOf(activeId) === 0 ? ids[ids.length - 1] : ids[ids.indexOf(activeId) - 1];
var nextItem = items.find(function (item) {
return item.id === nextId;
});
var prevItem = items.find(function (item) {
return item.id === prevId;
});
var getContainerProps = function getContainerProps(_ref4) {
var style = _ref4.style,
className = _ref4.className,
_onClick = _ref4.onClick,
props = (0, _objectWithoutProperties3.default)(_ref4, ['style', 'className', 'onClick']);
return (0, _extends3.default)({
style: style,
className: className ? className + ' showcase__container' : 'showcase__container',
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));
}
}, props);
};
var getImageProps = function getImageProps() {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var style = _ref5.style,
className = _ref5.className,
_onClick2 = _ref5.onClick,
props = (0, _objectWithoutProperties3.default)(_ref5, ['style', 'className', 'onClick']);
return (0, _extends3.default)({
style: style,
className: className ? className + ' showcase__image' : 'showcase__image',
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));
}
}, props);
};
var getInfoProps = function getInfoProps() {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var style = _ref6.style,
className = _ref6.className,
_onClick3 = _ref6.onClick,
props = (0, _objectWithoutProperties3.default)(_ref6, ['style', 'className', 'onClick']);
return (0, _extends3.default)({
style: style,
className: className ? className + ' showcase__info' : 'showcase__info',
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));
}
}, props);
};
var getBeltProps = function getBeltProps() {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var style = _ref7.style,
className = _ref7.className,
_onClick4 = _ref7.onClick,
props = (0, _objectWithoutProperties3.default)(_ref7, ['style', 'className', 'onClick']);
return (0, _extends3.default)({
style: style,
className: className ? className + ' showcase__belt' : 'showcase__belt',
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));
}
}, props);
};
var getNavProps = function getNavProps() {
var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var style = _ref8.style,
className = _ref8.className,
_onClick5 = _ref8.onClick,
cardinal = _ref8.cardinal,
props = (0, _objectWithoutProperties3.default)(_ref8, ['style', 'className', 'onClick', 'cardinal']);
return (0, _extends3.default)({
style: (0, _extends3.default)({ gridArea: cardinal + '-nav' }, style),
className: className ? className + ' showcase__nav showcase__' + cardinal + '-nav' : 'showcase__nav showcase__' + cardinal + '-nav',
onClick: function onClick(e) {
for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
args[_key5 - 1] = arguments[_key5];
}
e.stopPropagation();
if (cardinal === 'w') {
updateState({ activeId: prevId });
}
if (cardinal === 'e') {
updateState({ activeId: nextId });
}
_onClick5 && _onClick5.apply(undefined, [e].concat(args));
}
}, props);
};
return _react2.default.createElement(
_react.Fragment,
null,
items.map(function (item, i) {
return item.id === activeId ? _react2.default.createElement(
_react.Fragment,
{ key: i },
children({
getContainerProps: getContainerProps,
getImageProps: getImageProps,
getBeltProps: getBeltProps,
getNavProps: getNavProps,
getInfoProps: getInfoProps,
beltIsRendered: beltIsRendered,
updateState: updateState,
item: item,
nextItem: nextItem,
prevItem: prevItem
})
) : null;
})
);
};
Showcase.propTypes = {};
//const enhance = compose()
// onlyUpdateForKeys([``])
exports.default = Showcase;