@up-group-ui/react-controls/dist/Components/Display/Carousel/UpCarousel.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var React = (0, tslib_1.__importStar)(require("react"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var useHoverIntent_1 = (0, tslib_1.__importDefault)(require("../../../Common/hooks/useHoverIntent"));
var framer_motion_1 = require("framer-motion");
var typestyle_1 = require("typestyle");
var styles_1 = require("./styles");
var defaultRenderItem = function (isOpen, item) {
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: item.title }, void 0), isOpen && (0, jsx_runtime_1.jsx)("p", { children: item.description }, void 0)] }, void 0));
};
var Item = function (_a) {
    var item = _a.item, currentItem = _a.currentItem, setCurrentItem = _a.setCurrentItem, customStyles = _a.customStyles, renderItem = _a.renderItem, props = (0, tslib_1.__rest)(_a, ["item", "currentItem", "setCurrentItem", "customStyles", "renderItem"]);
    var isOpen = currentItem && item.key === currentItem.key;
    var handlers = (0, useHoverIntent_1.default)(function () { return setCurrentItem(item); }, function () { return isOpen && setCurrentItem(null); }, !currentItem);
    var currentRenderItem = renderItem || defaultRenderItem;
    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.li, (0, tslib_1.__assign)({ animate: true, transition: { duration: 0.4, ease: [0.37, 0.04, 0.2, 1] }, className: (0, classnames_1.default)('up-carousel-item', (0, typestyle_1.style)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, styles_1.getItemStyles)({ customStyles: customStyles }, currentItem, item)), (0, styles_1.getCustomStyle)('item', { customStyles: customStyles }, currentItem, item)))) }, props, handlers, { onClick: function (e) { return item.action(item); } }, { children: currentRenderItem(isOpen, item) }), void 0));
};
var UpCarousel = function (props) {
    var _a = React.useState(null), currentItem = _a[0], setCurrentItem = _a[1];
    return ((0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-carousel', (0, typestyle_1.style)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, styles_1.getListStyles)(props, currentItem)), (0, styles_1.getCustomStyle)('list', props, currentItem)))) }, { children: props.items &&
            props.items.map(function (item) { return ((0, jsx_runtime_1.jsx)(Item, { item: item, currentItem: currentItem, customStyles: props.customStyles, setCurrentItem: setCurrentItem, renderItem: props.renderItem }, item.color)); }) }), void 0));
};
exports.default = UpCarousel;
//# sourceMappingURL=UpCarousel.js.map