@raona/components
Version:
React components used at Raona to work with SPFx
79 lines (78 loc) • 4.71 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");
var react_1 = require("react");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var react_slick_1 = require("react-slick");
var sp_1 = require("@raona/sp");
// Import css files
require("slick-carousel/slick/slick.css");
require("slick-carousel/slick/slick-theme.css");
var RelatedPeople = /** @class */ (function (_super) {
__extends(RelatedPeople, _super);
function RelatedPeople(props) {
var _this = _super.call(this, props) || this;
_this.ref = Utilities_1.createRef();
_this.state = { calculating: true, slidesToShow: 5 };
return _this;
}
RelatedPeople.prototype.checkNumberSlides = function () {
var ancho = this.ref.current.offsetWidth;
this.setState({
slidesToShow: Math.floor(ancho / 49),
calculating: false
});
};
RelatedPeople.prototype.componentDidMount = function () {
this.checkNumberSlides();
window.addEventListener('resize', this.checkNumberSlides, true);
};
RelatedPeople.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.checkNumberSlides);
};
RelatedPeople.prototype.render = function () {
var _a = this.props, relatedPeople = _a.relatedPeople, absoluteUrl = _a.absoluteUrl, openUserProfile = _a.openUserProfile;
var _b = this.state, calculating = _b.calculating, slidesToShow = _b.slidesToShow;
return (React.createElement(React.Fragment, null,
calculating &&
React.createElement("div", { className: "people", ref: this.ref }),
!calculating && relatedPeople.length <= slidesToShow &&
React.createElement("div", { className: "people", ref: this.ref }, relatedPeople.map(function (person) {
return (React.createElement("span", { onClick: function () { return openUserProfile && openUserProfile(person.Email); }, title: person.Title, className: "imgRounded imgRounded--link imgRounded--smallM", style: {
backgroundImage: "url(" + absoluteUrl + "/_layouts/15/userphoto.aspx?size=L&username=" + person.Email + ")"
} }));
})),
!calculating && relatedPeople.length > slidesToShow &&
React.createElement("div", { className: "people people--slider", ref: this.ref },
React.createElement(react_slick_1.default, { swipeToSlide: true, showArrows: true, slidesToShow: slidesToShow, infinite: false, dots: false, centerMode: false, width: this.ref.current.offsetWidth ? this.ref.current.offsetWidth : 150 }, relatedPeople.map(function (person) {
return (React.createElement("div", null,
React.createElement("span", { onClick: function () { return openUserProfile && openUserProfile(person.Email); }, title: person.Title, className: "imgRounded imgRounded--link imgRounded--smallM", style: {
backgroundImage: "url(" + absoluteUrl + "/_layouts/15/userphoto.aspx?size=L&username=" + person.Email + ")"
} })));
})))));
};
__decorate([
sp_1.Bind()
], RelatedPeople.prototype, "checkNumberSlides", null);
return RelatedPeople;
}(react_1.Component));
exports.default = RelatedPeople;