@raona/components
Version:
React components used at Raona to work with SPFx
135 lines (134 loc) • 8.67 kB
JavaScript
;
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 __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");
// import { SlickSliderProps, SlickSliderState, Card } from '..';
// import { CardEntity, AlternateNewsBodyStyles, NewsBodyStyles } from '../../';
var react_masonry_component_1 = require("react-masonry-component");
// import { Bind } from '@raona/sp';
var react_slick_1 = require("react-slick");
var Cardx4_1 = require("./Cardx4");
var Bind_1 = require("@raona/sp/dist/decorators/Bind");
var Card_1 = require("../cards/Card");
var MasonrySlider = /** @class */ (function (_super) {
__extends(MasonrySlider, _super);
function MasonrySlider() {
return _super !== null && _super.apply(this, arguments) || this;
}
MasonrySlider.prototype.handleSelect = function (item, selectedItemIndex) {
var handleSelect = this.props.handleSelect;
if (handleSelect)
handleSelect(item, selectedItemIndex);
};
MasonrySlider.prototype.handleAddToCatalog = function (item, selectedItemIndex) {
var handleAddToCatalog = this.props.handleAddToCatalog;
if (handleAddToCatalog)
handleAddToCatalog(item, selectedItemIndex);
};
MasonrySlider.prototype.handleShare = function (item, selectedItemIndex) {
var handleShare = this.props.handleShare;
if (handleShare)
handleShare(item, selectedItemIndex);
};
MasonrySlider.prototype.handleDeleteItem = function (item, selectedItemIndex) {
var handleDelete = this.props.handleDelete;
if (handleDelete)
handleDelete(item, selectedItemIndex);
};
MasonrySlider.prototype.stackCards = function () {
var _a = this.props, itemsList = _a.itemsList, groupRows = _a.groupRows, groupColumns = _a.groupColumns, defaultImageUrl = _a.defaultImageUrl, openItemsOnNewPage = _a.openItemsOnNewPage, handleAddToCatalog = _a.handleAddToCatalog, handleShare = _a.handleShare, handleSelect = _a.handleSelect, handleDelete = _a.handleDelete, handleSaveAsFavorite = _a.handleSaveAsFavorite, alternateNewsBodyStyle = _a.alternateNewsBodyStyle, newsBodyStyle = _a.newsBodyStyle;
var size = itemsList.length;
var resultString = "";
var resultsHTML = new HTMLElement();
for (var rows = 0; rows < groupRows; rows++) {
resultString += '<Masonry>';
for (var columns = 0; columns < groupColumns; columns++) {
if (itemsList[(rows * groupColumns) + columns + 1]) {
resultString += React.createElement(Card_1.Card, { item: itemsList[(rows * groupColumns) + columns + 1], alternateNewsBodyStyle: alternateNewsBodyStyle, newsBodyStyle: newsBodyStyle, itemIndex: rows + columns + 1, handleAddToCatalog: handleAddToCatalog && this.handleAddToCatalog, handleShareClick: handleShare && this.handleShare, handleDeleteClick: handleDelete && this.handleDeleteItem, handleCheckBoxClick: handleSelect && this.handleSelect, handleSaveAsFavorite: handleSaveAsFavorite, defaultImageUrl: defaultImageUrl, openItemsOnNewPage: openItemsOnNewPage, addToCatalogToolTipText: 'Add to catalog', saveFavoriteToolTipText: 'Add to favorites', deleteToolTipText: 'Delete product' }) + " ";
}
}
resultString += '</Masonry>';
}
resultsHTML.innerHTML = resultString;
return new HTMLElement();
};
MasonrySlider.prototype.sliceinchuncks = function (array, size) {
var chunked_arr = [[]];
var index = 0;
while (index < array.length) {
chunked_arr.push(array.slice(index, index + size));
index += size;
}
return chunked_arr;
};
MasonrySlider.prototype.render = function () {
var _this = this;
var itemsList = this.props.itemsList;
var itemsLatest = itemsList.slice(1);
var itemBig = itemsList[0];
var itemsCardx4 = this.sliceinchuncks(itemsLatest, 4);
return (React.createElement("div", { className: "section" },
React.createElement("div", { className: "section__wrapper" },
React.createElement("h3", { className: "section__title" }, "\u00DAltimas noticias"),
React.createElement("div", { className: "cardZone cardZone--limit cardSlider" },
React.createElement(react_slick_1.default, { centerMode: true, infinite: true, slidesToShow: 2 },
React.createElement(react_masonry_component_1.default, null,
React.createElement("div", { className: "card card--x4" },
React.createElement("div", { className: "card__inner card__inner--x4" },
React.createElement("div", { className: "card__bg card__bg--color02" },
React.createElement("img", { className: "card__img", src: "img/01.png" }),
React.createElement("div", { className: "card__shadow" })),
React.createElement("div", { className: "card__content card__content--x4" },
React.createElement("span", { className: "card__category card__category--x4" }, itemBig.category),
React.createElement("h2", { className: "card__title card__title--x4" }, itemBig.title),
React.createElement("div", { className: "card__meta" },
React.createElement("span", { className: "card__metaItem" },
React.createElement("i", { className: "fas fa-bookmark" })),
React.createElement("div", { className: "card__metaRight" },
React.createElement("span", { className: "card__metaItem" },
React.createElement("i", { className: "icon-heart" }),
itemBig.Nlikes),
React.createElement("span", { className: "card__metaItem" },
React.createElement("i", { className: "icon-bubble" }),
itemBig.Ncomments)))))),
itemsCardx4.map(function (i, index) {
if (index % 4 == 0) {
return (React.createElement(Cardx4_1.Cardx4, { itemsList: i, defaultImageUrl: _this.props.defaultImageUrl }));
}
})))),
React.createElement("p", { className: "viewMore viewMore--center" },
React.createElement("a", { href: "#" }, "Ver M\u00E1s +")))));
};
__decorate([
Bind_1.Bind()
], MasonrySlider.prototype, "handleSelect", null);
__decorate([
Bind_1.Bind()
], MasonrySlider.prototype, "handleAddToCatalog", null);
__decorate([
Bind_1.Bind()
], MasonrySlider.prototype, "handleShare", null);
__decorate([
Bind_1.Bind()
], MasonrySlider.prototype, "handleDeleteItem", null);
return MasonrySlider;
}(React.Component));
exports.MasonrySlider = MasonrySlider;