@raona/components/dist/components/SlickSlider/SlickSlider.js

React components used at Raona to work with SPFx

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("react");
var react_slick_1 = require("react-slick");
var Bind_1 = require("@raona/sp/dist/decorators/Bind");
var stylesConstants_1 = require("../cards/stylesConstants");
var Card_1 = require("../cards/Card");
var SlickSlider = /** @class */ (function (_super) {
    __extends(SlickSlider, _super);
    function SlickSlider(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            numberSlides: 4,
            numberScroll: _this.props.slidesToScroll ? _this.props.slidesToScroll : 1
        };
        return _this;
    }
    SlickSlider.prototype.resizeListener = function () {
        this.checkNumberSlides();
        if (!this.props.slidesToScroll || this.props.slidesToScroll > 1) {
            this.checkNumberScroll();
        }
    };
    SlickSlider.prototype.componentDidMount = function () {
        this.resizeListener();
        window.addEventListener('resize', this.resizeListener, true);
    };
    SlickSlider.prototype.checkNumberScroll = function () {
        var _a = this.props, cardWidth = _a.cardWidth, componentRef = _a.componentRef;
        var ancho = componentRef.current.offsetWidth;
        this.props.anchorExists && this.props.anchorExists();
        var numberScroll = Math.min(Math.floor(ancho / cardWidth), this.props.slidesToScroll ? this.props.slidesToScroll : 1);
        this.setState({
            numberScroll: numberScroll
        });
    };
    SlickSlider.prototype.checkNumberSlides = function () {
        var _a = this.props, cardWidth = _a.cardWidth, componentRef = _a.componentRef;
        var ancho = componentRef.current.offsetWidth;
        this.props.anchorExists && this.props.anchorExists();
        var numberSlides = Math.max(Math.floor(ancho / cardWidth), 1);
        this.setState({
            numberSlides: numberSlides
        });
    };
    SlickSlider.prototype.componentWillUnmount = function () {
        window.removeEventListener('resize', this.checkNumberSlides);
        if (!this.props.slidesToScroll || this.props.slidesToScroll < 2) {
            window.removeEventListener('resize', this.checkNumberScroll);
        }
    };
    SlickSlider.prototype.handleSelect = function (item, selectedItemIndex) {
        var handleSelect = this.props.handleSelect;
        if (handleSelect)
            handleSelect(item, selectedItemIndex);
    };
    SlickSlider.prototype.handleAddToCatalog = function (item, selectedItemIndex) {
        var handleAddToCatalog = this.props.handleAddToCatalog;
        if (handleAddToCatalog)
            handleAddToCatalog(item, selectedItemIndex);
    };
    SlickSlider.prototype.handleShare = function (item, selectedItemIndex) {
        var handleShare = this.props.handleShare;
        if (handleShare)
            handleShare(item, selectedItemIndex);
    };
    SlickSlider.prototype.handleDeleteItem = function (item, selectedItemIndex) {
        var handleDelete = this.props.handleDelete;
        if (handleDelete)
            handleDelete(item, selectedItemIndex);
    };
    SlickSlider.prototype.render = function () {
        var _this = this;
        //VARS
        var _a = this.props, sectionTitle = _a.sectionTitle, anchorIdentificator = _a.anchorIdentificator, itemsList = _a.itemsList, customItems = _a.customItems, defaultImageUrl = _a.defaultImageUrl, openItemsOnNewPage = _a.openItemsOnNewPage, slickerSlideStyle = _a.slickerSlideStyle, showArrows = _a.showArrows, swipeToSlide = _a.swipeToSlide, showDots = _a.showDots, variableWidth = _a.variableWidth, componentRef = _a.componentRef, useLazyLoad = _a.useLazyLoad, showImage = _a.showImage, showComments = _a.showComments, sectionTitleTranslated = _a.sectionTitleTranslated, textLink = _a.textLink, infinite = _a.infinite, 
        // CARD STYLES
        cardStyle = _a.cardStyle, newsBodyStyle = _a.newsBodyStyle, newsMetaStyle = _a.newsMetaStyle, alternateNewsBodyStyle = _a.alternateNewsBodyStyle, eventBodyStyles = _a.eventBodyStyles, eventDetailedBodyStyles = _a.eventDetailedBodyStyles, vacancyBodyStyles = _a.vacancyBodyStyles, videoBodyStyles = _a.videoBodyStyles, blogBodyStyles = _a.blogBodyStyles;
        //FUNCTIONS
        var _b = this.props, handleAddToCatalog = _b.handleAddToCatalog, handleShare = _b.handleShare, handleSelect = _b.handleSelect, handleDelete = _b.handleDelete, handleSaveAsFavorite = _b.handleSaveAsFavorite, handleLike = _b.handleLike, seeAll = _b.seeAll, redirectUrl = _b.redirectUrl, handleCardHover = _b.handleCardHover, handleCardClick = _b.handleCardClick;
        var styles = slickerSlideStyle ? __assign({}, slickerSlideStyle) : __assign({}, stylesConstants_1.slickerSlideStylesConstant); // Default Style for this component
        //STATE
        var _c = this.state, numberSlides = _c.numberSlides, numberScroll = _c.numberScroll;
        if (customItems) {
            return (React.createElement("div", { id: anchorIdentificator + sectionTitle, ref: componentRef },
                React.createElement("div", null,
                    sectionTitle && React.createElement("h3", { className: styles.title, onClick: function () { return seeAll ? seeAll(sectionTitle) : redirectUrl ? redirectUrl() : {}; } },
                        React.createElement("span", null, sectionTitleTranslated ? sectionTitleTranslated : sectionTitle)),
                    React.createElement("div", { className: styles.cardslider },
                        React.createElement(react_slick_1.default, { swipeToSlide: swipeToSlide, showArrows: showArrows, lazyLoad: useLazyLoad, slidesToShow: numberSlides < customItems.length ? numberSlides : customItems.length, slidesToScroll: numberScroll, infinite: infinite !== undefined ? infinite : customItems.length > numberSlides, dots: showDots, variableWidth: variableWidth }, customItems)))));
        }
        var cards = itemsList.map(function (i, index) {
            return (React.createElement(Card_1.Card, { item: i, itemIndex: index, textLink: textLink, handleAddToCatalog: handleAddToCatalog && _this.handleAddToCatalog, handleShareClick: handleShare && _this.handleShare, handleDeleteClick: handleDelete && _this.handleDeleteItem, handleCheckBoxClick: handleSelect && _this.handleSelect, handleSaveAsFavorite: handleSaveAsFavorite, handleLike: handleLike, defaultImageUrl: defaultImageUrl, openItemsOnNewPage: openItemsOnNewPage, addToCatalogToolTipText: 'Add to catalog', saveFavoriteToolTipText: 'Add to favorites', deleteToolTipText: 'Delete product', showImage: showImage, showComments: showComments, useLazyload: false, handleCardHover: function () { return handleCardHover && handleCardHover(i, index); }, handleCardClick: function () { return handleCardClick && handleCardClick(i); }, cardStyle: cardStyle, newsBodyStyle: newsBodyStyle, newsMetaStyle: newsMetaStyle, alternateNewsBodyStyle: alternateNewsBodyStyle, eventBodyStyles: eventBodyStyles, eventDetailedBodyStyles: eventDetailedBodyStyles, vacancyBodyStyles: vacancyBodyStyles, videoBodyStyles: videoBodyStyles, blogBodyStyles: blogBodyStyles }));
        });
        return (React.createElement("div", { id: anchorIdentificator + sectionTitle, ref: componentRef },
            React.createElement("div", null,
                sectionTitle && React.createElement("h3", { className: styles.title, onClick: function () { return seeAll ? seeAll(sectionTitle) : redirectUrl ? redirectUrl() : {}; } },
                    React.createElement("span", null, sectionTitleTranslated ? sectionTitleTranslated : sectionTitle)),
                React.createElement("div", { className: styles.cardslider },
                    React.createElement(react_slick_1.default, { swipeToSlide: swipeToSlide, showArrows: showArrows, lazyLoad: useLazyLoad, slidesToShow: numberSlides < cards.length ? numberSlides : cards.length, slidesToScroll: numberScroll, infinite: infinite !== undefined ? infinite : cards.length > numberSlides, dots: showDots, variableWidth: variableWidth }, cards)))));
    };
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "resizeListener", null);
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "checkNumberScroll", null);
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "checkNumberSlides", null);
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "handleSelect", null);
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "handleAddToCatalog", null);
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "handleShare", null);
    __decorate([
        Bind_1.Bind()
    ], SlickSlider.prototype, "handleDeleteItem", null);
    return SlickSlider;
}(react_1.Component));
exports.SlickSlider = SlickSlider;