UNPKG

@raona/components

Version:

React components used at Raona to work with SPFx

79 lines (78 loc) 4.71 kB
"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 __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;