31622 lines
1.4 MiB
JavaScript
31622 lines
1.4 MiB
JavaScript
|
define("e23c0bf2-75eb-48f6-9f55-bafc043aab86_0.0.1", ["@microsoft/sp-core-library","react","react-dom","@microsoft/sp-webpart-base","@microsoft/sp-http","workingWithStrings"], function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_378__, __WEBPACK_EXTERNAL_MODULE_392__) { return /******/ (function(modules) { // webpackBootstrap
|
||
|
|
/******/ // The module cache
|
||
|
|
/******/ var installedModules = {};
|
||
|
|
/******/
|
||
|
|
/******/ // The require function
|
||
|
|
/******/ function __webpack_require__(moduleId) {
|
||
|
|
/******/
|
||
|
|
/******/ // Check if module is in cache
|
||
|
|
/******/ if(installedModules[moduleId])
|
||
|
|
/******/ return installedModules[moduleId].exports;
|
||
|
|
/******/
|
||
|
|
/******/ // Create a new module (and put it into the cache)
|
||
|
|
/******/ var module = installedModules[moduleId] = {
|
||
|
|
/******/ exports: {},
|
||
|
|
/******/ id: moduleId,
|
||
|
|
/******/ loaded: false
|
||
|
|
/******/ };
|
||
|
|
/******/
|
||
|
|
/******/ // Execute the module function
|
||
|
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||
|
|
/******/
|
||
|
|
/******/ // Flag the module as loaded
|
||
|
|
/******/ module.loaded = true;
|
||
|
|
/******/
|
||
|
|
/******/ // Return the exports of the module
|
||
|
|
/******/ return module.exports;
|
||
|
|
/******/ }
|
||
|
|
/******/
|
||
|
|
/******/
|
||
|
|
/******/ // expose the modules object (__webpack_modules__)
|
||
|
|
/******/ __webpack_require__.m = modules;
|
||
|
|
/******/
|
||
|
|
/******/ // expose the module cache
|
||
|
|
/******/ __webpack_require__.c = installedModules;
|
||
|
|
/******/
|
||
|
|
/******/ // __webpack_public_path__
|
||
|
|
/******/ __webpack_require__.p = "";
|
||
|
|
/******/
|
||
|
|
/******/ // Load entry module and return exports
|
||
|
|
/******/ return __webpack_require__(0);
|
||
|
|
/******/ })
|
||
|
|
/************************************************************************/
|
||
|
|
/******/ ([
|
||
|
|
/* 0 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || function (d, b) {
|
||
|
|
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var ReactDom = __webpack_require__(3);
|
||
|
|
var sp_core_library_1 = __webpack_require__(1);
|
||
|
|
var sp_webpart_base_1 = __webpack_require__(4);
|
||
|
|
var strings = __webpack_require__(392);
|
||
|
|
var WorkingWith_1 = __webpack_require__(393);
|
||
|
|
var WorkingWithWebPart = (function (_super) {
|
||
|
|
__extends(WorkingWithWebPart, _super);
|
||
|
|
function WorkingWithWebPart(context) {
|
||
|
|
return _super.call(this) || this;
|
||
|
|
}
|
||
|
|
WorkingWithWebPart.prototype.render = function () {
|
||
|
|
var element = React.createElement(WorkingWith_1.default, {
|
||
|
|
numberOfPeople: this.properties.numberOfPeople,
|
||
|
|
title: this.properties.title,
|
||
|
|
httpClient: this.context.spHttpClient,
|
||
|
|
siteUrl: this.context.pageContext.web.absoluteUrl
|
||
|
|
});
|
||
|
|
ReactDom.render(element, this.domElement);
|
||
|
|
};
|
||
|
|
Object.defineProperty(WorkingWithWebPart.prototype, "dataVersion", {
|
||
|
|
get: function () {
|
||
|
|
return sp_core_library_1.Version.parse('1.0');
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
WorkingWithWebPart.prototype.getPropertyPaneConfiguration = function () {
|
||
|
|
return {
|
||
|
|
pages: [
|
||
|
|
{
|
||
|
|
header: {
|
||
|
|
description: strings.PropertyPaneDescription
|
||
|
|
},
|
||
|
|
groups: [
|
||
|
|
{
|
||
|
|
groupName: strings.ViewGroupName,
|
||
|
|
groupFields: [
|
||
|
|
sp_webpart_base_1.PropertyPaneTextField('title', {
|
||
|
|
label: strings.TitleFieldLabel
|
||
|
|
}),
|
||
|
|
sp_webpart_base_1.PropertyPaneSlider('numberOfPeople', {
|
||
|
|
label: strings.NumberOfPeopleFieldLabel,
|
||
|
|
min: 1,
|
||
|
|
max: 10,
|
||
|
|
step: 1
|
||
|
|
})
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
};
|
||
|
|
return WorkingWithWebPart;
|
||
|
|
}(sp_webpart_base_1.BaseClientSideWebPart));
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.default = WorkingWithWebPart;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 1 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 2 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 3 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 4 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 5 */,
|
||
|
|
/* 6 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* WARNING: This entry should NOT be imported for production purposes. This entry forces every control to be
|
||
|
|
* parsed and available at load time, which is not necessary for most cases.
|
||
|
|
*/
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(7));
|
||
|
|
__export(__webpack_require__(154));
|
||
|
|
__export(__webpack_require__(171));
|
||
|
|
__export(__webpack_require__(59));
|
||
|
|
__export(__webpack_require__(180));
|
||
|
|
__export(__webpack_require__(184));
|
||
|
|
__export(__webpack_require__(194));
|
||
|
|
__export(__webpack_require__(206));
|
||
|
|
__export(__webpack_require__(54));
|
||
|
|
__export(__webpack_require__(210));
|
||
|
|
__export(__webpack_require__(214));
|
||
|
|
__export(__webpack_require__(256));
|
||
|
|
__export(__webpack_require__(274));
|
||
|
|
__export(__webpack_require__(290));
|
||
|
|
__export(__webpack_require__(135));
|
||
|
|
__export(__webpack_require__(300));
|
||
|
|
__export(__webpack_require__(305));
|
||
|
|
__export(__webpack_require__(50));
|
||
|
|
__export(__webpack_require__(235));
|
||
|
|
__export(__webpack_require__(141));
|
||
|
|
__export(__webpack_require__(187));
|
||
|
|
__export(__webpack_require__(189));
|
||
|
|
__export(__webpack_require__(132));
|
||
|
|
__export(__webpack_require__(150));
|
||
|
|
__export(__webpack_require__(248));
|
||
|
|
__export(__webpack_require__(306));
|
||
|
|
__export(__webpack_require__(311));
|
||
|
|
__export(__webpack_require__(314));
|
||
|
|
__export(__webpack_require__(265));
|
||
|
|
__export(__webpack_require__(294));
|
||
|
|
__export(__webpack_require__(318));
|
||
|
|
__export(__webpack_require__(281));
|
||
|
|
__export(__webpack_require__(334));
|
||
|
|
__export(__webpack_require__(340));
|
||
|
|
__export(__webpack_require__(344));
|
||
|
|
__export(__webpack_require__(349));
|
||
|
|
__export(__webpack_require__(353));
|
||
|
|
__export(__webpack_require__(242));
|
||
|
|
__export(__webpack_require__(68));
|
||
|
|
__export(__webpack_require__(357));
|
||
|
|
__export(__webpack_require__(197));
|
||
|
|
__export(__webpack_require__(362));
|
||
|
|
__export(__webpack_require__(366));
|
||
|
|
__export(__webpack_require__(10));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 7 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(8));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 8 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(9));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 9 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var ContextualMenu_1 = __webpack_require__(54);
|
||
|
|
var Link_1 = __webpack_require__(150);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var stylesImport = __webpack_require__(170);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var OVERFLOW_KEY = 'overflow';
|
||
|
|
var OVERFLOW_WIDTH = 44;
|
||
|
|
var Breadcrumb = (function (_super) {
|
||
|
|
__extends(Breadcrumb, _super);
|
||
|
|
function Breadcrumb(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._id = Utilities_1.getId('Breadcrumb');
|
||
|
|
_this.state = _this._getStateFromProps(props);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Breadcrumb.prototype.componentDidMount = function () {
|
||
|
|
this._updateItemMeasurements();
|
||
|
|
this._updateRenderedItems();
|
||
|
|
this._events.on(window, 'resize', this._updateRenderedItems);
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
this.setState(this._getStateFromProps(nextProps));
|
||
|
|
this._breadcrumbItemWidths = null;
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype.componentDidUpdate = function (prevProps, prevStates) {
|
||
|
|
if (!this._breadcrumbItemWidths) {
|
||
|
|
this._updateItemMeasurements();
|
||
|
|
this._updateRenderedItems();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, className = _a.className, ariaLabel = _a.ariaLabel;
|
||
|
|
var _b = this.state, isOverflowOpen = _b.isOverflowOpen, overflowAnchor = _b.overflowAnchor, renderedItems = _b.renderedItems, renderedOverflowItems = _b.renderedOverflowItems;
|
||
|
|
var overflowMenuId = this._id + '-overflow';
|
||
|
|
var _c = this.props.onRenderItem, onRenderItem = _c === void 0 ? this._onRenderItem : _c;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb', className, styles.root), ref: 'renderingArea', role: 'navigation', "aria-label": ariaLabel },
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
|
||
|
|
React.createElement("ol", { className: Utilities_1.css('ms-Breadcrumb-list', styles.list) },
|
||
|
|
renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-overflow', styles.overflow), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
|
||
|
|
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Breadcrumb-overflowButton', styles.overflowButton), iconProps: { iconName: 'more' }, onClick: this._onOverflowClicked, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null }),
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Breadcrumb-chevron', styles.chevron), iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }))) : (null),
|
||
|
|
renderedItems.map(function (item, index) { return (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-listItem', styles.listItem), key: item.key || String(index), ref: item.key || String(index) },
|
||
|
|
onRenderItem(item, _this._defaultRenderItem),
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Breadcrumb-chevron', styles.chevron), iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }))); }))),
|
||
|
|
isOverflowOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, { targetElement: overflowAnchor, isBeakVisible: true, items: renderedOverflowItems.map(function (item, index) { return ({
|
||
|
|
name: item.text,
|
||
|
|
key: item.key,
|
||
|
|
onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,
|
||
|
|
href: item.href
|
||
|
|
}); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed })) : (null)));
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._onRenderItem = function (item, defaultRender) {
|
||
|
|
return this._defaultRenderItem(item);
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._defaultRenderItem = function (item) {
|
||
|
|
if (item.onClick || item.href) {
|
||
|
|
return (React.createElement(Link_1.Link, { className: Utilities_1.css('ms-Breadcrumb-itemLink', styles.itemLink), href: item.href, "aria-current": item.isCurrentItem ? 'page' : null, onClick: this._onBreadcrumbClicked.bind(this, item) }, item.text));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return (React.createElement("span", { className: Utilities_1.css('ms-Breadcrumb-item', styles.item) }, item.text));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._onOverflowClicked = function (ev) {
|
||
|
|
this.setState({
|
||
|
|
'isOverflowOpen': !this.state.isOverflowOpen,
|
||
|
|
'overflowAnchor': ev.currentTarget
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._onOverflowDismissed = function (ev) {
|
||
|
|
this.setState({
|
||
|
|
'isOverflowOpen': false,
|
||
|
|
'overflowAnchor': null
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
|
||
|
|
if (item.onClick) {
|
||
|
|
item.onClick(ev, item);
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
'isOverflowOpen': false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._updateItemMeasurements = function () {
|
||
|
|
var items = this.props.items;
|
||
|
|
if (!this._breadcrumbItemWidths) {
|
||
|
|
this._breadcrumbItemWidths = {};
|
||
|
|
}
|
||
|
|
for (var i = 0; i < items.length; i++) {
|
||
|
|
var item = items[i];
|
||
|
|
if (!this._breadcrumbItemWidths[item.key]) {
|
||
|
|
var el = this.refs[item.key];
|
||
|
|
this._breadcrumbItemWidths[item.key] = el.getBoundingClientRect().width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._updateRenderedItems = function () {
|
||
|
|
var _a = this.props, items = _a.items, maxDisplayedItems = _a.maxDisplayedItems;
|
||
|
|
var renderingArea = this.refs.renderingArea;
|
||
|
|
var renderedItems = [];
|
||
|
|
var renderedOverflowItems = [].concat(items);
|
||
|
|
var consumedWidth = 0;
|
||
|
|
var style = window.getComputedStyle(renderingArea);
|
||
|
|
var availableWidth = renderingArea.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
|
||
|
|
availableWidth -= OVERFLOW_WIDTH;
|
||
|
|
var i;
|
||
|
|
var minIndex = Math.max(0, renderedOverflowItems.length - maxDisplayedItems);
|
||
|
|
for (i = renderedOverflowItems.length - 1; i >= minIndex; i--) {
|
||
|
|
var item = renderedOverflowItems[i];
|
||
|
|
var itemWidth = this._breadcrumbItemWidths[item.key];
|
||
|
|
if ((consumedWidth + itemWidth) >= availableWidth) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
consumedWidth += itemWidth;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
renderedItems = renderedOverflowItems.splice(i + 1);
|
||
|
|
this.setState({
|
||
|
|
isOverflowOpen: this.state.isOverflowOpen,
|
||
|
|
overflowAnchor: this.state.overflowAnchor,
|
||
|
|
renderedItems: renderedItems,
|
||
|
|
renderedOverflowItems: renderedOverflowItems,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Breadcrumb.prototype._getStateFromProps = function (nextProps) {
|
||
|
|
return {
|
||
|
|
isOverflowOpen: false,
|
||
|
|
overflowAnchor: null,
|
||
|
|
renderedItems: nextProps.items || [],
|
||
|
|
renderedOverflowItems: null
|
||
|
|
};
|
||
|
|
};
|
||
|
|
return Breadcrumb;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Breadcrumb.defaultProps = {
|
||
|
|
items: [],
|
||
|
|
maxDisplayedItems: 999
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Breadcrumb.prototype, "_onRenderItem", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Breadcrumb.prototype, "_defaultRenderItem", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Breadcrumb.prototype, "_onOverflowClicked", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Breadcrumb.prototype, "_onOverflowDismissed", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
|
||
|
|
exports.Breadcrumb = Breadcrumb;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 10 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(11));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 11 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(12));
|
||
|
|
__export(__webpack_require__(13));
|
||
|
|
__export(__webpack_require__(19));
|
||
|
|
__export(__webpack_require__(21));
|
||
|
|
__export(__webpack_require__(32));
|
||
|
|
__export(__webpack_require__(14));
|
||
|
|
__export(__webpack_require__(33));
|
||
|
|
__export(__webpack_require__(34));
|
||
|
|
__export(__webpack_require__(35));
|
||
|
|
__export(__webpack_require__(36));
|
||
|
|
__export(__webpack_require__(37));
|
||
|
|
__export(__webpack_require__(38));
|
||
|
|
__export(__webpack_require__(16));
|
||
|
|
__export(__webpack_require__(39));
|
||
|
|
__export(__webpack_require__(40));
|
||
|
|
__export(__webpack_require__(41));
|
||
|
|
__export(__webpack_require__(42));
|
||
|
|
__export(__webpack_require__(43));
|
||
|
|
__export(__webpack_require__(31));
|
||
|
|
__export(__webpack_require__(44));
|
||
|
|
__export(__webpack_require__(45));
|
||
|
|
__export(__webpack_require__(46));
|
||
|
|
__export(__webpack_require__(47));
|
||
|
|
__export(__webpack_require__(15));
|
||
|
|
__export(__webpack_require__(48));
|
||
|
|
__export(__webpack_require__(20));
|
||
|
|
__export(__webpack_require__(49));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 12 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled.
|
||
|
|
* This Async helper class solves these issues by tying async code to the lifetime of a disposable object.
|
||
|
|
*
|
||
|
|
* Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a
|
||
|
|
* new instance of the class and remember to call dispose() during your code's dispose handler.
|
||
|
|
*/
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Async = (function () {
|
||
|
|
function Async(parent, onError) {
|
||
|
|
this._timeoutIds = null;
|
||
|
|
this._immediateIds = null;
|
||
|
|
this._intervalIds = null;
|
||
|
|
this._animationFrameIds = null;
|
||
|
|
this._isDisposed = false;
|
||
|
|
this._parent = parent || null;
|
||
|
|
this._onErrorHandler = onError;
|
||
|
|
this._noop = function () { };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Dispose function, clears all async operations.
|
||
|
|
*/
|
||
|
|
Async.prototype.dispose = function () {
|
||
|
|
var id;
|
||
|
|
this._isDisposed = true;
|
||
|
|
this._parent = null;
|
||
|
|
// Clear timeouts.
|
||
|
|
if (this._timeoutIds) {
|
||
|
|
for (id in this._timeoutIds) {
|
||
|
|
if (this._timeoutIds.hasOwnProperty(id)) {
|
||
|
|
this.clearTimeout(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._timeoutIds = null;
|
||
|
|
}
|
||
|
|
// Clear immediates.
|
||
|
|
if (this._immediateIds) {
|
||
|
|
for (id in this._immediateIds) {
|
||
|
|
if (this._immediateIds.hasOwnProperty(id)) {
|
||
|
|
this.clearImmediate(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._immediateIds = null;
|
||
|
|
}
|
||
|
|
// Clear intervals.
|
||
|
|
if (this._intervalIds) {
|
||
|
|
for (id in this._intervalIds) {
|
||
|
|
if (this._intervalIds.hasOwnProperty(id)) {
|
||
|
|
this.clearInterval(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._intervalIds = null;
|
||
|
|
}
|
||
|
|
// Clear animation frames.
|
||
|
|
if (this._animationFrameIds) {
|
||
|
|
for (id in this._animationFrameIds) {
|
||
|
|
if (this._animationFrameIds.hasOwnProperty(id)) {
|
||
|
|
this.cancelAnimationFrame(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._animationFrameIds = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* SetTimeout override, which will auto cancel the timeout during dispose.
|
||
|
|
* @param callback - Callback to execute.
|
||
|
|
* @param duration - Duration in milliseconds.
|
||
|
|
* @returns The setTimeout id.
|
||
|
|
*/
|
||
|
|
Async.prototype.setTimeout = function (callback, duration) {
|
||
|
|
var _this = this;
|
||
|
|
var timeoutId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._timeoutIds) {
|
||
|
|
this._timeoutIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
timeoutId = setTimeout(function () {
|
||
|
|
// Time to execute the timeout, enqueue it as a foreground task to be executed.
|
||
|
|
try {
|
||
|
|
// Now delete the record and call the callback.
|
||
|
|
delete _this._timeoutIds[timeoutId];
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
if (_this._onErrorHandler) {
|
||
|
|
_this._onErrorHandler(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, duration);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._timeoutIds[timeoutId] = true;
|
||
|
|
}
|
||
|
|
return timeoutId;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Clears the timeout.
|
||
|
|
* @param id - Id to cancel.
|
||
|
|
*/
|
||
|
|
Async.prototype.clearTimeout = function (id) {
|
||
|
|
if (this._timeoutIds && this._timeoutIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
clearTimeout(id);
|
||
|
|
delete this._timeoutIds[id];
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* SetImmediate override, which will auto cancel the immediate during dispose.
|
||
|
|
* @param callback - Callback to execute.
|
||
|
|
* @returns The setTimeout id.
|
||
|
|
*/
|
||
|
|
Async.prototype.setImmediate = function (callback) {
|
||
|
|
var _this = this;
|
||
|
|
var immediateId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._immediateIds) {
|
||
|
|
this._immediateIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
var setImmediateCallback = function () {
|
||
|
|
// Time to execute the timeout, enqueue it as a foreground task to be executed.
|
||
|
|
try {
|
||
|
|
// Now delete the record and call the callback.
|
||
|
|
delete _this._immediateIds[immediateId];
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
_this._logError(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
immediateId = window.setImmediate ? window.setImmediate(setImmediateCallback) : window.setTimeout(setImmediateCallback, 0);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._immediateIds[immediateId] = true;
|
||
|
|
}
|
||
|
|
return immediateId;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Clears the immediate.
|
||
|
|
* @param id - Id to cancel.
|
||
|
|
*/
|
||
|
|
Async.prototype.clearImmediate = function (id) {
|
||
|
|
if (this._immediateIds && this._immediateIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
window.clearImmediate ? window.clearImmediate(id) : window.clearTimeout(id);
|
||
|
|
delete this._immediateIds[id];
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* SetInterval override, which will auto cancel the timeout during dispose.
|
||
|
|
* @param callback - Callback to execute.
|
||
|
|
* @param duration - Duration in milliseconds.
|
||
|
|
* @returns The setTimeout id.
|
||
|
|
*/
|
||
|
|
Async.prototype.setInterval = function (callback, duration) {
|
||
|
|
var _this = this;
|
||
|
|
var intervalId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._intervalIds) {
|
||
|
|
this._intervalIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
intervalId = setInterval(function () {
|
||
|
|
// Time to execute the interval callback, enqueue it as a foreground task to be executed.
|
||
|
|
try {
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
_this._logError(e);
|
||
|
|
}
|
||
|
|
}, duration);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._intervalIds[intervalId] = true;
|
||
|
|
}
|
||
|
|
return intervalId;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Clears the interval.
|
||
|
|
* @param id - Id to cancel.
|
||
|
|
*/
|
||
|
|
Async.prototype.clearInterval = function (id) {
|
||
|
|
if (this._intervalIds && this._intervalIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
clearInterval(id);
|
||
|
|
delete this._intervalIds[id];
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Creates a function that, when executed, will only call the func function at most once per
|
||
|
|
* every wait milliseconds. Provide an options object to indicate that func should be invoked
|
||
|
|
* on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled
|
||
|
|
* function will return the result of the last func call.
|
||
|
|
*
|
||
|
|
* Note: If leading and trailing options are true func will be called on the trailing edge of
|
||
|
|
* the timeout only if the the throttled function is invoked more than once during the wait timeout.
|
||
|
|
*
|
||
|
|
* @param func - The function to throttle.
|
||
|
|
* @param wait - The number of milliseconds to throttle executions to. Defaults to 0.
|
||
|
|
* @param options - The options object.
|
||
|
|
* @returns The new throttled function.
|
||
|
|
*/
|
||
|
|
Async.prototype.throttle = function (func, wait, options) {
|
||
|
|
var _this = this;
|
||
|
|
if (this._isDisposed) {
|
||
|
|
return this._noop;
|
||
|
|
}
|
||
|
|
var waitMS = wait || 0;
|
||
|
|
var leading = true;
|
||
|
|
var trailing = true;
|
||
|
|
var lastExecuteTime = 0;
|
||
|
|
var lastResult;
|
||
|
|
var lastArgs;
|
||
|
|
var timeoutId = null;
|
||
|
|
if (options && typeof (options.leading) === 'boolean') {
|
||
|
|
leading = options.leading;
|
||
|
|
}
|
||
|
|
if (options && typeof (options.trailing) === 'boolean') {
|
||
|
|
trailing = options.trailing;
|
||
|
|
}
|
||
|
|
var callback = function (userCall) {
|
||
|
|
var now = (new Date).getTime();
|
||
|
|
var delta = now - lastExecuteTime;
|
||
|
|
var waitLength = leading ? waitMS - delta : waitMS;
|
||
|
|
if (delta >= waitMS && (!userCall || leading)) {
|
||
|
|
lastExecuteTime = now;
|
||
|
|
if (timeoutId) {
|
||
|
|
_this.clearTimeout(timeoutId);
|
||
|
|
timeoutId = null;
|
||
|
|
}
|
||
|
|
lastResult = func.apply(_this._parent, lastArgs);
|
||
|
|
}
|
||
|
|
else if (timeoutId === null && trailing) {
|
||
|
|
timeoutId = _this.setTimeout(callback, waitLength);
|
||
|
|
}
|
||
|
|
return lastResult;
|
||
|
|
};
|
||
|
|
var resultFunction = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
lastArgs = args;
|
||
|
|
return callback(true);
|
||
|
|
};
|
||
|
|
return resultFunction;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Creates a function that will delay the execution of func until after wait milliseconds have
|
||
|
|
* elapsed since the last time it was invoked. Provide an options object to indicate that func
|
||
|
|
* should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls
|
||
|
|
* to the debounced function will return the result of the last func call.
|
||
|
|
*
|
||
|
|
* Note: If leading and trailing options are true func will be called on the trailing edge of
|
||
|
|
* the timeout only if the the debounced function is invoked more than once during the wait
|
||
|
|
* timeout.
|
||
|
|
*
|
||
|
|
* @param func - The function to debounce.
|
||
|
|
* @param wait - The number of milliseconds to delay.
|
||
|
|
* @param options - The options object.
|
||
|
|
* @returns The new debounced function.
|
||
|
|
*/
|
||
|
|
Async.prototype.debounce = function (func, wait, options) {
|
||
|
|
var _this = this;
|
||
|
|
if (this._isDisposed) {
|
||
|
|
return this._noop;
|
||
|
|
}
|
||
|
|
var waitMS = wait || 0;
|
||
|
|
var leading = false;
|
||
|
|
var trailing = true;
|
||
|
|
var maxWait = null;
|
||
|
|
var lastCallTime = 0;
|
||
|
|
var lastExecuteTime = (new Date).getTime();
|
||
|
|
var lastResult;
|
||
|
|
var lastArgs;
|
||
|
|
var timeoutId = null;
|
||
|
|
if (options && typeof (options.leading) === 'boolean') {
|
||
|
|
leading = options.leading;
|
||
|
|
}
|
||
|
|
if (options && typeof (options.trailing) === 'boolean') {
|
||
|
|
trailing = options.trailing;
|
||
|
|
}
|
||
|
|
if (options && typeof (options.maxWait) === 'number' && !isNaN(options.maxWait)) {
|
||
|
|
maxWait = options.maxWait;
|
||
|
|
}
|
||
|
|
var callback = function (userCall) {
|
||
|
|
var now = (new Date).getTime();
|
||
|
|
var executeImmediately = false;
|
||
|
|
if (userCall) {
|
||
|
|
if (leading && now - lastCallTime >= waitMS) {
|
||
|
|
executeImmediately = true;
|
||
|
|
}
|
||
|
|
lastCallTime = now;
|
||
|
|
}
|
||
|
|
var delta = now - lastCallTime;
|
||
|
|
var waitLength = waitMS - delta;
|
||
|
|
var maxWaitDelta = now - lastExecuteTime;
|
||
|
|
var maxWaitExpired = false;
|
||
|
|
if (maxWait !== null) {
|
||
|
|
// maxWait only matters when there is a pending callback
|
||
|
|
if (maxWaitDelta >= maxWait && timeoutId) {
|
||
|
|
maxWaitExpired = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
waitLength = Math.min(waitLength, maxWait - maxWaitDelta);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (delta >= waitMS || maxWaitExpired || executeImmediately) {
|
||
|
|
if (timeoutId) {
|
||
|
|
_this.clearTimeout(timeoutId);
|
||
|
|
timeoutId = null;
|
||
|
|
}
|
||
|
|
lastExecuteTime = now;
|
||
|
|
lastResult = func.apply(_this._parent, lastArgs);
|
||
|
|
}
|
||
|
|
else if ((timeoutId === null || !userCall) && trailing) {
|
||
|
|
timeoutId = _this.setTimeout(callback, waitLength);
|
||
|
|
}
|
||
|
|
return lastResult;
|
||
|
|
};
|
||
|
|
var resultFunction = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
lastArgs = args;
|
||
|
|
return callback(true);
|
||
|
|
};
|
||
|
|
return resultFunction;
|
||
|
|
};
|
||
|
|
Async.prototype.requestAnimationFrame = function (callback) {
|
||
|
|
var _this = this;
|
||
|
|
var animationFrameId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._animationFrameIds) {
|
||
|
|
this._animationFrameIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
var animationFrameCallback = function () {
|
||
|
|
try {
|
||
|
|
// Now delete the record and call the callback.
|
||
|
|
delete _this._animationFrameIds[animationFrameId];
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
_this._logError(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
animationFrameId = window.requestAnimationFrame ?
|
||
|
|
window.requestAnimationFrame(animationFrameCallback) :
|
||
|
|
window.setTimeout(animationFrameCallback, 0);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._animationFrameIds[animationFrameId] = true;
|
||
|
|
}
|
||
|
|
return animationFrameId;
|
||
|
|
};
|
||
|
|
Async.prototype.cancelAnimationFrame = function (id) {
|
||
|
|
if (this._animationFrameIds && this._animationFrameIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
window.cancelAnimationFrame ? window.cancelAnimationFrame(id) : window.clearTimeout(id);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
delete this._animationFrameIds[id];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Async.prototype._logError = function (e) {
|
||
|
|
if (this._onErrorHandler) {
|
||
|
|
this._onErrorHandler(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Async;
|
||
|
|
}());
|
||
|
|
exports.Async = Async;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 13 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var EventGroup_1 = __webpack_require__(14);
|
||
|
|
var scroll_1 = __webpack_require__(15);
|
||
|
|
var dom_1 = __webpack_require__(16);
|
||
|
|
var SCROLL_ITERATION_DELAY = 16;
|
||
|
|
var SCROLL_GUTTER_HEIGHT = 100;
|
||
|
|
var MAX_SCROLL_VELOCITY = 15;
|
||
|
|
/**
|
||
|
|
* AutoScroll simply hooks up mouse events given a parent element, and scrolls the container
|
||
|
|
* up/down depending on how close the mouse is to the top/bottom of the container.
|
||
|
|
*
|
||
|
|
* Once you don't want autoscroll any more, just dispose the helper and it will unhook events.
|
||
|
|
*/
|
||
|
|
var AutoScroll = (function () {
|
||
|
|
function AutoScroll(element) {
|
||
|
|
this._events = new EventGroup_1.EventGroup(this);
|
||
|
|
this._scrollableParent = scroll_1.findScrollableParent(element);
|
||
|
|
this._incrementScroll = this._incrementScroll.bind(this);
|
||
|
|
this._scrollRect = dom_1.getRect(this._scrollableParent);
|
||
|
|
if (this._scrollableParent === window) {
|
||
|
|
this._scrollableParent = document.body;
|
||
|
|
}
|
||
|
|
if (this._scrollableParent) {
|
||
|
|
this._events.on(window, 'mousemove', this._onMouseMove, true);
|
||
|
|
this._events.on(window, 'touchmove', this._onTouchMove, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
AutoScroll.prototype.dispose = function () {
|
||
|
|
this._events.dispose();
|
||
|
|
this._stopScroll();
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._onMouseMove = function (ev) {
|
||
|
|
this._computeScrollVelocity(ev.clientY);
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._onTouchMove = function (ev) {
|
||
|
|
if (ev.touches.length > 0) {
|
||
|
|
this._computeScrollVelocity(ev.touches[0].clientY);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._computeScrollVelocity = function (clientY) {
|
||
|
|
var scrollRectTop = this._scrollRect.top;
|
||
|
|
var scrollClientBottom = scrollRectTop + this._scrollRect.height - SCROLL_GUTTER_HEIGHT;
|
||
|
|
if (clientY < (scrollRectTop + SCROLL_GUTTER_HEIGHT)) {
|
||
|
|
this._scrollVelocity = Math.max(-MAX_SCROLL_VELOCITY, -MAX_SCROLL_VELOCITY * ((SCROLL_GUTTER_HEIGHT - (clientY - scrollRectTop)) / SCROLL_GUTTER_HEIGHT));
|
||
|
|
}
|
||
|
|
else if (clientY > scrollClientBottom) {
|
||
|
|
this._scrollVelocity = Math.min(MAX_SCROLL_VELOCITY, MAX_SCROLL_VELOCITY * ((clientY - scrollClientBottom) / SCROLL_GUTTER_HEIGHT));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._scrollVelocity = 0;
|
||
|
|
}
|
||
|
|
if (this._scrollVelocity) {
|
||
|
|
this._startScroll();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._stopScroll();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._startScroll = function () {
|
||
|
|
if (!this._timeoutId) {
|
||
|
|
this._incrementScroll();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._incrementScroll = function () {
|
||
|
|
this._scrollableParent.scrollTop += Math.round(this._scrollVelocity);
|
||
|
|
this._timeoutId = setTimeout(this._incrementScroll, SCROLL_ITERATION_DELAY);
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._stopScroll = function () {
|
||
|
|
if (this._timeoutId) {
|
||
|
|
clearTimeout(this._timeoutId);
|
||
|
|
delete this._timeoutId;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return AutoScroll;
|
||
|
|
}());
|
||
|
|
exports.AutoScroll = AutoScroll;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 14 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/* tslint:disable:no-string-literal */
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/** An instance of EventGroup allows anything with a handle to it to trigger events on it.
|
||
|
|
* If the target is an HTMLElement, the event will be attached to the element and can be
|
||
|
|
* triggered as usual (like clicking for onclick).
|
||
|
|
* The event can be triggered by calling EventGroup.raise() here. If the target is an
|
||
|
|
* HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets
|
||
|
|
* handled here in EventGroup, and the handler is called in the context of the parent
|
||
|
|
* (which is passed in in the constructor).
|
||
|
|
*/
|
||
|
|
var EventGroup = (function () {
|
||
|
|
/** parent: the context in which events attached to non-HTMLElements are called */
|
||
|
|
function EventGroup(parent) {
|
||
|
|
this._id = EventGroup._uniqueId++;
|
||
|
|
this._parent = parent;
|
||
|
|
this._eventRecords = [];
|
||
|
|
}
|
||
|
|
/** For IE8, bubbleEvent is ignored here and must be dealt with by the handler.
|
||
|
|
* Events raised here by default have bubbling set to false and cancelable set to true.
|
||
|
|
* This applies also to built-in events being raised manually here on HTMLElements,
|
||
|
|
* which may lead to unexpected behavior if it differs from the defaults.
|
||
|
|
*/
|
||
|
|
EventGroup.raise = function (target, eventName, eventArgs, bubbleEvent) {
|
||
|
|
var retVal;
|
||
|
|
if (EventGroup._isElement(target)) {
|
||
|
|
if (document.createEvent) {
|
||
|
|
var ev = document.createEvent('HTMLEvents');
|
||
|
|
ev.initEvent(eventName, bubbleEvent, true);
|
||
|
|
ev['args'] = eventArgs;
|
||
|
|
retVal = target.dispatchEvent(ev);
|
||
|
|
}
|
||
|
|
else if (document['createEventObject']) {
|
||
|
|
var evObj = document['createEventObject'](eventArgs);
|
||
|
|
// cannot set cancelBubble on evObj, fireEvent will overwrite it
|
||
|
|
target.fireEvent('on' + eventName, evObj);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
while (target && retVal !== false) {
|
||
|
|
var events = target.__events__;
|
||
|
|
var eventRecords = events ? events[eventName] : null;
|
||
|
|
for (var id in eventRecords) {
|
||
|
|
if (eventRecords.hasOwnProperty(id)) {
|
||
|
|
var eventRecordList = eventRecords[id];
|
||
|
|
for (var listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) {
|
||
|
|
var record = eventRecordList[listIndex];
|
||
|
|
if (record.objectCallback) {
|
||
|
|
retVal = record.objectCallback.call(record.parent, eventArgs);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// If the target has a parent, bubble the event up.
|
||
|
|
target = bubbleEvent ? target.parent : null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return retVal;
|
||
|
|
};
|
||
|
|
EventGroup.isObserved = function (target, eventName) {
|
||
|
|
var events = target && target.__events__;
|
||
|
|
return !!events && !!events[eventName];
|
||
|
|
};
|
||
|
|
/** Check to see if the target has declared support of the given event. */
|
||
|
|
EventGroup.isDeclared = function (target, eventName) {
|
||
|
|
var declaredEvents = target && target.__declaredEvents;
|
||
|
|
return !!declaredEvents && !!declaredEvents[eventName];
|
||
|
|
};
|
||
|
|
EventGroup.stopPropagation = function (event) {
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
event.cancelBubble = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EventGroup._isElement = function (target) {
|
||
|
|
return !!target && (target.addEventListener || target instanceof HTMLElement);
|
||
|
|
};
|
||
|
|
EventGroup.prototype.dispose = function () {
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
this._isDisposed = true;
|
||
|
|
this.off();
|
||
|
|
this._parent = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** On the target, attach a set of events, where the events object is a name to function mapping. */
|
||
|
|
EventGroup.prototype.onAll = function (target, events, useCapture) {
|
||
|
|
for (var eventName in events) {
|
||
|
|
if (events.hasOwnProperty(eventName)) {
|
||
|
|
this.on(target, eventName, events[eventName], useCapture);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** On the target, attach an event whose handler will be called in the context of the parent
|
||
|
|
* of this instance of EventGroup.
|
||
|
|
*/
|
||
|
|
EventGroup.prototype.on = function (target, eventName, callback, useCapture) {
|
||
|
|
var _this = this;
|
||
|
|
if (eventName.indexOf(',') > -1) {
|
||
|
|
var events = eventName.split(/[ ,]+/);
|
||
|
|
for (var i = 0; i < events.length; i++) {
|
||
|
|
this.on(target, events[i], callback, useCapture);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var parent_1 = this._parent;
|
||
|
|
var eventRecord = {
|
||
|
|
target: target,
|
||
|
|
eventName: eventName,
|
||
|
|
parent: parent_1,
|
||
|
|
callback: callback,
|
||
|
|
objectCallback: null,
|
||
|
|
elementCallback: null,
|
||
|
|
useCapture: useCapture
|
||
|
|
};
|
||
|
|
// Initialize and wire up the record on the target, so that it can call the callback if the event fires.
|
||
|
|
var events = (target.__events__ = target.__events__ || {});
|
||
|
|
events[eventName] = events[eventName] || {
|
||
|
|
count: 0
|
||
|
|
};
|
||
|
|
events[eventName][this._id] = events[eventName][this._id] || [];
|
||
|
|
events[eventName][this._id].push(eventRecord);
|
||
|
|
events[eventName].count++;
|
||
|
|
if (EventGroup._isElement(target)) {
|
||
|
|
var processElementEvent = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
if (_this._isDisposed) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var result;
|
||
|
|
try {
|
||
|
|
result = callback.apply(parent_1, args);
|
||
|
|
if (result === false && args[0]) {
|
||
|
|
var e = args[0];
|
||
|
|
if (e.preventDefault) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
if (e.stopPropagation) {
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
e.cancelBubble = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
/* ErrorHelper.log(e); */
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
eventRecord.elementCallback = processElementEvent;
|
||
|
|
if (target.addEventListener) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
target.addEventListener(eventName, processElementEvent, useCapture);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
else if (target.attachEvent) {
|
||
|
|
target.attachEvent('on' + eventName, processElementEvent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var processObjectEvent = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
if (_this._isDisposed) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
return callback.apply(parent_1, args);
|
||
|
|
};
|
||
|
|
eventRecord.objectCallback = processObjectEvent;
|
||
|
|
}
|
||
|
|
// Remember the record locally, so that it can be removed.
|
||
|
|
this._eventRecords.push(eventRecord);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EventGroup.prototype.off = function (target, eventName, callback, useCapture) {
|
||
|
|
for (var i = 0; i < this._eventRecords.length; i++) {
|
||
|
|
var eventRecord = this._eventRecords[i];
|
||
|
|
if ((!target || target === eventRecord.target) &&
|
||
|
|
(!eventName || eventName === eventRecord.eventName) &&
|
||
|
|
(!callback || callback === eventRecord.callback) &&
|
||
|
|
((typeof useCapture !== 'boolean') || useCapture === eventRecord.useCapture)) {
|
||
|
|
var events = eventRecord.target.__events__;
|
||
|
|
var targetArrayLookup = events[eventRecord.eventName];
|
||
|
|
var targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null;
|
||
|
|
// We may have already target's entries, so check for null.
|
||
|
|
if (targetArray) {
|
||
|
|
if (targetArray.length === 1 || !callback) {
|
||
|
|
targetArrayLookup.count -= targetArray.length;
|
||
|
|
delete events[eventRecord.eventName][this._id];
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetArrayLookup.count--;
|
||
|
|
targetArray.splice(targetArray.indexOf(eventRecord), 1);
|
||
|
|
}
|
||
|
|
if (!targetArrayLookup.count) {
|
||
|
|
delete events[eventRecord.eventName];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (eventRecord.elementCallback) {
|
||
|
|
if (eventRecord.target.removeEventListener) {
|
||
|
|
eventRecord.target.removeEventListener(eventRecord.eventName, eventRecord.elementCallback, eventRecord.useCapture);
|
||
|
|
}
|
||
|
|
else if (eventRecord.target.detachEvent) {
|
||
|
|
eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._eventRecords.splice(i--, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** Trigger the given event in the context of this instance of EventGroup. */
|
||
|
|
EventGroup.prototype.raise = function (eventName, eventArgs, bubbleEvent) {
|
||
|
|
return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent);
|
||
|
|
};
|
||
|
|
/** Declare an event as being supported by this instance of EventGroup. */
|
||
|
|
EventGroup.prototype.declare = function (event) {
|
||
|
|
var declaredEvents = this._parent.__declaredEvents = this._parent.__declaredEvents || {};
|
||
|
|
if (typeof event === 'string') {
|
||
|
|
declaredEvents[event] = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (var i = 0; i < event.length; i++) {
|
||
|
|
declaredEvents[event[i]] = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return EventGroup;
|
||
|
|
}());
|
||
|
|
EventGroup._uniqueId = 0;
|
||
|
|
exports.EventGroup = EventGroup;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 15 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var dom_1 = __webpack_require__(16);
|
||
|
|
var scroll_scss_1 = __webpack_require__(17);
|
||
|
|
var _scrollbarWidth;
|
||
|
|
var _bodyScrollDisabledCount = 0;
|
||
|
|
exports.DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable';
|
||
|
|
function disableBodyScroll() {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc && doc.body && !_bodyScrollDisabledCount) {
|
||
|
|
doc.body.classList.add(scroll_scss_1.default.msFabricScrollDisabled);
|
||
|
|
}
|
||
|
|
_bodyScrollDisabledCount++;
|
||
|
|
}
|
||
|
|
exports.disableBodyScroll = disableBodyScroll;
|
||
|
|
function enableBodyScroll() {
|
||
|
|
if (_bodyScrollDisabledCount > 0) {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc && doc.body && _bodyScrollDisabledCount === 1) {
|
||
|
|
doc.body.classList.remove(scroll_scss_1.default.msFabricScrollDisabled);
|
||
|
|
}
|
||
|
|
_bodyScrollDisabledCount--;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.enableBodyScroll = enableBodyScroll;
|
||
|
|
/** Calculates the width of a scrollbar for the browser/os. */
|
||
|
|
function getScrollbarWidth() {
|
||
|
|
if (_scrollbarWidth === undefined) {
|
||
|
|
var scrollDiv = document.createElement('div');
|
||
|
|
scrollDiv.style.setProperty('width', '100px');
|
||
|
|
scrollDiv.style.setProperty('height', '100px');
|
||
|
|
scrollDiv.style.setProperty('overflow', 'scroll');
|
||
|
|
scrollDiv.style.setProperty('position', 'absolute');
|
||
|
|
scrollDiv.style.setProperty('top', '-9999px');
|
||
|
|
document.body.appendChild(scrollDiv);
|
||
|
|
// Get the scrollbar width
|
||
|
|
_scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||
|
|
// Delete the DIV
|
||
|
|
document.body.removeChild(scrollDiv);
|
||
|
|
}
|
||
|
|
return _scrollbarWidth;
|
||
|
|
}
|
||
|
|
exports.getScrollbarWidth = getScrollbarWidth;
|
||
|
|
/**
|
||
|
|
* Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns
|
||
|
|
* document.body.
|
||
|
|
*/
|
||
|
|
function findScrollableParent(startingElement) {
|
||
|
|
var el = startingElement;
|
||
|
|
// First do a quick scan for the scrollable attribute.
|
||
|
|
while (el && el !== document.body) {
|
||
|
|
if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') {
|
||
|
|
return el;
|
||
|
|
}
|
||
|
|
el = el.parentElement;
|
||
|
|
}
|
||
|
|
// If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set.
|
||
|
|
el = startingElement;
|
||
|
|
while (el && el !== document.body) {
|
||
|
|
if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') {
|
||
|
|
var styles_1 = getComputedStyle(el);
|
||
|
|
var overflowY = styles_1 ? styles_1.getPropertyValue('overflow-y') : '';
|
||
|
|
if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) {
|
||
|
|
return el;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
el = el.parentElement;
|
||
|
|
}
|
||
|
|
// Fall back to window scroll.
|
||
|
|
if (!el || el === document.body) {
|
||
|
|
el = window;
|
||
|
|
}
|
||
|
|
return el;
|
||
|
|
}
|
||
|
|
exports.findScrollableParent = findScrollableParent;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 16 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Sets the virtual parent of an element.
|
||
|
|
* Pass `undefined` as the `parent` to clear the virtual parent.
|
||
|
|
*/
|
||
|
|
function setVirtualParent(child, parent) {
|
||
|
|
var virtualChild = child;
|
||
|
|
var virtualParent = parent;
|
||
|
|
if (!virtualChild._virtual) {
|
||
|
|
virtualChild._virtual = {
|
||
|
|
children: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
var oldParent = virtualChild._virtual.parent;
|
||
|
|
if (oldParent && oldParent !== parent) {
|
||
|
|
// Remove the child from its old parent.
|
||
|
|
var index = oldParent._virtual.children.indexOf(virtualChild);
|
||
|
|
if (index > -1) {
|
||
|
|
oldParent._virtual.children.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
virtualChild._virtual.parent = virtualParent || undefined;
|
||
|
|
if (virtualParent) {
|
||
|
|
if (!virtualParent._virtual) {
|
||
|
|
virtualParent._virtual = {
|
||
|
|
children: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
virtualParent._virtual.children.push(virtualChild);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.setVirtualParent = setVirtualParent;
|
||
|
|
function getVirtualParent(child) {
|
||
|
|
var parent;
|
||
|
|
if (child && isVirtualElement(child)) {
|
||
|
|
parent = child._virtual.parent;
|
||
|
|
}
|
||
|
|
return parent;
|
||
|
|
}
|
||
|
|
exports.getVirtualParent = getVirtualParent;
|
||
|
|
/**
|
||
|
|
* Gets the element which is the parent of a given element.
|
||
|
|
* If `allowVirtuaParents` is `true`, this method prefers the virtual parent over
|
||
|
|
* real DOM parent when present.
|
||
|
|
*/
|
||
|
|
function getParent(child, allowVirtualParents) {
|
||
|
|
if (allowVirtualParents === void 0) { allowVirtualParents = true; }
|
||
|
|
return child && (allowVirtualParents && getVirtualParent(child) ||
|
||
|
|
child.parentNode && child.parentNode);
|
||
|
|
}
|
||
|
|
exports.getParent = getParent;
|
||
|
|
/**
|
||
|
|
* Determines whether or not a parent element contains a given child element.
|
||
|
|
* If `allowVirtualParents` is true, this method may return `true` if the child
|
||
|
|
* has the parent in its virtual element hierarchy.
|
||
|
|
*/
|
||
|
|
function elementContains(parent, child, allowVirtualParents) {
|
||
|
|
if (allowVirtualParents === void 0) { allowVirtualParents = true; }
|
||
|
|
var isContained = false;
|
||
|
|
if (parent && child) {
|
||
|
|
if (allowVirtualParents) {
|
||
|
|
isContained = false;
|
||
|
|
while (child) {
|
||
|
|
var nextParent = getParent(child);
|
||
|
|
if (nextParent === parent) {
|
||
|
|
isContained = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
child = nextParent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (parent.contains) {
|
||
|
|
isContained = parent.contains(child);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return isContained;
|
||
|
|
}
|
||
|
|
exports.elementContains = elementContains;
|
||
|
|
var _isSSR = false;
|
||
|
|
/**
|
||
|
|
* Helper to set ssr mode to simulate no window object returned from getWindow helper.
|
||
|
|
*/
|
||
|
|
function setSSR(isEnabled) {
|
||
|
|
_isSSR = isEnabled;
|
||
|
|
}
|
||
|
|
exports.setSSR = setSSR;
|
||
|
|
/** Helper to get the window object. */
|
||
|
|
function getWindow(rootElement) {
|
||
|
|
if (_isSSR) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return (rootElement &&
|
||
|
|
rootElement.ownerDocument &&
|
||
|
|
rootElement.ownerDocument.defaultView ?
|
||
|
|
rootElement.ownerDocument.defaultView :
|
||
|
|
window);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.getWindow = getWindow;
|
||
|
|
/**
|
||
|
|
* Helper to get the document object.
|
||
|
|
*/
|
||
|
|
function getDocument(rootElement) {
|
||
|
|
if (_isSSR) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return rootElement && rootElement.ownerDocument ? rootElement.ownerDocument : document;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.getDocument = getDocument;
|
||
|
|
/**
|
||
|
|
* Helper to get bounding client rect, works with window.
|
||
|
|
*/
|
||
|
|
function getRect(element) {
|
||
|
|
var rect;
|
||
|
|
if (element) {
|
||
|
|
if (element === window) {
|
||
|
|
rect = {
|
||
|
|
left: 0,
|
||
|
|
top: 0,
|
||
|
|
width: window.innerWidth,
|
||
|
|
height: window.innerHeight,
|
||
|
|
right: window.innerWidth,
|
||
|
|
bottom: window.innerHeight
|
||
|
|
};
|
||
|
|
}
|
||
|
|
else if (element.getBoundingClientRect) {
|
||
|
|
rect = element.getBoundingClientRect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return rect;
|
||
|
|
}
|
||
|
|
exports.getRect = getRect;
|
||
|
|
/**
|
||
|
|
* Determines whether or not an element has the virtual hierarchy extension.
|
||
|
|
*/
|
||
|
|
function isVirtualElement(element) {
|
||
|
|
return element && !!element._virtual;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 17 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
msFabricScrollDisabled: 'msFabricScrollDisabled_23e3aef2',
|
||
|
|
};
|
||
|
|
exports.default = styles;
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".msFabricScrollDisabled_23e3aef2{overflow:hidden!important}" }]);
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 18 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(global) {/**
|
||
|
|
* An IThemingInstruction can specify a rawString to be preserved or a theme slot and a default value
|
||
|
|
* to use if that slot is not specified by the theme.
|
||
|
|
*/
|
||
|
|
"use strict";
|
||
|
|
// IE needs to inject styles using cssText. However, we need to evaluate this lazily, so this
|
||
|
|
// value will initialize as undefined, and later will be set once on first loadStyles injection.
|
||
|
|
var _injectStylesWithCssText;
|
||
|
|
// Store the theming state in __themeState__ global scope for reuse in the case of duplicate
|
||
|
|
// load-themed-styles hosted on the page.
|
||
|
|
var _root = (typeof window === 'undefined') ? global : window; // tslint:disable-line:no-any
|
||
|
|
var _themeState = _root.__themeState__ = _root.__themeState__ || {
|
||
|
|
theme: undefined,
|
||
|
|
lastStyleElement: undefined,
|
||
|
|
registeredStyles: []
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Matches theming tokens. For example, "[theme: themeSlotName, default: #FFF]" (including the quotes).
|
||
|
|
*/
|
||
|
|
/* tslint:disable: max-line-length */
|
||
|
|
var _themeTokenRegex = /[\'\"]\[theme:\s*(\w+)\s*(?:\,\s*default:\s*([\\"\']?[\.\,\(\)\#\-\s\w]*[\.\,\(\)\#\-\w][\"\']?))?\s*\][\'\"]/g;
|
||
|
|
/* tslint:enable: max-line-length */
|
||
|
|
/** Maximum style text length, for supporting IE style restrictions. */
|
||
|
|
var MAX_STYLE_CONTENT_SIZE = 10000;
|
||
|
|
/**
|
||
|
|
* Loads a set of style text. If it is registered too early, we will register it when the window.load
|
||
|
|
* event is fired.
|
||
|
|
* @param {string | ThemableArray} styles Themable style text to register.
|
||
|
|
*/
|
||
|
|
function loadStyles(styles) {
|
||
|
|
var styleParts = Array.isArray(styles) ? styles : splitStyles(styles);
|
||
|
|
if (_injectStylesWithCssText === undefined) {
|
||
|
|
_injectStylesWithCssText = shouldUseCssText();
|
||
|
|
}
|
||
|
|
applyThemableStyles(styleParts);
|
||
|
|
}
|
||
|
|
exports.loadStyles = loadStyles;
|
||
|
|
/**
|
||
|
|
* Allows for customizable loadStyles logic. e.g. for server side rendering application
|
||
|
|
* @param {(styles: string) => void} a loadStyles callback that gets called when styles are loaded or reloaded
|
||
|
|
*/
|
||
|
|
function configureLoadStyles(callback) {
|
||
|
|
_themeState.loadStyles = callback;
|
||
|
|
}
|
||
|
|
exports.configureLoadStyles = configureLoadStyles;
|
||
|
|
/**
|
||
|
|
* Loads a set of style text. If it is registered too early, we will register it when the window.load event
|
||
|
|
* is fired.
|
||
|
|
* @param {string} styleText Style to register.
|
||
|
|
* @param {IStyleRecord} styleRecord Existing style record to re-apply.
|
||
|
|
*/
|
||
|
|
function applyThemableStyles(stylesArray, styleRecord) {
|
||
|
|
if (_themeState.loadStyles) {
|
||
|
|
var styles = resolveThemableArray(stylesArray);
|
||
|
|
_themeState.loadStyles(styles);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_injectStylesWithCssText ?
|
||
|
|
registerStylesIE(stylesArray, styleRecord) :
|
||
|
|
registerStyles(stylesArray, styleRecord);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Registers a set theme tokens to find and replace. If styles were already registered, they will be
|
||
|
|
* replaced.
|
||
|
|
* @param {theme} theme JSON object of theme tokens to values.
|
||
|
|
*/
|
||
|
|
function loadTheme(theme) {
|
||
|
|
_themeState.theme = theme;
|
||
|
|
// reload styles.
|
||
|
|
reloadStyles();
|
||
|
|
}
|
||
|
|
exports.loadTheme = loadTheme;
|
||
|
|
/**
|
||
|
|
* Reloads styles.
|
||
|
|
*/
|
||
|
|
function reloadStyles() {
|
||
|
|
if (_themeState.theme) {
|
||
|
|
for (var _i = 0, _a = _themeState.registeredStyles; _i < _a.length; _i++) {
|
||
|
|
var styleRecord = _a[_i];
|
||
|
|
applyThemableStyles(styleRecord.themableStyle, styleRecord);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Find theme tokens and replaces them with provided theme values.
|
||
|
|
* @param {string} styles Tokenized styles to fix.
|
||
|
|
*/
|
||
|
|
function detokenize(styles) {
|
||
|
|
if (styles) {
|
||
|
|
styles = resolveThemableArray(splitStyles(styles));
|
||
|
|
}
|
||
|
|
return styles;
|
||
|
|
}
|
||
|
|
exports.detokenize = detokenize;
|
||
|
|
/**
|
||
|
|
* Resolves ThemingInstruction objects in an array and joins the result into a string.
|
||
|
|
* @param {ThemableArray} splitStyleArray ThemableArray to resolve and join.
|
||
|
|
*/
|
||
|
|
function resolveThemableArray(splitStyleArray) {
|
||
|
|
var theme = _themeState.theme;
|
||
|
|
var resolvedCss;
|
||
|
|
if (splitStyleArray) {
|
||
|
|
// Resolve the array of theming instructions to an array of strings.
|
||
|
|
// Then join the array to produce the final CSS string.
|
||
|
|
var resolvedArray = splitStyleArray.map(function (currentValue) {
|
||
|
|
var themeSlot = currentValue.theme;
|
||
|
|
if (themeSlot) {
|
||
|
|
// A theming annotation. Resolve it.
|
||
|
|
var themedValue = theme ? theme[themeSlot] : undefined;
|
||
|
|
var defaultValue = currentValue.defaultValue;
|
||
|
|
// Warn to console if we hit an unthemed value even when themes are provided.
|
||
|
|
// Allow the themedValue to be undefined to explicitly request the default value.
|
||
|
|
if (theme && !themedValue && console && !(themeSlot in theme)) {
|
||
|
|
/* tslint:disable: max-line-length */
|
||
|
|
console.warn("Theming value not provided for \"" + themeSlot + "\". Falling back to \"" + (defaultValue || 'inherit') + "\".");
|
||
|
|
}
|
||
|
|
return themedValue || defaultValue || 'inherit';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// A non-themable string. Preserve it.
|
||
|
|
return currentValue.rawString;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
resolvedCss = resolvedArray.join('');
|
||
|
|
}
|
||
|
|
return resolvedCss;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Split tokenized CSS into an array of strings and theme specification objects
|
||
|
|
* @param {string} styles Tokenized styles to split.
|
||
|
|
*/
|
||
|
|
function splitStyles(styles) {
|
||
|
|
var result = [];
|
||
|
|
if (styles) {
|
||
|
|
var pos = 0; // Current position in styles.
|
||
|
|
var tokenMatch = void 0;
|
||
|
|
while (tokenMatch = _themeTokenRegex.exec(styles)) {
|
||
|
|
var matchIndex = tokenMatch.index;
|
||
|
|
if (matchIndex > pos) {
|
||
|
|
result.push({
|
||
|
|
rawString: styles.substring(pos, matchIndex)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
result.push({
|
||
|
|
theme: tokenMatch[1],
|
||
|
|
defaultValue: tokenMatch[2] // May be undefined
|
||
|
|
});
|
||
|
|
// index of the first character after the current match
|
||
|
|
pos = _themeTokenRegex.lastIndex;
|
||
|
|
}
|
||
|
|
// Push the rest of the string after the last match.
|
||
|
|
result.push({
|
||
|
|
rawString: styles.substring(pos)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
exports.splitStyles = splitStyles;
|
||
|
|
/**
|
||
|
|
* Registers a set of style text. If it is registered too early, we will register it when the
|
||
|
|
* window.load event is fired.
|
||
|
|
* @param {ThemableArray} styleArray Array of IThemingInstruction objects to register.
|
||
|
|
* @param {IStyleRecord} styleRecord May specify a style Element to update.
|
||
|
|
*/
|
||
|
|
function registerStyles(styleArray, styleRecord) {
|
||
|
|
var head = document.getElementsByTagName('head')[0];
|
||
|
|
var styleElement = document.createElement('style');
|
||
|
|
styleElement.type = 'text/css';
|
||
|
|
styleElement.appendChild(document.createTextNode(resolveThemableArray(styleArray)));
|
||
|
|
if (styleRecord) {
|
||
|
|
head.replaceChild(styleElement, styleRecord.styleElement);
|
||
|
|
styleRecord.styleElement = styleElement;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
head.appendChild(styleElement);
|
||
|
|
}
|
||
|
|
if (!styleRecord) {
|
||
|
|
_themeState.registeredStyles.push({
|
||
|
|
styleElement: styleElement,
|
||
|
|
themableStyle: styleArray
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Registers a set of style text, for IE 9 and below, which has a ~30 style element limit so we need
|
||
|
|
* to register slightly differently.
|
||
|
|
* @param {ThemableArray} styleArray Array of IThemingInstruction objects to register.
|
||
|
|
* @param {IStyleRecord} styleRecord May specify a style Element to update.
|
||
|
|
*/
|
||
|
|
function registerStylesIE(styleArray, styleRecord) {
|
||
|
|
var head = document.getElementsByTagName('head')[0];
|
||
|
|
var lastStyleElement = _themeState.lastStyleElement, registeredStyles = _themeState.registeredStyles;
|
||
|
|
var stylesheet = lastStyleElement ? lastStyleElement.styleSheet : undefined;
|
||
|
|
var lastStyleContent = stylesheet ? stylesheet.cssText : '';
|
||
|
|
var lastRegisteredStyle = registeredStyles[registeredStyles.length - 1];
|
||
|
|
var resolvedStyleText = resolveThemableArray(styleArray);
|
||
|
|
if (!lastStyleElement || (lastStyleContent.length + resolvedStyleText.length) > MAX_STYLE_CONTENT_SIZE) {
|
||
|
|
lastStyleElement = document.createElement('style');
|
||
|
|
lastStyleElement.type = 'text/css';
|
||
|
|
if (styleRecord) {
|
||
|
|
head.replaceChild(lastStyleElement, styleRecord.styleElement);
|
||
|
|
styleRecord.styleElement = lastStyleElement;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
head.appendChild(lastStyleElement);
|
||
|
|
}
|
||
|
|
if (!styleRecord) {
|
||
|
|
lastRegisteredStyle = {
|
||
|
|
styleElement: lastStyleElement,
|
||
|
|
themableStyle: styleArray
|
||
|
|
};
|
||
|
|
registeredStyles.push(lastRegisteredStyle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
lastStyleElement.styleSheet.cssText += detokenize(resolvedStyleText);
|
||
|
|
Array.prototype.push.apply(lastRegisteredStyle.themableStyle, styleArray); // concat in-place
|
||
|
|
// Preserve the theme state.
|
||
|
|
_themeState.lastStyleElement = lastStyleElement;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Checks to see if styleSheet exists as a property off of a style element.
|
||
|
|
* This will determine if style registration should be done via cssText (<= IE9) or not
|
||
|
|
*/
|
||
|
|
function shouldUseCssText() {
|
||
|
|
var useCSSText = false;
|
||
|
|
if (typeof document !== 'undefined') {
|
||
|
|
var emptyStyle = document.createElement('style');
|
||
|
|
emptyStyle.type = 'text/css';
|
||
|
|
useCSSText = !!emptyStyle.styleSheet;
|
||
|
|
}
|
||
|
|
return useCSSText;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 19 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Async_1 = __webpack_require__(12);
|
||
|
|
var EventGroup_1 = __webpack_require__(14);
|
||
|
|
var warn_1 = __webpack_require__(20);
|
||
|
|
var BaseComponent = (function (_super) {
|
||
|
|
__extends(BaseComponent, _super);
|
||
|
|
/**
|
||
|
|
* BaseComponent constructor
|
||
|
|
* @param props - The props for the component.
|
||
|
|
* @param context - The context for the component.
|
||
|
|
*/
|
||
|
|
function BaseComponent(props, context) {
|
||
|
|
var _this = _super.call(this, props, context) || this;
|
||
|
|
_this.props = props;
|
||
|
|
_this._shouldUpdateComponentRef = true;
|
||
|
|
_makeAllSafe(_this, BaseComponent.prototype, [
|
||
|
|
'componentWillMount',
|
||
|
|
'componentDidMount',
|
||
|
|
'shouldComponentUpdate',
|
||
|
|
'componentWillUpdate',
|
||
|
|
'componentWillReceiveProps',
|
||
|
|
'render',
|
||
|
|
'componentDidUpdate',
|
||
|
|
'componentWillUnmount'
|
||
|
|
]);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* When the component will receive props, make sure the componentRef is updated.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype.componentWillReceiveProps = function (newProps, newContext) {
|
||
|
|
this._updateComponentRef(this.props, newProps);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* When the component has mounted, update the componentRef.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype.componentDidMount = function () {
|
||
|
|
this._updateComponentRef(undefined, this.props);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* If we have disposables, dispose them automatically on unmount.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype.componentWillUnmount = function () {
|
||
|
|
if (this.__disposables) {
|
||
|
|
for (var i = 0, len = this._disposables.length; i < len; i++) {
|
||
|
|
var disposable = this.__disposables[i];
|
||
|
|
if (disposable.dispose) {
|
||
|
|
disposable.dispose();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.__disposables = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "className", {
|
||
|
|
/**
|
||
|
|
* Gets the object's class name.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__className) {
|
||
|
|
var funcNameRegex = /function (.{1,})\(/;
|
||
|
|
var results = (funcNameRegex).exec((this).constructor.toString());
|
||
|
|
this.__className = (results && results.length > 1) ? results[1] : '';
|
||
|
|
}
|
||
|
|
return this.__className;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "_disposables", {
|
||
|
|
/**
|
||
|
|
* Allows subclasses to push things to this._disposables to be auto disposed.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__disposables) {
|
||
|
|
this.__disposables = [];
|
||
|
|
}
|
||
|
|
return this.__disposables;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "_async", {
|
||
|
|
/**
|
||
|
|
* Gets the async instance associated with the component, created on demand. The async instance gives
|
||
|
|
* subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks
|
||
|
|
* will be cleared/ignored automatically after unmounting. The helpers within the async object also
|
||
|
|
* preserve the this pointer so that you don't need to "bind" the callbacks.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__async) {
|
||
|
|
this.__async = new Async_1.Async(this);
|
||
|
|
this._disposables.push(this.__async);
|
||
|
|
}
|
||
|
|
return this.__async;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "_events", {
|
||
|
|
/**
|
||
|
|
* Gets the event group instance assocaited with the component, created on demand. The event instance
|
||
|
|
* provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks
|
||
|
|
* will be automatically disconnected after unmounting. The helpers within the events object also
|
||
|
|
* preserve the this reference so that you don't need to "bind" the callbacks.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__events) {
|
||
|
|
this.__events = new EventGroup_1.EventGroup(this);
|
||
|
|
this._disposables.push(this.__events);
|
||
|
|
}
|
||
|
|
return this.__events;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* Helper to return a memoized ref resolver function.
|
||
|
|
* @param refName - Name of the member to assign the ref to.
|
||
|
|
* @returns A function instance keyed from the given refname.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._resolveRef = function (refName) {
|
||
|
|
var _this = this;
|
||
|
|
if (!this.__resolves) {
|
||
|
|
this.__resolves = {};
|
||
|
|
}
|
||
|
|
if (!this.__resolves[refName]) {
|
||
|
|
this.__resolves[refName] = function (ref) {
|
||
|
|
return _this[refName] = ref;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return this.__resolves[refName];
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Updates the componentRef (by calling it with "this" when necessary.)
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._updateComponentRef = function (currentProps, newProps) {
|
||
|
|
if (newProps === void 0) { newProps = {}; }
|
||
|
|
if (this._shouldUpdateComponentRef &&
|
||
|
|
((!currentProps && newProps.componentRef) ||
|
||
|
|
(currentProps && currentProps.componentRef !== newProps.componentRef))) {
|
||
|
|
if (currentProps && currentProps.componentRef) {
|
||
|
|
currentProps.componentRef(null);
|
||
|
|
}
|
||
|
|
if (newProps.componentRef) {
|
||
|
|
newProps.componentRef(this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Warns when a deprecated props are being used.
|
||
|
|
*
|
||
|
|
* @param deprecationMap - The map of deprecations, where key is the prop name and the value is
|
||
|
|
* either null or a replacement prop name.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._warnDeprecations = function (deprecationMap) {
|
||
|
|
warn_1.warnDeprecations(this.className, this.props, deprecationMap);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Warns when props which are mutually exclusive with each other are both used.
|
||
|
|
*
|
||
|
|
* @param mutuallyExclusiveMap - The map of mutually exclusive props.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._warnMutuallyExclusive = function (mutuallyExclusiveMap) {
|
||
|
|
warn_1.warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap);
|
||
|
|
};
|
||
|
|
return BaseComponent;
|
||
|
|
}(React.Component));
|
||
|
|
exports.BaseComponent = BaseComponent;
|
||
|
|
/**
|
||
|
|
* Helper to override a given method with a wrapper method that can try/catch the original, but also
|
||
|
|
* ensures that the BaseComponent's methods are called before the subclass's. This ensures that
|
||
|
|
* componentWillUnmount in the base is called and that things in the _disposables array are disposed.
|
||
|
|
*/
|
||
|
|
function _makeAllSafe(obj, prototype, methodNames) {
|
||
|
|
for (var i = 0, len = methodNames.length; i < len; i++) {
|
||
|
|
_makeSafe(obj, prototype, methodNames[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _makeSafe(obj, prototype, methodName) {
|
||
|
|
var classMethod = obj[methodName];
|
||
|
|
var prototypeMethod = prototype[methodName];
|
||
|
|
if (classMethod || prototypeMethod) {
|
||
|
|
obj[methodName] = function () {
|
||
|
|
var retVal;
|
||
|
|
try {
|
||
|
|
if (prototypeMethod) {
|
||
|
|
retVal = prototypeMethod.apply(this, arguments);
|
||
|
|
}
|
||
|
|
if (classMethod !== prototypeMethod) {
|
||
|
|
retVal = classMethod.apply(this, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
var errorMessage = "Exception in " + obj.className + "." + methodName + "(): " + (typeof e === 'string' ? e : e.stack);
|
||
|
|
if (BaseComponent.onError) {
|
||
|
|
BaseComponent.onError(errorMessage, e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return retVal;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
BaseComponent.onError = function (errorMessage) {
|
||
|
|
console.error(errorMessage);
|
||
|
|
throw errorMessage;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Simple constant function for returning null, used to render empty templates in JSX.
|
||
|
|
*/
|
||
|
|
function nullRender() { return null; }
|
||
|
|
exports.nullRender = nullRender;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 20 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var _warningCallback = warn;
|
||
|
|
/**
|
||
|
|
* Warns when a deprecated props are being used.
|
||
|
|
*
|
||
|
|
* @param componentName - The name of the component being used.
|
||
|
|
* @param props - The props passed into the component.
|
||
|
|
* @param deprecationMap - The map of deprecations, where key is the prop name and the value is
|
||
|
|
* either null or a replacement prop name.
|
||
|
|
*/
|
||
|
|
function warnDeprecations(componentName, props, deprecationMap) {
|
||
|
|
for (var propName in deprecationMap) {
|
||
|
|
if (props && propName in props) {
|
||
|
|
var deprecationMessage = componentName + " property '" + propName + "' was used but has been deprecated.";
|
||
|
|
var replacementPropName = deprecationMap[propName];
|
||
|
|
if (replacementPropName) {
|
||
|
|
deprecationMessage += " Use '" + replacementPropName + "' instead.";
|
||
|
|
}
|
||
|
|
_warningCallback(deprecationMessage);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.warnDeprecations = warnDeprecations;
|
||
|
|
/**
|
||
|
|
* Warns when two props which are mutually exclusive are both being used.
|
||
|
|
*
|
||
|
|
* @param componentName - The name of the component being used.
|
||
|
|
* @param props - The props passed into the component.
|
||
|
|
* @param exclusiveMap - A map where the key is a parameter, and the value is the other parameter.
|
||
|
|
*/
|
||
|
|
function warnMutuallyExclusive(componentName, props, exclusiveMap) {
|
||
|
|
for (var propName in exclusiveMap) {
|
||
|
|
if (props && propName in props && exclusiveMap[propName] in props) {
|
||
|
|
_warningCallback(componentName + " property '" + propName + "' is mutually exclusive with '" + exclusiveMap[propName] + "'. Use one or the other.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.warnMutuallyExclusive = warnMutuallyExclusive;
|
||
|
|
/**
|
||
|
|
* Sends a warning to console, if the api is present.
|
||
|
|
* @param message - Warning message.
|
||
|
|
*/
|
||
|
|
function warn(message) {
|
||
|
|
if (console && console.warn) {
|
||
|
|
console.warn(message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.warn = warn;
|
||
|
|
/**
|
||
|
|
* Configures the warning callback. Passing in undefined will reset it to use the default
|
||
|
|
* console.warn function.
|
||
|
|
*
|
||
|
|
* @param warningCallback - Callback to override the generated warnings.
|
||
|
|
*/
|
||
|
|
function setWarningCallback(warningCallback) {
|
||
|
|
_warningCallback = warningCallback === undefined ? warn : warningCallback;
|
||
|
|
}
|
||
|
|
exports.setWarningCallback = setWarningCallback;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 21 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var PropTypes = __webpack_require__(22);
|
||
|
|
var BaseComponent_1 = __webpack_require__(19);
|
||
|
|
var object_1 = __webpack_require__(31);
|
||
|
|
/**
|
||
|
|
* The Customizer component allows for default props to be mixed into components which
|
||
|
|
* are decorated with the customizable() decorator. This enables injection scenarios like:
|
||
|
|
*
|
||
|
|
* 1. render svg icons instead of the icon font within all buttons
|
||
|
|
* 2. inject a custom theme object into a component
|
||
|
|
*
|
||
|
|
* Props are provided via the settings prop, which should be a json map where the key is
|
||
|
|
* the name of the customizable component, and the value is are the props to pass in.
|
||
|
|
*/
|
||
|
|
var Customizer = (function (_super) {
|
||
|
|
__extends(Customizer, _super);
|
||
|
|
function Customizer(props, context) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = _this._getInjectedProps(props, context);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Customizer.prototype.getChildContext = function () {
|
||
|
|
return this.state;
|
||
|
|
};
|
||
|
|
Customizer.prototype.componentWillReceiveProps = function (newProps, newContext) {
|
||
|
|
this.setState(this._getInjectedProps(newProps, newContext));
|
||
|
|
};
|
||
|
|
Customizer.prototype.render = function () {
|
||
|
|
return React.Children.only(this.props.children);
|
||
|
|
};
|
||
|
|
Customizer.prototype._getInjectedProps = function (props, context) {
|
||
|
|
var _a = props.settings, injectedPropsFromSettings = _a === void 0 ? {} : _a;
|
||
|
|
var _b = context.injectedProps, injectedPropsFromContext = _b === void 0 ? {} : _b;
|
||
|
|
return {
|
||
|
|
injectedProps: object_1.assign({}, injectedPropsFromContext, injectedPropsFromSettings)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
return Customizer;
|
||
|
|
}(BaseComponent_1.BaseComponent));
|
||
|
|
Customizer.contextTypes = {
|
||
|
|
injectedProps: PropTypes.object
|
||
|
|
};
|
||
|
|
Customizer.childContextTypes = Customizer.contextTypes;
|
||
|
|
exports.Customizer = Customizer;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 22 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*/
|
||
|
|
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
var REACT_ELEMENT_TYPE = (typeof Symbol === 'function' &&
|
||
|
|
Symbol.for &&
|
||
|
|
Symbol.for('react.element')) ||
|
||
|
|
0xeac7;
|
||
|
|
|
||
|
|
var isValidElement = function(object) {
|
||
|
|
return typeof object === 'object' &&
|
||
|
|
object !== null &&
|
||
|
|
object.$$typeof === REACT_ELEMENT_TYPE;
|
||
|
|
};
|
||
|
|
|
||
|
|
// By explicitly using `prop-types` you are opting into new development behavior.
|
||
|
|
// http://fb.me/prop-types-in-prod
|
||
|
|
var throwOnDirectAccess = true;
|
||
|
|
module.exports = __webpack_require__(24)(isValidElement, throwOnDirectAccess);
|
||
|
|
} else {
|
||
|
|
// By explicitly using `prop-types` you are opting into new production behavior.
|
||
|
|
// http://fb.me/prop-types-in-prod
|
||
|
|
module.exports = __webpack_require__(30)();
|
||
|
|
}
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 23 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
// shim for using process in browser
|
||
|
|
var process = module.exports = {};
|
||
|
|
|
||
|
|
// cached from whatever global is present so that test runners that stub it
|
||
|
|
// don't break things. But we need to wrap it in a try catch in case it is
|
||
|
|
// wrapped in strict mode code which doesn't define any globals. It's inside a
|
||
|
|
// function because try/catches deoptimize in certain engines.
|
||
|
|
|
||
|
|
var cachedSetTimeout;
|
||
|
|
var cachedClearTimeout;
|
||
|
|
|
||
|
|
function defaultSetTimout() {
|
||
|
|
throw new Error('setTimeout has not been defined');
|
||
|
|
}
|
||
|
|
function defaultClearTimeout () {
|
||
|
|
throw new Error('clearTimeout has not been defined');
|
||
|
|
}
|
||
|
|
(function () {
|
||
|
|
try {
|
||
|
|
if (typeof setTimeout === 'function') {
|
||
|
|
cachedSetTimeout = setTimeout;
|
||
|
|
} else {
|
||
|
|
cachedSetTimeout = defaultSetTimout;
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
cachedSetTimeout = defaultSetTimout;
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
if (typeof clearTimeout === 'function') {
|
||
|
|
cachedClearTimeout = clearTimeout;
|
||
|
|
} else {
|
||
|
|
cachedClearTimeout = defaultClearTimeout;
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
cachedClearTimeout = defaultClearTimeout;
|
||
|
|
}
|
||
|
|
} ())
|
||
|
|
function runTimeout(fun) {
|
||
|
|
if (cachedSetTimeout === setTimeout) {
|
||
|
|
//normal enviroments in sane situations
|
||
|
|
return setTimeout(fun, 0);
|
||
|
|
}
|
||
|
|
// if setTimeout wasn't available but was latter defined
|
||
|
|
if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
|
||
|
|
cachedSetTimeout = setTimeout;
|
||
|
|
return setTimeout(fun, 0);
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
// when when somebody has screwed with setTimeout but no I.E. maddness
|
||
|
|
return cachedSetTimeout(fun, 0);
|
||
|
|
} catch(e){
|
||
|
|
try {
|
||
|
|
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
|
||
|
|
return cachedSetTimeout.call(null, fun, 0);
|
||
|
|
} catch(e){
|
||
|
|
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
|
||
|
|
return cachedSetTimeout.call(this, fun, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
function runClearTimeout(marker) {
|
||
|
|
if (cachedClearTimeout === clearTimeout) {
|
||
|
|
//normal enviroments in sane situations
|
||
|
|
return clearTimeout(marker);
|
||
|
|
}
|
||
|
|
// if clearTimeout wasn't available but was latter defined
|
||
|
|
if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
|
||
|
|
cachedClearTimeout = clearTimeout;
|
||
|
|
return clearTimeout(marker);
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
// when when somebody has screwed with setTimeout but no I.E. maddness
|
||
|
|
return cachedClearTimeout(marker);
|
||
|
|
} catch (e){
|
||
|
|
try {
|
||
|
|
// When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
|
||
|
|
return cachedClearTimeout.call(null, marker);
|
||
|
|
} catch (e){
|
||
|
|
// same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
|
||
|
|
// Some versions of I.E. have different rules for clearTimeout vs setTimeout
|
||
|
|
return cachedClearTimeout.call(this, marker);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
var queue = [];
|
||
|
|
var draining = false;
|
||
|
|
var currentQueue;
|
||
|
|
var queueIndex = -1;
|
||
|
|
|
||
|
|
function cleanUpNextTick() {
|
||
|
|
if (!draining || !currentQueue) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
draining = false;
|
||
|
|
if (currentQueue.length) {
|
||
|
|
queue = currentQueue.concat(queue);
|
||
|
|
} else {
|
||
|
|
queueIndex = -1;
|
||
|
|
}
|
||
|
|
if (queue.length) {
|
||
|
|
drainQueue();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function drainQueue() {
|
||
|
|
if (draining) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var timeout = runTimeout(cleanUpNextTick);
|
||
|
|
draining = true;
|
||
|
|
|
||
|
|
var len = queue.length;
|
||
|
|
while(len) {
|
||
|
|
currentQueue = queue;
|
||
|
|
queue = [];
|
||
|
|
while (++queueIndex < len) {
|
||
|
|
if (currentQueue) {
|
||
|
|
currentQueue[queueIndex].run();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
queueIndex = -1;
|
||
|
|
len = queue.length;
|
||
|
|
}
|
||
|
|
currentQueue = null;
|
||
|
|
draining = false;
|
||
|
|
runClearTimeout(timeout);
|
||
|
|
}
|
||
|
|
|
||
|
|
process.nextTick = function (fun) {
|
||
|
|
var args = new Array(arguments.length - 1);
|
||
|
|
if (arguments.length > 1) {
|
||
|
|
for (var i = 1; i < arguments.length; i++) {
|
||
|
|
args[i - 1] = arguments[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
queue.push(new Item(fun, args));
|
||
|
|
if (queue.length === 1 && !draining) {
|
||
|
|
runTimeout(drainQueue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// v8 likes predictible objects
|
||
|
|
function Item(fun, array) {
|
||
|
|
this.fun = fun;
|
||
|
|
this.array = array;
|
||
|
|
}
|
||
|
|
Item.prototype.run = function () {
|
||
|
|
this.fun.apply(null, this.array);
|
||
|
|
};
|
||
|
|
process.title = 'browser';
|
||
|
|
process.browser = true;
|
||
|
|
process.env = {};
|
||
|
|
process.argv = [];
|
||
|
|
process.version = ''; // empty string to avoid regexp issues
|
||
|
|
process.versions = {};
|
||
|
|
|
||
|
|
function noop() {}
|
||
|
|
|
||
|
|
process.on = noop;
|
||
|
|
process.addListener = noop;
|
||
|
|
process.once = noop;
|
||
|
|
process.off = noop;
|
||
|
|
process.removeListener = noop;
|
||
|
|
process.removeAllListeners = noop;
|
||
|
|
process.emit = noop;
|
||
|
|
process.prependListener = noop;
|
||
|
|
process.prependOnceListener = noop;
|
||
|
|
|
||
|
|
process.listeners = function (name) { return [] }
|
||
|
|
|
||
|
|
process.binding = function (name) {
|
||
|
|
throw new Error('process.binding is not supported');
|
||
|
|
};
|
||
|
|
|
||
|
|
process.cwd = function () { return '/' };
|
||
|
|
process.chdir = function (dir) {
|
||
|
|
throw new Error('process.chdir is not supported');
|
||
|
|
};
|
||
|
|
process.umask = function() { return 0; };
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 24 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var emptyFunction = __webpack_require__(25);
|
||
|
|
var invariant = __webpack_require__(26);
|
||
|
|
var warning = __webpack_require__(27);
|
||
|
|
|
||
|
|
var ReactPropTypesSecret = __webpack_require__(28);
|
||
|
|
var checkPropTypes = __webpack_require__(29);
|
||
|
|
|
||
|
|
module.exports = function(isValidElement, throwOnDirectAccess) {
|
||
|
|
/* global Symbol */
|
||
|
|
var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
|
||
|
|
var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Returns the iterator method function contained on the iterable object.
|
||
|
|
*
|
||
|
|
* Be sure to invoke the function with the iterable as context:
|
||
|
|
*
|
||
|
|
* var iteratorFn = getIteratorFn(myIterable);
|
||
|
|
* if (iteratorFn) {
|
||
|
|
* var iterator = iteratorFn.call(myIterable);
|
||
|
|
* ...
|
||
|
|
* }
|
||
|
|
*
|
||
|
|
* @param {?object} maybeIterable
|
||
|
|
* @return {?function}
|
||
|
|
*/
|
||
|
|
function getIteratorFn(maybeIterable) {
|
||
|
|
var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
|
||
|
|
if (typeof iteratorFn === 'function') {
|
||
|
|
return iteratorFn;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Collection of methods that allow declaration and validation of props that are
|
||
|
|
* supplied to React components. Example usage:
|
||
|
|
*
|
||
|
|
* var Props = require('ReactPropTypes');
|
||
|
|
* var MyArticle = React.createClass({
|
||
|
|
* propTypes: {
|
||
|
|
* // An optional string prop named "description".
|
||
|
|
* description: Props.string,
|
||
|
|
*
|
||
|
|
* // A required enum prop named "category".
|
||
|
|
* category: Props.oneOf(['News','Photos']).isRequired,
|
||
|
|
*
|
||
|
|
* // A prop named "dialog" that requires an instance of Dialog.
|
||
|
|
* dialog: Props.instanceOf(Dialog).isRequired
|
||
|
|
* },
|
||
|
|
* render: function() { ... }
|
||
|
|
* });
|
||
|
|
*
|
||
|
|
* A more formal specification of how these methods are used:
|
||
|
|
*
|
||
|
|
* type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
|
||
|
|
* decl := ReactPropTypes.{type}(.isRequired)?
|
||
|
|
*
|
||
|
|
* Each and every declaration produces a function with the same signature. This
|
||
|
|
* allows the creation of custom validation functions. For example:
|
||
|
|
*
|
||
|
|
* var MyLink = React.createClass({
|
||
|
|
* propTypes: {
|
||
|
|
* // An optional string or URI prop named "href".
|
||
|
|
* href: function(props, propName, componentName) {
|
||
|
|
* var propValue = props[propName];
|
||
|
|
* if (propValue != null && typeof propValue !== 'string' &&
|
||
|
|
* !(propValue instanceof URI)) {
|
||
|
|
* return new Error(
|
||
|
|
* 'Expected a string or an URI for ' + propName + ' in ' +
|
||
|
|
* componentName
|
||
|
|
* );
|
||
|
|
* }
|
||
|
|
* }
|
||
|
|
* },
|
||
|
|
* render: function() {...}
|
||
|
|
* });
|
||
|
|
*
|
||
|
|
* @internal
|
||
|
|
*/
|
||
|
|
|
||
|
|
var ANONYMOUS = '<<anonymous>>';
|
||
|
|
|
||
|
|
// Important!
|
||
|
|
// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
|
||
|
|
var ReactPropTypes = {
|
||
|
|
array: createPrimitiveTypeChecker('array'),
|
||
|
|
bool: createPrimitiveTypeChecker('boolean'),
|
||
|
|
func: createPrimitiveTypeChecker('function'),
|
||
|
|
number: createPrimitiveTypeChecker('number'),
|
||
|
|
object: createPrimitiveTypeChecker('object'),
|
||
|
|
string: createPrimitiveTypeChecker('string'),
|
||
|
|
symbol: createPrimitiveTypeChecker('symbol'),
|
||
|
|
|
||
|
|
any: createAnyTypeChecker(),
|
||
|
|
arrayOf: createArrayOfTypeChecker,
|
||
|
|
element: createElementTypeChecker(),
|
||
|
|
instanceOf: createInstanceTypeChecker,
|
||
|
|
node: createNodeChecker(),
|
||
|
|
objectOf: createObjectOfTypeChecker,
|
||
|
|
oneOf: createEnumTypeChecker,
|
||
|
|
oneOfType: createUnionTypeChecker,
|
||
|
|
shape: createShapeTypeChecker
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* inlined Object.is polyfill to avoid requiring consumers ship their own
|
||
|
|
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
|
||
|
|
*/
|
||
|
|
/*eslint-disable no-self-compare*/
|
||
|
|
function is(x, y) {
|
||
|
|
// SameValue algorithm
|
||
|
|
if (x === y) {
|
||
|
|
// Steps 1-5, 7-10
|
||
|
|
// Steps 6.b-6.e: +0 != -0
|
||
|
|
return x !== 0 || 1 / x === 1 / y;
|
||
|
|
} else {
|
||
|
|
// Step 6.a: NaN == NaN
|
||
|
|
return x !== x && y !== y;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*eslint-enable no-self-compare*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* We use an Error-like object for backward compatibility as people may call
|
||
|
|
* PropTypes directly and inspect their output. However, we don't use real
|
||
|
|
* Errors anymore. We don't inspect their stack anyway, and creating them
|
||
|
|
* is prohibitively expensive if they are created too often, such as what
|
||
|
|
* happens in oneOfType() for any type before the one that matched.
|
||
|
|
*/
|
||
|
|
function PropTypeError(message) {
|
||
|
|
this.message = message;
|
||
|
|
this.stack = '';
|
||
|
|
}
|
||
|
|
// Make `instanceof Error` still work for returned errors.
|
||
|
|
PropTypeError.prototype = Error.prototype;
|
||
|
|
|
||
|
|
function createChainableTypeChecker(validate) {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
var manualPropTypeCallCache = {};
|
||
|
|
var manualPropTypeWarningCount = 0;
|
||
|
|
}
|
||
|
|
function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
|
||
|
|
componentName = componentName || ANONYMOUS;
|
||
|
|
propFullName = propFullName || propName;
|
||
|
|
|
||
|
|
if (secret !== ReactPropTypesSecret) {
|
||
|
|
if (throwOnDirectAccess) {
|
||
|
|
// New behavior only for users of `prop-types` package
|
||
|
|
invariant(
|
||
|
|
false,
|
||
|
|
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
|
||
|
|
'Use `PropTypes.checkPropTypes()` to call them. ' +
|
||
|
|
'Read more at http://fb.me/use-check-prop-types'
|
||
|
|
);
|
||
|
|
} else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
|
||
|
|
// Old behavior for people using React.PropTypes
|
||
|
|
var cacheKey = componentName + ':' + propName;
|
||
|
|
if (
|
||
|
|
!manualPropTypeCallCache[cacheKey] &&
|
||
|
|
// Avoid spamming the console because they are often not actionable except for lib authors
|
||
|
|
manualPropTypeWarningCount < 3
|
||
|
|
) {
|
||
|
|
warning(
|
||
|
|
false,
|
||
|
|
'You are manually calling a React.PropTypes validation ' +
|
||
|
|
'function for the `%s` prop on `%s`. This is deprecated ' +
|
||
|
|
'and will throw in the standalone `prop-types` package. ' +
|
||
|
|
'You may be seeing this warning due to a third-party PropTypes ' +
|
||
|
|
'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.',
|
||
|
|
propFullName,
|
||
|
|
componentName
|
||
|
|
);
|
||
|
|
manualPropTypeCallCache[cacheKey] = true;
|
||
|
|
manualPropTypeWarningCount++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (props[propName] == null) {
|
||
|
|
if (isRequired) {
|
||
|
|
if (props[propName] === null) {
|
||
|
|
return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
|
||
|
|
}
|
||
|
|
return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
} else {
|
||
|
|
return validate(props, propName, componentName, location, propFullName);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var chainedCheckType = checkType.bind(null, false);
|
||
|
|
chainedCheckType.isRequired = checkType.bind(null, true);
|
||
|
|
|
||
|
|
return chainedCheckType;
|
||
|
|
}
|
||
|
|
|
||
|
|
function createPrimitiveTypeChecker(expectedType) {
|
||
|
|
function validate(props, propName, componentName, location, propFullName, secret) {
|
||
|
|
var propValue = props[propName];
|
||
|
|
var propType = getPropType(propValue);
|
||
|
|
if (propType !== expectedType) {
|
||
|
|
// `propValue` being instance of, say, date/regexp, pass the 'object'
|
||
|
|
// check, but we can offer a more precise error message here rather than
|
||
|
|
// 'of type `object`'.
|
||
|
|
var preciseType = getPreciseType(propValue);
|
||
|
|
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createAnyTypeChecker() {
|
||
|
|
return createChainableTypeChecker(emptyFunction.thatReturnsNull);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createArrayOfTypeChecker(typeChecker) {
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
if (typeof typeChecker !== 'function') {
|
||
|
|
return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
|
||
|
|
}
|
||
|
|
var propValue = props[propName];
|
||
|
|
if (!Array.isArray(propValue)) {
|
||
|
|
var propType = getPropType(propValue);
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
|
||
|
|
}
|
||
|
|
for (var i = 0; i < propValue.length; i++) {
|
||
|
|
var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret);
|
||
|
|
if (error instanceof Error) {
|
||
|
|
return error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createElementTypeChecker() {
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
var propValue = props[propName];
|
||
|
|
if (!isValidElement(propValue)) {
|
||
|
|
var propType = getPropType(propValue);
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createInstanceTypeChecker(expectedClass) {
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
if (!(props[propName] instanceof expectedClass)) {
|
||
|
|
var expectedClassName = expectedClass.name || ANONYMOUS;
|
||
|
|
var actualClassName = getClassName(props[propName]);
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createEnumTypeChecker(expectedValues) {
|
||
|
|
if (!Array.isArray(expectedValues)) {
|
||
|
|
process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOf, expected an instance of array.') : void 0;
|
||
|
|
return emptyFunction.thatReturnsNull;
|
||
|
|
}
|
||
|
|
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
var propValue = props[propName];
|
||
|
|
for (var i = 0; i < expectedValues.length; i++) {
|
||
|
|
if (is(propValue, expectedValues[i])) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var valuesString = JSON.stringify(expectedValues);
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createObjectOfTypeChecker(typeChecker) {
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
if (typeof typeChecker !== 'function') {
|
||
|
|
return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
|
||
|
|
}
|
||
|
|
var propValue = props[propName];
|
||
|
|
var propType = getPropType(propValue);
|
||
|
|
if (propType !== 'object') {
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
|
||
|
|
}
|
||
|
|
for (var key in propValue) {
|
||
|
|
if (propValue.hasOwnProperty(key)) {
|
||
|
|
var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
|
||
|
|
if (error instanceof Error) {
|
||
|
|
return error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createUnionTypeChecker(arrayOfTypeCheckers) {
|
||
|
|
if (!Array.isArray(arrayOfTypeCheckers)) {
|
||
|
|
process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
|
||
|
|
return emptyFunction.thatReturnsNull;
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
||
|
|
var checker = arrayOfTypeCheckers[i];
|
||
|
|
if (typeof checker !== 'function') {
|
||
|
|
warning(
|
||
|
|
false,
|
||
|
|
'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' +
|
||
|
|
'received %s at index %s.',
|
||
|
|
getPostfixForTypeWarning(checker),
|
||
|
|
i
|
||
|
|
);
|
||
|
|
return emptyFunction.thatReturnsNull;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
|
||
|
|
var checker = arrayOfTypeCheckers[i];
|
||
|
|
if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret) == null) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createNodeChecker() {
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
if (!isNode(props[propName])) {
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createShapeTypeChecker(shapeTypes) {
|
||
|
|
function validate(props, propName, componentName, location, propFullName) {
|
||
|
|
var propValue = props[propName];
|
||
|
|
var propType = getPropType(propValue);
|
||
|
|
if (propType !== 'object') {
|
||
|
|
return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
|
||
|
|
}
|
||
|
|
for (var key in shapeTypes) {
|
||
|
|
var checker = shapeTypes[key];
|
||
|
|
if (!checker) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret);
|
||
|
|
if (error) {
|
||
|
|
return error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return createChainableTypeChecker(validate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function isNode(propValue) {
|
||
|
|
switch (typeof propValue) {
|
||
|
|
case 'number':
|
||
|
|
case 'string':
|
||
|
|
case 'undefined':
|
||
|
|
return true;
|
||
|
|
case 'boolean':
|
||
|
|
return !propValue;
|
||
|
|
case 'object':
|
||
|
|
if (Array.isArray(propValue)) {
|
||
|
|
return propValue.every(isNode);
|
||
|
|
}
|
||
|
|
if (propValue === null || isValidElement(propValue)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
var iteratorFn = getIteratorFn(propValue);
|
||
|
|
if (iteratorFn) {
|
||
|
|
var iterator = iteratorFn.call(propValue);
|
||
|
|
var step;
|
||
|
|
if (iteratorFn !== propValue.entries) {
|
||
|
|
while (!(step = iterator.next()).done) {
|
||
|
|
if (!isNode(step.value)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// Iterator will provide entry [k,v] tuples rather than values.
|
||
|
|
while (!(step = iterator.next()).done) {
|
||
|
|
var entry = step.value;
|
||
|
|
if (entry) {
|
||
|
|
if (!isNode(entry[1])) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
default:
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function isSymbol(propType, propValue) {
|
||
|
|
// Native Symbol.
|
||
|
|
if (propType === 'symbol') {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
|
||
|
|
if (propValue['@@toStringTag'] === 'Symbol') {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fallback for non-spec compliant Symbols which are polyfilled.
|
||
|
|
if (typeof Symbol === 'function' && propValue instanceof Symbol) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Equivalent of `typeof` but with special handling for array and regexp.
|
||
|
|
function getPropType(propValue) {
|
||
|
|
var propType = typeof propValue;
|
||
|
|
if (Array.isArray(propValue)) {
|
||
|
|
return 'array';
|
||
|
|
}
|
||
|
|
if (propValue instanceof RegExp) {
|
||
|
|
// Old webkits (at least until Android 4.0) return 'function' rather than
|
||
|
|
// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
|
||
|
|
// passes PropTypes.object.
|
||
|
|
return 'object';
|
||
|
|
}
|
||
|
|
if (isSymbol(propType, propValue)) {
|
||
|
|
return 'symbol';
|
||
|
|
}
|
||
|
|
return propType;
|
||
|
|
}
|
||
|
|
|
||
|
|
// This handles more types than `getPropType`. Only used for error messages.
|
||
|
|
// See `createPrimitiveTypeChecker`.
|
||
|
|
function getPreciseType(propValue) {
|
||
|
|
if (typeof propValue === 'undefined' || propValue === null) {
|
||
|
|
return '' + propValue;
|
||
|
|
}
|
||
|
|
var propType = getPropType(propValue);
|
||
|
|
if (propType === 'object') {
|
||
|
|
if (propValue instanceof Date) {
|
||
|
|
return 'date';
|
||
|
|
} else if (propValue instanceof RegExp) {
|
||
|
|
return 'regexp';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return propType;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Returns a string that is postfixed to a warning about an invalid type.
|
||
|
|
// For example, "undefined" or "of type array"
|
||
|
|
function getPostfixForTypeWarning(value) {
|
||
|
|
var type = getPreciseType(value);
|
||
|
|
switch (type) {
|
||
|
|
case 'array':
|
||
|
|
case 'object':
|
||
|
|
return 'an ' + type;
|
||
|
|
case 'boolean':
|
||
|
|
case 'date':
|
||
|
|
case 'regexp':
|
||
|
|
return 'a ' + type;
|
||
|
|
default:
|
||
|
|
return type;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Returns class name of the object, if any.
|
||
|
|
function getClassName(propValue) {
|
||
|
|
if (!propValue.constructor || !propValue.constructor.name) {
|
||
|
|
return ANONYMOUS;
|
||
|
|
}
|
||
|
|
return propValue.constructor.name;
|
||
|
|
}
|
||
|
|
|
||
|
|
ReactPropTypes.checkPropTypes = checkPropTypes;
|
||
|
|
ReactPropTypes.PropTypes = ReactPropTypes;
|
||
|
|
|
||
|
|
return ReactPropTypes;
|
||
|
|
};
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 25 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
function makeEmptyFunction(arg) {
|
||
|
|
return function () {
|
||
|
|
return arg;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This function accepts and discards inputs; it has no side effects. This is
|
||
|
|
* primarily useful idiomatically for overridable function endpoints which
|
||
|
|
* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
|
||
|
|
*/
|
||
|
|
var emptyFunction = function emptyFunction() {};
|
||
|
|
|
||
|
|
emptyFunction.thatReturns = makeEmptyFunction;
|
||
|
|
emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
|
||
|
|
emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
|
||
|
|
emptyFunction.thatReturnsNull = makeEmptyFunction(null);
|
||
|
|
emptyFunction.thatReturnsThis = function () {
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
emptyFunction.thatReturnsArgument = function (arg) {
|
||
|
|
return arg;
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports = emptyFunction;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 26 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Use invariant() to assert state which your program assumes to be true.
|
||
|
|
*
|
||
|
|
* Provide sprintf-style format (only %s is supported) and arguments
|
||
|
|
* to provide information about what broke and what you were
|
||
|
|
* expecting.
|
||
|
|
*
|
||
|
|
* The invariant message will be stripped in production, but the invariant
|
||
|
|
* will remain to ensure logic does not differ in production.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var validateFormat = function validateFormat(format) {};
|
||
|
|
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
validateFormat = function validateFormat(format) {
|
||
|
|
if (format === undefined) {
|
||
|
|
throw new Error('invariant requires an error message argument');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function invariant(condition, format, a, b, c, d, e, f) {
|
||
|
|
validateFormat(format);
|
||
|
|
|
||
|
|
if (!condition) {
|
||
|
|
var error;
|
||
|
|
if (format === undefined) {
|
||
|
|
error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
|
||
|
|
} else {
|
||
|
|
var args = [a, b, c, d, e, f];
|
||
|
|
var argIndex = 0;
|
||
|
|
error = new Error(format.replace(/%s/g, function () {
|
||
|
|
return args[argIndex++];
|
||
|
|
}));
|
||
|
|
error.name = 'Invariant Violation';
|
||
|
|
}
|
||
|
|
|
||
|
|
error.framesToPop = 1; // we don't care about invariant's own frame
|
||
|
|
throw error;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = invariant;
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 27 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {/**
|
||
|
|
* Copyright 2014-2015, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var emptyFunction = __webpack_require__(25);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Similar to invariant but only logs a warning if the condition is not met.
|
||
|
|
* This can be used to log issues in development environments in critical
|
||
|
|
* paths. Removing the logging code for production environments will keep the
|
||
|
|
* same logic and follow the same code paths.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var warning = emptyFunction;
|
||
|
|
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
(function () {
|
||
|
|
var printWarning = function printWarning(format) {
|
||
|
|
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
||
|
|
args[_key - 1] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
var argIndex = 0;
|
||
|
|
var message = 'Warning: ' + format.replace(/%s/g, function () {
|
||
|
|
return args[argIndex++];
|
||
|
|
});
|
||
|
|
if (typeof console !== 'undefined') {
|
||
|
|
console.error(message);
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
// --- Welcome to debugging React ---
|
||
|
|
// This error was thrown as a convenience so that you can use this stack
|
||
|
|
// to find the callsite that caused this warning to fire.
|
||
|
|
throw new Error(message);
|
||
|
|
} catch (x) {}
|
||
|
|
};
|
||
|
|
|
||
|
|
warning = function warning(condition, format) {
|
||
|
|
if (format === undefined) {
|
||
|
|
throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (format.indexOf('Failed Composite propType: ') === 0) {
|
||
|
|
return; // Ignore CompositeComponent proptype check.
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!condition) {
|
||
|
|
for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
|
||
|
|
args[_key2 - 2] = arguments[_key2];
|
||
|
|
}
|
||
|
|
|
||
|
|
printWarning.apply(undefined, [format].concat(args));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = warning;
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 28 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
||
|
|
|
||
|
|
module.exports = ReactPropTypesSecret;
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 29 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
var invariant = __webpack_require__(26);
|
||
|
|
var warning = __webpack_require__(27);
|
||
|
|
var ReactPropTypesSecret = __webpack_require__(28);
|
||
|
|
var loggedTypeFailures = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Assert that the values match with the type specs.
|
||
|
|
* Error messages are memorized and will only be shown once.
|
||
|
|
*
|
||
|
|
* @param {object} typeSpecs Map of name to a ReactPropType
|
||
|
|
* @param {object} values Runtime values that need to be type-checked
|
||
|
|
* @param {string} location e.g. "prop", "context", "child context"
|
||
|
|
* @param {string} componentName Name of the component for error messages.
|
||
|
|
* @param {?Function} getStack Returns the component stack.
|
||
|
|
* @private
|
||
|
|
*/
|
||
|
|
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
for (var typeSpecName in typeSpecs) {
|
||
|
|
if (typeSpecs.hasOwnProperty(typeSpecName)) {
|
||
|
|
var error;
|
||
|
|
// Prop type validation may throw. In case they do, we don't want to
|
||
|
|
// fail the render phase where it didn't fail before. So we log it.
|
||
|
|
// After these have been cleaned up, we'll let them throw.
|
||
|
|
try {
|
||
|
|
// This is intentionally an invariant that gets caught. It's the same
|
||
|
|
// behavior as without this statement except with a better message.
|
||
|
|
invariant(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'React.PropTypes.', componentName || 'React class', location, typeSpecName);
|
||
|
|
error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
|
||
|
|
} catch (ex) {
|
||
|
|
error = ex;
|
||
|
|
}
|
||
|
|
warning(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error);
|
||
|
|
if (error instanceof Error && !(error.message in loggedTypeFailures)) {
|
||
|
|
// Only monitor this failure once because there tends to be a lot of the
|
||
|
|
// same error.
|
||
|
|
loggedTypeFailures[error.message] = true;
|
||
|
|
|
||
|
|
var stack = getStack ? getStack() : '';
|
||
|
|
|
||
|
|
warning(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : '');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = checkPropTypes;
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 30 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var emptyFunction = __webpack_require__(25);
|
||
|
|
var invariant = __webpack_require__(26);
|
||
|
|
var ReactPropTypesSecret = __webpack_require__(28);
|
||
|
|
|
||
|
|
module.exports = function() {
|
||
|
|
function shim(props, propName, componentName, location, propFullName, secret) {
|
||
|
|
if (secret === ReactPropTypesSecret) {
|
||
|
|
// It is still safe when called from React.
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
invariant(
|
||
|
|
false,
|
||
|
|
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
|
||
|
|
'Use PropTypes.checkPropTypes() to call them. ' +
|
||
|
|
'Read more at http://fb.me/use-check-prop-types'
|
||
|
|
);
|
||
|
|
};
|
||
|
|
shim.isRequired = shim;
|
||
|
|
function getShim() {
|
||
|
|
return shim;
|
||
|
|
};
|
||
|
|
// Important!
|
||
|
|
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
|
||
|
|
var ReactPropTypes = {
|
||
|
|
array: shim,
|
||
|
|
bool: shim,
|
||
|
|
func: shim,
|
||
|
|
number: shim,
|
||
|
|
object: shim,
|
||
|
|
string: shim,
|
||
|
|
symbol: shim,
|
||
|
|
|
||
|
|
any: shim,
|
||
|
|
arrayOf: getShim,
|
||
|
|
element: shim,
|
||
|
|
instanceOf: getShim,
|
||
|
|
node: shim,
|
||
|
|
objectOf: getShim,
|
||
|
|
oneOf: getShim,
|
||
|
|
oneOfType: getShim,
|
||
|
|
shape: getShim
|
||
|
|
};
|
||
|
|
|
||
|
|
ReactPropTypes.checkPropTypes = emptyFunction;
|
||
|
|
ReactPropTypes.PropTypes = ReactPropTypes;
|
||
|
|
|
||
|
|
return ReactPropTypes;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 31 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
// Initialize global window id.
|
||
|
|
var CURRENT_ID_PROPERTY = '__currentId__';
|
||
|
|
var _global = (typeof window !== 'undefined' && window) || process;
|
||
|
|
if (_global[CURRENT_ID_PROPERTY] === undefined) {
|
||
|
|
_global[CURRENT_ID_PROPERTY] = 0;
|
||
|
|
}
|
||
|
|
function checkProperties(a, b) {
|
||
|
|
for (var propName in a) {
|
||
|
|
if (a.hasOwnProperty(propName)) {
|
||
|
|
if (!b.hasOwnProperty(propName) || (b[propName] !== a[propName])) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
// Compare a to b and b to a
|
||
|
|
function shallowCompare(a, b) {
|
||
|
|
return checkProperties(a, b) && checkProperties(b, a);
|
||
|
|
}
|
||
|
|
exports.shallowCompare = shallowCompare;
|
||
|
|
/**
|
||
|
|
* Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more
|
||
|
|
* objects as arguments and they will be merged sequentially into the target. Note that this will
|
||
|
|
* shallow merge; it will not create new cloned values for target members.
|
||
|
|
*
|
||
|
|
* @param target - Target object to merge following object arguments into.
|
||
|
|
* @param args - One or more objects that will be mixed into the target in the order they are provided.
|
||
|
|
* @returns Resulting merged target.
|
||
|
|
*/
|
||
|
|
function assign(target) {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 1; _i < arguments.length; _i++) {
|
||
|
|
args[_i - 1] = arguments[_i];
|
||
|
|
}
|
||
|
|
return filteredAssign.apply(this, [null, target].concat(args));
|
||
|
|
}
|
||
|
|
exports.assign = assign;
|
||
|
|
/**
|
||
|
|
* Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter
|
||
|
|
* the resulting merges. This allows for scenarios where you want to merge "everything except that one thing"
|
||
|
|
* or "properties that start with data-". Note that this will shallow merge; it will not create new cloned
|
||
|
|
* values for target members.
|
||
|
|
*
|
||
|
|
* @param isAllowed - Callback to determine if the given propName is allowed in the result.
|
||
|
|
* @param target - Target object to merge following object arguments into.
|
||
|
|
* @param args - One or more objects that will be mixed into the target in the order they are provided.
|
||
|
|
* @returns Resulting merged target.
|
||
|
|
*/
|
||
|
|
function filteredAssign(isAllowed, target) {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 2; _i < arguments.length; _i++) {
|
||
|
|
args[_i - 2] = arguments[_i];
|
||
|
|
}
|
||
|
|
target = target || {};
|
||
|
|
for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
|
||
|
|
var sourceObject = args_1[_a];
|
||
|
|
if (sourceObject) {
|
||
|
|
for (var propName in sourceObject) {
|
||
|
|
if (sourceObject.hasOwnProperty(propName) &&
|
||
|
|
!isAllowed || isAllowed(propName)) {
|
||
|
|
target[propName] = sourceObject[propName];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
exports.filteredAssign = filteredAssign;
|
||
|
|
/** Generates a unique id in the global scope (this spans across duplicate copies of the same library.) */
|
||
|
|
function getId(prefix) {
|
||
|
|
var index = _global[CURRENT_ID_PROPERTY]++;
|
||
|
|
return (prefix || '') + index;
|
||
|
|
}
|
||
|
|
exports.getId = getId;
|
||
|
|
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 32 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/**
|
||
|
|
* Utility component for delaying the render of a child component after a given delay. This component
|
||
|
|
* requires a single child component; don't pass in many components. Wrap multiple components in a DIV
|
||
|
|
* if necessary.
|
||
|
|
*/
|
||
|
|
var DelayedRender = (function (_super) {
|
||
|
|
__extends(DelayedRender, _super);
|
||
|
|
function DelayedRender(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isRendered: false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DelayedRender.prototype.componentDidMount = function () {
|
||
|
|
var _this = this;
|
||
|
|
var delay = this.props.delay;
|
||
|
|
this._timeoutId = setTimeout(function () {
|
||
|
|
_this.setState({
|
||
|
|
isRendered: true
|
||
|
|
});
|
||
|
|
}, delay);
|
||
|
|
};
|
||
|
|
DelayedRender.prototype.componentWillUnmount = function () {
|
||
|
|
clearTimeout(this._timeoutId);
|
||
|
|
};
|
||
|
|
DelayedRender.prototype.render = function () {
|
||
|
|
return this.state.isRendered ? React.Children.only(this.props.children) : null;
|
||
|
|
};
|
||
|
|
return DelayedRender;
|
||
|
|
}(React.Component));
|
||
|
|
DelayedRender.defaultProps = {
|
||
|
|
delay: 0
|
||
|
|
};
|
||
|
|
exports.DelayedRender = DelayedRender;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 33 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var KeyCodes;
|
||
|
|
(function (KeyCodes) {
|
||
|
|
KeyCodes[KeyCodes["a"] = 65] = "a";
|
||
|
|
KeyCodes[KeyCodes["backspace"] = 8] = "backspace";
|
||
|
|
KeyCodes[KeyCodes["comma"] = 188] = "comma";
|
||
|
|
KeyCodes[KeyCodes["del"] = 46] = "del";
|
||
|
|
KeyCodes[KeyCodes["down"] = 40] = "down";
|
||
|
|
KeyCodes[KeyCodes["end"] = 35] = "end";
|
||
|
|
KeyCodes[KeyCodes["enter"] = 13] = "enter";
|
||
|
|
KeyCodes[KeyCodes["escape"] = 27] = "escape";
|
||
|
|
KeyCodes[KeyCodes["home"] = 36] = "home";
|
||
|
|
KeyCodes[KeyCodes["left"] = 37] = "left";
|
||
|
|
KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
|
||
|
|
KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
|
||
|
|
KeyCodes[KeyCodes["right"] = 39] = "right";
|
||
|
|
KeyCodes[KeyCodes["semicolon"] = 186] = "semicolon";
|
||
|
|
KeyCodes[KeyCodes["space"] = 32] = "space";
|
||
|
|
KeyCodes[KeyCodes["tab"] = 9] = "tab";
|
||
|
|
KeyCodes[KeyCodes["up"] = 38] = "up";
|
||
|
|
})(KeyCodes = exports.KeyCodes || (exports.KeyCodes = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 34 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Rectangle = (function () {
|
||
|
|
function Rectangle(left, right, top, bottom) {
|
||
|
|
if (left === void 0) { left = 0; }
|
||
|
|
if (right === void 0) { right = 0; }
|
||
|
|
if (top === void 0) { top = 0; }
|
||
|
|
if (bottom === void 0) { bottom = 0; }
|
||
|
|
this.top = top;
|
||
|
|
this.bottom = bottom;
|
||
|
|
this.left = left;
|
||
|
|
this.right = right;
|
||
|
|
}
|
||
|
|
Object.defineProperty(Rectangle.prototype, "width", {
|
||
|
|
/**
|
||
|
|
* Calculated automatically by subtracting the right from left
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
return this.right - this.left;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(Rectangle.prototype, "height", {
|
||
|
|
/**
|
||
|
|
* Calculated automatically by subtracting the bottom from top.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
return this.bottom - this.top;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* Tests if another rect is approximately equal to this rect (within 4 decimal places.)
|
||
|
|
*/
|
||
|
|
Rectangle.prototype.equals = function (rect) {
|
||
|
|
// I'm fixing it to 4 decimal places because it allows enough precision and will handle cases when something should be rounded,
|
||
|
|
// like .999999 should round to 1.
|
||
|
|
return (parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) &&
|
||
|
|
parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) &&
|
||
|
|
parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) &&
|
||
|
|
parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4)));
|
||
|
|
};
|
||
|
|
return Rectangle;
|
||
|
|
}());
|
||
|
|
exports.Rectangle = Rectangle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 35 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
function findIndex(array, cb) {
|
||
|
|
var index = -1;
|
||
|
|
for (var i = 0; array && i < array.length; i++) {
|
||
|
|
if (cb(array[i], i)) {
|
||
|
|
index = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return index;
|
||
|
|
}
|
||
|
|
exports.findIndex = findIndex;
|
||
|
|
function createArray(size, getItem) {
|
||
|
|
var array = [];
|
||
|
|
for (var i = 0; i < size; i++) {
|
||
|
|
array.push(getItem(i));
|
||
|
|
}
|
||
|
|
return array;
|
||
|
|
}
|
||
|
|
exports.createArray = createArray;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 36 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Autobind is a utility for binding methods in a class. This simplifies tagging methods as being "bound" to the this pointer
|
||
|
|
* so that they can be used in scenarios that simply require a function callback.
|
||
|
|
*/
|
||
|
|
function autobind(target, key, descriptor) {
|
||
|
|
var fn = descriptor.value;
|
||
|
|
var defining = false;
|
||
|
|
return {
|
||
|
|
configurable: true,
|
||
|
|
get: function () {
|
||
|
|
if (defining || this === fn.prototype || this.hasOwnProperty(key)) {
|
||
|
|
return fn;
|
||
|
|
}
|
||
|
|
// Bind method only once, and update the property to return the bound value from now on
|
||
|
|
var fnBound = fn.bind(this);
|
||
|
|
defining = true;
|
||
|
|
Object.defineProperty(this, key, {
|
||
|
|
configurable: true,
|
||
|
|
writable: true,
|
||
|
|
enumerable: true,
|
||
|
|
value: fnBound
|
||
|
|
});
|
||
|
|
defining = false;
|
||
|
|
return fnBound;
|
||
|
|
},
|
||
|
|
set: function (newValue) {
|
||
|
|
Object.defineProperty(this, key, {
|
||
|
|
configurable: true,
|
||
|
|
writable: true,
|
||
|
|
enumerable: true,
|
||
|
|
value: newValue
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.autobind = autobind;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 37 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
function css() {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
var classes = [];
|
||
|
|
for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
|
||
|
|
var arg = args_1[_a];
|
||
|
|
if (arg) {
|
||
|
|
if (typeof arg === 'string') {
|
||
|
|
classes.push(arg);
|
||
|
|
}
|
||
|
|
else if ((arg.hasOwnProperty('toString') && typeof (arg.toString) === 'function')) {
|
||
|
|
classes.push(arg.toString());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (var key in arg) {
|
||
|
|
if (arg[key]) {
|
||
|
|
classes.push(key);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return classes.join(' ');
|
||
|
|
}
|
||
|
|
exports.css = css;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 38 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var PropTypes = __webpack_require__(22);
|
||
|
|
function customizable(componentName) {
|
||
|
|
return function customizableFactory(ComposedComponent) {
|
||
|
|
return _a = (function (_super) {
|
||
|
|
__extends(ComponentWithInjectedProps, _super);
|
||
|
|
function ComponentWithInjectedProps() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
ComponentWithInjectedProps.prototype.render = function () {
|
||
|
|
var defaultProps = ((this.context.injectedProps) ?
|
||
|
|
this.context.injectedProps[componentName] :
|
||
|
|
null) || {};
|
||
|
|
return (React.createElement(ComposedComponent, __assign({}, defaultProps, this.props)));
|
||
|
|
};
|
||
|
|
return ComponentWithInjectedProps;
|
||
|
|
}(React.Component)),
|
||
|
|
_a.contextTypes = {
|
||
|
|
injectedProps: PropTypes.object
|
||
|
|
},
|
||
|
|
_a;
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.customizable = customizable;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 39 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* tslint:disable:no-string-literal */
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var dom_1 = __webpack_require__(16);
|
||
|
|
var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
|
||
|
|
var IS_VISIBLE_ATTRIBUTE = 'data-is-visible';
|
||
|
|
var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';
|
||
|
|
function getFirstFocusable(rootElement, currentElement, includeElementsInFocusZones) {
|
||
|
|
return getNextElement(rootElement, currentElement, true, false, false, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
exports.getFirstFocusable = getFirstFocusable;
|
||
|
|
function getLastFocusable(rootElement, currentElement, includeElementsInFocusZones) {
|
||
|
|
return getPreviousElement(rootElement, currentElement, true, false, true, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
exports.getLastFocusable = getLastFocusable;
|
||
|
|
/**
|
||
|
|
* Attempts to focus the first focusable element that is a child or child's child of the rootElement.
|
||
|
|
* @param rootElement - Element to start the search for a focusable child.
|
||
|
|
* @returns True if focus was set, false if it was not.
|
||
|
|
*/
|
||
|
|
function focusFirstChild(rootElement) {
|
||
|
|
var element = getNextElement(rootElement, rootElement, true, false, false, true);
|
||
|
|
if (element) {
|
||
|
|
element.focus();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
exports.focusFirstChild = focusFirstChild;
|
||
|
|
/** Traverse to find the previous element. */
|
||
|
|
function getPreviousElement(rootElement, currentElement, checkNode, suppressParentTraversal, traverseChildren, includeElementsInFocusZones) {
|
||
|
|
if (!currentElement ||
|
||
|
|
currentElement === rootElement) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var isCurrentElementVisible = isElementVisible(currentElement);
|
||
|
|
// Check its children.
|
||
|
|
if (traverseChildren && (includeElementsInFocusZones || !isElementFocusZone(currentElement)) && isCurrentElementVisible) {
|
||
|
|
var childMatch = getPreviousElement(rootElement, currentElement.lastElementChild, true, true, true, includeElementsInFocusZones);
|
||
|
|
if (childMatch) {
|
||
|
|
return childMatch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Check the current node, if it's not the first traversal.
|
||
|
|
if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) {
|
||
|
|
return currentElement;
|
||
|
|
}
|
||
|
|
// Check its previous sibling.
|
||
|
|
var siblingMatch = getPreviousElement(rootElement, currentElement.previousElementSibling, true, true, true, includeElementsInFocusZones);
|
||
|
|
if (siblingMatch) {
|
||
|
|
return siblingMatch;
|
||
|
|
}
|
||
|
|
// Check its parent.
|
||
|
|
if (!suppressParentTraversal) {
|
||
|
|
return getPreviousElement(rootElement, currentElement.parentElement, true, false, false, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
exports.getPreviousElement = getPreviousElement;
|
||
|
|
/** Traverse to find the next focusable element. */
|
||
|
|
function getNextElement(rootElement, currentElement, checkNode, suppressParentTraversal, suppressChildTraversal, includeElementsInFocusZones) {
|
||
|
|
if (!currentElement ||
|
||
|
|
(currentElement === rootElement && suppressChildTraversal)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var isCurrentElementVisible = isElementVisible(currentElement);
|
||
|
|
// Check the current node, if it's not the first traversal.
|
||
|
|
if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) {
|
||
|
|
return currentElement;
|
||
|
|
}
|
||
|
|
// Check its children.
|
||
|
|
if (!suppressChildTraversal && isCurrentElementVisible && (includeElementsInFocusZones || !isElementFocusZone(currentElement))) {
|
||
|
|
var childMatch = getNextElement(rootElement, currentElement.firstElementChild, true, true, false, includeElementsInFocusZones);
|
||
|
|
if (childMatch) {
|
||
|
|
return childMatch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (currentElement === rootElement) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
// Check its sibling.
|
||
|
|
var siblingMatch = getNextElement(rootElement, currentElement.nextElementSibling, true, true, false, includeElementsInFocusZones);
|
||
|
|
if (siblingMatch) {
|
||
|
|
return siblingMatch;
|
||
|
|
}
|
||
|
|
if (!suppressParentTraversal) {
|
||
|
|
return getNextElement(rootElement, currentElement.parentElement, false, false, true, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
exports.getNextElement = getNextElement;
|
||
|
|
function isElementVisible(element) {
|
||
|
|
// If the element is not valid, return false.
|
||
|
|
if (!element || !element.getAttribute) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
var visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE);
|
||
|
|
// If the element is explicitly marked with the visibility attribute, return that value as boolean.
|
||
|
|
if (visibilityAttribute !== null && visibilityAttribute !== undefined) {
|
||
|
|
return visibilityAttribute === 'true';
|
||
|
|
}
|
||
|
|
// Fallback to other methods of determining actual visibility.
|
||
|
|
return (element.offsetHeight !== 0 ||
|
||
|
|
element.offsetParent !== null ||
|
||
|
|
element.isVisible === true); // used as a workaround for testing.
|
||
|
|
}
|
||
|
|
exports.isElementVisible = isElementVisible;
|
||
|
|
function isElementTabbable(element) {
|
||
|
|
// If this element is null or is disabled, it is not considered tabbable.
|
||
|
|
if (!element || element.disabled) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// In IE, element.tabIndex is default to 0. We need to use element get tabIndex attribute to get the correct tabIndex
|
||
|
|
var tabIndex = -1;
|
||
|
|
if (element && element.getAttribute) {
|
||
|
|
tabIndex = parseInt(element.getAttribute('tabIndex'), 10);
|
||
|
|
}
|
||
|
|
var isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null;
|
||
|
|
return (!!element && isFocusableAttribute !== 'false' &&
|
||
|
|
(element.tagName === 'A' ||
|
||
|
|
(element.tagName === 'BUTTON') ||
|
||
|
|
(element.tagName === 'INPUT') ||
|
||
|
|
(element.tagName === 'TEXTAREA') ||
|
||
|
|
(tabIndex >= 0) ||
|
||
|
|
(element.getAttribute && (isFocusableAttribute === 'true' ||
|
||
|
|
element.getAttribute('role') === 'button'))));
|
||
|
|
}
|
||
|
|
exports.isElementTabbable = isElementTabbable;
|
||
|
|
function isElementFocusZone(element) {
|
||
|
|
return element && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE);
|
||
|
|
}
|
||
|
|
exports.isElementFocusZone = isElementFocusZone;
|
||
|
|
function doesElementContainFocus(element) {
|
||
|
|
var currentActiveElement = dom_1.getDocument(element).activeElement;
|
||
|
|
if (currentActiveElement && dom_1.elementContains(element, currentActiveElement)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
exports.doesElementContainFocus = doesElementContainFocus;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 40 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var REACT_LIFECYCLE_EXCLUSIONS = [
|
||
|
|
'setState',
|
||
|
|
'render',
|
||
|
|
'componentWillMount',
|
||
|
|
'componentDidMount',
|
||
|
|
'componentWillReceiveProps',
|
||
|
|
'shouldComponentUpdate',
|
||
|
|
'componentWillUpdate',
|
||
|
|
'componentDidUpdate',
|
||
|
|
'componentWillUnmount'
|
||
|
|
];
|
||
|
|
/**
|
||
|
|
* Allows you to hoist methods, except those in an exclusion set from a source object into a destination object.
|
||
|
|
*
|
||
|
|
* @param destination - The instance of the object to hoist the methods onto.
|
||
|
|
* @param source - The instance of the object where the methods are hoisted from.
|
||
|
|
* @param exclusions - (Optional) What methods to exclude from being hoisted.
|
||
|
|
* @returns An array of names of methods that were hoisted.
|
||
|
|
*/
|
||
|
|
function hoistMethods(destination, source, exclusions) {
|
||
|
|
if (exclusions === void 0) { exclusions = REACT_LIFECYCLE_EXCLUSIONS; }
|
||
|
|
var hoisted = [];
|
||
|
|
var _loop_1 = function (methodName) {
|
||
|
|
if (typeof source[methodName] === 'function' &&
|
||
|
|
destination[methodName] === undefined &&
|
||
|
|
(!exclusions || exclusions.indexOf(methodName) === -1)) {
|
||
|
|
hoisted.push(methodName);
|
||
|
|
/* tslint:disable:no-function-expression */
|
||
|
|
destination[methodName] = function () { source[methodName].apply(source, arguments); };
|
||
|
|
/* tslint:enable */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
for (var methodName in source) {
|
||
|
|
_loop_1(methodName);
|
||
|
|
}
|
||
|
|
return hoisted;
|
||
|
|
}
|
||
|
|
exports.hoistMethods = hoistMethods;
|
||
|
|
/**
|
||
|
|
* Provides a method for convenience to unhoist hoisted methods.
|
||
|
|
*
|
||
|
|
* @param source - The source object upon which methods were hoisted.
|
||
|
|
* @param methodNames - An array of method names to unhoist.
|
||
|
|
*/
|
||
|
|
function unhoistMethods(source, methodNames) {
|
||
|
|
methodNames
|
||
|
|
.forEach(function (methodName) { return delete source[methodName]; });
|
||
|
|
}
|
||
|
|
exports.unhoistMethods = unhoistMethods;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 41 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Regular expression matching characters to ignore when calculating the initials.
|
||
|
|
* The first part matches characters within parenthesis, including the parenthesis.
|
||
|
|
* The second part matches special ASCII characters except space, plus some unicode special characters.
|
||
|
|
*/
|
||
|
|
var UNWANTED_CHARS_REGEX = /\([^)]*\)|[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
|
||
|
|
/** Regular expression matching one or more spaces. */
|
||
|
|
var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
|
||
|
|
/**
|
||
|
|
* Regular expression matching languages for which we currently don't support initials.
|
||
|
|
* Arabic: Arabic, Arabic Supplement, Arabic Extended-A.
|
||
|
|
* Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
|
||
|
|
* Japanese: Hiragana, Katakana.
|
||
|
|
* CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs, CJK Unified Ideographs Extension B
|
||
|
|
*/
|
||
|
|
/* tslint:disable:max-line-length */
|
||
|
|
var UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
|
||
|
|
/* tslint:enable:max-line-length */
|
||
|
|
function getInitialsLatin(displayName, isRtl) {
|
||
|
|
var initials = '';
|
||
|
|
var splits = displayName.split(' ');
|
||
|
|
if (splits.length === 2) {
|
||
|
|
initials += splits[0].charAt(0).toUpperCase();
|
||
|
|
initials += splits[1].charAt(0).toUpperCase();
|
||
|
|
}
|
||
|
|
else if (splits.length === 3) {
|
||
|
|
initials += splits[0].charAt(0).toUpperCase();
|
||
|
|
initials += splits[2].charAt(0).toUpperCase();
|
||
|
|
}
|
||
|
|
else if (splits.length !== 0) {
|
||
|
|
initials += splits[0].charAt(0).toUpperCase();
|
||
|
|
}
|
||
|
|
if (isRtl && initials.length > 1) {
|
||
|
|
return initials.charAt(1) + initials.charAt(0);
|
||
|
|
}
|
||
|
|
return initials;
|
||
|
|
}
|
||
|
|
function cleanupDisplayName(displayName) {
|
||
|
|
displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
|
||
|
|
displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
|
||
|
|
displayName = displayName.trim();
|
||
|
|
return displayName;
|
||
|
|
}
|
||
|
|
/** Get (up to 2 characters) initials based on display name of the persona. */
|
||
|
|
function getInitials(displayName, isRtl) {
|
||
|
|
if (displayName == null) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
displayName = cleanupDisplayName(displayName);
|
||
|
|
if (UNSUPPORTED_TEXT_REGEX.test(displayName)) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
return getInitialsLatin(displayName, isRtl);
|
||
|
|
}
|
||
|
|
exports.getInitials = getInitials;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 42 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var dom_1 = __webpack_require__(16);
|
||
|
|
// Default to undefined so that we initialize on first read.
|
||
|
|
var _language;
|
||
|
|
/**
|
||
|
|
* Gets the rtl state of the page (returns true if in rtl.)
|
||
|
|
*/
|
||
|
|
function getLanguage() {
|
||
|
|
if (_language === undefined) {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage']) {
|
||
|
|
var savedLanguage = localStorage.getItem('language');
|
||
|
|
if (savedLanguage !== null) {
|
||
|
|
_language = savedLanguage;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (_language === undefined && doc) {
|
||
|
|
_language = doc.documentElement.getAttribute('lang');
|
||
|
|
}
|
||
|
|
if (_language === undefined) {
|
||
|
|
setLanguage('en', false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _language;
|
||
|
|
}
|
||
|
|
exports.getLanguage = getLanguage;
|
||
|
|
/**
|
||
|
|
* Sets the rtl state of the page (by adjusting the dir attribute of the html element.)
|
||
|
|
*/
|
||
|
|
function setLanguage(language, avoidPersisting) {
|
||
|
|
if (avoidPersisting === void 0) { avoidPersisting = false; }
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc) {
|
||
|
|
doc.documentElement.setAttribute('lang', language);
|
||
|
|
}
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage'] && !avoidPersisting) {
|
||
|
|
localStorage.setItem('language', language);
|
||
|
|
}
|
||
|
|
_language = language;
|
||
|
|
}
|
||
|
|
exports.setLanguage = setLanguage;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 43 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
function getDistanceBetweenPoints(point1, point2) {
|
||
|
|
var distance = Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
|
||
|
|
return distance;
|
||
|
|
}
|
||
|
|
exports.getDistanceBetweenPoints = getDistanceBetweenPoints;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 44 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Detects whether an element's content has horizontal overflow
|
||
|
|
*
|
||
|
|
* @param element - Element to check for overflow
|
||
|
|
* @returns True if element's content overflows
|
||
|
|
*/
|
||
|
|
function hasHorizontalOverflow(element) {
|
||
|
|
return element.clientWidth < element.scrollWidth;
|
||
|
|
}
|
||
|
|
exports.hasHorizontalOverflow = hasHorizontalOverflow;
|
||
|
|
/**
|
||
|
|
* Detects whether an element's content has vertical overflow
|
||
|
|
*
|
||
|
|
* @param element - Element to check for overflow
|
||
|
|
* @returns True if element's content overflows
|
||
|
|
*/
|
||
|
|
function hasVerticalOverflow(element) {
|
||
|
|
return element.clientHeight < element.scrollHeight;
|
||
|
|
}
|
||
|
|
exports.hasVerticalOverflow = hasVerticalOverflow;
|
||
|
|
/**
|
||
|
|
* Detects whether an element's content has overflow in any direction
|
||
|
|
*
|
||
|
|
* @param element - Element to check for overflow
|
||
|
|
* @returns True if element's content overflows
|
||
|
|
*/
|
||
|
|
function hasOverflow(element) {
|
||
|
|
return hasHorizontalOverflow(element) || hasVerticalOverflow(element);
|
||
|
|
}
|
||
|
|
exports.hasOverflow = hasOverflow;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 45 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var object_1 = __webpack_require__(31);
|
||
|
|
exports.baseElementEvents = [
|
||
|
|
'onCopy',
|
||
|
|
'onCut',
|
||
|
|
'onPaste',
|
||
|
|
'onCompositionEnd',
|
||
|
|
'onCompositionStart',
|
||
|
|
'onCompositionUpdate',
|
||
|
|
'onFocus',
|
||
|
|
'onFocusCapture',
|
||
|
|
'onBlur',
|
||
|
|
'onBlurCapture',
|
||
|
|
'onChange',
|
||
|
|
'onInput',
|
||
|
|
'onSubmit',
|
||
|
|
'onLoad',
|
||
|
|
'onError',
|
||
|
|
'onKeyDown',
|
||
|
|
'onKeyDownCapture',
|
||
|
|
'onKeyPress',
|
||
|
|
'onKeyUp',
|
||
|
|
'onAbort',
|
||
|
|
'onCanPlay',
|
||
|
|
'onCanPlayThrough',
|
||
|
|
'onDurationChange',
|
||
|
|
'onEmptied',
|
||
|
|
'onEncrypted',
|
||
|
|
'onEnded',
|
||
|
|
'onLoadedData',
|
||
|
|
'onLoadedMetadata',
|
||
|
|
'onLoadStart',
|
||
|
|
'onPause',
|
||
|
|
'onPlay',
|
||
|
|
'onPlaying',
|
||
|
|
'onProgress',
|
||
|
|
'onRateChange',
|
||
|
|
'onSeeked',
|
||
|
|
'onSeeking',
|
||
|
|
'onStalled',
|
||
|
|
'onSuspend',
|
||
|
|
'onTimeUpdate',
|
||
|
|
'onVolumeChange',
|
||
|
|
'onWaiting',
|
||
|
|
'onClick',
|
||
|
|
'onClickCapture',
|
||
|
|
'onContextMenu',
|
||
|
|
'onDoubleClick',
|
||
|
|
'onDrag',
|
||
|
|
'onDragEnd',
|
||
|
|
'onDragEnter',
|
||
|
|
'onDragExit',
|
||
|
|
'onDragLeave',
|
||
|
|
'onDragOver',
|
||
|
|
'onDragStart',
|
||
|
|
'onDrop',
|
||
|
|
'onMouseDown',
|
||
|
|
'onMouseDownCapture',
|
||
|
|
'onMouseEnter',
|
||
|
|
'onMouseLeave',
|
||
|
|
'onMouseMove',
|
||
|
|
'onMouseOut',
|
||
|
|
'onMouseOver',
|
||
|
|
'onMouseUp',
|
||
|
|
'onMouseUpCapture',
|
||
|
|
'onSelect',
|
||
|
|
'onTouchCancel',
|
||
|
|
'onTouchEnd',
|
||
|
|
'onTouchMove',
|
||
|
|
'onTouchStart',
|
||
|
|
'onScroll',
|
||
|
|
'onWheel'
|
||
|
|
];
|
||
|
|
exports.baseElementProperties = [
|
||
|
|
'defaultChecked',
|
||
|
|
'defaultValue',
|
||
|
|
'accept',
|
||
|
|
'acceptCharset',
|
||
|
|
'accessKey',
|
||
|
|
'action',
|
||
|
|
'allowFullScreen',
|
||
|
|
'allowTransparency',
|
||
|
|
'alt',
|
||
|
|
'async',
|
||
|
|
'autoComplete',
|
||
|
|
'autoFocus',
|
||
|
|
'autoPlay',
|
||
|
|
'capture',
|
||
|
|
'cellPadding',
|
||
|
|
'cellSpacing',
|
||
|
|
'charSet',
|
||
|
|
'challenge',
|
||
|
|
'checked',
|
||
|
|
'children',
|
||
|
|
'classID',
|
||
|
|
'className',
|
||
|
|
'cols',
|
||
|
|
'colSpan',
|
||
|
|
'content',
|
||
|
|
'contentEditable',
|
||
|
|
'contextMenu',
|
||
|
|
'controls',
|
||
|
|
'coords',
|
||
|
|
'crossOrigin',
|
||
|
|
'data',
|
||
|
|
'dateTime',
|
||
|
|
'default',
|
||
|
|
'defer',
|
||
|
|
'dir',
|
||
|
|
'download',
|
||
|
|
'draggable',
|
||
|
|
'encType',
|
||
|
|
'form',
|
||
|
|
'formAction',
|
||
|
|
'formEncType',
|
||
|
|
'formMethod',
|
||
|
|
'formNoValidate',
|
||
|
|
'formTarget',
|
||
|
|
'frameBorder',
|
||
|
|
'headers',
|
||
|
|
'height',
|
||
|
|
'hidden',
|
||
|
|
'high',
|
||
|
|
'hrefLang',
|
||
|
|
'htmlFor',
|
||
|
|
'httpEquiv',
|
||
|
|
'icon',
|
||
|
|
'id',
|
||
|
|
'inputMode',
|
||
|
|
'integrity',
|
||
|
|
'is',
|
||
|
|
'keyParams',
|
||
|
|
'keyType',
|
||
|
|
'kind',
|
||
|
|
'lang',
|
||
|
|
'list',
|
||
|
|
'loop',
|
||
|
|
'low',
|
||
|
|
'manifest',
|
||
|
|
'marginHeight',
|
||
|
|
'marginWidth',
|
||
|
|
'max',
|
||
|
|
'maxLength',
|
||
|
|
'media',
|
||
|
|
'mediaGroup',
|
||
|
|
'method',
|
||
|
|
'min',
|
||
|
|
'minLength',
|
||
|
|
'multiple',
|
||
|
|
'muted',
|
||
|
|
'name',
|
||
|
|
'noValidate',
|
||
|
|
'open',
|
||
|
|
'optimum',
|
||
|
|
'pattern',
|
||
|
|
'placeholder',
|
||
|
|
'poster',
|
||
|
|
'preload',
|
||
|
|
'radioGroup',
|
||
|
|
'readOnly',
|
||
|
|
'rel',
|
||
|
|
'required',
|
||
|
|
'role',
|
||
|
|
'rows',
|
||
|
|
'rowSpan',
|
||
|
|
'sandbox',
|
||
|
|
'scope',
|
||
|
|
'scoped',
|
||
|
|
'scrolling',
|
||
|
|
'seamless',
|
||
|
|
'selected',
|
||
|
|
'shape',
|
||
|
|
'size',
|
||
|
|
'sizes',
|
||
|
|
'span',
|
||
|
|
'spellCheck',
|
||
|
|
'src',
|
||
|
|
'srcDoc',
|
||
|
|
'srcLang',
|
||
|
|
'srcSet',
|
||
|
|
'start',
|
||
|
|
'step',
|
||
|
|
'style',
|
||
|
|
'summary',
|
||
|
|
'tabIndex',
|
||
|
|
'title',
|
||
|
|
'type',
|
||
|
|
'useMap',
|
||
|
|
'value',
|
||
|
|
'width',
|
||
|
|
'wmode',
|
||
|
|
'wrap'
|
||
|
|
];
|
||
|
|
exports.htmlElementProperties = exports.baseElementProperties.concat(exports.baseElementEvents);
|
||
|
|
exports.anchorProperties = exports.htmlElementProperties.concat([
|
||
|
|
'href',
|
||
|
|
'target'
|
||
|
|
]);
|
||
|
|
exports.buttonProperties = exports.htmlElementProperties.concat([
|
||
|
|
'disabled'
|
||
|
|
]);
|
||
|
|
exports.divProperties = exports.htmlElementProperties.concat(['align', 'noWrap']);
|
||
|
|
exports.inputProperties = exports.buttonProperties;
|
||
|
|
exports.textAreaProperties = exports.buttonProperties;
|
||
|
|
exports.imageProperties = exports.divProperties;
|
||
|
|
/**
|
||
|
|
* Gets native supported props for an html element provided the allowance set. Use one of the property
|
||
|
|
* sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given
|
||
|
|
* props set. Note that all data- and aria- prefixed attributes will be allowed.
|
||
|
|
* NOTE: getNativeProps should always be applied first when adding props to a react component. The
|
||
|
|
* non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.
|
||
|
|
* For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to
|
||
|
|
* the component after an onClick function is added, then the getNativeProps onClick will override it.
|
||
|
|
* @param props - The unfiltered input props
|
||
|
|
* @param allowedPropsNames- The array of allowed propnames.
|
||
|
|
* @returns The filtered props
|
||
|
|
*/
|
||
|
|
function getNativeProps(props, allowedPropNames, excludedPropNames) {
|
||
|
|
return object_1.filteredAssign(function (propName) {
|
||
|
|
return ((!excludedPropNames || excludedPropNames.indexOf(propName) < 0) && ((propName.indexOf('data-') === 0) ||
|
||
|
|
(propName.indexOf('aria-') === 0) ||
|
||
|
|
(allowedPropNames.indexOf(propName) >= 0)));
|
||
|
|
}, {}, props);
|
||
|
|
}
|
||
|
|
exports.getNativeProps = getNativeProps;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 46 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var _baseUrl = '';
|
||
|
|
/** Sets the current base url used for fetching images. */
|
||
|
|
function getResourceUrl(url) {
|
||
|
|
return _baseUrl + url;
|
||
|
|
}
|
||
|
|
exports.getResourceUrl = getResourceUrl;
|
||
|
|
/** Gets the current base url used for fetching images. */
|
||
|
|
function setBaseUrl(baseUrl) {
|
||
|
|
_baseUrl = baseUrl;
|
||
|
|
}
|
||
|
|
exports.setBaseUrl = setBaseUrl;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 47 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var KeyCodes_1 = __webpack_require__(33);
|
||
|
|
var dom_1 = __webpack_require__(16);
|
||
|
|
// Default to undefined so that we initialize on first read.
|
||
|
|
var _isRTL;
|
||
|
|
/**
|
||
|
|
* Gets the rtl state of the page (returns true if in rtl.)
|
||
|
|
*/
|
||
|
|
function getRTL() {
|
||
|
|
if (_isRTL === undefined) {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage']) {
|
||
|
|
var savedRTL = localStorage.getItem('isRTL');
|
||
|
|
if (savedRTL !== null) {
|
||
|
|
_isRTL = savedRTL === '1';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (_isRTL === undefined && doc) {
|
||
|
|
_isRTL = doc.documentElement.getAttribute('dir') === 'rtl';
|
||
|
|
}
|
||
|
|
if (_isRTL !== undefined) {
|
||
|
|
setRTL(_isRTL, true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
throw new Error('getRTL was called in a server environment without setRTL being called first. ' +
|
||
|
|
'Call setRTL to set the correct direction first.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _isRTL;
|
||
|
|
}
|
||
|
|
exports.getRTL = getRTL;
|
||
|
|
/**
|
||
|
|
* Sets the rtl state of the page (by adjusting the dir attribute of the html element.)
|
||
|
|
*/
|
||
|
|
function setRTL(isRTL, avoidPersisting) {
|
||
|
|
if (avoidPersisting === void 0) { avoidPersisting = false; }
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc) {
|
||
|
|
doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
|
||
|
|
}
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage'] && !avoidPersisting) {
|
||
|
|
localStorage.setItem('isRTL', isRTL ? '1' : '0');
|
||
|
|
}
|
||
|
|
_isRTL = isRTL;
|
||
|
|
}
|
||
|
|
exports.setRTL = setRTL;
|
||
|
|
/**
|
||
|
|
* Returns the given key, but flips right/left arrows if necessary.
|
||
|
|
*/
|
||
|
|
function getRTLSafeKeyCode(key) {
|
||
|
|
if (getRTL()) {
|
||
|
|
if (key === KeyCodes_1.KeyCodes.left) {
|
||
|
|
key = KeyCodes_1.KeyCodes.right;
|
||
|
|
}
|
||
|
|
else if (key === KeyCodes_1.KeyCodes.right) {
|
||
|
|
key = KeyCodes_1.KeyCodes.left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return key;
|
||
|
|
}
|
||
|
|
exports.getRTLSafeKeyCode = getRTLSafeKeyCode;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 48 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
// Regex that finds { and } so they can be removed on a lookup for string format
|
||
|
|
var FORMAT_ARGS_REGEX = /[\{\}]/g;
|
||
|
|
// Regex that finds {#} so it can be replaced by the arguments in string format
|
||
|
|
var FORMAT_REGEX = /\{\d+\}/g;
|
||
|
|
/**
|
||
|
|
* String Format is like C# string format.
|
||
|
|
* Usage Example: "hello {0}!".format("mike") will return "hello mike!"
|
||
|
|
* Calling format on a string with less arguments than specified in the format is invalid
|
||
|
|
* Example "I love {0} every {1}".format("CXP") will result in a Debug Exception.
|
||
|
|
*/
|
||
|
|
function format(s) {
|
||
|
|
'use strict';
|
||
|
|
var values = [];
|
||
|
|
for (var _i = 1; _i < arguments.length; _i++) {
|
||
|
|
values[_i - 1] = arguments[_i];
|
||
|
|
}
|
||
|
|
var args = values;
|
||
|
|
// Callback match function
|
||
|
|
function replace_func(match) {
|
||
|
|
// looks up in the args
|
||
|
|
var replacement = args[match.replace(FORMAT_ARGS_REGEX, '')];
|
||
|
|
// catches undefined in nondebug and null in debug and nondebug
|
||
|
|
if (replacement === null || replacement === undefined) {
|
||
|
|
replacement = '';
|
||
|
|
}
|
||
|
|
return replacement;
|
||
|
|
}
|
||
|
|
return (s.replace(FORMAT_REGEX, replace_func));
|
||
|
|
}
|
||
|
|
exports.format = format;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 49 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var _emptyObject = { empty: true };
|
||
|
|
var _dictionary = {};
|
||
|
|
function memoize(target, key, descriptor) {
|
||
|
|
// We bind to "null" to prevent people from inadvertently pulling values from "this",
|
||
|
|
// rather than passing them in as input values which can be memoized.
|
||
|
|
var fn = memoizeFunction(descriptor.value.bind(null));
|
||
|
|
return {
|
||
|
|
configurable: true,
|
||
|
|
get: function () {
|
||
|
|
return fn;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.memoize = memoize;
|
||
|
|
/**
|
||
|
|
* Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result.
|
||
|
|
* Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise
|
||
|
|
* it will grow the cache unnecessarily.
|
||
|
|
*
|
||
|
|
* By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is
|
||
|
|
* unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard
|
||
|
|
* by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter.
|
||
|
|
*
|
||
|
|
* @param cb - The function to memoize.
|
||
|
|
* @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call.
|
||
|
|
* @returns A memoized version of the function.
|
||
|
|
*/
|
||
|
|
function memoizeFunction(cb, maxCacheSize) {
|
||
|
|
if (maxCacheSize === void 0) { maxCacheSize = 100; }
|
||
|
|
var rootNode;
|
||
|
|
var cacheSize = 0;
|
||
|
|
// tslint:disable-next-line:no-function-expression
|
||
|
|
return function memoizedFunction() {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
var currentNode = rootNode;
|
||
|
|
if (rootNode === undefined || (maxCacheSize > 0 && cacheSize > maxCacheSize)) {
|
||
|
|
rootNode = _createNode();
|
||
|
|
cacheSize = 0;
|
||
|
|
}
|
||
|
|
currentNode = rootNode;
|
||
|
|
// Traverse the tree until we find the match.
|
||
|
|
for (var i = 0; i < args.length; i++) {
|
||
|
|
var arg = _normalizeArg(args[i]);
|
||
|
|
if (!currentNode.map.has(arg)) {
|
||
|
|
currentNode.map.set(arg, _createNode());
|
||
|
|
}
|
||
|
|
currentNode = currentNode.map.get(arg);
|
||
|
|
}
|
||
|
|
if (!currentNode.hasOwnProperty('value')) {
|
||
|
|
currentNode.value = cb.apply(void 0, args);
|
||
|
|
cacheSize++;
|
||
|
|
}
|
||
|
|
return currentNode.value;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.memoizeFunction = memoizeFunction;
|
||
|
|
function _normalizeArg(val) {
|
||
|
|
if (!val) {
|
||
|
|
return _emptyObject;
|
||
|
|
}
|
||
|
|
else if (typeof val === 'object') {
|
||
|
|
return val;
|
||
|
|
}
|
||
|
|
else if (!_dictionary[val]) {
|
||
|
|
_dictionary[val] = { val: val };
|
||
|
|
}
|
||
|
|
return _dictionary[val];
|
||
|
|
}
|
||
|
|
function _createNode() {
|
||
|
|
return {
|
||
|
|
map: new WeakMap()
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 50 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(51));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 51 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(52));
|
||
|
|
__export(__webpack_require__(53));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 52 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var FocusZone_Props_1 = __webpack_require__(53);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
|
||
|
|
var IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';
|
||
|
|
var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';
|
||
|
|
var TABINDEX = 'tabindex';
|
||
|
|
var _allInstances = {};
|
||
|
|
var ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search'];
|
||
|
|
var FocusZone = (function (_super) {
|
||
|
|
__extends(FocusZone, _super);
|
||
|
|
function FocusZone(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({ rootProps: null });
|
||
|
|
_this._id = Utilities_1.getId('FocusZone');
|
||
|
|
_allInstances[_this._id] = _this;
|
||
|
|
_this._focusAlignment = {
|
||
|
|
left: 0,
|
||
|
|
top: 0
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
FocusZone.prototype.componentDidMount = function () {
|
||
|
|
var windowElement = this.refs.root.ownerDocument.defaultView;
|
||
|
|
var parentElement = Utilities_1.getParent(this.refs.root);
|
||
|
|
while (parentElement &&
|
||
|
|
parentElement !== document.body &&
|
||
|
|
parentElement.nodeType === 1) {
|
||
|
|
if (Utilities_1.isElementFocusZone(parentElement)) {
|
||
|
|
this._isInnerZone = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
parentElement = Utilities_1.getParent(parentElement);
|
||
|
|
}
|
||
|
|
this._events.on(windowElement, 'keydown', this._onKeyDownCapture, true);
|
||
|
|
// Assign initial tab indexes so that we can set initial focus as appropriate.
|
||
|
|
this._updateTabIndexes();
|
||
|
|
if (this.props.defaultActiveElement) {
|
||
|
|
this._activeElement = Utilities_1.getDocument().querySelector(this.props.defaultActiveElement);
|
||
|
|
this.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusZone.prototype.componentWillUnmount = function () {
|
||
|
|
delete _allInstances[this._id];
|
||
|
|
};
|
||
|
|
FocusZone.prototype.render = function () {
|
||
|
|
var _a = this.props, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;
|
||
|
|
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
|
||
|
|
return (React.createElement("div", __assign({}, divProps, rootProps, { className: Utilities_1.css('ms-FocusZone', className), ref: 'root', "data-focuszone-id": this._id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown, onFocus: this._onFocus }, { onMouseDownCapture: this._onMouseDown }), this.props.children));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets focus to the first tabbable item in the zone.
|
||
|
|
* @returns True if focus could be set to an active element, false if no operation was taken.
|
||
|
|
*/
|
||
|
|
FocusZone.prototype.focus = function () {
|
||
|
|
if (this._activeElement && Utilities_1.elementContains(this.refs.root, this._activeElement)) {
|
||
|
|
this._activeElement.focus();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var firstChild = this.refs.root.firstChild;
|
||
|
|
return this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets focus to a specific child element within the zone. This can be used in conjunction with
|
||
|
|
* onBeforeFocus to created delayed focus scenarios (like animate the scroll position to the correct
|
||
|
|
* location and then focus.)
|
||
|
|
* @param {HTMLElement} element The child element within the zone to focus.
|
||
|
|
* @returns True if focus could be set to an active element, false if no operation was taken.
|
||
|
|
*/
|
||
|
|
FocusZone.prototype.focusElement = function (element) {
|
||
|
|
var onBeforeFocus = this.props.onBeforeFocus;
|
||
|
|
if (onBeforeFocus && !onBeforeFocus(element)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (element) {
|
||
|
|
if (this._activeElement) {
|
||
|
|
this._activeElement.tabIndex = -1;
|
||
|
|
}
|
||
|
|
this._activeElement = element;
|
||
|
|
if (element) {
|
||
|
|
if (!this._focusAlignment) {
|
||
|
|
this._setFocusAlignment(element, true, true);
|
||
|
|
}
|
||
|
|
this._activeElement.tabIndex = 0;
|
||
|
|
element.focus();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._onFocus = function (ev) {
|
||
|
|
var onActiveElementChanged = this.props.onActiveElementChanged;
|
||
|
|
if (this._isImmediateDescendantOfZone(ev.target)) {
|
||
|
|
this._activeElement = ev.target;
|
||
|
|
this._setFocusAlignment(this._activeElement);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var parentElement = ev.target;
|
||
|
|
while (parentElement && parentElement !== this.refs.root) {
|
||
|
|
if (Utilities_1.isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) {
|
||
|
|
this._activeElement = parentElement;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
parentElement = Utilities_1.getParent(parentElement);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (onActiveElementChanged) {
|
||
|
|
onActiveElementChanged(this._activeElement, ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Handle global tab presses so that we can patch tabindexes on the fly.
|
||
|
|
*/
|
||
|
|
FocusZone.prototype._onKeyDownCapture = function (ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.tab) {
|
||
|
|
this._updateTabIndexes();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusZone.prototype._onMouseDown = function (ev) {
|
||
|
|
var disabled = this.props.disabled;
|
||
|
|
if (disabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var target = ev.target;
|
||
|
|
var path = [];
|
||
|
|
while (target && target !== this.refs.root) {
|
||
|
|
path.push(target);
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
while (path.length) {
|
||
|
|
target = path.pop();
|
||
|
|
if (Utilities_1.isElementFocusZone(target)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (target && Utilities_1.isElementTabbable(target)) {
|
||
|
|
target.tabIndex = 0;
|
||
|
|
this._setFocusAlignment(target, true, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Handle the keystrokes.
|
||
|
|
*/
|
||
|
|
FocusZone.prototype._onKeyDown = function (ev) {
|
||
|
|
var _a = this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke;
|
||
|
|
if (disabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.props.onKeyDown) {
|
||
|
|
this.props.onKeyDown(ev);
|
||
|
|
if (ev.isDefaultPrevented()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (isInnerZoneKeystroke &&
|
||
|
|
this._isImmediateDescendantOfZone(ev.target) &&
|
||
|
|
isInnerZoneKeystroke(ev)) {
|
||
|
|
// Try to focus
|
||
|
|
var innerZone = this._getFirstInnerZone();
|
||
|
|
if (!innerZone || !innerZone.focus()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (ev.altKey) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.space:
|
||
|
|
if (this._tryInvokeClickForFocusable(ev.target)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.left:
|
||
|
|
if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusLeft()) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.right:
|
||
|
|
if (direction !== FocusZone_Props_1.FocusZoneDirection.vertical && this._moveFocusRight()) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.up:
|
||
|
|
if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusUp()) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.down:
|
||
|
|
if (direction !== FocusZone_Props_1.FocusZoneDirection.horizontal && this._moveFocusDown()) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.home:
|
||
|
|
var firstChild = this.refs.root.firstChild;
|
||
|
|
if (this.focusElement(Utilities_1.getNextElement(this.refs.root, firstChild, true))) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.end:
|
||
|
|
var lastChild = this.refs.root.lastChild;
|
||
|
|
if (this.focusElement(Utilities_1.getPreviousElement(this.refs.root, lastChild, true, true, true))) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.enter:
|
||
|
|
if (this._tryInvokeClickForFocusable(ev.target)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
default:
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Walk up the dom try to find a focusable element.
|
||
|
|
*/
|
||
|
|
FocusZone.prototype._tryInvokeClickForFocusable = function (target) {
|
||
|
|
do {
|
||
|
|
if (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (this._isImmediateDescendantOfZone(target) &&
|
||
|
|
target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&
|
||
|
|
target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {
|
||
|
|
Utilities_1.EventGroup.raise(target, 'click', null, true);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
} while (target !== this.refs.root);
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Traverse to find first child zone.
|
||
|
|
*/
|
||
|
|
FocusZone.prototype._getFirstInnerZone = function (rootElement) {
|
||
|
|
rootElement = rootElement || this._activeElement || this.refs.root;
|
||
|
|
var child = rootElement.firstElementChild;
|
||
|
|
while (child) {
|
||
|
|
if (Utilities_1.isElementFocusZone(child)) {
|
||
|
|
return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];
|
||
|
|
}
|
||
|
|
var match = this._getFirstInnerZone(child);
|
||
|
|
if (match) {
|
||
|
|
return match;
|
||
|
|
}
|
||
|
|
child = child.nextElementSibling;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._moveFocus = function (isForward, getDistanceFromCenter, ev) {
|
||
|
|
var element = this._activeElement;
|
||
|
|
var candidateDistance = -1;
|
||
|
|
var candidateElement;
|
||
|
|
var changedFocus = false;
|
||
|
|
var isBidirectional = this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional;
|
||
|
|
if (!element) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (this._isElementInput(element)) {
|
||
|
|
if (!this._shouldInputLoseFocus(element, isForward)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var activeRect = isBidirectional ? element.getBoundingClientRect() : null;
|
||
|
|
do {
|
||
|
|
element = isForward ?
|
||
|
|
Utilities_1.getNextElement(this.refs.root, element) :
|
||
|
|
Utilities_1.getPreviousElement(this.refs.root, element);
|
||
|
|
if (isBidirectional) {
|
||
|
|
if (element) {
|
||
|
|
var targetRect = element.getBoundingClientRect();
|
||
|
|
var elementDistance = getDistanceFromCenter(activeRect, targetRect);
|
||
|
|
if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {
|
||
|
|
candidateDistance = elementDistance;
|
||
|
|
candidateElement = element;
|
||
|
|
}
|
||
|
|
if (candidateDistance >= 0 && elementDistance < 0) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
candidateElement = element;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
} while (element);
|
||
|
|
// Focus the closest candidate
|
||
|
|
if (candidateElement && candidateElement !== this._activeElement) {
|
||
|
|
changedFocus = true;
|
||
|
|
this.focusElement(candidateElement);
|
||
|
|
}
|
||
|
|
else if (this.props.isCircularNavigation) {
|
||
|
|
if (isForward) {
|
||
|
|
return this.focusElement(Utilities_1.getNextElement(this.refs.root, this.refs.root.firstElementChild, true));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return this.focusElement(Utilities_1.getPreviousElement(this.refs.root, this.refs.root.lastElementChild, true, true, true));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return changedFocus;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._moveFocusDown = function () {
|
||
|
|
var targetTop = -1;
|
||
|
|
var leftAlignment = this._focusAlignment.left;
|
||
|
|
if (this._moveFocus(true, function (activeRect, targetRect) {
|
||
|
|
var distance = -1;
|
||
|
|
// ClientRect values can be floats that differ by very small fractions of a decimal.
|
||
|
|
// If the difference between top and bottom are within a pixel then we should treat
|
||
|
|
// them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
|
||
|
|
// but without Math.Floor they will be handled incorrectly.
|
||
|
|
var targetRectTop = Math.floor(targetRect.top);
|
||
|
|
var activeRectBottom = Math.floor(activeRect.bottom);
|
||
|
|
if ((targetTop === -1 && targetRectTop >= activeRectBottom) ||
|
||
|
|
(targetRectTop === targetTop)) {
|
||
|
|
targetTop = targetRectTop;
|
||
|
|
if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
|
||
|
|
distance = 0;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return distance;
|
||
|
|
})) {
|
||
|
|
this._setFocusAlignment(this._activeElement, false, true);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._moveFocusUp = function () {
|
||
|
|
var targetTop = -1;
|
||
|
|
var leftAlignment = this._focusAlignment.left;
|
||
|
|
if (this._moveFocus(false, function (activeRect, targetRect) {
|
||
|
|
var distance = -1;
|
||
|
|
// ClientRect values can be floats that differ by very small fractions of a decimal.
|
||
|
|
// If the difference between top and bottom are within a pixel then we should treat
|
||
|
|
// them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
|
||
|
|
// but without Math.Floor they will be handled incorrectly.
|
||
|
|
var targetRectBottom = Math.floor(targetRect.bottom);
|
||
|
|
var targetRectTop = Math.floor(targetRect.top);
|
||
|
|
var activeRectTop = Math.floor(activeRect.top);
|
||
|
|
if ((targetTop === -1 && targetRectBottom <= activeRectTop) ||
|
||
|
|
(targetRectTop === targetTop)) {
|
||
|
|
targetTop = targetRectTop;
|
||
|
|
if (leftAlignment >= targetRect.left && leftAlignment <= (targetRect.left + targetRect.width)) {
|
||
|
|
distance = 0;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
distance = Math.abs((targetRect.left + (targetRect.width / 2)) - leftAlignment);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return distance;
|
||
|
|
})) {
|
||
|
|
this._setFocusAlignment(this._activeElement, false, true);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._moveFocusLeft = function () {
|
||
|
|
var _this = this;
|
||
|
|
var targetTop = -1;
|
||
|
|
var topAlignment = this._focusAlignment.top;
|
||
|
|
if (this._moveFocus(Utilities_1.getRTL(), function (activeRect, targetRect) {
|
||
|
|
var distance = -1;
|
||
|
|
if ((targetTop === -1 &&
|
||
|
|
targetRect.right <= activeRect.right &&
|
||
|
|
(_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) ||
|
||
|
|
(targetRect.top === targetTop)) {
|
||
|
|
targetTop = targetRect.top;
|
||
|
|
distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment);
|
||
|
|
}
|
||
|
|
return distance;
|
||
|
|
})) {
|
||
|
|
this._setFocusAlignment(this._activeElement, true, false);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._moveFocusRight = function () {
|
||
|
|
var _this = this;
|
||
|
|
var targetTop = -1;
|
||
|
|
var topAlignment = this._focusAlignment.top;
|
||
|
|
if (this._moveFocus(!Utilities_1.getRTL(), function (activeRect, targetRect) {
|
||
|
|
var distance = -1;
|
||
|
|
if ((targetTop === -1 &&
|
||
|
|
targetRect.left >= activeRect.left &&
|
||
|
|
(_this.props.direction === FocusZone_Props_1.FocusZoneDirection.horizontal || targetRect.top === activeRect.top)) ||
|
||
|
|
(targetRect.top === targetTop)) {
|
||
|
|
targetTop = targetRect.top;
|
||
|
|
distance = Math.abs((targetRect.top + (targetRect.height / 2)) - topAlignment);
|
||
|
|
}
|
||
|
|
return distance;
|
||
|
|
})) {
|
||
|
|
this._setFocusAlignment(this._activeElement, true, false);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) {
|
||
|
|
if (this.props.direction === FocusZone_Props_1.FocusZoneDirection.bidirectional &&
|
||
|
|
(!this._focusAlignment || isHorizontal || isVertical)) {
|
||
|
|
var rect = element.getBoundingClientRect();
|
||
|
|
var left = rect.left + (rect.width / 2);
|
||
|
|
var top_1 = rect.top + (rect.height / 2);
|
||
|
|
if (!this._focusAlignment) {
|
||
|
|
this._focusAlignment = { left: left, top: top_1 };
|
||
|
|
}
|
||
|
|
if (isHorizontal) {
|
||
|
|
this._focusAlignment.left = left;
|
||
|
|
}
|
||
|
|
if (isVertical) {
|
||
|
|
this._focusAlignment.top = top_1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusZone.prototype._isImmediateDescendantOfZone = function (element) {
|
||
|
|
var parentElement = Utilities_1.getParent(element);
|
||
|
|
while (parentElement && parentElement !== this.refs.root && parentElement !== document.body) {
|
||
|
|
if (Utilities_1.isElementFocusZone(parentElement)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
parentElement = Utilities_1.getParent(parentElement);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._updateTabIndexes = function (element) {
|
||
|
|
if (!element) {
|
||
|
|
element = this.refs.root;
|
||
|
|
if (this._activeElement && !Utilities_1.elementContains(element, this._activeElement)) {
|
||
|
|
this._activeElement = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var childNodes = element.children;
|
||
|
|
for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
|
||
|
|
var child = childNodes[childIndex];
|
||
|
|
if (!Utilities_1.isElementFocusZone(child)) {
|
||
|
|
// If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
|
||
|
|
if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
|
||
|
|
child.setAttribute(TABINDEX, '-1');
|
||
|
|
}
|
||
|
|
if (Utilities_1.isElementTabbable(child)) {
|
||
|
|
if (this.props.disabled) {
|
||
|
|
child.setAttribute(TABINDEX, '-1');
|
||
|
|
}
|
||
|
|
else if (!this._isInnerZone && (!this._activeElement || this._activeElement === child)) {
|
||
|
|
this._activeElement = child;
|
||
|
|
if (child.getAttribute(TABINDEX) !== '0') {
|
||
|
|
child.setAttribute(TABINDEX, '0');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (child.getAttribute(TABINDEX) !== '-1') {
|
||
|
|
child.setAttribute(TABINDEX, '-1');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {
|
||
|
|
// Disgusting IE hack. Sad face.
|
||
|
|
child.setAttribute('focusable', 'false');
|
||
|
|
}
|
||
|
|
this._updateTabIndexes(child);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusZone.prototype._isElementInput = function (element) {
|
||
|
|
if (element && element.tagName && element.tagName.toLowerCase() === 'input') {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) {
|
||
|
|
if (element &&
|
||
|
|
element.type &&
|
||
|
|
ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {
|
||
|
|
var selectionStart = element.selectionStart;
|
||
|
|
var selectionEnd = element.selectionEnd;
|
||
|
|
var isRangeSelected = selectionStart !== selectionEnd;
|
||
|
|
var inputValue = element.value;
|
||
|
|
// We shouldn't lose focus in the following cases:
|
||
|
|
// 1. There is range selected.
|
||
|
|
// 2. When selection start is larger than 0 and it is backward.
|
||
|
|
// 3. when selection start is not the end of lenght and it is forward.
|
||
|
|
if (isRangeSelected ||
|
||
|
|
(selectionStart > 0 && !isForward) ||
|
||
|
|
(selectionStart !== inputValue.length && isForward)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
return FocusZone;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
FocusZone.defaultProps = {
|
||
|
|
isCircularNavigation: false,
|
||
|
|
direction: FocusZone_Props_1.FocusZoneDirection.bidirectional
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], FocusZone.prototype, "_onFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], FocusZone.prototype, "_onMouseDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], FocusZone.prototype, "_onKeyDown", null);
|
||
|
|
exports.FocusZone = FocusZone;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 53 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var FocusZoneDirection;
|
||
|
|
(function (FocusZoneDirection) {
|
||
|
|
/** Only react to up/down arrows. */
|
||
|
|
FocusZoneDirection[FocusZoneDirection["vertical"] = 0] = "vertical";
|
||
|
|
/** Only react to left/right arrows. */
|
||
|
|
FocusZoneDirection[FocusZoneDirection["horizontal"] = 1] = "horizontal";
|
||
|
|
/** React to all arrows. */
|
||
|
|
FocusZoneDirection[FocusZoneDirection["bidirectional"] = 2] = "bidirectional";
|
||
|
|
})(FocusZoneDirection = exports.FocusZoneDirection || (exports.FocusZoneDirection = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 54 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(55));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 55 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(56));
|
||
|
|
__export(__webpack_require__(57));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 56 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var ContextualMenu_Props_1 = __webpack_require__(57);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Callout_1 = __webpack_require__(59);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(149);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var ContextualMenuType;
|
||
|
|
(function (ContextualMenuType) {
|
||
|
|
ContextualMenuType[ContextualMenuType["vertical"] = 0] = "vertical";
|
||
|
|
ContextualMenuType[ContextualMenuType["horizontal"] = 1] = "horizontal";
|
||
|
|
})(ContextualMenuType || (ContextualMenuType = {}));
|
||
|
|
var HorizontalAlignmentHint;
|
||
|
|
(function (HorizontalAlignmentHint) {
|
||
|
|
HorizontalAlignmentHint[HorizontalAlignmentHint["auto"] = 0] = "auto";
|
||
|
|
HorizontalAlignmentHint[HorizontalAlignmentHint["left"] = 1] = "left";
|
||
|
|
HorizontalAlignmentHint[HorizontalAlignmentHint["center"] = 2] = "center";
|
||
|
|
HorizontalAlignmentHint[HorizontalAlignmentHint["right"] = 3] = "right";
|
||
|
|
})(HorizontalAlignmentHint || (HorizontalAlignmentHint = {}));
|
||
|
|
var VerticalAlignmentHint;
|
||
|
|
(function (VerticalAlignmentHint) {
|
||
|
|
VerticalAlignmentHint[VerticalAlignmentHint["top"] = 0] = "top";
|
||
|
|
VerticalAlignmentHint[VerticalAlignmentHint["center"] = 1] = "center";
|
||
|
|
VerticalAlignmentHint[VerticalAlignmentHint["bottom"] = 2] = "bottom";
|
||
|
|
})(VerticalAlignmentHint || (VerticalAlignmentHint = {}));
|
||
|
|
function hasSubmenuItems(item) {
|
||
|
|
var submenuItems = getSubmenuItems(item);
|
||
|
|
return !!(submenuItems && submenuItems.length);
|
||
|
|
}
|
||
|
|
exports.hasSubmenuItems = hasSubmenuItems;
|
||
|
|
function getSubmenuItems(item) {
|
||
|
|
return item.subMenuProps ? item.subMenuProps.items : item.items;
|
||
|
|
}
|
||
|
|
exports.getSubmenuItems = getSubmenuItems;
|
||
|
|
var ContextualMenu = (function (_super) {
|
||
|
|
__extends(ContextualMenu, _super);
|
||
|
|
function ContextualMenu(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
contextualMenuItems: null,
|
||
|
|
subMenuId: Utilities_1.getId('ContextualMenu')
|
||
|
|
};
|
||
|
|
_this._isFocusingPreviousElement = false;
|
||
|
|
_this._enterTimerId = 0;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ContextualMenu.prototype.dismiss = function (ev, dismissAll) {
|
||
|
|
var onDismiss = this.props.onDismiss;
|
||
|
|
if (onDismiss) {
|
||
|
|
onDismiss(ev, dismissAll);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype.componentWillUpdate = function (newProps) {
|
||
|
|
if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) {
|
||
|
|
var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target;
|
||
|
|
this._setTargetWindowAndElement(newTarget);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// Invoked once, both on the client and server, immediately before the initial rendering occurs.
|
||
|
|
ContextualMenu.prototype.componentWillMount = function () {
|
||
|
|
var target = this.props.targetElement ? this.props.targetElement : this.props.target;
|
||
|
|
this._setTargetWindowAndElement(target);
|
||
|
|
this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement : null;
|
||
|
|
};
|
||
|
|
// Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
|
||
|
|
ContextualMenu.prototype.componentDidMount = function () {
|
||
|
|
this._events.on(this._targetWindow, 'resize', this.dismiss);
|
||
|
|
if (this.props.onMenuOpened) {
|
||
|
|
this.props.onMenuOpened(this.props);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// Invoked immediately before a component is unmounted from the DOM.
|
||
|
|
ContextualMenu.prototype.componentWillUnmount = function () {
|
||
|
|
var _this = this;
|
||
|
|
if (this._isFocusingPreviousElement && this._previousActiveElement) {
|
||
|
|
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
|
||
|
|
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
|
||
|
|
// to reset the focus back to the thing it thinks should have been focused.
|
||
|
|
setTimeout(function () { return _this._previousActiveElement.focus(); }, 0);
|
||
|
|
}
|
||
|
|
this._events.dispose();
|
||
|
|
this._async.dispose();
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, className = _a.className, items = _a.items, isBeakVisible = _a.isBeakVisible, labelElementId = _a.labelElementId, targetElement = _a.targetElement, id = _a.id, targetPoint = _a.targetPoint, useTargetPoint = _a.useTargetPoint, beakWidth = _a.beakWidth, directionalHint = _a.directionalHint, gapSpace = _a.gapSpace, coverTarget = _a.coverTarget, ariaLabel = _a.ariaLabel, doNotLayer = _a.doNotLayer, arrowDirection = _a.arrowDirection, target = _a.target, bounds = _a.bounds, useTargetWidth = _a.useTargetWidth, directionalHintFixed = _a.directionalHintFixed, shouldFocusOnMount = _a.shouldFocusOnMount, calloutProps = _a.calloutProps;
|
||
|
|
var hasIcons = !!(items && items.some(function (item) { return !!item.icon || !!item.iconProps; }));
|
||
|
|
var hasCheckmarks = !!(items && items.some(function (item) { return !!item.canCheck; }));
|
||
|
|
var submenuProps = this.state.expandedMenuItemKey ? this._getSubmenuProps() : null;
|
||
|
|
/**
|
||
|
|
* When useTargetWidth is true, get the width of the target element and apply it for the context menu container
|
||
|
|
*/
|
||
|
|
var contextMenuStyle;
|
||
|
|
var targetAsHtmlElement = this._target;
|
||
|
|
if (useTargetWidth && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {
|
||
|
|
var contextMenuWidth = targetAsHtmlElement.offsetWidth;
|
||
|
|
contextMenuStyle = {
|
||
|
|
width: contextMenuWidth
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// The menu should only return if items were provided, if no items were provided then it should not appear.
|
||
|
|
if (items && items.length > 0) {
|
||
|
|
return (React.createElement(Callout_1.Callout, __assign({}, calloutProps, { target: target, targetElement: targetElement, targetPoint: targetPoint, useTargetPoint: useTargetPoint, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: 'ms-ContextualMenu-Callout', setInitialFocus: shouldFocusOnMount, onDismiss: this.props.onDismiss, bounds: bounds, directionalHintFixed: directionalHintFixed }),
|
||
|
|
React.createElement("div", { style: contextMenuStyle, ref: function (host) { return _this._host = host; }, id: id, className: Utilities_1.css('ms-ContextualMenu-container', className) },
|
||
|
|
(items && items.length) ? (React.createElement(FocusZone_1.FocusZone, { className: Utilities_1.css('ms-ContextualMenu is-open', styles.root), direction: arrowDirection, ref: function (focusZone) { return _this._focusZone = focusZone; }, isCircularNavigation: true },
|
||
|
|
React.createElement("ul", { role: 'menu', "aria-label": ariaLabel, "aria-labelledby": labelElementId, className: Utilities_1.css('ms-ContextualMenu-list is-open', styles.list), onKeyDown: this._onKeyDown }, items.map(function (item, index) { return (_this._renderMenuItem(item, index, hasCheckmarks, hasIcons)); })))) : (null),
|
||
|
|
submenuProps && React.createElement(ContextualMenu, __assign({}, submenuProps)))));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderMenuItem = function (item, index, hasCheckmarks, hasIcons) {
|
||
|
|
var renderedItems = [];
|
||
|
|
if (item.name === '-') {
|
||
|
|
item.itemType = ContextualMenu_Props_1.ContextualMenuItemType.Divider;
|
||
|
|
}
|
||
|
|
switch (item.itemType) {
|
||
|
|
case ContextualMenu_Props_1.ContextualMenuItemType.Divider:
|
||
|
|
renderedItems.push(this._renderSeparator(index, item.className));
|
||
|
|
break;
|
||
|
|
case ContextualMenu_Props_1.ContextualMenuItemType.Header:
|
||
|
|
renderedItems.push(this._renderSeparator(index));
|
||
|
|
var headerItem = this._renderHeaderMenuItem(item, index, hasCheckmarks, hasIcons);
|
||
|
|
renderedItems.push(this._renderListItem(headerItem, item.key || index, item.className, item.title));
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
var menuItem = this._renderNormalItem(item, index, hasCheckmarks, hasIcons);
|
||
|
|
renderedItems.push(this._renderListItem(menuItem, item.key || index, item.className, item.title));
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return renderedItems;
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderListItem = function (content, key, className, title) {
|
||
|
|
return React.createElement("li", { role: 'presentation', title: title, key: key, className: Utilities_1.css('ms-ContextualMenu-item', styles.item, className) }, content);
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderSeparator = function (index, className) {
|
||
|
|
if (index > 0) {
|
||
|
|
return React.createElement("li", { role: 'separator', key: 'separator-' + index, className: Utilities_1.css('ms-ContextualMenu-divider', styles.divider, className) });
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderNormalItem = function (item, index, hasCheckmarks, hasIcons) {
|
||
|
|
if (item.onRender) {
|
||
|
|
return [item.onRender(item)];
|
||
|
|
}
|
||
|
|
if (item.href) {
|
||
|
|
return this._renderAnchorMenuItem(item, index, hasCheckmarks, hasIcons);
|
||
|
|
}
|
||
|
|
return this._renderButtonItem(item, index, hasCheckmarks, hasIcons);
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderHeaderMenuItem = function (item, index, hasCheckmarks, hasIcons) {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-header', styles.header), style: item.style }, this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons)));
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderAnchorMenuItem = function (item, index, hasCheckmarks, hasIcons) {
|
||
|
|
return (React.createElement("div", null,
|
||
|
|
React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { href: item.href, className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (item.isDisabled || item.disabled) && 'is-disabled'), role: 'menuitem', style: item.style, onClick: this._onAnchorClick.bind(this, item) }), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons))));
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderButtonItem = function (item, index, hasCheckmarks, hasIcons) {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.state, expandedMenuItemKey = _a.expandedMenuItemKey, subMenuId = _a.subMenuId;
|
||
|
|
var ariaLabel = '';
|
||
|
|
if (item.ariaLabel) {
|
||
|
|
ariaLabel = item.ariaLabel;
|
||
|
|
}
|
||
|
|
else if (item.name) {
|
||
|
|
ariaLabel = item.name;
|
||
|
|
}
|
||
|
|
var itemButtonProperties = {
|
||
|
|
className: Utilities_1.css('ms-ContextualMenu-link', styles.link, (_b = {},
|
||
|
|
_b['is-expanded ' + styles.isExpanded] = (expandedMenuItemKey === item.key),
|
||
|
|
_b)),
|
||
|
|
onClick: this._onItemClick.bind(this, item),
|
||
|
|
onKeyDown: hasSubmenuItems(item) ? this._onItemKeyDown.bind(this, item) : null,
|
||
|
|
onMouseEnter: this._onItemMouseEnter.bind(this, item),
|
||
|
|
onMouseLeave: this._onMouseLeave,
|
||
|
|
onMouseDown: function (ev) { return _this._onItemMouseDown(item, ev); },
|
||
|
|
disabled: item.isDisabled || item.disabled,
|
||
|
|
href: item.href,
|
||
|
|
title: item.title,
|
||
|
|
'aria-label': ariaLabel,
|
||
|
|
'aria-haspopup': hasSubmenuItems(item) ? true : null,
|
||
|
|
'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
|
||
|
|
role: 'menuitem',
|
||
|
|
style: item.style,
|
||
|
|
};
|
||
|
|
return React.createElement('button', Utilities_1.assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), itemButtonProperties), this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderMenuItemChildren = function (item, index, hasCheckmarks, hasIcons) {
|
||
|
|
var isItemChecked = item.isChecked || item.checked;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-ContextualMenu-linkContent', styles.linkContent) },
|
||
|
|
(hasCheckmarks) ? (React.createElement(Icon_1.Icon, { iconName: isItemChecked ? 'CheckMark' : 'CustomIcon', className: Utilities_1.css('ms-ContextualMenu-icon', styles.icon), onClick: this._onItemClick.bind(this, item) })) : (null),
|
||
|
|
(hasIcons) ? (this._renderIcon(item)) : (null),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-ContextualMenu-itemText', styles.itemText) }, item.name),
|
||
|
|
hasSubmenuItems(item) ? (React.createElement(Icon_1.Icon, __assign({ iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: Utilities_1.css('ms-ContextualMenu-submenuIcon', styles.submenuIcon, item.submenuIconProps ? item.submenuIconProps.className : '') }))) : (null)));
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._renderIcon = function (item) {
|
||
|
|
// Only present to allow continued use of item.icon which is deprecated.
|
||
|
|
var iconProps = item.iconProps ? item.iconProps : {
|
||
|
|
iconName: item.icon
|
||
|
|
};
|
||
|
|
// Use the default icon color for the known icon names
|
||
|
|
var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-ContextualMenu-iconColor ' + styles.iconColor);
|
||
|
|
var iconClassName = Utilities_1.css('ms-ContextualMenu-icon', styles.icon, iconColorClassName, iconProps.className);
|
||
|
|
return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName }));
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onKeyDown = function (ev) {
|
||
|
|
var submenuCloseKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.right : Utilities_1.KeyCodes.left;
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.escape
|
||
|
|
|| ev.which === Utilities_1.KeyCodes.tab
|
||
|
|
|| (ev.which === submenuCloseKey && this.props.isSubMenu && this.props.arrowDirection === FocusZone_1.FocusZoneDirection.vertical)) {
|
||
|
|
// When a user presses escape, we will try to refocus the previous focused element.
|
||
|
|
this._isFocusingPreviousElement = true;
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
this.dismiss(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onItemMouseEnter = function (item, ev) {
|
||
|
|
var _this = this;
|
||
|
|
var targetElement = ev.currentTarget;
|
||
|
|
if (item.key !== this.state.expandedMenuItemKey) {
|
||
|
|
if (hasSubmenuItems(item)) {
|
||
|
|
this._enterTimerId = this._async.setTimeout(function () { return _this._onItemSubMenuExpand(item, targetElement); }, 500);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._enterTimerId = this._async.setTimeout(function () { return _this._onSubMenuDismiss(ev); }, 500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onMouseLeave = function (ev) {
|
||
|
|
this._async.clearTimeout(this._enterTimerId);
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onItemMouseDown = function (item, ev) {
|
||
|
|
if (item.onMouseDown) {
|
||
|
|
item.onMouseDown(item, ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onItemClick = function (item, ev) {
|
||
|
|
var items = getSubmenuItems(item);
|
||
|
|
if (!items || !items.length) {
|
||
|
|
this._executeItemClick(item, ev);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (item.key === this.state.expandedMenuItemKey) {
|
||
|
|
this._onSubMenuDismiss(ev);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._onItemSubMenuExpand(item, ev.currentTarget);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onAnchorClick = function (item, ev) {
|
||
|
|
this._executeItemClick(item, ev);
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._executeItemClick = function (item, ev) {
|
||
|
|
if (item.onClick) {
|
||
|
|
item.onClick(ev, item);
|
||
|
|
}
|
||
|
|
else if (this.props.onItemClick) {
|
||
|
|
this.props.onItemClick(ev, item);
|
||
|
|
}
|
||
|
|
this.dismiss(ev, true);
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onItemKeyDown = function (item, ev) {
|
||
|
|
var openKey = Utilities_1.getRTL() ? Utilities_1.KeyCodes.left : Utilities_1.KeyCodes.right;
|
||
|
|
if (ev.which === openKey) {
|
||
|
|
this._onItemSubMenuExpand(item, ev.currentTarget);
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onItemSubMenuExpand = function (item, target) {
|
||
|
|
if (this.state.expandedMenuItemKey !== item.key) {
|
||
|
|
if (this.state.expandedMenuItemKey) {
|
||
|
|
this._onSubMenuDismiss();
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
expandedMenuItemKey: item.key,
|
||
|
|
submenuTarget: target
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._getSubmenuProps = function () {
|
||
|
|
var _a = this.state, submenuTarget = _a.submenuTarget, expandedMenuItemKey = _a.expandedMenuItemKey;
|
||
|
|
var item = this._findItemByKey(expandedMenuItemKey);
|
||
|
|
var submenuProps = null;
|
||
|
|
if (item) {
|
||
|
|
submenuProps = {
|
||
|
|
items: getSubmenuItems(item),
|
||
|
|
target: submenuTarget,
|
||
|
|
onDismiss: this._onSubMenuDismiss,
|
||
|
|
isSubMenu: true,
|
||
|
|
id: this.state.subMenuId,
|
||
|
|
shouldFocusOnMount: true,
|
||
|
|
directionalHint: Utilities_1.getRTL() ? DirectionalHint_1.DirectionalHint.leftTopEdge : DirectionalHint_1.DirectionalHint.rightTopEdge,
|
||
|
|
className: this.props.className,
|
||
|
|
gapSpace: 0
|
||
|
|
};
|
||
|
|
if (item.subMenuProps) {
|
||
|
|
Utilities_1.assign(submenuProps, item.subMenuProps);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return submenuProps;
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._findItemByKey = function (key) {
|
||
|
|
var items = this.props.items;
|
||
|
|
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
|
||
|
|
var item = items_1[_i];
|
||
|
|
if (item.key && item.key === key) {
|
||
|
|
return item;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._onSubMenuDismiss = function (ev, dismissAll) {
|
||
|
|
if (dismissAll) {
|
||
|
|
this.dismiss(ev, dismissAll);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setState({
|
||
|
|
dismissedMenuItemKey: this.state.expandedMenuItemKey,
|
||
|
|
expandedMenuItemKey: null,
|
||
|
|
submenuTarget: null
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ContextualMenu.prototype._setTargetWindowAndElement = function (target) {
|
||
|
|
if (target) {
|
||
|
|
if (typeof target === 'string') {
|
||
|
|
var currentDoc = Utilities_1.getDocument();
|
||
|
|
this._target = currentDoc ? currentDoc.querySelector(target) : null;
|
||
|
|
this._targetWindow = Utilities_1.getWindow();
|
||
|
|
}
|
||
|
|
else if (target.stopPropagation) {
|
||
|
|
this._target = target;
|
||
|
|
this._targetWindow = Utilities_1.getWindow(target.toElement);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var targetElement = target;
|
||
|
|
this._target = target;
|
||
|
|
this._targetWindow = Utilities_1.getWindow(targetElement);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._targetWindow = Utilities_1.getWindow();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return ContextualMenu;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
// The default ContextualMenu properities have no items and beak, the default submenu direction is right and top.
|
||
|
|
ContextualMenu.defaultProps = {
|
||
|
|
items: [],
|
||
|
|
shouldFocusOnMount: true,
|
||
|
|
isBeakVisible: false,
|
||
|
|
gapSpace: 0,
|
||
|
|
directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge,
|
||
|
|
beakWidth: 16,
|
||
|
|
arrowDirection: FocusZone_1.FocusZoneDirection.vertical,
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ContextualMenu.prototype, "dismiss", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ContextualMenu.prototype, "_onKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ContextualMenu.prototype, "_onMouseLeave", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ContextualMenu.prototype, "_onSubMenuDismiss", null);
|
||
|
|
exports.ContextualMenu = ContextualMenu;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 57 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
exports.DirectionalHint = DirectionalHint_1.DirectionalHint;
|
||
|
|
var ContextualMenuItemType;
|
||
|
|
(function (ContextualMenuItemType) {
|
||
|
|
ContextualMenuItemType[ContextualMenuItemType["Normal"] = 0] = "Normal";
|
||
|
|
ContextualMenuItemType[ContextualMenuItemType["Divider"] = 1] = "Divider";
|
||
|
|
ContextualMenuItemType[ContextualMenuItemType["Header"] = 2] = "Header";
|
||
|
|
})(ContextualMenuItemType = exports.ContextualMenuItemType || (exports.ContextualMenuItemType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 58 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DirectionalHint;
|
||
|
|
(function (DirectionalHint) {
|
||
|
|
/**
|
||
|
|
* Appear above the target element, with the left edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["topLeftEdge"] = 0] = "topLeftEdge";
|
||
|
|
/**
|
||
|
|
* Appear above the target element, with the centers of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["topCenter"] = 1] = "topCenter";
|
||
|
|
/**
|
||
|
|
* Appear above the target element, with the right edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["topRightEdge"] = 2] = "topRightEdge";
|
||
|
|
/**
|
||
|
|
* Appear above the target element, aligning with the target element such that the callout tends toward the center of the screen.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["topAutoEdge"] = 3] = "topAutoEdge";
|
||
|
|
/**
|
||
|
|
* Appear below the target element, with the left edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["bottomLeftEdge"] = 4] = "bottomLeftEdge";
|
||
|
|
/**
|
||
|
|
* Appear below the target element, with the centers of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["bottomCenter"] = 5] = "bottomCenter";
|
||
|
|
/**
|
||
|
|
* Appear below the target element, with the right edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["bottomRightEdge"] = 6] = "bottomRightEdge";
|
||
|
|
/**
|
||
|
|
* Appear below the target element, aligning with the target element such that the callout tends toward the center of the screen.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["bottomAutoEdge"] = 7] = "bottomAutoEdge";
|
||
|
|
/**
|
||
|
|
* Appear to the left of the target element, with the top edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["leftTopEdge"] = 8] = "leftTopEdge";
|
||
|
|
/**
|
||
|
|
* Appear to the left of the target element, with the centers of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["leftCenter"] = 9] = "leftCenter";
|
||
|
|
/**
|
||
|
|
* Appear to the left of the target element, with the bottom edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["leftBottomEdge"] = 10] = "leftBottomEdge";
|
||
|
|
/**
|
||
|
|
* Appear to the right of the target element, with the top edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["rightTopEdge"] = 11] = "rightTopEdge";
|
||
|
|
/**
|
||
|
|
* Appear to the right of the target element, with the centers of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["rightCenter"] = 12] = "rightCenter";
|
||
|
|
/**
|
||
|
|
* Appear to the right of the target element, with the bottom edges of the callout and target aligning.
|
||
|
|
*/
|
||
|
|
DirectionalHint[DirectionalHint["rightBottomEdge"] = 13] = "rightBottomEdge";
|
||
|
|
})(DirectionalHint = exports.DirectionalHint || (exports.DirectionalHint = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 59 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(60));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 60 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(61));
|
||
|
|
__export(__webpack_require__(58));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 61 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var CalloutContent_1 = __webpack_require__(62);
|
||
|
|
var Layer_1 = __webpack_require__(132);
|
||
|
|
var Callout = (function (_super) {
|
||
|
|
__extends(Callout, _super);
|
||
|
|
function Callout(props) {
|
||
|
|
return _super.call(this, props) || this;
|
||
|
|
}
|
||
|
|
Callout.prototype.render = function () {
|
||
|
|
var content = (React.createElement(CalloutContent_1.CalloutContent, __assign({}, this.props)));
|
||
|
|
return this.props.doNotLayer ? content : (React.createElement(Layer_1.Layer, null, content));
|
||
|
|
};
|
||
|
|
return Callout;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.Callout = Callout;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 62 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var positioning_1 = __webpack_require__(63);
|
||
|
|
var Popup_1 = __webpack_require__(64);
|
||
|
|
var stylesImport = __webpack_require__(67);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
|
||
|
|
var OFF_SCREEN_STYLE = { opacity: 0 };
|
||
|
|
var BORDER_WIDTH = 1;
|
||
|
|
var CalloutContent = (function (_super) {
|
||
|
|
__extends(CalloutContent, _super);
|
||
|
|
function CalloutContent(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({ 'beakStyle': 'beakWidth' });
|
||
|
|
_this._didSetInitialFocus = false;
|
||
|
|
_this.state = {
|
||
|
|
positions: null,
|
||
|
|
slideDirectionalClassName: null,
|
||
|
|
calloutElementRect: null
|
||
|
|
};
|
||
|
|
_this._positionAttempts = 0;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
CalloutContent.prototype.componentDidUpdate = function () {
|
||
|
|
this._setInitialFocus();
|
||
|
|
this._updatePosition();
|
||
|
|
};
|
||
|
|
CalloutContent.prototype.componentWillMount = function () {
|
||
|
|
var target = this.props.targetElement ? this.props.targetElement : this.props.target;
|
||
|
|
this._setTargetWindowAndElement(target);
|
||
|
|
};
|
||
|
|
CalloutContent.prototype.componentWillUpdate = function (newProps) {
|
||
|
|
if (newProps.targetElement !== this.props.targetElement || newProps.target !== this.props.target) {
|
||
|
|
var newTarget = newProps.targetElement ? newProps.targetElement : newProps.target;
|
||
|
|
this._maxHeight = undefined;
|
||
|
|
this._setTargetWindowAndElement(newTarget);
|
||
|
|
}
|
||
|
|
if (newProps.gapSpace !== this.props.gapSpace || this.props.beakWidth !== newProps.beakWidth) {
|
||
|
|
this._maxHeight = undefined;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalloutContent.prototype.componentDidMount = function () {
|
||
|
|
this._onComponentDidMount();
|
||
|
|
};
|
||
|
|
CalloutContent.prototype.render = function () {
|
||
|
|
// If there is no target window then we are likely in server side rendering and we should not render anything.
|
||
|
|
if (!this._targetWindow) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var _a = this.props, role = _a.role, ariaLabel = _a.ariaLabel, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className, target = _a.target, targetElement = _a.targetElement, isBeakVisible = _a.isBeakVisible, beakStyle = _a.beakStyle, children = _a.children, beakWidth = _a.beakWidth, backgroundColor = _a.backgroundColor;
|
||
|
|
var positions = this.state.positions;
|
||
|
|
var beakStyleWidth = beakWidth;
|
||
|
|
// This is here to support the old way of setting the beak size until version 1.0.0.
|
||
|
|
// beakStyle is now deprecated and will be be removed at version 1.0.0
|
||
|
|
if (beakStyle === 'ms-Callout-smallbeak') {
|
||
|
|
beakStyleWidth = 16;
|
||
|
|
}
|
||
|
|
var beakReactStyle = {
|
||
|
|
top: positions && positions.beakPosition ? positions.beakPosition.top : BEAK_ORIGIN_POSITION.top,
|
||
|
|
left: positions && positions.beakPosition ? positions.beakPosition.left : BEAK_ORIGIN_POSITION.left,
|
||
|
|
height: beakStyleWidth,
|
||
|
|
width: beakStyleWidth,
|
||
|
|
backgroundColor: backgroundColor,
|
||
|
|
};
|
||
|
|
var directionalClassName = (positions && positions.directionalClassName)
|
||
|
|
? Styling_1.AnimationClassNames[positions.directionalClassName]
|
||
|
|
: '';
|
||
|
|
var contentMaxHeight = this._getMaxHeight();
|
||
|
|
var beakVisible = isBeakVisible && (!!targetElement || !!target);
|
||
|
|
var content = (React.createElement("div", { ref: this._resolveRef('_hostElement'), className: Utilities_1.css('ms-Callout-container', styles.container) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Callout', styles.root, className, directionalClassName), style: positions ? positions.calloutPosition : OFF_SCREEN_STYLE, ref: this._resolveRef('_calloutElement') },
|
||
|
|
beakVisible && (React.createElement("div", { className: Utilities_1.css('ms-Callout-beak', styles.beak), style: beakReactStyle })),
|
||
|
|
beakVisible &&
|
||
|
|
(React.createElement("div", { className: Utilities_1.css('ms-Callout-beakCurtain', styles.beakCurtain) })),
|
||
|
|
React.createElement(Popup_1.Popup, { role: role, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaLabelledBy: ariaLabelledBy, className: Utilities_1.css('ms-Callout-main', styles.main), onDismiss: this.dismiss, shouldRestoreFocus: true, style: { maxHeight: contentMaxHeight, backgroundColor: backgroundColor } }, children))));
|
||
|
|
return content;
|
||
|
|
};
|
||
|
|
CalloutContent.prototype.dismiss = function (ev) {
|
||
|
|
var onDismiss = this.props.onDismiss;
|
||
|
|
if (onDismiss) {
|
||
|
|
onDismiss(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._dismissOnScroll = function (ev) {
|
||
|
|
var preventDismissOnScroll = this.props.preventDismissOnScroll;
|
||
|
|
if (this.state.positions && !preventDismissOnScroll) {
|
||
|
|
this._dismissOnLostFocus(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._dismissOnLostFocus = function (ev) {
|
||
|
|
var target = ev.target;
|
||
|
|
var clickedOutsideCallout = this._hostElement && !Utilities_1.elementContains(this._hostElement, target);
|
||
|
|
if ((!this._target && clickedOutsideCallout) ||
|
||
|
|
ev.target !== this._targetWindow &&
|
||
|
|
clickedOutsideCallout &&
|
||
|
|
(this._target.stopPropagation ||
|
||
|
|
(!this._target || (target !== this._target && !Utilities_1.elementContains(this._target, target))))) {
|
||
|
|
this.dismiss(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._setInitialFocus = function () {
|
||
|
|
if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
|
||
|
|
this._didSetInitialFocus = true;
|
||
|
|
Utilities_1.focusFirstChild(this._calloutElement);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._onComponentDidMount = function () {
|
||
|
|
var _this = this;
|
||
|
|
// This is added so the callout will dismiss when the window is scrolled
|
||
|
|
// but not when something inside the callout is scrolled. The delay seems
|
||
|
|
// to be required to avoid React firing an async focus event in IE from
|
||
|
|
// the target changing focus quickly prior to rendering the callout.
|
||
|
|
this._async.setTimeout(function () {
|
||
|
|
_this._events.on(_this._targetWindow, 'scroll', _this._dismissOnScroll, true);
|
||
|
|
_this._events.on(_this._targetWindow, 'resize', _this.dismiss, true);
|
||
|
|
_this._events.on(_this._targetWindow, 'focus', _this._dismissOnLostFocus, true);
|
||
|
|
_this._events.on(_this._targetWindow, 'click', _this._dismissOnLostFocus, true);
|
||
|
|
}, 0);
|
||
|
|
if (this.props.onLayerMounted) {
|
||
|
|
this.props.onLayerMounted();
|
||
|
|
}
|
||
|
|
this._updatePosition();
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._updatePosition = function () {
|
||
|
|
var positions = this.state.positions;
|
||
|
|
var hostElement = this._hostElement;
|
||
|
|
var calloutElement = this._calloutElement;
|
||
|
|
if (hostElement && calloutElement) {
|
||
|
|
var currentProps = void 0;
|
||
|
|
currentProps = Utilities_1.assign(currentProps, this.props);
|
||
|
|
currentProps.bounds = this._getBounds();
|
||
|
|
// Temporary to be removed when targetElement is removed. Currently deprecated.
|
||
|
|
if (this.props.targetElement) {
|
||
|
|
currentProps.targetElement = this._target;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
currentProps.target = this._target;
|
||
|
|
}
|
||
|
|
var newPositions = positioning_1.getRelativePositions(currentProps, hostElement, calloutElement);
|
||
|
|
// Set the new position only when the positions are not exists or one of the new callout positions are different.
|
||
|
|
// The position should not change if the position is within 2 decimal places.
|
||
|
|
if ((!positions && newPositions) ||
|
||
|
|
(positions && newPositions && !this._arePositionsEqual(positions, newPositions)
|
||
|
|
&& this._positionAttempts < 5)) {
|
||
|
|
// We should not reposition the callout more than a few times, if it is then the content is likely resizing
|
||
|
|
// and we should stop trying to reposition to prevent a stack overflow.
|
||
|
|
this._positionAttempts++;
|
||
|
|
this.setState({
|
||
|
|
positions: newPositions
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._positionAttempts = 0;
|
||
|
|
if (this.props.onPositioned) {
|
||
|
|
this.props.onPositioned();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._getBounds = function () {
|
||
|
|
if (!this._bounds) {
|
||
|
|
var currentBounds = this.props.bounds;
|
||
|
|
if (!currentBounds) {
|
||
|
|
currentBounds = {
|
||
|
|
top: 0 + this.props.minPagePadding,
|
||
|
|
left: 0 + this.props.minPagePadding,
|
||
|
|
right: this._targetWindow.innerWidth - this.props.minPagePadding,
|
||
|
|
bottom: this._targetWindow.innerHeight - this.props.minPagePadding,
|
||
|
|
width: this._targetWindow.innerWidth - this.props.minPagePadding * 2,
|
||
|
|
height: this._targetWindow.innerHeight - this.props.minPagePadding * 2
|
||
|
|
};
|
||
|
|
}
|
||
|
|
this._bounds = currentBounds;
|
||
|
|
}
|
||
|
|
return this._bounds;
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._getMaxHeight = function () {
|
||
|
|
if (!this._maxHeight) {
|
||
|
|
if (this.props.directionalHintFixed && this._target) {
|
||
|
|
var beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
|
||
|
|
var gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
|
||
|
|
this._maxHeight = positioning_1.getMaxHeight(this._target, this.props.directionalHint, beakWidth + gapSpace, this._getBounds());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._maxHeight = this._getBounds().height - BORDER_WIDTH * 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return this._maxHeight;
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._arePositionsEqual = function (positions, newPosition) {
|
||
|
|
if (positions.calloutPosition.top.toFixed(2) !== newPosition.calloutPosition.top.toFixed(2)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (positions.calloutPosition.left.toFixed(2) !== newPosition.calloutPosition.left.toFixed(2)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (positions.beakPosition.top.toFixed(2) !== newPosition.beakPosition.top.toFixed(2)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
CalloutContent.prototype._setTargetWindowAndElement = function (target) {
|
||
|
|
if (target) {
|
||
|
|
if (typeof target === 'string') {
|
||
|
|
var currentDoc = Utilities_1.getDocument();
|
||
|
|
this._target = currentDoc ? currentDoc.querySelector(target) : null;
|
||
|
|
this._targetWindow = Utilities_1.getWindow();
|
||
|
|
}
|
||
|
|
else if (target.stopPropagation) {
|
||
|
|
this._target = target;
|
||
|
|
this._targetWindow = Utilities_1.getWindow(target.toElement);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var targetElement = target;
|
||
|
|
this._target = target;
|
||
|
|
this._targetWindow = Utilities_1.getWindow(targetElement);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._targetWindow = Utilities_1.getWindow();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return CalloutContent;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
CalloutContent.defaultProps = {
|
||
|
|
preventDismissOnScroll: false,
|
||
|
|
isBeakVisible: true,
|
||
|
|
beakWidth: 16,
|
||
|
|
gapSpace: 0,
|
||
|
|
minPagePadding: 8,
|
||
|
|
directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], CalloutContent.prototype, "dismiss", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], CalloutContent.prototype, "_setInitialFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], CalloutContent.prototype, "_onComponentDidMount", null);
|
||
|
|
exports.CalloutContent = CalloutContent;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 63 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var RectangleEdge;
|
||
|
|
(function (RectangleEdge) {
|
||
|
|
RectangleEdge[RectangleEdge["top"] = 0] = "top";
|
||
|
|
RectangleEdge[RectangleEdge["bottom"] = 1] = "bottom";
|
||
|
|
RectangleEdge[RectangleEdge["left"] = 2] = "left";
|
||
|
|
RectangleEdge[RectangleEdge["right"] = 3] = "right";
|
||
|
|
})(RectangleEdge = exports.RectangleEdge || (exports.RectangleEdge = {}));
|
||
|
|
var SLIDE_ANIMATIONS = (_a = {},
|
||
|
|
_a[RectangleEdge.top] = 'slideUpIn20',
|
||
|
|
_a[RectangleEdge.bottom] = 'slideDownIn20',
|
||
|
|
_a[RectangleEdge.left] = 'slideLeftIn20',
|
||
|
|
_a[RectangleEdge.right] = 'slideRightIn20',
|
||
|
|
_a);
|
||
|
|
var PositionData = (function () {
|
||
|
|
function PositionData(calloutDirection, targetDirection, calloutPercent, targetPercent, beakPercent, isAuto) {
|
||
|
|
this.calloutDirection = calloutDirection;
|
||
|
|
this.targetDirection = targetDirection;
|
||
|
|
this.calloutPercent = calloutPercent;
|
||
|
|
this.targetPercent = targetPercent;
|
||
|
|
this.beakPercent = beakPercent;
|
||
|
|
this.isAuto = isAuto;
|
||
|
|
}
|
||
|
|
return PositionData;
|
||
|
|
}());
|
||
|
|
exports.PositionData = PositionData;
|
||
|
|
// Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target
|
||
|
|
var DirectionalDictionary = (_b = {},
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 50, 50, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 100, 100, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.top, 0, 0, 50, true),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 50, 50, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 100, 100, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.bottom, 0, 0, 50, true),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 0, 0, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.right, RectangleEdge.left, 50, 50, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.left, 100, 100, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 0, 0, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.left, RectangleEdge.right, 50, 50, 50, false),
|
||
|
|
_b[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.right, 100, 100, 50, false),
|
||
|
|
_b);
|
||
|
|
var CoverDictionary = (_c = {},
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.topLeftEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.topCenter] = new PositionData(RectangleEdge.top, RectangleEdge.top, 50, 50, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.topRightEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 100, 100, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.topAutoEdge] = new PositionData(RectangleEdge.top, RectangleEdge.top, 0, 0, 50, true),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.bottomLeftEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.bottomCenter] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 50, 50, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.bottomRightEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 100, 100, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.bottomAutoEdge] = new PositionData(RectangleEdge.bottom, RectangleEdge.bottom, 0, 0, 50, true),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.leftTopEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 0, 0, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.leftCenter] = new PositionData(RectangleEdge.left, RectangleEdge.left, 50, 50, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.leftBottomEdge] = new PositionData(RectangleEdge.left, RectangleEdge.left, 100, 100, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.rightTopEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 0, 0, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.rightCenter] = new PositionData(RectangleEdge.right, RectangleEdge.right, 50, 50, 50, false),
|
||
|
|
_c[DirectionalHint_1.DirectionalHint.rightBottomEdge] = new PositionData(RectangleEdge.right, RectangleEdge.right, 100, 100, 50, false),
|
||
|
|
_c);
|
||
|
|
var OppositeEdgeDictionary = (_d = {},
|
||
|
|
_d[RectangleEdge.top] = RectangleEdge.bottom,
|
||
|
|
_d[RectangleEdge.bottom] = RectangleEdge.top,
|
||
|
|
_d[RectangleEdge.right] = RectangleEdge.left,
|
||
|
|
_d[RectangleEdge.left] = RectangleEdge.right,
|
||
|
|
_d);
|
||
|
|
function getRelativePositions(props, hostElement, calloutElement) {
|
||
|
|
var beakWidth = !props.isBeakVisible ? 0 : props.beakWidth;
|
||
|
|
var borderWidth = positioningFunctions._getBorderSize(calloutElement);
|
||
|
|
var gap = positioningFunctions._calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0);
|
||
|
|
var boundingRect = props.bounds ?
|
||
|
|
positioningFunctions._getRectangleFromIRect(props.bounds) :
|
||
|
|
new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight);
|
||
|
|
var targetRect = props.target ? positioningFunctions._getTargetRect(boundingRect, props.target) : positioningFunctions._getTargetRectDEPRECATED(boundingRect, props.targetElement, props.creationEvent, props.targetPoint, props.useTargetPoint);
|
||
|
|
var positionData = positioningFunctions._getPositionData(props.directionalHint, targetRect, boundingRect, props.coverTarget);
|
||
|
|
var positionedCallout = positioningFunctions._positionCalloutWithinBounds(positioningFunctions._getRectangleFromHTMLElement(calloutElement), targetRect, boundingRect, positionData, gap, props.coverTarget, props.directionalHintFixed);
|
||
|
|
var beakPositioned = positioningFunctions._positionBeak(beakWidth, positionedCallout, targetRect, borderWidth);
|
||
|
|
var finalizedCallout = positioningFunctions._finalizeCalloutPosition(positionedCallout.calloutRectangle, hostElement);
|
||
|
|
return {
|
||
|
|
calloutPosition: { top: finalizedCallout.top, left: finalizedCallout.left },
|
||
|
|
beakPosition: { top: beakPositioned.top, left: beakPositioned.left, display: 'block' },
|
||
|
|
directionalClassName: SLIDE_ANIMATIONS[positionedCallout.targetEdge],
|
||
|
|
submenuDirection: positionedCallout.calloutEdge === RectangleEdge.right ? DirectionalHint_1.DirectionalHint.leftBottomEdge : DirectionalHint_1.DirectionalHint.rightBottomEdge
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.getRelativePositions = getRelativePositions;
|
||
|
|
/**
|
||
|
|
* Get's the maximum height that a rectangle can have in order to fit below or above a target.
|
||
|
|
* If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder
|
||
|
|
* of the target given.
|
||
|
|
* If no bounds are provided then the window is treated as the bounds.
|
||
|
|
*/
|
||
|
|
function getMaxHeight(target, targetEdge, gapSpace, bounds) {
|
||
|
|
if (gapSpace === void 0) { gapSpace = 0; }
|
||
|
|
var mouseTarget = target;
|
||
|
|
var elementTarget = target;
|
||
|
|
var targetRect;
|
||
|
|
var boundingRectangle = bounds ?
|
||
|
|
positioningFunctions._getRectangleFromIRect(bounds) :
|
||
|
|
new Utilities_1.Rectangle(0, window.innerWidth - Utilities_1.getScrollbarWidth(), 0, window.innerHeight);
|
||
|
|
if (mouseTarget.stopPropagation) {
|
||
|
|
targetRect = new Utilities_1.Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetRect = positioningFunctions._getRectangleFromHTMLElement(elementTarget);
|
||
|
|
}
|
||
|
|
return positioningFunctions._getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle);
|
||
|
|
}
|
||
|
|
exports.getMaxHeight = getMaxHeight;
|
||
|
|
var positioningFunctions;
|
||
|
|
(function (positioningFunctions) {
|
||
|
|
/**
|
||
|
|
* If max height is less than zero it returns the bounds height instead.
|
||
|
|
*/
|
||
|
|
function _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds) {
|
||
|
|
var maxHeight = 0;
|
||
|
|
switch (targetEdge) {
|
||
|
|
case DirectionalHint_1.DirectionalHint.bottomAutoEdge:
|
||
|
|
case DirectionalHint_1.DirectionalHint.bottomCenter:
|
||
|
|
case DirectionalHint_1.DirectionalHint.bottomLeftEdge:
|
||
|
|
case DirectionalHint_1.DirectionalHint.bottomRightEdge:
|
||
|
|
maxHeight = bounds.bottom - targetRectangle.bottom - gapSpace;
|
||
|
|
break;
|
||
|
|
case DirectionalHint_1.DirectionalHint.topAutoEdge:
|
||
|
|
case DirectionalHint_1.DirectionalHint.topCenter:
|
||
|
|
case DirectionalHint_1.DirectionalHint.topLeftEdge:
|
||
|
|
case DirectionalHint_1.DirectionalHint.topRightEdge:
|
||
|
|
maxHeight = targetRectangle.top - bounds.top - gapSpace;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
maxHeight = bounds.bottom - targetRectangle.top - gapSpace;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return maxHeight > 0 ? maxHeight : bounds.height;
|
||
|
|
}
|
||
|
|
positioningFunctions._getMaxHeightFromTargetRectangle = _getMaxHeightFromTargetRectangle;
|
||
|
|
function _getTargetRect(bounds, target) {
|
||
|
|
var targetRectangle;
|
||
|
|
if (target.preventDefault) {
|
||
|
|
var ev = target;
|
||
|
|
targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetRectangle = _getRectangleFromHTMLElement(target);
|
||
|
|
}
|
||
|
|
if (!_isRectangleWithinBounds(targetRectangle, bounds)) {
|
||
|
|
var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);
|
||
|
|
for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) {
|
||
|
|
var direction = outOfBounds_1[_i];
|
||
|
|
targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return targetRectangle;
|
||
|
|
}
|
||
|
|
positioningFunctions._getTargetRect = _getTargetRect;
|
||
|
|
function _getTargetRectDEPRECATED(bounds, targetElement, ev, targetPoint, isTargetPoint) {
|
||
|
|
var targetRectangle;
|
||
|
|
if (isTargetPoint) {
|
||
|
|
if (targetPoint) {
|
||
|
|
targetRectangle = new Utilities_1.Rectangle(targetPoint.x, targetPoint.x, targetPoint.y, targetPoint.y);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetRectangle = new Utilities_1.Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (!targetElement) {
|
||
|
|
if (ev && ev.target) {
|
||
|
|
targetRectangle = _getRectangleFromHTMLElement(ev.target);
|
||
|
|
}
|
||
|
|
targetRectangle = new Utilities_1.Rectangle();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetRectangle = _getRectangleFromHTMLElement(targetElement);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!_isRectangleWithinBounds(targetRectangle, bounds)) {
|
||
|
|
var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);
|
||
|
|
for (var _i = 0, outOfBounds_2 = outOfBounds; _i < outOfBounds_2.length; _i++) {
|
||
|
|
var direction = outOfBounds_2[_i];
|
||
|
|
targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return targetRectangle;
|
||
|
|
}
|
||
|
|
positioningFunctions._getTargetRectDEPRECATED = _getTargetRectDEPRECATED;
|
||
|
|
function _getRectangleFromHTMLElement(element) {
|
||
|
|
var clientRect = element.getBoundingClientRect();
|
||
|
|
return new Utilities_1.Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);
|
||
|
|
}
|
||
|
|
positioningFunctions._getRectangleFromHTMLElement = _getRectangleFromHTMLElement;
|
||
|
|
function _positionCalloutWithinBounds(calloutRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) {
|
||
|
|
if (gap === void 0) { gap = 0; }
|
||
|
|
var estimatedRectangle = _moveRectangleToAnchorRectangle(calloutRectangle, directionalInfo.calloutDirection, directionalInfo.calloutPercent, targetRectangle, directionalInfo.targetDirection, directionalInfo.targetPercent, gap);
|
||
|
|
if (_isRectangleWithinBounds(estimatedRectangle, boundingRectangle)) {
|
||
|
|
return { calloutRectangle: estimatedRectangle, calloutEdge: directionalInfo.calloutDirection, targetEdge: directionalInfo.targetDirection, alignPercent: directionalInfo.calloutPercent, beakPercent: directionalInfo.beakPercent };
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return _getBestRectangleFitWithinBounds(estimatedRectangle, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
positioningFunctions._positionCalloutWithinBounds = _positionCalloutWithinBounds;
|
||
|
|
function _getBestRectangleFitWithinBounds(estimatedPosition, targetRectangle, boundingRectangle, directionalInfo, gap, coverTarget, directionalHintFixed) {
|
||
|
|
var callout = {
|
||
|
|
calloutRectangle: estimatedPosition,
|
||
|
|
calloutEdge: directionalInfo.calloutDirection,
|
||
|
|
targetEdge: directionalInfo.targetDirection,
|
||
|
|
alignPercent: directionalInfo.calloutPercent,
|
||
|
|
beakPercent: directionalInfo.beakPercent
|
||
|
|
};
|
||
|
|
// If it can't possibly fit within the bounds just put it into it's initial position.
|
||
|
|
if (!_canRectangleFitWithinBounds(estimatedPosition, boundingRectangle)) {
|
||
|
|
return callout;
|
||
|
|
}
|
||
|
|
if (!coverTarget && !directionalHintFixed) {
|
||
|
|
callout = _flipRectangleToFit(callout, targetRectangle, directionalInfo.targetPercent, boundingRectangle, gap);
|
||
|
|
}
|
||
|
|
var outOfBounds = _getOutOfBoundsEdges(callout.calloutRectangle, boundingRectangle);
|
||
|
|
for (var _i = 0, outOfBounds_3 = outOfBounds; _i < outOfBounds_3.length; _i++) {
|
||
|
|
var direction = outOfBounds_3[_i];
|
||
|
|
callout.calloutRectangle = _alignEdgeToCoordinate(callout.calloutRectangle, boundingRectangle[RectangleEdge[direction]], direction);
|
||
|
|
var adjustedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.targetEdge, targetRectangle, callout.targetEdge, directionalInfo.targetPercent);
|
||
|
|
callout.alignPercent = adjustedPercent;
|
||
|
|
}
|
||
|
|
return callout;
|
||
|
|
}
|
||
|
|
positioningFunctions._getBestRectangleFitWithinBounds = _getBestRectangleFitWithinBounds;
|
||
|
|
function _positionBeak(beakWidth, callout, targetRectangle, border) {
|
||
|
|
var calloutRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, 0, callout.calloutRectangle.height - border * 2);
|
||
|
|
var beakRectangle = new Utilities_1.Rectangle(0, beakWidth, 0, beakWidth);
|
||
|
|
var recalculatedPercent = _recalculateMatchingPercents(callout.calloutRectangle, callout.calloutEdge, targetRectangle, callout.targetEdge, callout.beakPercent);
|
||
|
|
var estimatedTargetPoint = _getPointOnEdgeFromPercent(calloutRect, callout.calloutEdge, recalculatedPercent);
|
||
|
|
return _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border);
|
||
|
|
}
|
||
|
|
positioningFunctions._positionBeak = _positionBeak;
|
||
|
|
function _finalizeBeakPosition(beakRectangle, callout, estimatedTargetPoint, border) {
|
||
|
|
var beakPixelSize = _calculateActualBeakWidthInPixels(beakRectangle.width) / 2;
|
||
|
|
var innerRect = null;
|
||
|
|
var beakPoint = { x: beakRectangle.width / 2, y: beakRectangle.width / 2 };
|
||
|
|
if (callout.calloutEdge === RectangleEdge.bottom || callout.calloutEdge === RectangleEdge.top) {
|
||
|
|
innerRect = new Utilities_1.Rectangle(beakPixelSize, callout.calloutRectangle.width - beakPixelSize - border * 2, 0, callout.calloutRectangle.height - border * 2);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
innerRect = new Utilities_1.Rectangle(0, callout.calloutRectangle.width - border * 2, beakPixelSize, callout.calloutRectangle.height - beakPixelSize - border * 2);
|
||
|
|
}
|
||
|
|
var finalPoint = _getClosestPointOnEdgeToPoint(innerRect, callout.calloutEdge, estimatedTargetPoint);
|
||
|
|
return _movePointOnRectangleToPoint(beakRectangle, beakPoint, finalPoint);
|
||
|
|
}
|
||
|
|
positioningFunctions._finalizeBeakPosition = _finalizeBeakPosition;
|
||
|
|
function _getRectangleFromIRect(rect) {
|
||
|
|
return new Utilities_1.Rectangle(rect.left, rect.right, rect.top, rect.bottom);
|
||
|
|
}
|
||
|
|
positioningFunctions._getRectangleFromIRect = _getRectangleFromIRect;
|
||
|
|
function _finalizeCalloutPosition(calloutRectangle, hostElement) {
|
||
|
|
var hostRect = _getRectangleFromHTMLElement(hostElement);
|
||
|
|
var topPosition = calloutRectangle.top - hostRect.top;
|
||
|
|
var leftPosition = calloutRectangle.left - hostRect.left;
|
||
|
|
return new Utilities_1.Rectangle(leftPosition, leftPosition + calloutRectangle.width, topPosition, topPosition + calloutRectangle.height);
|
||
|
|
}
|
||
|
|
positioningFunctions._finalizeCalloutPosition = _finalizeCalloutPosition;
|
||
|
|
/**
|
||
|
|
* Finds the percent on the recalculateRect that matches the percent on the target rect based on position.
|
||
|
|
*/
|
||
|
|
function _recalculateMatchingPercents(recalculateRect, rectangleEdge, targetRect, targetEdge, targetPercent) {
|
||
|
|
var targetPoint = _getPointOnEdgeFromPercent(targetRect, targetEdge, targetPercent);
|
||
|
|
var adjustedPoint = _getClosestPointOnEdgeToPoint(recalculateRect, rectangleEdge, targetPoint);
|
||
|
|
var adjustedPercent = _getPercentOfEdgeFromPoint(recalculateRect, rectangleEdge, adjustedPoint);
|
||
|
|
if (adjustedPercent > 100) {
|
||
|
|
adjustedPercent = 100;
|
||
|
|
}
|
||
|
|
else if (adjustedPercent < 0) {
|
||
|
|
adjustedPercent = 0;
|
||
|
|
}
|
||
|
|
return adjustedPercent;
|
||
|
|
}
|
||
|
|
positioningFunctions._recalculateMatchingPercents = _recalculateMatchingPercents;
|
||
|
|
function _canRectangleFitWithinBounds(rect, boundingRect) {
|
||
|
|
if (rect.width > boundingRect.width || rect.height > boundingRect.height) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
positioningFunctions._canRectangleFitWithinBounds = _canRectangleFitWithinBounds;
|
||
|
|
function _isRectangleWithinBounds(rect, boundingRect) {
|
||
|
|
if (rect.top < boundingRect.top) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (rect.bottom > boundingRect.bottom) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (rect.left < boundingRect.left) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (rect.right > boundingRect.right) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
positioningFunctions._isRectangleWithinBounds = _isRectangleWithinBounds;
|
||
|
|
/**
|
||
|
|
* Gets all of the edges of a rectangle that are outside of the given bounds.
|
||
|
|
* If there are no out of bounds edges it returns an empty array.
|
||
|
|
*/
|
||
|
|
function _getOutOfBoundsEdges(rect, boundingRect) {
|
||
|
|
var outOfBounds = new Array();
|
||
|
|
if (rect.top < boundingRect.top) {
|
||
|
|
outOfBounds.push(RectangleEdge.top);
|
||
|
|
}
|
||
|
|
if (rect.bottom > boundingRect.bottom) {
|
||
|
|
outOfBounds.push(RectangleEdge.bottom);
|
||
|
|
}
|
||
|
|
if (rect.left < boundingRect.left) {
|
||
|
|
outOfBounds.push(RectangleEdge.left);
|
||
|
|
}
|
||
|
|
if (rect.right > boundingRect.right) {
|
||
|
|
outOfBounds.push(RectangleEdge.right);
|
||
|
|
}
|
||
|
|
return outOfBounds;
|
||
|
|
}
|
||
|
|
positioningFunctions._getOutOfBoundsEdges = _getOutOfBoundsEdges;
|
||
|
|
/**
|
||
|
|
* Returns a point on a edge that is x% of the way down it.
|
||
|
|
*/
|
||
|
|
function _getPointOnEdgeFromPercent(rect, direction, percentOfRect) {
|
||
|
|
var startPoint;
|
||
|
|
var endPoint;
|
||
|
|
switch (direction) {
|
||
|
|
case RectangleEdge.top:
|
||
|
|
startPoint = { x: rect.left, y: rect.top };
|
||
|
|
endPoint = { x: rect.right, y: rect.top };
|
||
|
|
break;
|
||
|
|
case RectangleEdge.left:
|
||
|
|
startPoint = { x: rect.left, y: rect.top };
|
||
|
|
endPoint = { x: rect.left, y: rect.bottom };
|
||
|
|
break;
|
||
|
|
case RectangleEdge.right:
|
||
|
|
startPoint = { x: rect.right, y: rect.top };
|
||
|
|
endPoint = { x: rect.right, y: rect.bottom };
|
||
|
|
break;
|
||
|
|
case RectangleEdge.bottom:
|
||
|
|
startPoint = { x: rect.left, y: rect.bottom };
|
||
|
|
endPoint = { x: rect.right, y: rect.bottom };
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
startPoint = { x: 0, y: 0 };
|
||
|
|
endPoint = { x: 0, y: 0 };
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return _calculatePointPercentAlongLine(startPoint, endPoint, percentOfRect);
|
||
|
|
}
|
||
|
|
positioningFunctions._getPointOnEdgeFromPercent = _getPointOnEdgeFromPercent;
|
||
|
|
/**
|
||
|
|
* Gets the percent down an edge that a point appears.
|
||
|
|
*/
|
||
|
|
function _getPercentOfEdgeFromPoint(rect, direction, valueOnEdge) {
|
||
|
|
switch (direction) {
|
||
|
|
case RectangleEdge.top:
|
||
|
|
case RectangleEdge.bottom:
|
||
|
|
return rect.width !== 0 ? (valueOnEdge.x - rect.left) / rect.width * 100 : 100;
|
||
|
|
case RectangleEdge.left:
|
||
|
|
case RectangleEdge.right:
|
||
|
|
return rect.height !== 0 ? (valueOnEdge.y - rect.top) / rect.height * 100 : 100;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
positioningFunctions._getPercentOfEdgeFromPoint = _getPercentOfEdgeFromPoint;
|
||
|
|
/**
|
||
|
|
* Percent is based on distance from left to right or up to down. 0% would be left most, 100% would be right most.
|
||
|
|
*/
|
||
|
|
function _calculatePointPercentAlongLine(startPoint, endPoint, percent) {
|
||
|
|
var x = startPoint.x + ((endPoint.x - startPoint.x) * percent / 100);
|
||
|
|
var y = startPoint.y + ((endPoint.y - startPoint.y) * percent / 100);
|
||
|
|
return { x: x, y: y };
|
||
|
|
}
|
||
|
|
positioningFunctions._calculatePointPercentAlongLine = _calculatePointPercentAlongLine;
|
||
|
|
function _moveTopLeftOfRectangleToPoint(rect, destination) {
|
||
|
|
return new Utilities_1.Rectangle(destination.x, destination.x + rect.width, destination.y, destination.y + rect.height);
|
||
|
|
}
|
||
|
|
positioningFunctions._moveTopLeftOfRectangleToPoint = _moveTopLeftOfRectangleToPoint;
|
||
|
|
/**
|
||
|
|
* Aligns the given edge to the target coordinate.
|
||
|
|
*/
|
||
|
|
function _alignEdgeToCoordinate(rect, coordinate, direction) {
|
||
|
|
switch (direction) {
|
||
|
|
case RectangleEdge.top:
|
||
|
|
return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate });
|
||
|
|
case RectangleEdge.bottom:
|
||
|
|
return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left, y: coordinate - rect.height });
|
||
|
|
case RectangleEdge.left:
|
||
|
|
return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate, y: rect.top });
|
||
|
|
case RectangleEdge.right:
|
||
|
|
return _moveTopLeftOfRectangleToPoint(rect, { x: coordinate - rect.width, y: rect.top });
|
||
|
|
}
|
||
|
|
return new Utilities_1.Rectangle();
|
||
|
|
}
|
||
|
|
positioningFunctions._alignEdgeToCoordinate = _alignEdgeToCoordinate;
|
||
|
|
/**
|
||
|
|
* Moves a point on a given rectangle to the target point. Does not change the rectangles orientation.
|
||
|
|
*/
|
||
|
|
function _movePointOnRectangleToPoint(rect, rectanglePoint, targetPoint) {
|
||
|
|
var leftCornerXDifference = rectanglePoint.x - rect.left;
|
||
|
|
var leftCornerYDifference = rectanglePoint.y - rect.top;
|
||
|
|
return _moveTopLeftOfRectangleToPoint(rect, { x: targetPoint.x - leftCornerXDifference, y: targetPoint.y - leftCornerYDifference });
|
||
|
|
}
|
||
|
|
positioningFunctions._movePointOnRectangleToPoint = _movePointOnRectangleToPoint;
|
||
|
|
/**
|
||
|
|
* Moves the given rectangle a certain number of pixels in the given direction;
|
||
|
|
*/
|
||
|
|
function _moveRectangleInDirection(rect, moveDistance, direction) {
|
||
|
|
var xModifier = 0;
|
||
|
|
var yModifier = 0;
|
||
|
|
switch (direction) {
|
||
|
|
case RectangleEdge.top:
|
||
|
|
yModifier = moveDistance * -1;
|
||
|
|
break;
|
||
|
|
case RectangleEdge.left:
|
||
|
|
xModifier = moveDistance * -1;
|
||
|
|
break;
|
||
|
|
case RectangleEdge.right:
|
||
|
|
xModifier = moveDistance;
|
||
|
|
break;
|
||
|
|
case RectangleEdge.bottom:
|
||
|
|
yModifier = moveDistance;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return _moveTopLeftOfRectangleToPoint(rect, { x: rect.left + xModifier, y: rect.top + yModifier });
|
||
|
|
}
|
||
|
|
positioningFunctions._moveRectangleInDirection = _moveRectangleInDirection;
|
||
|
|
/**
|
||
|
|
* Moves the given rectangle to an anchor rectangle.
|
||
|
|
*/
|
||
|
|
function _moveRectangleToAnchorRectangle(rect, rectSide, rectPercent, anchorRect, anchorSide, anchorPercent, gap) {
|
||
|
|
if (gap === void 0) { gap = 0; }
|
||
|
|
var rectTargetPoint = _getPointOnEdgeFromPercent(rect, rectSide, rectPercent);
|
||
|
|
var anchorTargetPoint = _getPointOnEdgeFromPercent(anchorRect, anchorSide, anchorPercent);
|
||
|
|
var positionedRect = _movePointOnRectangleToPoint(rect, rectTargetPoint, anchorTargetPoint);
|
||
|
|
return _moveRectangleInDirection(positionedRect, gap, anchorSide);
|
||
|
|
}
|
||
|
|
positioningFunctions._moveRectangleToAnchorRectangle = _moveRectangleToAnchorRectangle;
|
||
|
|
/**
|
||
|
|
* Gets the closet point on an edge to the given point.
|
||
|
|
*/
|
||
|
|
function _getClosestPointOnEdgeToPoint(rect, edge, point) {
|
||
|
|
switch (edge) {
|
||
|
|
case RectangleEdge.top:
|
||
|
|
case RectangleEdge.bottom:
|
||
|
|
var x = void 0;
|
||
|
|
if (point.x > rect.right) {
|
||
|
|
x = rect.right;
|
||
|
|
}
|
||
|
|
else if (point.x < rect.left) {
|
||
|
|
x = rect.left;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
x = point.x;
|
||
|
|
}
|
||
|
|
return { x: x, y: rect[RectangleEdge[edge]] };
|
||
|
|
case RectangleEdge.left:
|
||
|
|
case RectangleEdge.right:
|
||
|
|
var y = void 0;
|
||
|
|
if (point.y > rect.bottom) {
|
||
|
|
y = rect.bottom;
|
||
|
|
}
|
||
|
|
else if (point.y < rect.top) {
|
||
|
|
y = rect.top;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
y = point.y;
|
||
|
|
}
|
||
|
|
return { x: rect[RectangleEdge[edge]], y: y };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
positioningFunctions._getClosestPointOnEdgeToPoint = _getClosestPointOnEdgeToPoint;
|
||
|
|
// Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal.
|
||
|
|
// We still want to position the beak based on it's midpoint which does not change. It will
|
||
|
|
// be at (beakwidth / 2, beakwidth / 2)
|
||
|
|
function _calculateActualBeakWidthInPixels(beakWidth) {
|
||
|
|
return Math.sqrt(beakWidth * beakWidth * 2);
|
||
|
|
}
|
||
|
|
positioningFunctions._calculateActualBeakWidthInPixels = _calculateActualBeakWidthInPixels;
|
||
|
|
function _getBorderSize(element) {
|
||
|
|
var styles = getComputedStyle(element, null);
|
||
|
|
var topBorder = parseFloat(styles.borderTopWidth);
|
||
|
|
var bottomBorder = parseFloat(styles.borderBottomWidth);
|
||
|
|
var leftBorder = parseFloat(styles.borderLeftWidth);
|
||
|
|
var rightBorder = parseFloat(styles.borderRightWidth);
|
||
|
|
// If any of the borders are NaN default to 0
|
||
|
|
if (isNaN(topBorder) || isNaN(bottomBorder) || isNaN(leftBorder) || isNaN(rightBorder)) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
// If all of the borders are the same size, any value;
|
||
|
|
if (topBorder === bottomBorder && bottomBorder === leftBorder && leftBorder === rightBorder) {
|
||
|
|
return topBorder;
|
||
|
|
}
|
||
|
|
// If the borders do not agree, return 0
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
positioningFunctions._getBorderSize = _getBorderSize;
|
||
|
|
function _getPositionData(direction, target, boundingRect, coverTarget) {
|
||
|
|
var directionalInfo = coverTarget ? CoverDictionary[direction] : DirectionalDictionary[direction];
|
||
|
|
if (directionalInfo.isAuto) {
|
||
|
|
var center = _getPointOnEdgeFromPercent(target, directionalInfo.targetDirection, 50);
|
||
|
|
if (center.x <= boundingRect.width / 2) {
|
||
|
|
directionalInfo.calloutPercent = 0;
|
||
|
|
directionalInfo.targetPercent = 0;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
directionalInfo.calloutPercent = 100;
|
||
|
|
directionalInfo.targetPercent = 100;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return directionalInfo;
|
||
|
|
}
|
||
|
|
positioningFunctions._getPositionData = _getPositionData;
|
||
|
|
function _flipRectangleToFit(callout, targetRect, targetPercent, boundingRect, gap) {
|
||
|
|
var directions = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.top, RectangleEdge.bottom];
|
||
|
|
var currentEdge = callout.targetEdge;
|
||
|
|
// Make a copy to presever the original positioning.
|
||
|
|
var positionedCallout = Utilities_1.assign({}, callout);
|
||
|
|
// Keep switching sides until one is found with enough space. If all sides don't fit then return the unmodified callout.
|
||
|
|
for (var i = 0; i < 4; i++) {
|
||
|
|
var outOfBounds = _getOutOfBoundsEdges(positionedCallout.calloutRectangle, boundingRect);
|
||
|
|
var index = outOfBounds.indexOf(currentEdge);
|
||
|
|
var oppositeEdge = OppositeEdgeDictionary[currentEdge];
|
||
|
|
if (index > -1) {
|
||
|
|
directions.splice(directions.indexOf(currentEdge), 1);
|
||
|
|
currentEdge = directions.indexOf(oppositeEdge) > -1 ? oppositeEdge : directions.slice(-1)[0];
|
||
|
|
positionedCallout.calloutEdge = OppositeEdgeDictionary[currentEdge];
|
||
|
|
positionedCallout.targetEdge = currentEdge;
|
||
|
|
positionedCallout.calloutRectangle = _moveRectangleToAnchorRectangle(positionedCallout.calloutRectangle, positionedCallout.calloutEdge, positionedCallout.alignPercent, targetRect, positionedCallout.targetEdge, targetPercent, gap);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return positionedCallout;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return callout;
|
||
|
|
}
|
||
|
|
positioningFunctions._flipRectangleToFit = _flipRectangleToFit;
|
||
|
|
})(positioningFunctions = exports.positioningFunctions || (exports.positioningFunctions = {}));
|
||
|
|
var _a, _b, _c, _d;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 64 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(65));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 65 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(66));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 66 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
/**
|
||
|
|
* This adds accessibility to Dialog and Panel controls
|
||
|
|
*/
|
||
|
|
var Popup = (function (_super) {
|
||
|
|
__extends(Popup, _super);
|
||
|
|
function Popup() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Popup.prototype.componentWillMount = function () {
|
||
|
|
this._originalFocusedElement = Utilities_1.getDocument().activeElement;
|
||
|
|
};
|
||
|
|
Popup.prototype.componentDidMount = function () {
|
||
|
|
this._events.on(this.refs.root, 'focus', this._onFocus, true);
|
||
|
|
this._events.on(this.refs.root, 'blur', this._onBlur, true);
|
||
|
|
if (Utilities_1.doesElementContainFocus(this.refs.root)) {
|
||
|
|
this._containsFocus = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Popup.prototype.componentWillUnmount = function () {
|
||
|
|
if (this.props.shouldRestoreFocus &&
|
||
|
|
this._originalFocusedElement &&
|
||
|
|
this._containsFocus &&
|
||
|
|
this._originalFocusedElement !== window) {
|
||
|
|
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
|
||
|
|
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
|
||
|
|
// to reset the focus back to the thing it thinks should have been focused.
|
||
|
|
if (this._originalFocusedElement) {
|
||
|
|
this._originalFocusedElement.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Popup.prototype.render = function () {
|
||
|
|
var _a = this.props, role = _a.role, className = _a.className, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
|
||
|
|
return (React.createElement("div", __assign({ ref: 'root' }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: className, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown }), this.props.children));
|
||
|
|
};
|
||
|
|
Popup.prototype._onKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
if (this.props.onDismiss) {
|
||
|
|
this.props.onDismiss(ev);
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Popup.prototype._onFocus = function () {
|
||
|
|
this._containsFocus = true;
|
||
|
|
};
|
||
|
|
Popup.prototype._onBlur = function () {
|
||
|
|
this._containsFocus = false;
|
||
|
|
};
|
||
|
|
return Popup;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Popup.defaultProps = {
|
||
|
|
shouldRestoreFocus: true
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Popup.prototype, "_onKeyDown", null);
|
||
|
|
exports.Popup = Popup;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 67 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_9eeb3eac',
|
||
|
|
container: 'container_9eeb3eac',
|
||
|
|
main: 'main_9eeb3eac',
|
||
|
|
beak: 'beak_9eeb3eac',
|
||
|
|
beakCurtain: 'beakCurtain_9eeb3eac',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_9eeb3eac{box-shadow:0 0 5px 0 rgba(0,0,0,.4);position:absolute;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}@media screen and (-ms-high-contrast:active){.root_9eeb3eac{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_9eeb3eac{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.container_9eeb3eac{position:relative}.main_9eeb3eac{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";overflow-x:hidden;overflow-y:auto;position:relative}.beak_9eeb3eac{position:absolute;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-shadow:inherit;border:inherit;box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.beakCurtain_9eeb3eac{position:absolute;top:0;right:0;bottom:0;left:0;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 68 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(69));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 69 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(70));
|
||
|
|
__export(__webpack_require__(116));
|
||
|
|
__export(__webpack_require__(120));
|
||
|
|
__export(__webpack_require__(118));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 70 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Glamor = __webpack_require__(71);
|
||
|
|
var rtl_css_js_1 = __webpack_require__(86);
|
||
|
|
var index_1 = __webpack_require__(87);
|
||
|
|
function _initializeGlamor() {
|
||
|
|
// force speedy.
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (!Glamor['styleSheet'] || !Glamor['styleSheet'].isSpeedy) {
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
Glamor['speedy'](true);
|
||
|
|
}
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
Glamor['plugins'].add(function (_a) {
|
||
|
|
var selector = _a.selector, style = _a.style;
|
||
|
|
return ({
|
||
|
|
selector: selector,
|
||
|
|
style: index_1.getRTL() ? rtl_css_js_1.default(style) : style
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_initializeGlamor();
|
||
|
|
/**
|
||
|
|
* Defines a :before pseudo-selector scoped style object for the given raw style.
|
||
|
|
*/
|
||
|
|
function before(style) {
|
||
|
|
return Glamor.before(style);
|
||
|
|
}
|
||
|
|
exports.before = before;
|
||
|
|
/**
|
||
|
|
* Defines a :after pseudo-selector scoped style object for the given raw style.
|
||
|
|
*/
|
||
|
|
function after(style) {
|
||
|
|
return Glamor.after(style);
|
||
|
|
}
|
||
|
|
exports.after = after;
|
||
|
|
/**
|
||
|
|
* Defines a style under a rule which is prefixed by the given selector.
|
||
|
|
*/
|
||
|
|
function parent(selector, style) {
|
||
|
|
return Glamor.parent(selector, style);
|
||
|
|
}
|
||
|
|
exports.parent = parent;
|
||
|
|
/**
|
||
|
|
* Registers a global rule. Be aware: registering global rules are not scoped;
|
||
|
|
* Two versions of a global rule will colide with each other.
|
||
|
|
*/
|
||
|
|
function insertGlobal(selector, style) {
|
||
|
|
Glamor.insertGlobal(selector, style);
|
||
|
|
}
|
||
|
|
exports.insertGlobal = insertGlobal;
|
||
|
|
/**
|
||
|
|
* Registers a font face.
|
||
|
|
*/
|
||
|
|
function fontFace(font) {
|
||
|
|
return Glamor.fontFace(font);
|
||
|
|
}
|
||
|
|
exports.fontFace = fontFace;
|
||
|
|
/**
|
||
|
|
* Register a keyframe definition and returns the unique name to be used for
|
||
|
|
* the animation name.
|
||
|
|
*/
|
||
|
|
function keyframes(timeline) {
|
||
|
|
return Glamor.keyframes(timeline);
|
||
|
|
}
|
||
|
|
exports.keyframes = keyframes;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 71 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.compose = exports.merge = exports.$ = exports.style = exports.presets = exports.keyframes = exports.fontFace = exports.insertGlobal = exports.insertRule = exports.plugins = exports.styleSheet = undefined;
|
||
|
|
exports.speedy = speedy;
|
||
|
|
exports.simulations = simulations;
|
||
|
|
exports.simulate = simulate;
|
||
|
|
exports.cssLabels = cssLabels;
|
||
|
|
exports.isLikeRule = isLikeRule;
|
||
|
|
exports.idFor = idFor;
|
||
|
|
exports.css = css;
|
||
|
|
exports.rehydrate = rehydrate;
|
||
|
|
exports.flush = flush;
|
||
|
|
exports.select = select;
|
||
|
|
exports.parent = parent;
|
||
|
|
exports.media = media;
|
||
|
|
exports.pseudo = pseudo;
|
||
|
|
exports.active = active;
|
||
|
|
exports.any = any;
|
||
|
|
exports.checked = checked;
|
||
|
|
exports.disabled = disabled;
|
||
|
|
exports.empty = empty;
|
||
|
|
exports.enabled = enabled;
|
||
|
|
exports._default = _default;
|
||
|
|
exports.first = first;
|
||
|
|
exports.firstChild = firstChild;
|
||
|
|
exports.firstOfType = firstOfType;
|
||
|
|
exports.fullscreen = fullscreen;
|
||
|
|
exports.focus = focus;
|
||
|
|
exports.hover = hover;
|
||
|
|
exports.indeterminate = indeterminate;
|
||
|
|
exports.inRange = inRange;
|
||
|
|
exports.invalid = invalid;
|
||
|
|
exports.lastChild = lastChild;
|
||
|
|
exports.lastOfType = lastOfType;
|
||
|
|
exports.left = left;
|
||
|
|
exports.link = link;
|
||
|
|
exports.onlyChild = onlyChild;
|
||
|
|
exports.onlyOfType = onlyOfType;
|
||
|
|
exports.optional = optional;
|
||
|
|
exports.outOfRange = outOfRange;
|
||
|
|
exports.readOnly = readOnly;
|
||
|
|
exports.readWrite = readWrite;
|
||
|
|
exports.required = required;
|
||
|
|
exports.right = right;
|
||
|
|
exports.root = root;
|
||
|
|
exports.scope = scope;
|
||
|
|
exports.target = target;
|
||
|
|
exports.valid = valid;
|
||
|
|
exports.visited = visited;
|
||
|
|
exports.dir = dir;
|
||
|
|
exports.lang = lang;
|
||
|
|
exports.not = not;
|
||
|
|
exports.nthChild = nthChild;
|
||
|
|
exports.nthLastChild = nthLastChild;
|
||
|
|
exports.nthLastOfType = nthLastOfType;
|
||
|
|
exports.nthOfType = nthOfType;
|
||
|
|
exports.after = after;
|
||
|
|
exports.before = before;
|
||
|
|
exports.firstLetter = firstLetter;
|
||
|
|
exports.firstLine = firstLine;
|
||
|
|
exports.selection = selection;
|
||
|
|
exports.backdrop = backdrop;
|
||
|
|
exports.placeholder = placeholder;
|
||
|
|
exports.cssFor = cssFor;
|
||
|
|
exports.attribsFor = attribsFor;
|
||
|
|
|
||
|
|
var _objectAssign = __webpack_require__(72);
|
||
|
|
|
||
|
|
var _objectAssign2 = _interopRequireDefault(_objectAssign);
|
||
|
|
|
||
|
|
var _sheet = __webpack_require__(73);
|
||
|
|
|
||
|
|
var _CSSPropertyOperations = __webpack_require__(74);
|
||
|
|
|
||
|
|
var _clean = __webpack_require__(82);
|
||
|
|
|
||
|
|
var _clean2 = _interopRequireDefault(_clean);
|
||
|
|
|
||
|
|
var _plugins = __webpack_require__(83);
|
||
|
|
|
||
|
|
var _hash = __webpack_require__(85);
|
||
|
|
|
||
|
|
var _hash2 = _interopRequireDefault(_hash);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||
|
|
|
||
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||
|
|
/* stylesheet */
|
||
|
|
|
||
|
|
|
||
|
|
var styleSheet = exports.styleSheet = new _sheet.StyleSheet();
|
||
|
|
// an isomorphic StyleSheet shim. hides all the nitty gritty.
|
||
|
|
|
||
|
|
// /**************** LIFTOFF IN 3... 2... 1... ****************/
|
||
|
|
styleSheet.inject(); //eslint-disable-line indent
|
||
|
|
// /**************** TO THE MOOOOOOON ****************/
|
||
|
|
|
||
|
|
// convenience function to toggle speedy
|
||
|
|
function speedy(bool) {
|
||
|
|
return styleSheet.speedy(bool);
|
||
|
|
}
|
||
|
|
|
||
|
|
// plugins
|
||
|
|
// we include these by default
|
||
|
|
var plugins = exports.plugins = styleSheet.plugins = new _plugins.PluginSet([_plugins.prefixes, _plugins.fallbacks]);
|
||
|
|
plugins.media = new _plugins.PluginSet(); // neat! media, font-face, keyframes
|
||
|
|
plugins.fontFace = new _plugins.PluginSet();
|
||
|
|
plugins.keyframes = new _plugins.PluginSet([_plugins.prefixes]);
|
||
|
|
|
||
|
|
// define some constants
|
||
|
|
|
||
|
|
var isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
|
||
|
|
var isTest = process.env.NODE_ENV === 'test';
|
||
|
|
|
||
|
|
/**** simulations ****/
|
||
|
|
|
||
|
|
// a flag to enable simulation meta tags on dom nodes
|
||
|
|
// defaults to true in dev mode. recommend *not* to
|
||
|
|
// toggle often.
|
||
|
|
var canSimulate = isDev;
|
||
|
|
|
||
|
|
// we use these flags for issuing warnings when simulate is called
|
||
|
|
// in prod / in incorrect order
|
||
|
|
var warned1 = false,
|
||
|
|
warned2 = false;
|
||
|
|
|
||
|
|
// toggles simulation activity. shouldn't be needed in most cases
|
||
|
|
function simulations() {
|
||
|
|
var bool = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||
|
|
|
||
|
|
canSimulate = !!bool;
|
||
|
|
}
|
||
|
|
|
||
|
|
// use this on dom nodes to 'simulate' pseudoclasses
|
||
|
|
// <div {...hover({ color: 'red' })} {...simulate('hover', 'visited')}>...</div>
|
||
|
|
// you can even send in some weird ones, as long as it's in simple format
|
||
|
|
// and matches an existing rule on the element
|
||
|
|
// eg simulate('nthChild2', ':hover:active') etc
|
||
|
|
function simulate() {
|
||
|
|
for (var _len = arguments.length, pseudos = Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
pseudos[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
pseudos = (0, _clean2.default)(pseudos);
|
||
|
|
if (!pseudos) return {};
|
||
|
|
if (!canSimulate) {
|
||
|
|
if (!warned1) {
|
||
|
|
console.warn('can\'t simulate without once calling simulations(true)'); //eslint-disable-line no-console
|
||
|
|
warned1 = true;
|
||
|
|
}
|
||
|
|
if (!isDev && !isTest && !warned2) {
|
||
|
|
console.warn('don\'t use simulation outside dev'); //eslint-disable-line no-console
|
||
|
|
warned2 = true;
|
||
|
|
}
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
return pseudos.reduce(function (o, p) {
|
||
|
|
return o['data-simulate-' + simple(p)] = '', o;
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**** labels ****/
|
||
|
|
// toggle for debug labels.
|
||
|
|
// *shouldn't* have to mess with this manually
|
||
|
|
var hasLabels = isDev;
|
||
|
|
|
||
|
|
function cssLabels(bool) {
|
||
|
|
hasLabels = !!bool;
|
||
|
|
}
|
||
|
|
|
||
|
|
// takes a string, converts to lowercase, strips out nonalphanumeric.
|
||
|
|
function simple(str) {
|
||
|
|
return str.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||
|
|
}
|
||
|
|
|
||
|
|
// hashes a string to something 'unique'
|
||
|
|
// we use this to generate ids for styles
|
||
|
|
|
||
|
|
|
||
|
|
function hashify() {
|
||
|
|
var str = '';
|
||
|
|
|
||
|
|
for (var _len2 = arguments.length, objs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
||
|
|
objs[_key2] = arguments[_key2];
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < objs.length; i++) {
|
||
|
|
str += JSON.stringify(objs[i]);
|
||
|
|
}
|
||
|
|
return (0, _hash2.default)(str).toString(36);
|
||
|
|
}
|
||
|
|
|
||
|
|
// of shape { 'data-css-<id>': '' }
|
||
|
|
function isLikeRule(rule) {
|
||
|
|
var keys = Object.keys(rule).filter(function (x) {
|
||
|
|
return x !== 'toString';
|
||
|
|
});
|
||
|
|
if (keys.length !== 1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return !!/data\-css\-([a-zA-Z0-9]+)/.exec(keys[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
// extracts id from a { 'data-css-<id>': ''} like object
|
||
|
|
function idFor(rule) {
|
||
|
|
var keys = Object.keys(rule).filter(function (x) {
|
||
|
|
return x !== 'toString';
|
||
|
|
});
|
||
|
|
if (keys.length !== 1) throw new Error('not a rule');
|
||
|
|
var regex = /data\-css\-([a-zA-Z0-9]+)/;
|
||
|
|
var match = regex.exec(keys[0]);
|
||
|
|
if (!match) throw new Error('not a rule');
|
||
|
|
return match[1];
|
||
|
|
}
|
||
|
|
|
||
|
|
function selector(id, path) {
|
||
|
|
|
||
|
|
if (!id) {
|
||
|
|
return path.replace(/\&/g, '');
|
||
|
|
}
|
||
|
|
if (!path) return '.css-' + id + ',[data-css-' + id + ']';
|
||
|
|
|
||
|
|
var x = path.split(',').map(function (x) {
|
||
|
|
return x.indexOf('&') >= 0 ? [x.replace(/\&/mg, '.css-' + id), x.replace(/\&/mg, '[data-css-' + id + ']')].join(',') // todo - make sure each sub selector has an &
|
||
|
|
: '.css-' + id + x + ',[data-css-' + id + ']' + x;
|
||
|
|
}).join(',');
|
||
|
|
|
||
|
|
if (canSimulate && /^\&\:/.exec(path) && !/\s/.exec(path)) {
|
||
|
|
x += ',.css-' + id + '[data-simulate-' + simple(path) + '],[data-css-' + id + '][data-simulate-' + simple(path) + ']';
|
||
|
|
}
|
||
|
|
return x;
|
||
|
|
}
|
||
|
|
|
||
|
|
function toCSS(_ref) {
|
||
|
|
var selector = _ref.selector,
|
||
|
|
style = _ref.style;
|
||
|
|
|
||
|
|
var result = plugins.transform({ selector: selector, style: style });
|
||
|
|
return result.selector + '{' + (0, _CSSPropertyOperations.createMarkupForStyles)(result.style) + '}';
|
||
|
|
}
|
||
|
|
|
||
|
|
function deconstruct(style) {
|
||
|
|
// we can be sure it's not infinitely nested here
|
||
|
|
var plain = void 0,
|
||
|
|
selects = void 0,
|
||
|
|
medias = void 0,
|
||
|
|
supports = void 0;
|
||
|
|
Object.keys(style).forEach(function (key) {
|
||
|
|
if (key.indexOf('&') >= 0) {
|
||
|
|
selects = selects || {};
|
||
|
|
selects[key] = style[key];
|
||
|
|
} else if (key.indexOf('@media') === 0) {
|
||
|
|
medias = medias || {};
|
||
|
|
medias[key] = deconstruct(style[key]);
|
||
|
|
} else if (key.indexOf('@supports') === 0) {
|
||
|
|
supports = supports || {};
|
||
|
|
supports[key] = deconstruct(style[key]);
|
||
|
|
} else if (key === 'label') {
|
||
|
|
if (style.label.length > 0) {
|
||
|
|
plain = plain || {};
|
||
|
|
plain.label = hasLabels ? style.label.join('.') : '';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
plain = plain || {};
|
||
|
|
plain[key] = style[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return { plain: plain, selects: selects, medias: medias, supports: supports };
|
||
|
|
}
|
||
|
|
|
||
|
|
function deconstructedStyleToCSS(id, style) {
|
||
|
|
var css = [];
|
||
|
|
|
||
|
|
// plugins here
|
||
|
|
var plain = style.plain,
|
||
|
|
selects = style.selects,
|
||
|
|
medias = style.medias,
|
||
|
|
supports = style.supports;
|
||
|
|
|
||
|
|
if (plain) {
|
||
|
|
css.push(toCSS({ style: plain, selector: selector(id) }));
|
||
|
|
}
|
||
|
|
if (selects) {
|
||
|
|
Object.keys(selects).forEach(function (key) {
|
||
|
|
return css.push(toCSS({ style: selects[key], selector: selector(id, key) }));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (medias) {
|
||
|
|
Object.keys(medias).forEach(function (key) {
|
||
|
|
return css.push(key + '{' + deconstructedStyleToCSS(id, medias[key]).join('') + '}');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (supports) {
|
||
|
|
Object.keys(supports).forEach(function (key) {
|
||
|
|
return css.push(key + '{' + deconstructedStyleToCSS(id, supports[key]).join('') + '}');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return css;
|
||
|
|
}
|
||
|
|
|
||
|
|
// this cache to track which rules have
|
||
|
|
// been inserted into the stylesheet
|
||
|
|
var inserted = styleSheet.inserted = {};
|
||
|
|
|
||
|
|
// and helpers to insert rules into said styleSheet
|
||
|
|
function insert(spec) {
|
||
|
|
if (!inserted[spec.id]) {
|
||
|
|
inserted[spec.id] = true;
|
||
|
|
var deconstructed = deconstruct(spec.style);
|
||
|
|
deconstructedStyleToCSS(spec.id, deconstructed).map(function (cssRule) {
|
||
|
|
return styleSheet.insert(cssRule);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// a simple cache to store generated rules
|
||
|
|
var registered = styleSheet.registered = {};
|
||
|
|
function register(spec) {
|
||
|
|
if (!registered[spec.id]) {
|
||
|
|
registered[spec.id] = spec;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function _getRegistered(rule) {
|
||
|
|
if (isLikeRule(rule)) {
|
||
|
|
var ret = registered[idFor(rule)];
|
||
|
|
if (ret == null) {
|
||
|
|
throw new Error('[glamor] an unexpected rule cache miss occurred. This is probably a sign of multiple glamor instances in your app. See https://github.com/threepointone/glamor/issues/79');
|
||
|
|
}
|
||
|
|
return ret;
|
||
|
|
}
|
||
|
|
return rule;
|
||
|
|
}
|
||
|
|
|
||
|
|
// todo - perf
|
||
|
|
var ruleCache = {};
|
||
|
|
function toRule(spec) {
|
||
|
|
register(spec);
|
||
|
|
insert(spec);
|
||
|
|
|
||
|
|
if (ruleCache[spec.id]) {
|
||
|
|
return ruleCache[spec.id];
|
||
|
|
}
|
||
|
|
|
||
|
|
var ret = _defineProperty({}, 'data-css-' + spec.id, hasLabels ? spec.label || '' : '');
|
||
|
|
Object.defineProperty(ret, 'toString', {
|
||
|
|
enumerable: false, value: function value() {
|
||
|
|
return 'css-' + spec.id;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
ruleCache[spec.id] = ret;
|
||
|
|
return ret;
|
||
|
|
}
|
||
|
|
|
||
|
|
function log() {
|
||
|
|
//eslint-disable-line no-unused-vars
|
||
|
|
console.log(this); //eslint-disable-line no-console
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
function isSelector(key) {
|
||
|
|
var possibles = [':', '.', '[', '>', ' '],
|
||
|
|
found = false,
|
||
|
|
ch = key.charAt(0);
|
||
|
|
for (var i = 0; i < possibles.length; i++) {
|
||
|
|
if (ch === possibles[i]) {
|
||
|
|
found = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return found || key.indexOf('&') >= 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function joinSelectors(a, b) {
|
||
|
|
var as = a.split(',').map(function (a) {
|
||
|
|
return !(a.indexOf('&') >= 0) ? '&' + a : a;
|
||
|
|
});
|
||
|
|
var bs = b.split(',').map(function (b) {
|
||
|
|
return !(b.indexOf('&') >= 0) ? '&' + b : b;
|
||
|
|
});
|
||
|
|
|
||
|
|
return bs.reduce(function (arr, b) {
|
||
|
|
return arr.concat(as.map(function (a) {
|
||
|
|
return b.replace(/\&/g, a);
|
||
|
|
}));
|
||
|
|
}, []).join(',');
|
||
|
|
}
|
||
|
|
|
||
|
|
function joinMediaQueries(a, b) {
|
||
|
|
return a ? '@media ' + a.substring(6) + ' and ' + b.substring(6) : b;
|
||
|
|
}
|
||
|
|
|
||
|
|
function isMediaQuery(key) {
|
||
|
|
return key.indexOf('@media') === 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function isSupports(key) {
|
||
|
|
return key.indexOf('@supports') === 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function joinSupports(a, b) {
|
||
|
|
return a ? '@supports ' + a.substring(9) + ' and ' + b.substring(9) : b;
|
||
|
|
}
|
||
|
|
|
||
|
|
// flatten a nested array
|
||
|
|
function flatten(inArr) {
|
||
|
|
var arr = [];
|
||
|
|
for (var i = 0; i < inArr.length; i++) {
|
||
|
|
if (Array.isArray(inArr[i])) arr = arr.concat(flatten(inArr[i]));else arr = arr.concat(inArr[i]);
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
|
||
|
|
// mutable! modifies dest.
|
||
|
|
function build(dest, _ref2) {
|
||
|
|
var _ref2$selector = _ref2.selector,
|
||
|
|
selector = _ref2$selector === undefined ? '' : _ref2$selector,
|
||
|
|
_ref2$mq = _ref2.mq,
|
||
|
|
mq = _ref2$mq === undefined ? '' : _ref2$mq,
|
||
|
|
_ref2$supp = _ref2.supp,
|
||
|
|
supp = _ref2$supp === undefined ? '' : _ref2$supp,
|
||
|
|
_ref2$src = _ref2.src,
|
||
|
|
src = _ref2$src === undefined ? {} : _ref2$src;
|
||
|
|
|
||
|
|
|
||
|
|
if (!Array.isArray(src)) {
|
||
|
|
src = [src];
|
||
|
|
}
|
||
|
|
src = flatten(src);
|
||
|
|
|
||
|
|
src.forEach(function (_src) {
|
||
|
|
if (isLikeRule(_src)) {
|
||
|
|
var reg = _getRegistered(_src);
|
||
|
|
if (reg.type !== 'css') {
|
||
|
|
throw new Error('cannot merge this rule');
|
||
|
|
}
|
||
|
|
_src = reg.style;
|
||
|
|
}
|
||
|
|
_src = (0, _clean2.default)(_src);
|
||
|
|
if (_src && _src.composes) {
|
||
|
|
build(dest, { selector: selector, mq: mq, supp: supp, src: _src.composes });
|
||
|
|
}
|
||
|
|
Object.keys(_src || {}).forEach(function (key) {
|
||
|
|
if (isSelector(key)) {
|
||
|
|
|
||
|
|
if (key === '::placeholder') {
|
||
|
|
build(dest, { selector: joinSelectors(selector, '::-webkit-input-placeholder'), mq: mq, supp: supp, src: _src[key] });
|
||
|
|
build(dest, { selector: joinSelectors(selector, '::-moz-placeholder'), mq: mq, supp: supp, src: _src[key] });
|
||
|
|
build(dest, { selector: joinSelectors(selector, '::-ms-input-placeholder'), mq: mq, supp: supp, src: _src[key] });
|
||
|
|
}
|
||
|
|
|
||
|
|
build(dest, { selector: joinSelectors(selector, key), mq: mq, supp: supp, src: _src[key] });
|
||
|
|
} else if (isMediaQuery(key)) {
|
||
|
|
build(dest, { selector: selector, mq: joinMediaQueries(mq, key), supp: supp, src: _src[key] });
|
||
|
|
} else if (isSupports(key)) {
|
||
|
|
build(dest, { selector: selector, mq: mq, supp: joinSupports(supp, key), src: _src[key] });
|
||
|
|
} else if (key === 'composes') {
|
||
|
|
// ignore, we already dealth with it
|
||
|
|
} else {
|
||
|
|
var _dest = dest;
|
||
|
|
if (supp) {
|
||
|
|
_dest[supp] = _dest[supp] || {};
|
||
|
|
_dest = _dest[supp];
|
||
|
|
}
|
||
|
|
if (mq) {
|
||
|
|
_dest[mq] = _dest[mq] || {};
|
||
|
|
_dest = _dest[mq];
|
||
|
|
}
|
||
|
|
if (selector) {
|
||
|
|
_dest[selector] = _dest[selector] || {};
|
||
|
|
_dest = _dest[selector];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key === 'label') {
|
||
|
|
if (hasLabels) {
|
||
|
|
dest.label = dest.label.concat(_src.label);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
_dest[key] = _src[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function _css(rules) {
|
||
|
|
var style = { label: [] };
|
||
|
|
build(style, { src: rules }); // mutative! but worth it.
|
||
|
|
|
||
|
|
var spec = {
|
||
|
|
id: hashify(style),
|
||
|
|
style: style, label: hasLabels ? style.label.join('.') : '',
|
||
|
|
type: 'css'
|
||
|
|
};
|
||
|
|
return toRule(spec);
|
||
|
|
}
|
||
|
|
|
||
|
|
var nullrule = {
|
||
|
|
// 'data-css-nil': ''
|
||
|
|
};
|
||
|
|
Object.defineProperty(nullrule, 'toString', {
|
||
|
|
enumerable: false, value: function value() {
|
||
|
|
return 'css-nil';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var inputCaches = typeof WeakMap !== 'undefined' ? [nullrule, new WeakMap(), new WeakMap(), new WeakMap()] : [nullrule];
|
||
|
|
|
||
|
|
var warnedWeakMapError = false;
|
||
|
|
function multiIndexCache(fn) {
|
||
|
|
return function (args) {
|
||
|
|
if (inputCaches[args.length]) {
|
||
|
|
var coi = inputCaches[args.length];
|
||
|
|
var ctr = 0;
|
||
|
|
while (ctr < args.length - 1) {
|
||
|
|
if (!coi.has(args[ctr])) {
|
||
|
|
coi.set(args[ctr], new WeakMap());
|
||
|
|
}
|
||
|
|
coi = coi.get(args[ctr]);
|
||
|
|
ctr++;
|
||
|
|
}
|
||
|
|
if (coi.has(args[args.length - 1])) {
|
||
|
|
var ret = coi.get(args[ctr]);
|
||
|
|
|
||
|
|
if (registered[ret.toString().substring(4)]) {
|
||
|
|
// make sure it hasn't been flushed
|
||
|
|
return ret;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var value = fn(args);
|
||
|
|
if (inputCaches[args.length]) {
|
||
|
|
var _ctr = 0,
|
||
|
|
_coi = inputCaches[args.length];
|
||
|
|
while (_ctr < args.length - 1) {
|
||
|
|
_coi = _coi.get(args[_ctr]);
|
||
|
|
_ctr++;
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
_coi.set(args[_ctr], value);
|
||
|
|
} catch (err) {
|
||
|
|
if (isDev && !warnedWeakMapError) {
|
||
|
|
var _console;
|
||
|
|
|
||
|
|
warnedWeakMapError = true;
|
||
|
|
(_console = console).warn.apply(_console, ['failed setting the WeakMap cache for args:'].concat(_toConsumableArray(args))); // eslint-disable-line no-console
|
||
|
|
console.warn('this should NOT happen, please file a bug on the github repo.'); // eslint-disable-line no-console
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var cachedCss = typeof WeakMap !== 'undefined' ? multiIndexCache(_css) : _css;
|
||
|
|
|
||
|
|
function css() {
|
||
|
|
for (var _len3 = arguments.length, rules = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
||
|
|
rules[_key3] = arguments[_key3];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (rules[0] && rules[0].length && rules[0].raw) {
|
||
|
|
throw new Error('you forgot to include glamor/babel in your babel plugins.');
|
||
|
|
}
|
||
|
|
|
||
|
|
rules = (0, _clean2.default)(rules);
|
||
|
|
if (!rules) {
|
||
|
|
return nullrule;
|
||
|
|
}
|
||
|
|
|
||
|
|
return cachedCss(rules);
|
||
|
|
}
|
||
|
|
|
||
|
|
css.insert = function (css) {
|
||
|
|
var spec = {
|
||
|
|
id: hashify(css),
|
||
|
|
css: css,
|
||
|
|
type: 'raw'
|
||
|
|
};
|
||
|
|
register(spec);
|
||
|
|
if (!inserted[spec.id]) {
|
||
|
|
styleSheet.insert(spec.css);
|
||
|
|
inserted[spec.id] = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var insertRule = exports.insertRule = css.insert;
|
||
|
|
|
||
|
|
css.global = function (selector, style) {
|
||
|
|
return css.insert(toCSS({ selector: selector, style: style }));
|
||
|
|
};
|
||
|
|
|
||
|
|
var insertGlobal = exports.insertGlobal = css.global;
|
||
|
|
|
||
|
|
function insertKeyframe(spec) {
|
||
|
|
if (!inserted[spec.id]) {
|
||
|
|
(function () {
|
||
|
|
var inner = Object.keys(spec.keyframes).map(function (kf) {
|
||
|
|
var result = plugins.keyframes.transform({ id: spec.id, name: kf, style: spec.keyframes[kf] });
|
||
|
|
return result.name + '{' + (0, _CSSPropertyOperations.createMarkupForStyles)(result.style) + '}';
|
||
|
|
}).join('');
|
||
|
|
|
||
|
|
['-webkit-', '-moz-', '-o-', ''].forEach(function (prefix) {
|
||
|
|
return styleSheet.insert('@' + prefix + 'keyframes ' + (spec.name + '_' + spec.id) + '{' + inner + '}');
|
||
|
|
});
|
||
|
|
|
||
|
|
inserted[spec.id] = true;
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
css.keyframes = function (name, kfs) {
|
||
|
|
if (!kfs) {
|
||
|
|
kfs = name, name = 'animation';
|
||
|
|
}
|
||
|
|
|
||
|
|
// do not ignore empty keyframe definitions for now.
|
||
|
|
kfs = (0, _clean2.default)(kfs) || {};
|
||
|
|
var spec = {
|
||
|
|
id: hashify(name, kfs),
|
||
|
|
type: 'keyframes',
|
||
|
|
name: name,
|
||
|
|
keyframes: kfs
|
||
|
|
};
|
||
|
|
register(spec);
|
||
|
|
insertKeyframe(spec);
|
||
|
|
return name + '_' + spec.id;
|
||
|
|
};
|
||
|
|
|
||
|
|
// we don't go all out for fonts as much, giving a simple font loading strategy
|
||
|
|
// use a fancier lib if you need moar power
|
||
|
|
css.fontFace = function (font) {
|
||
|
|
font = (0, _clean2.default)(font);
|
||
|
|
var spec = {
|
||
|
|
id: hashify(font),
|
||
|
|
type: 'font-face',
|
||
|
|
font: font
|
||
|
|
};
|
||
|
|
register(spec);
|
||
|
|
insertFontFace(spec);
|
||
|
|
|
||
|
|
return font.fontFamily;
|
||
|
|
};
|
||
|
|
|
||
|
|
var fontFace = exports.fontFace = css.fontFace;
|
||
|
|
var keyframes = exports.keyframes = css.keyframes;
|
||
|
|
|
||
|
|
function insertFontFace(spec) {
|
||
|
|
if (!inserted[spec.id]) {
|
||
|
|
styleSheet.insert('@font-face{' + (0, _CSSPropertyOperations.createMarkupForStyles)(spec.font) + '}');
|
||
|
|
inserted[spec.id] = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// rehydrate the insertion cache with ids sent from
|
||
|
|
// renderStatic / renderStaticOptimized
|
||
|
|
function rehydrate(ids) {
|
||
|
|
// load up ids
|
||
|
|
(0, _objectAssign2.default)(inserted, ids.reduce(function (o, i) {
|
||
|
|
return o[i] = true, o;
|
||
|
|
}, {}));
|
||
|
|
// assume css loaded separately
|
||
|
|
}
|
||
|
|
|
||
|
|
// clears out the cache and empties the stylesheet
|
||
|
|
// best for tests, though there might be some value for SSR.
|
||
|
|
|
||
|
|
function flush() {
|
||
|
|
inserted = styleSheet.inserted = {};
|
||
|
|
registered = styleSheet.registered = {};
|
||
|
|
ruleCache = {};
|
||
|
|
styleSheet.flush();
|
||
|
|
styleSheet.inject();
|
||
|
|
}
|
||
|
|
|
||
|
|
function warnAboutPresetsDeprecation() {
|
||
|
|
if (isDev) {
|
||
|
|
console.warn('[Deprecation] In glamor v3 the `presets` object will be removed. See https://github.com/threepointone/glamor/issues/213 for more information.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var presets = exports.presets = {
|
||
|
|
get mobile() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '(min-width: 400px)';
|
||
|
|
},
|
||
|
|
get Mobile() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '@media (min-width: 400px)';
|
||
|
|
},
|
||
|
|
get phablet() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '(min-width: 550px)';
|
||
|
|
},
|
||
|
|
get Phablet() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '@media (min-width: 550px)';
|
||
|
|
},
|
||
|
|
get tablet() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '(min-width: 750px)';
|
||
|
|
},
|
||
|
|
get Tablet() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '@media (min-width: 750px)';
|
||
|
|
},
|
||
|
|
get desktop() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '(min-width: 1000px)';
|
||
|
|
},
|
||
|
|
get Desktop() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '@media (min-width: 1000px)';
|
||
|
|
},
|
||
|
|
get hd() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '(min-width: 1200px)';
|
||
|
|
},
|
||
|
|
get Hd() {
|
||
|
|
warnAboutPresetsDeprecation();
|
||
|
|
return '@media (min-width: 1200px)';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var style = exports.style = css;
|
||
|
|
|
||
|
|
function select(selector) {
|
||
|
|
for (var _len4 = arguments.length, styles = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
|
||
|
|
styles[_key4 - 1] = arguments[_key4];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!selector) {
|
||
|
|
return style(styles);
|
||
|
|
}
|
||
|
|
return css(_defineProperty({}, selector, styles));
|
||
|
|
}
|
||
|
|
var $ = exports.$ = select;
|
||
|
|
|
||
|
|
function parent(selector) {
|
||
|
|
for (var _len5 = arguments.length, styles = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
|
||
|
|
styles[_key5 - 1] = arguments[_key5];
|
||
|
|
}
|
||
|
|
|
||
|
|
return css(_defineProperty({}, selector + ' &', styles));
|
||
|
|
}
|
||
|
|
|
||
|
|
var merge = exports.merge = css;
|
||
|
|
var compose = exports.compose = css;
|
||
|
|
|
||
|
|
function media(query) {
|
||
|
|
for (var _len6 = arguments.length, rules = Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
|
||
|
|
rules[_key6 - 1] = arguments[_key6];
|
||
|
|
}
|
||
|
|
|
||
|
|
return css(_defineProperty({}, '@media ' + query, rules));
|
||
|
|
}
|
||
|
|
|
||
|
|
function pseudo(selector) {
|
||
|
|
for (var _len7 = arguments.length, styles = Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
|
||
|
|
styles[_key7 - 1] = arguments[_key7];
|
||
|
|
}
|
||
|
|
|
||
|
|
return css(_defineProperty({}, selector, styles));
|
||
|
|
}
|
||
|
|
|
||
|
|
// allllll the pseudoclasses
|
||
|
|
|
||
|
|
function active(x) {
|
||
|
|
return pseudo(':active', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function any(x) {
|
||
|
|
return pseudo(':any', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function checked(x) {
|
||
|
|
return pseudo(':checked', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function disabled(x) {
|
||
|
|
return pseudo(':disabled', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function empty(x) {
|
||
|
|
return pseudo(':empty', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function enabled(x) {
|
||
|
|
return pseudo(':enabled', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _default(x) {
|
||
|
|
return pseudo(':default', x); // note '_default' name
|
||
|
|
}
|
||
|
|
|
||
|
|
function first(x) {
|
||
|
|
return pseudo(':first', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function firstChild(x) {
|
||
|
|
return pseudo(':first-child', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function firstOfType(x) {
|
||
|
|
return pseudo(':first-of-type', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function fullscreen(x) {
|
||
|
|
return pseudo(':fullscreen', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function focus(x) {
|
||
|
|
return pseudo(':focus', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function hover(x) {
|
||
|
|
return pseudo(':hover', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function indeterminate(x) {
|
||
|
|
return pseudo(':indeterminate', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function inRange(x) {
|
||
|
|
return pseudo(':in-range', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function invalid(x) {
|
||
|
|
return pseudo(':invalid', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function lastChild(x) {
|
||
|
|
return pseudo(':last-child', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function lastOfType(x) {
|
||
|
|
return pseudo(':last-of-type', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function left(x) {
|
||
|
|
return pseudo(':left', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function link(x) {
|
||
|
|
return pseudo(':link', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onlyChild(x) {
|
||
|
|
return pseudo(':only-child', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onlyOfType(x) {
|
||
|
|
return pseudo(':only-of-type', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function optional(x) {
|
||
|
|
return pseudo(':optional', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function outOfRange(x) {
|
||
|
|
return pseudo(':out-of-range', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function readOnly(x) {
|
||
|
|
return pseudo(':read-only', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function readWrite(x) {
|
||
|
|
return pseudo(':read-write', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function required(x) {
|
||
|
|
return pseudo(':required', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function right(x) {
|
||
|
|
return pseudo(':right', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function root(x) {
|
||
|
|
return pseudo(':root', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function scope(x) {
|
||
|
|
return pseudo(':scope', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function target(x) {
|
||
|
|
return pseudo(':target', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function valid(x) {
|
||
|
|
return pseudo(':valid', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
function visited(x) {
|
||
|
|
return pseudo(':visited', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
// parameterized pseudoclasses
|
||
|
|
function dir(p, x) {
|
||
|
|
return pseudo(':dir(' + p + ')', x);
|
||
|
|
}
|
||
|
|
function lang(p, x) {
|
||
|
|
return pseudo(':lang(' + p + ')', x);
|
||
|
|
}
|
||
|
|
function not(p, x) {
|
||
|
|
// should this be a plugin?
|
||
|
|
var selector = p.split(',').map(function (x) {
|
||
|
|
return x.trim();
|
||
|
|
}).map(function (x) {
|
||
|
|
return ':not(' + x + ')';
|
||
|
|
});
|
||
|
|
if (selector.length === 1) {
|
||
|
|
return pseudo(':not(' + p + ')', x);
|
||
|
|
}
|
||
|
|
return select(selector.join(''), x);
|
||
|
|
}
|
||
|
|
function nthChild(p, x) {
|
||
|
|
return pseudo(':nth-child(' + p + ')', x);
|
||
|
|
}
|
||
|
|
function nthLastChild(p, x) {
|
||
|
|
return pseudo(':nth-last-child(' + p + ')', x);
|
||
|
|
}
|
||
|
|
function nthLastOfType(p, x) {
|
||
|
|
return pseudo(':nth-last-of-type(' + p + ')', x);
|
||
|
|
}
|
||
|
|
function nthOfType(p, x) {
|
||
|
|
return pseudo(':nth-of-type(' + p + ')', x);
|
||
|
|
}
|
||
|
|
|
||
|
|
// pseudoelements
|
||
|
|
function after(x) {
|
||
|
|
return pseudo('::after', x);
|
||
|
|
}
|
||
|
|
function before(x) {
|
||
|
|
return pseudo('::before', x);
|
||
|
|
}
|
||
|
|
function firstLetter(x) {
|
||
|
|
return pseudo('::first-letter', x);
|
||
|
|
}
|
||
|
|
function firstLine(x) {
|
||
|
|
return pseudo('::first-line', x);
|
||
|
|
}
|
||
|
|
function selection(x) {
|
||
|
|
return pseudo('::selection', x);
|
||
|
|
}
|
||
|
|
function backdrop(x) {
|
||
|
|
return pseudo('::backdrop', x);
|
||
|
|
}
|
||
|
|
function placeholder(x) {
|
||
|
|
// https://github.com/threepointone/glamor/issues/14
|
||
|
|
return css({ '::placeholder': x });
|
||
|
|
}
|
||
|
|
|
||
|
|
/*** helpers for web components ***/
|
||
|
|
// https://github.com/threepointone/glamor/issues/16
|
||
|
|
|
||
|
|
function cssFor() {
|
||
|
|
for (var _len8 = arguments.length, rules = Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
|
||
|
|
rules[_key8] = arguments[_key8];
|
||
|
|
}
|
||
|
|
|
||
|
|
rules = (0, _clean2.default)(rules);
|
||
|
|
return rules ? rules.map(function (r) {
|
||
|
|
var style = { label: [] };
|
||
|
|
build(style, { src: r }); // mutative! but worth it.
|
||
|
|
return deconstructedStyleToCSS(hashify(style), deconstruct(style)).join('');
|
||
|
|
}).join('') : '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function attribsFor() {
|
||
|
|
for (var _len9 = arguments.length, rules = Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
|
||
|
|
rules[_key9] = arguments[_key9];
|
||
|
|
}
|
||
|
|
|
||
|
|
rules = (0, _clean2.default)(rules);
|
||
|
|
var htmlAttributes = rules ? rules.map(function (rule) {
|
||
|
|
idFor(rule); // throwaway check for rule
|
||
|
|
var key = Object.keys(rule)[0],
|
||
|
|
value = rule[key];
|
||
|
|
return key + '="' + (value || '') + '"';
|
||
|
|
}).join(' ') : '';
|
||
|
|
|
||
|
|
return htmlAttributes;
|
||
|
|
}
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 72 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/*
|
||
|
|
object-assign
|
||
|
|
(c) Sindre Sorhus
|
||
|
|
@license MIT
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
/* eslint-disable no-unused-vars */
|
||
|
|
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
|
||
|
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
||
|
|
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
|
||
|
|
|
||
|
|
function toObject(val) {
|
||
|
|
if (val === null || val === undefined) {
|
||
|
|
throw new TypeError('Object.assign cannot be called with null or undefined');
|
||
|
|
}
|
||
|
|
|
||
|
|
return Object(val);
|
||
|
|
}
|
||
|
|
|
||
|
|
function shouldUseNative() {
|
||
|
|
try {
|
||
|
|
if (!Object.assign) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Detect buggy property enumeration order in older V8 versions.
|
||
|
|
|
||
|
|
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
|
||
|
|
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
|
||
|
|
test1[5] = 'de';
|
||
|
|
if (Object.getOwnPropertyNames(test1)[0] === '5') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
|
||
|
|
var test2 = {};
|
||
|
|
for (var i = 0; i < 10; i++) {
|
||
|
|
test2['_' + String.fromCharCode(i)] = i;
|
||
|
|
}
|
||
|
|
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
|
||
|
|
return test2[n];
|
||
|
|
});
|
||
|
|
if (order2.join('') !== '0123456789') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
|
||
|
|
var test3 = {};
|
||
|
|
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
|
||
|
|
test3[letter] = letter;
|
||
|
|
});
|
||
|
|
if (Object.keys(Object.assign({}, test3)).join('') !==
|
||
|
|
'abcdefghijklmnopqrst') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
} catch (err) {
|
||
|
|
// We don't expect any of the above to throw, but better to be safe.
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = shouldUseNative() ? Object.assign : function (target, source) {
|
||
|
|
var from;
|
||
|
|
var to = toObject(target);
|
||
|
|
var symbols;
|
||
|
|
|
||
|
|
for (var s = 1; s < arguments.length; s++) {
|
||
|
|
from = Object(arguments[s]);
|
||
|
|
|
||
|
|
for (var key in from) {
|
||
|
|
if (hasOwnProperty.call(from, key)) {
|
||
|
|
to[key] = from[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (getOwnPropertySymbols) {
|
||
|
|
symbols = getOwnPropertySymbols(from);
|
||
|
|
for (var i = 0; i < symbols.length; i++) {
|
||
|
|
if (propIsEnumerable.call(from, symbols[i])) {
|
||
|
|
to[symbols[i]] = from[symbols[i]];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return to;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 73 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.StyleSheet = StyleSheet;
|
||
|
|
|
||
|
|
var _objectAssign = __webpack_require__(72);
|
||
|
|
|
||
|
|
var _objectAssign2 = _interopRequireDefault(_objectAssign);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
high performance StyleSheet for css-in-js systems
|
||
|
|
|
||
|
|
- uses multiple style tags behind the scenes for millions of rules
|
||
|
|
- uses `insertRule` for appending in production for *much* faster performance
|
||
|
|
- 'polyfills' on server side
|
||
|
|
|
||
|
|
|
||
|
|
// usage
|
||
|
|
|
||
|
|
import StyleSheet from 'glamor/lib/sheet'
|
||
|
|
let styleSheet = new StyleSheet()
|
||
|
|
|
||
|
|
styleSheet.inject()
|
||
|
|
- 'injects' the stylesheet into the page (or into memory if on server)
|
||
|
|
|
||
|
|
styleSheet.insert('#box { border: 1px solid red; }')
|
||
|
|
- appends a css rule into the stylesheet
|
||
|
|
|
||
|
|
styleSheet.flush()
|
||
|
|
- empties the stylesheet of all its contents
|
||
|
|
|
||
|
|
|
||
|
|
*/
|
||
|
|
|
||
|
|
function last(arr) {
|
||
|
|
return arr[arr.length - 1];
|
||
|
|
}
|
||
|
|
|
||
|
|
function sheetForTag(tag) {
|
||
|
|
if (tag.sheet) {
|
||
|
|
return tag.sheet;
|
||
|
|
}
|
||
|
|
|
||
|
|
// this weirdness brought to you by firefox
|
||
|
|
for (var i = 0; i < document.styleSheets.length; i++) {
|
||
|
|
if (document.styleSheets[i].ownerNode === tag) {
|
||
|
|
return document.styleSheets[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var isBrowser = typeof window !== 'undefined';
|
||
|
|
var isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV; //(x => (x === 'development') || !x)(process.env.NODE_ENV)
|
||
|
|
var isTest = process.env.NODE_ENV === 'test';
|
||
|
|
|
||
|
|
var oldIE = function () {
|
||
|
|
if (isBrowser) {
|
||
|
|
var div = document.createElement('div');
|
||
|
|
div.innerHTML = '<!--[if lt IE 10]><i></i><![endif]-->';
|
||
|
|
return div.getElementsByTagName('i').length === 1;
|
||
|
|
}
|
||
|
|
}();
|
||
|
|
|
||
|
|
function makeStyleTag() {
|
||
|
|
var tag = document.createElement('style');
|
||
|
|
tag.type = 'text/css';
|
||
|
|
tag.setAttribute('data-glamor', '');
|
||
|
|
tag.appendChild(document.createTextNode(''));
|
||
|
|
(document.head || document.getElementsByTagName('head')[0]).appendChild(tag);
|
||
|
|
return tag;
|
||
|
|
}
|
||
|
|
|
||
|
|
function StyleSheet() {
|
||
|
|
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
||
|
|
_ref$speedy = _ref.speedy,
|
||
|
|
speedy = _ref$speedy === undefined ? !isDev && !isTest : _ref$speedy,
|
||
|
|
_ref$maxLength = _ref.maxLength,
|
||
|
|
maxLength = _ref$maxLength === undefined ? isBrowser && oldIE ? 4000 : 65000 : _ref$maxLength;
|
||
|
|
|
||
|
|
this.isSpeedy = speedy; // the big drawback here is that the css won't be editable in devtools
|
||
|
|
this.sheet = undefined;
|
||
|
|
this.tags = [];
|
||
|
|
this.maxLength = maxLength;
|
||
|
|
this.ctr = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
(0, _objectAssign2.default)(StyleSheet.prototype, {
|
||
|
|
getSheet: function getSheet() {
|
||
|
|
return sheetForTag(last(this.tags));
|
||
|
|
},
|
||
|
|
inject: function inject() {
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
if (this.injected) {
|
||
|
|
throw new Error('already injected stylesheet!');
|
||
|
|
}
|
||
|
|
if (isBrowser) {
|
||
|
|
this.tags[0] = makeStyleTag();
|
||
|
|
} else {
|
||
|
|
// server side 'polyfill'. just enough behavior to be useful.
|
||
|
|
this.sheet = {
|
||
|
|
cssRules: [],
|
||
|
|
insertRule: function insertRule(rule) {
|
||
|
|
// enough 'spec compliance' to be able to extract the rules later
|
||
|
|
// in other words, just the cssText field
|
||
|
|
_this.sheet.cssRules.push({ cssText: rule });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
this.injected = true;
|
||
|
|
},
|
||
|
|
speedy: function speedy(bool) {
|
||
|
|
if (this.ctr !== 0) {
|
||
|
|
throw new Error('cannot change speedy mode after inserting any rule to sheet. Either call speedy(' + bool + ') earlier in your app, or call flush() before speedy(' + bool + ')');
|
||
|
|
}
|
||
|
|
this.isSpeedy = !!bool;
|
||
|
|
},
|
||
|
|
_insert: function _insert(rule) {
|
||
|
|
// this weirdness for perf, and chrome's weird bug
|
||
|
|
// https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
|
||
|
|
try {
|
||
|
|
var sheet = this.getSheet();
|
||
|
|
sheet.insertRule(rule, rule.indexOf('@import') !== -1 ? 0 : sheet.cssRules.length);
|
||
|
|
} catch (e) {
|
||
|
|
if (isDev) {
|
||
|
|
// might need beter dx for this
|
||
|
|
console.warn('whoops, illegal rule inserted', rule); //eslint-disable-line no-console
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
insert: function insert(rule) {
|
||
|
|
|
||
|
|
if (isBrowser) {
|
||
|
|
// this is the ultrafast version, works across browsers
|
||
|
|
if (this.isSpeedy && this.getSheet().insertRule) {
|
||
|
|
this._insert(rule);
|
||
|
|
}
|
||
|
|
// more browser weirdness. I don't even know
|
||
|
|
// else if(this.tags.length > 0 && this.tags::last().styleSheet) {
|
||
|
|
// this.tags::last().styleSheet.cssText+= rule
|
||
|
|
// }
|
||
|
|
else {
|
||
|
|
if (rule.indexOf('@import') !== -1) {
|
||
|
|
var tag = last(this.tags);
|
||
|
|
tag.insertBefore(document.createTextNode(rule), tag.firstChild);
|
||
|
|
} else {
|
||
|
|
last(this.tags).appendChild(document.createTextNode(rule));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// server side is pretty simple
|
||
|
|
this.sheet.insertRule(rule, rule.indexOf('@import') !== -1 ? 0 : this.sheet.cssRules.length);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.ctr++;
|
||
|
|
if (isBrowser && this.ctr % this.maxLength === 0) {
|
||
|
|
this.tags.push(makeStyleTag());
|
||
|
|
}
|
||
|
|
return this.ctr - 1;
|
||
|
|
},
|
||
|
|
|
||
|
|
// commenting this out till we decide on v3's decision
|
||
|
|
// _replace(index, rule) {
|
||
|
|
// // this weirdness for perf, and chrome's weird bug
|
||
|
|
// // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
|
||
|
|
// try {
|
||
|
|
// let sheet = this.getSheet()
|
||
|
|
// sheet.deleteRule(index) // todo - correct index here
|
||
|
|
// sheet.insertRule(rule, index)
|
||
|
|
// }
|
||
|
|
// catch(e) {
|
||
|
|
// if(isDev) {
|
||
|
|
// // might need beter dx for this
|
||
|
|
// console.warn('whoops, problem replacing rule', rule) //eslint-disable-line no-console
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// }
|
||
|
|
// replace(index, rule) {
|
||
|
|
// if(isBrowser) {
|
||
|
|
// if(this.isSpeedy && this.getSheet().insertRule) {
|
||
|
|
// this._replace(index, rule)
|
||
|
|
// }
|
||
|
|
// else {
|
||
|
|
// let _slot = Math.floor((index + this.maxLength) / this.maxLength) - 1
|
||
|
|
// let _index = (index % this.maxLength) + 1
|
||
|
|
// let tag = this.tags[_slot]
|
||
|
|
// tag.replaceChild(document.createTextNode(rule), tag.childNodes[_index])
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// else {
|
||
|
|
// let rules = this.sheet.cssRules
|
||
|
|
// this.sheet.cssRules = [ ...rules.slice(0, index), { cssText: rule }, ...rules.slice(index + 1) ]
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
delete: function _delete(index) {
|
||
|
|
// we insert a blank rule when 'deleting' so previously returned indexes remain stable
|
||
|
|
return this.replace(index, '');
|
||
|
|
},
|
||
|
|
flush: function flush() {
|
||
|
|
if (isBrowser) {
|
||
|
|
this.tags.forEach(function (tag) {
|
||
|
|
return tag.parentNode.removeChild(tag);
|
||
|
|
});
|
||
|
|
this.tags = [];
|
||
|
|
this.sheet = null;
|
||
|
|
this.ctr = 0;
|
||
|
|
// todo - look for remnants in document.styleSheets
|
||
|
|
} else {
|
||
|
|
// simpler on server
|
||
|
|
this.sheet.cssRules = [];
|
||
|
|
}
|
||
|
|
this.injected = false;
|
||
|
|
},
|
||
|
|
rules: function rules() {
|
||
|
|
if (!isBrowser) {
|
||
|
|
return this.sheet.cssRules;
|
||
|
|
}
|
||
|
|
var arr = [];
|
||
|
|
this.tags.forEach(function (tag) {
|
||
|
|
return arr.splice.apply(arr, [arr.length, 0].concat(_toConsumableArray(Array.from(sheetForTag(tag).cssRules))));
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 74 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.processStyleName = undefined;
|
||
|
|
exports.createMarkupForStyles = createMarkupForStyles;
|
||
|
|
|
||
|
|
var _camelizeStyleName = __webpack_require__(75);
|
||
|
|
|
||
|
|
var _camelizeStyleName2 = _interopRequireDefault(_camelizeStyleName);
|
||
|
|
|
||
|
|
var _dangerousStyleValue = __webpack_require__(77);
|
||
|
|
|
||
|
|
var _dangerousStyleValue2 = _interopRequireDefault(_dangerousStyleValue);
|
||
|
|
|
||
|
|
var _hyphenateStyleName = __webpack_require__(79);
|
||
|
|
|
||
|
|
var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);
|
||
|
|
|
||
|
|
var _memoizeStringOnly = __webpack_require__(81);
|
||
|
|
|
||
|
|
var _memoizeStringOnly2 = _interopRequireDefault(_memoizeStringOnly);
|
||
|
|
|
||
|
|
var _warning = __webpack_require__(27);
|
||
|
|
|
||
|
|
var _warning2 = _interopRequireDefault(_warning);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
var processStyleName = exports.processStyleName = (0, _memoizeStringOnly2.default)(_hyphenateStyleName2.default); /**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @providesModule CSSPropertyOperations
|
||
|
|
*/
|
||
|
|
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
var warnValidStyle;
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
// 'msTransform' is correct, but the other prefixes should be capitalized
|
||
|
|
var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
|
||
|
|
|
||
|
|
// style values shouldn't contain a semicolon
|
||
|
|
var badStyleValueWithSemicolonPattern = /;\s*$/;
|
||
|
|
|
||
|
|
var warnedStyleNames = {};
|
||
|
|
var warnedStyleValues = {};
|
||
|
|
var warnedForNaNValue = false;
|
||
|
|
|
||
|
|
var warnHyphenatedStyleName = function warnHyphenatedStyleName(name, owner) {
|
||
|
|
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
warnedStyleNames[name] = true;
|
||
|
|
process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'Unsupported style property %s. Did you mean %s?%s', name, (0, _camelizeStyleName2.default)(name), checkRenderMessage(owner)) : void 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
var warnBadVendoredStyleName = function warnBadVendoredStyleName(name, owner) {
|
||
|
|
if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
warnedStyleNames[name] = true;
|
||
|
|
process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?%s', name, name.charAt(0).toUpperCase() + name.slice(1), checkRenderMessage(owner)) : void 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
var warnStyleValueWithSemicolon = function warnStyleValueWithSemicolon(name, value, owner) {
|
||
|
|
if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
warnedStyleValues[value] = true;
|
||
|
|
process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'Style property values shouldn\'t contain a semicolon.%s ' + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
var warnStyleValueIsNaN = function warnStyleValueIsNaN(name, value, owner) {
|
||
|
|
if (warnedForNaNValue) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
warnedForNaNValue = true;
|
||
|
|
process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, '`NaN` is an invalid value for the `%s` css style property.%s', name, checkRenderMessage(owner)) : void 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
var checkRenderMessage = function checkRenderMessage(owner) {
|
||
|
|
if (owner) {
|
||
|
|
var name = owner.getName();
|
||
|
|
if (name) {
|
||
|
|
return ' Check the render method of `' + name + '`.';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {string} name
|
||
|
|
* @param {*} value
|
||
|
|
* @param {ReactDOMComponent} component
|
||
|
|
*/
|
||
|
|
|
||
|
|
warnValidStyle = function warnValidStyle(name, value, component) {
|
||
|
|
//eslint-disable-line no-var
|
||
|
|
var owner = void 0;
|
||
|
|
if (component) {
|
||
|
|
owner = component._currentElement._owner;
|
||
|
|
}
|
||
|
|
if (name.indexOf('-') > -1) {
|
||
|
|
warnHyphenatedStyleName(name, owner);
|
||
|
|
} else if (badVendoredStyleNamePattern.test(name)) {
|
||
|
|
warnBadVendoredStyleName(name, owner);
|
||
|
|
} else if (badStyleValueWithSemicolonPattern.test(value)) {
|
||
|
|
warnStyleValueWithSemicolon(name, value, owner);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof value === 'number' && isNaN(value)) {
|
||
|
|
warnStyleValueIsNaN(name, value, owner);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Serializes a mapping of style properties for use as inline styles:
|
||
|
|
*
|
||
|
|
* > createMarkupForStyles({width: '200px', height: 0})
|
||
|
|
* "width:200px;height:0;"
|
||
|
|
*
|
||
|
|
* Undefined values are ignored so that declarative programming is easier.
|
||
|
|
* The result should be HTML-escaped before insertion into the DOM.
|
||
|
|
*
|
||
|
|
* @param {object} styles
|
||
|
|
* @param {ReactDOMComponent} component
|
||
|
|
* @return {?string}
|
||
|
|
*/
|
||
|
|
|
||
|
|
function createMarkupForStyles(styles, component) {
|
||
|
|
var serialized = '';
|
||
|
|
for (var styleName in styles) {
|
||
|
|
var isCustomProp = styleName.indexOf('--') === 0;
|
||
|
|
if (!styles.hasOwnProperty(styleName)) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
var styleValue = styles[styleName];
|
||
|
|
if (process.env.NODE_ENV !== 'production' && !isCustomProp) {
|
||
|
|
warnValidStyle(styleName, styleValue, component);
|
||
|
|
}
|
||
|
|
if (styleValue != null) {
|
||
|
|
if (isCustomProp) {
|
||
|
|
serialized += styleName + ':' + styleValue + ';';
|
||
|
|
} else {
|
||
|
|
serialized += processStyleName(styleName) + ':';
|
||
|
|
serialized += (0, _dangerousStyleValue2.default)(styleName, styleValue, component) + ';';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return serialized || null;
|
||
|
|
}
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 75 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @typechecks
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var camelize = __webpack_require__(76);
|
||
|
|
|
||
|
|
var msPattern = /^-ms-/;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Camelcases a hyphenated CSS property name, for example:
|
||
|
|
*
|
||
|
|
* > camelizeStyleName('background-color')
|
||
|
|
* < "backgroundColor"
|
||
|
|
* > camelizeStyleName('-moz-transition')
|
||
|
|
* < "MozTransition"
|
||
|
|
* > camelizeStyleName('-ms-transition')
|
||
|
|
* < "msTransition"
|
||
|
|
*
|
||
|
|
* As Andi Smith suggests
|
||
|
|
* (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
|
||
|
|
* is converted to lowercase `ms`.
|
||
|
|
*
|
||
|
|
* @param {string} string
|
||
|
|
* @return {string}
|
||
|
|
*/
|
||
|
|
function camelizeStyleName(string) {
|
||
|
|
return camelize(string.replace(msPattern, 'ms-'));
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = camelizeStyleName;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 76 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @typechecks
|
||
|
|
*/
|
||
|
|
|
||
|
|
var _hyphenPattern = /-(.)/g;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Camelcases a hyphenated string, for example:
|
||
|
|
*
|
||
|
|
* > camelize('background-color')
|
||
|
|
* < "backgroundColor"
|
||
|
|
*
|
||
|
|
* @param {string} string
|
||
|
|
* @return {string}
|
||
|
|
*/
|
||
|
|
function camelize(string) {
|
||
|
|
return string.replace(_hyphenPattern, function (_, character) {
|
||
|
|
return character.toUpperCase();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = camelize;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 77 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _CSSProperty = __webpack_require__(78);
|
||
|
|
|
||
|
|
var _CSSProperty2 = _interopRequireDefault(_CSSProperty);
|
||
|
|
|
||
|
|
var _warning = __webpack_require__(27);
|
||
|
|
|
||
|
|
var _warning2 = _interopRequireDefault(_warning);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @providesModule dangerousStyleValue
|
||
|
|
*/
|
||
|
|
|
||
|
|
var isUnitlessNumber = _CSSProperty2.default.isUnitlessNumber;
|
||
|
|
var styleWarnings = {};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Convert a value into the proper css writable value. The style name `name`
|
||
|
|
* should be logical (no hyphens), as specified
|
||
|
|
* in `CSSProperty.isUnitlessNumber`.
|
||
|
|
*
|
||
|
|
* @param {string} name CSS property name such as `topMargin`.
|
||
|
|
* @param {*} value CSS property value such as `10px`.
|
||
|
|
* @param {ReactDOMComponent} component
|
||
|
|
* @return {string} Normalized style value with dimensions applied.
|
||
|
|
*/
|
||
|
|
function dangerousStyleValue(name, value, component) {
|
||
|
|
// Note that we've removed escapeTextForBrowser() calls here since the
|
||
|
|
// whole string will be escaped when the attribute is injected into
|
||
|
|
// the markup. If you provide unsafe user data here they can inject
|
||
|
|
// arbitrary CSS which may be problematic (I couldn't repro this):
|
||
|
|
// https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
|
||
|
|
// http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
|
||
|
|
// This is not an XSS hole but instead a potential CSS injection issue
|
||
|
|
// which has lead to a greater discussion about how we're going to
|
||
|
|
// trust URLs moving forward. See #2115901
|
||
|
|
|
||
|
|
var isEmpty = value == null || typeof value === 'boolean' || value === '';
|
||
|
|
if (isEmpty) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
var isNonNumeric = isNaN(value);
|
||
|
|
if (isNonNumeric || value === 0 || isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]) {
|
||
|
|
return '' + value; // cast to string
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof value === 'string') {
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
// Allow '0' to pass through without warning. 0 is already special and
|
||
|
|
// doesn't require units, so we don't need to warn about it.
|
||
|
|
if (component && value !== '0') {
|
||
|
|
var owner = component._currentElement._owner;
|
||
|
|
var ownerName = owner ? owner.getName() : null;
|
||
|
|
if (ownerName && !styleWarnings[ownerName]) {
|
||
|
|
styleWarnings[ownerName] = {};
|
||
|
|
}
|
||
|
|
var warned = false;
|
||
|
|
if (ownerName) {
|
||
|
|
var warnings = styleWarnings[ownerName];
|
||
|
|
warned = warnings[name];
|
||
|
|
if (!warned) {
|
||
|
|
warnings[name] = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!warned) {
|
||
|
|
process.env.NODE_ENV !== 'production' ? (0, _warning2.default)(false, 'a `%s` tag (owner: `%s`) was passed a numeric string value ' + 'for CSS property `%s` (value: `%s`) which will be treated ' + 'as a unitless number in a future version of React.', component._currentElement.type, ownerName || 'unknown', name, value) : void 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
value = value.trim();
|
||
|
|
}
|
||
|
|
return value + 'px';
|
||
|
|
}
|
||
|
|
|
||
|
|
exports.default = dangerousStyleValue;
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 78 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* Copyright 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @providesModule CSSProperty
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* CSS properties which accept numbers but are not in units of "px".
|
||
|
|
*/
|
||
|
|
|
||
|
|
var isUnitlessNumber = {
|
||
|
|
animationIterationCount: true,
|
||
|
|
borderImageOutset: true,
|
||
|
|
borderImageSlice: true,
|
||
|
|
borderImageWidth: true,
|
||
|
|
boxFlex: true,
|
||
|
|
boxFlexGroup: true,
|
||
|
|
boxOrdinalGroup: true,
|
||
|
|
columnCount: true,
|
||
|
|
flex: true,
|
||
|
|
flexGrow: true,
|
||
|
|
flexPositive: true,
|
||
|
|
flexShrink: true,
|
||
|
|
flexNegative: true,
|
||
|
|
flexOrder: true,
|
||
|
|
gridRow: true,
|
||
|
|
gridColumn: true,
|
||
|
|
fontWeight: true,
|
||
|
|
lineClamp: true,
|
||
|
|
lineHeight: true,
|
||
|
|
opacity: true,
|
||
|
|
order: true,
|
||
|
|
orphans: true,
|
||
|
|
tabSize: true,
|
||
|
|
widows: true,
|
||
|
|
zIndex: true,
|
||
|
|
zoom: true,
|
||
|
|
|
||
|
|
// SVG-related properties
|
||
|
|
fillOpacity: true,
|
||
|
|
floodOpacity: true,
|
||
|
|
stopOpacity: true,
|
||
|
|
strokeDasharray: true,
|
||
|
|
strokeDashoffset: true,
|
||
|
|
strokeMiterlimit: true,
|
||
|
|
strokeOpacity: true,
|
||
|
|
strokeWidth: true
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {string} prefix vendor-specific prefix, eg: Webkit
|
||
|
|
* @param {string} key style name, eg: transitionDuration
|
||
|
|
* @return {string} style name prefixed with `prefix`, properly camelCased, eg:
|
||
|
|
* WebkitTransitionDuration
|
||
|
|
*/
|
||
|
|
function prefixKey(prefix, key) {
|
||
|
|
return prefix + key.charAt(0).toUpperCase() + key.substring(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Support style names that may come passed in prefixed by adding permutations
|
||
|
|
* of vendor prefixes.
|
||
|
|
*/
|
||
|
|
var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
|
||
|
|
|
||
|
|
// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
|
||
|
|
// infinite loop, because it iterates over the newly added props too.
|
||
|
|
Object.keys(isUnitlessNumber).forEach(function (prop) {
|
||
|
|
prefixes.forEach(function (prefix) {
|
||
|
|
isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Most style properties can be unset by doing .style[prop] = '' but IE8
|
||
|
|
* doesn't like doing that with shorthand properties so for the properties that
|
||
|
|
* IE8 breaks on, which are listed here, we instead unset each of the
|
||
|
|
* individual properties. See http://bugs.jquery.com/ticket/12385.
|
||
|
|
* The 4-value 'clock' properties like margin, padding, border-width seem to
|
||
|
|
* behave without any problems. Curiously, list-style works too without any
|
||
|
|
* special prodding.
|
||
|
|
*/
|
||
|
|
var shorthandPropertyExpansions = {
|
||
|
|
background: {
|
||
|
|
backgroundAttachment: true,
|
||
|
|
backgroundColor: true,
|
||
|
|
backgroundImage: true,
|
||
|
|
backgroundPositionX: true,
|
||
|
|
backgroundPositionY: true,
|
||
|
|
backgroundRepeat: true
|
||
|
|
},
|
||
|
|
backgroundPosition: {
|
||
|
|
backgroundPositionX: true,
|
||
|
|
backgroundPositionY: true
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
borderWidth: true,
|
||
|
|
borderStyle: true,
|
||
|
|
borderColor: true
|
||
|
|
},
|
||
|
|
borderBottom: {
|
||
|
|
borderBottomWidth: true,
|
||
|
|
borderBottomStyle: true,
|
||
|
|
borderBottomColor: true
|
||
|
|
},
|
||
|
|
borderLeft: {
|
||
|
|
borderLeftWidth: true,
|
||
|
|
borderLeftStyle: true,
|
||
|
|
borderLeftColor: true
|
||
|
|
},
|
||
|
|
borderRight: {
|
||
|
|
borderRightWidth: true,
|
||
|
|
borderRightStyle: true,
|
||
|
|
borderRightColor: true
|
||
|
|
},
|
||
|
|
borderTop: {
|
||
|
|
borderTopWidth: true,
|
||
|
|
borderTopStyle: true,
|
||
|
|
borderTopColor: true
|
||
|
|
},
|
||
|
|
font: {
|
||
|
|
fontStyle: true,
|
||
|
|
fontVariant: true,
|
||
|
|
fontWeight: true,
|
||
|
|
fontSize: true,
|
||
|
|
lineHeight: true,
|
||
|
|
fontFamily: true
|
||
|
|
},
|
||
|
|
outline: {
|
||
|
|
outlineWidth: true,
|
||
|
|
outlineStyle: true,
|
||
|
|
outlineColor: true
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var CSSProperty = {
|
||
|
|
isUnitlessNumber: isUnitlessNumber,
|
||
|
|
shorthandPropertyExpansions: shorthandPropertyExpansions
|
||
|
|
};
|
||
|
|
|
||
|
|
exports.default = CSSProperty;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 79 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @typechecks
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var hyphenate = __webpack_require__(80);
|
||
|
|
|
||
|
|
var msPattern = /^ms-/;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hyphenates a camelcased CSS property name, for example:
|
||
|
|
*
|
||
|
|
* > hyphenateStyleName('backgroundColor')
|
||
|
|
* < "background-color"
|
||
|
|
* > hyphenateStyleName('MozTransition')
|
||
|
|
* < "-moz-transition"
|
||
|
|
* > hyphenateStyleName('msTransition')
|
||
|
|
* < "-ms-transition"
|
||
|
|
*
|
||
|
|
* As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
|
||
|
|
* is converted to `-ms-`.
|
||
|
|
*
|
||
|
|
* @param {string} string
|
||
|
|
* @return {string}
|
||
|
|
*/
|
||
|
|
function hyphenateStyleName(string) {
|
||
|
|
return hyphenate(string).replace(msPattern, '-ms-');
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = hyphenateStyleName;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 80 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
* @typechecks
|
||
|
|
*/
|
||
|
|
|
||
|
|
var _uppercasePattern = /([A-Z])/g;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hyphenates a camelcased string, for example:
|
||
|
|
*
|
||
|
|
* > hyphenate('backgroundColor')
|
||
|
|
* < "background-color"
|
||
|
|
*
|
||
|
|
* For CSS style names, use `hyphenateStyleName` instead which works properly
|
||
|
|
* with all vendor prefixes, including `ms`.
|
||
|
|
*
|
||
|
|
* @param {string} string
|
||
|
|
* @return {string}
|
||
|
|
*/
|
||
|
|
function hyphenate(string) {
|
||
|
|
return string.replace(_uppercasePattern, '-$1').toLowerCase();
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = hyphenate;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 81 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
||
|
|
* All rights reserved.
|
||
|
|
*
|
||
|
|
* This source code is licensed under the BSD-style license found in the
|
||
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||
|
|
*
|
||
|
|
*
|
||
|
|
* @typechecks static-only
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Memoizes the return value of a function that accepts one string argument.
|
||
|
|
*/
|
||
|
|
|
||
|
|
function memoizeStringOnly(callback) {
|
||
|
|
var cache = {};
|
||
|
|
return function (string) {
|
||
|
|
if (!cache.hasOwnProperty(string)) {
|
||
|
|
cache[string] = callback.call(this, string);
|
||
|
|
}
|
||
|
|
return cache[string];
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = memoizeStringOnly;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 82 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||
|
|
|
||
|
|
exports.default = clean;
|
||
|
|
// Returns true for null, false, undefined and {}
|
||
|
|
function isFalsy(value) {
|
||
|
|
return value === null || value === undefined || value === false || (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && Object.keys(value).length === 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function cleanObject(object) {
|
||
|
|
if (isFalsy(object)) return null;
|
||
|
|
if ((typeof object === 'undefined' ? 'undefined' : _typeof(object)) !== 'object') return object;
|
||
|
|
|
||
|
|
var acc = {},
|
||
|
|
keys = Object.keys(object),
|
||
|
|
hasFalsy = false;
|
||
|
|
for (var i = 0; i < keys.length; i++) {
|
||
|
|
var value = object[keys[i]];
|
||
|
|
var filteredValue = clean(value);
|
||
|
|
if (filteredValue === null || filteredValue !== value) {
|
||
|
|
hasFalsy = true;
|
||
|
|
}
|
||
|
|
if (filteredValue !== null) {
|
||
|
|
acc[keys[i]] = filteredValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return Object.keys(acc).length === 0 ? null : hasFalsy ? acc : object;
|
||
|
|
}
|
||
|
|
|
||
|
|
function cleanArray(rules) {
|
||
|
|
var hasFalsy = false;
|
||
|
|
var filtered = [];
|
||
|
|
rules.forEach(function (rule) {
|
||
|
|
var filteredRule = clean(rule);
|
||
|
|
if (filteredRule === null || filteredRule !== rule) {
|
||
|
|
hasFalsy = true;
|
||
|
|
}
|
||
|
|
if (filteredRule !== null) {
|
||
|
|
filtered.push(filteredRule);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return filtered.length == 0 ? null : hasFalsy ? filtered : rules;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Takes style array or object provided by user and clears all the falsy data
|
||
|
|
// If there is no styles left after filtration returns null
|
||
|
|
function clean(input) {
|
||
|
|
return Array.isArray(input) ? cleanArray(input) : cleanObject(input);
|
||
|
|
}
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 83 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||
|
|
|
||
|
|
exports.PluginSet = PluginSet;
|
||
|
|
exports.fallbacks = fallbacks;
|
||
|
|
exports.prefixes = prefixes;
|
||
|
|
|
||
|
|
var _objectAssign = __webpack_require__(72);
|
||
|
|
|
||
|
|
var _objectAssign2 = _interopRequireDefault(_objectAssign);
|
||
|
|
|
||
|
|
var _CSSPropertyOperations = __webpack_require__(74);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
var isDev = function (x) {
|
||
|
|
return x === 'development' || !x;
|
||
|
|
}(process.env.NODE_ENV);
|
||
|
|
|
||
|
|
function PluginSet(initial) {
|
||
|
|
this.fns = initial || [];
|
||
|
|
}
|
||
|
|
|
||
|
|
(0, _objectAssign2.default)(PluginSet.prototype, {
|
||
|
|
add: function add() {
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
fns[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
fns.forEach(function (fn) {
|
||
|
|
if (_this.fns.indexOf(fn) >= 0) {
|
||
|
|
if (isDev) {
|
||
|
|
console.warn('adding the same plugin again, ignoring'); //eslint-disable-line no-console
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
_this.fns = [fn].concat(_this.fns);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
remove: function remove(fn) {
|
||
|
|
this.fns = this.fns.filter(function (x) {
|
||
|
|
return x !== fn;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
clear: function clear() {
|
||
|
|
this.fns = [];
|
||
|
|
},
|
||
|
|
transform: function transform(o) {
|
||
|
|
return this.fns.reduce(function (o, fn) {
|
||
|
|
return fn(o);
|
||
|
|
}, o);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function fallbacks(node) {
|
||
|
|
var hasArray = Object.keys(node.style).map(function (x) {
|
||
|
|
return Array.isArray(node.style[x]);
|
||
|
|
}).indexOf(true) >= 0;
|
||
|
|
if (hasArray) {
|
||
|
|
var _ret = function () {
|
||
|
|
var style = node.style;
|
||
|
|
|
||
|
|
var flattened = Object.keys(style).reduce(function (o, key) {
|
||
|
|
o[key] = Array.isArray(style[key]) ? style[key].join('; ' + (0, _CSSPropertyOperations.processStyleName)(key) + ': ') : style[key];
|
||
|
|
return o;
|
||
|
|
}, {});
|
||
|
|
// todo -
|
||
|
|
// flatten arrays which haven't been flattened yet
|
||
|
|
return {
|
||
|
|
v: (0, _objectAssign2.default)({}, node, { style: flattened })
|
||
|
|
};
|
||
|
|
}();
|
||
|
|
|
||
|
|
if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
|
||
|
|
}
|
||
|
|
return node;
|
||
|
|
}
|
||
|
|
|
||
|
|
var prefixAll = __webpack_require__(84);
|
||
|
|
|
||
|
|
function prefixes(node) {
|
||
|
|
return (0, _objectAssign2.default)({}, node, { style: prefixAll(node.style) });
|
||
|
|
}
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 84 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict';
|
||
|
|
|
||
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||
|
|
|
||
|
|
(function (global, factory) {
|
||
|
|
( false ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : global.InlineStylePrefixAll = factory();
|
||
|
|
})(undefined, function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var babelHelpers = {};
|
||
|
|
|
||
|
|
babelHelpers.classCallCheck = function (instance, Constructor) {
|
||
|
|
if (!(instance instanceof Constructor)) {
|
||
|
|
throw new TypeError("Cannot call a class as a function");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
babelHelpers.createClass = function () {
|
||
|
|
function defineProperties(target, props) {
|
||
|
|
for (var i = 0; i < props.length; i++) {
|
||
|
|
var descriptor = props[i];
|
||
|
|
descriptor.enumerable = descriptor.enumerable || false;
|
||
|
|
descriptor.configurable = true;
|
||
|
|
if ("value" in descriptor) descriptor.writable = true;
|
||
|
|
Object.defineProperty(target, descriptor.key, descriptor);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return function (Constructor, protoProps, staticProps) {
|
||
|
|
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||
|
|
if (staticProps) defineProperties(Constructor, staticProps);
|
||
|
|
return Constructor;
|
||
|
|
};
|
||
|
|
}();
|
||
|
|
|
||
|
|
babelHelpers.defineProperty = function (obj, key, value) {
|
||
|
|
if (key in obj) {
|
||
|
|
Object.defineProperty(obj, key, {
|
||
|
|
value: value,
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true,
|
||
|
|
writable: true
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
obj[key] = value;
|
||
|
|
}
|
||
|
|
|
||
|
|
return obj;
|
||
|
|
};
|
||
|
|
|
||
|
|
babelHelpers;
|
||
|
|
|
||
|
|
function __commonjs(fn, module) {
|
||
|
|
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
||
|
|
}
|
||
|
|
|
||
|
|
var prefixProps = { "Webkit": { "transform": true, "transformOrigin": true, "transformOriginX": true, "transformOriginY": true, "backfaceVisibility": true, "perspective": true, "perspectiveOrigin": true, "transformStyle": true, "transformOriginZ": true, "animation": true, "animationDelay": true, "animationDirection": true, "animationFillMode": true, "animationDuration": true, "animationIterationCount": true, "animationName": true, "animationPlayState": true, "animationTimingFunction": true, "appearance": true, "userSelect": true, "fontKerning": true, "textEmphasisPosition": true, "textEmphasis": true, "textEmphasisStyle": true, "textEmphasisColor": true, "boxDecorationBreak": true, "clipPath": true, "maskImage": true, "maskMode": true, "maskRepeat": true, "maskPosition": true, "maskClip": true, "maskOrigin": true, "maskSize": true, "maskComposite": true, "mask": true, "maskBorderSource": true, "maskBorderMode": true, "maskBorderSlice": true, "maskBorderWidth": true, "maskBorderOutset": true, "maskBorderRepeat": true, "maskBorder": true, "maskType": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "filter": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true, "flex": true, "flexBasis": true, "flexDirection": true, "flexGrow": true, "flexFlow": true, "flexShrink": true, "flexWrap": true, "alignContent": true, "alignItems": true, "alignSelf": true, "justifyContent": true, "order": true, "backdropFilter": true, "scrollSnapType": true, "scrollSnapPointsX": true, "scrollSnapPointsY": true, "scrollSnapDestination": true, "scrollSnapCoordinate": true, "shapeImageThreshold": true, "shapeImageMargin": true, "shapeImageOutside": true, "hyphens": true, "flowInto": true, "flowFrom": true, "regionFragment": true, "textSizeAdjust": true, "transition": true, "transitionDelay": true, "transitionDuration": true, "transitionProperty": true, "transitionTimingFunction": true }, "Moz": { "appearance": true, "userSelect": true, "boxSizing": true, "textAlignLast": true, "textDecorationStyle": true, "textDecorationSkip": true, "textDecorationLine": true, "textDecorationColor": true, "tabSize": true, "hyphens": true, "fontFeatureSettings": true, "breakAfter": true, "breakBefore": true, "breakInside": true, "columnCount": true, "columnFill": true, "columnGap": true, "columnRule": true, "columnRuleColor": true, "columnRuleStyle": true, "columnRuleWidth": true, "columns": true, "columnSpan": true, "columnWidth": true }, "ms": { "flex": true, "flexBasis": false, "flexDirection": true, "flexGrow": false, "flexFlow": true, "flexShrink": false, "flexWrap": true, "alignContent": false, "alignItems": false, "alignSelf": false, "justifyContent": false, "order": false, "userSelect": true, "wrapFlow": true, "wrapThrough": true, "wrapMargin": true, "scrollSnapType": true, "scrollSnapPointsX": true, "scrollSnapPointsY": true, "scrollSnapDestination": true, "scrollSnapCoordinate": true, "touchAction": true, "hyphens": true, "flowInto": true, "flowFrom": true, "breakBefore": true, "breakAfter": true, "breakInside": true, "regionFragment": true, "gridTemplateColumns": true, "gridTemplateRows": true, "gridTemplateAreas": true, "gridTemplate": true, "gridAutoColumns": true, "gridAutoRows": true, "gridAutoFlow": true, "grid": true, "gridRowStart": true, "gridColumnStart": true, "gridRowEnd": true, "gridRow": true, "gridColumn": true, "gridColumnEnd": true, "gridColumnGap": true, "gridRowGap": true, "gridArea": true, "gridGap": true, "textSizeAdjust": true } };
|
||
|
|
|
||
|
|
// helper to capitalize strings
|
||
|
|
var capitalizeString = function capitalizeString(str) {
|
||
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
||
|
|
};
|
||
|
|
|
||
|
|
var isPrefixedProperty = function isPrefixedProperty(property) {
|
||
|
|
return property.match(/^(Webkit|Moz|O|ms)/) !== null;
|
||
|
|
};
|
||
|
|
|
||
|
|
function sortPrefixedStyle(style) {
|
||
|
|
return Object.keys(style).sort(function (left, right) {
|
||
|
|
if (isPrefixedProperty(left) && !isPrefixedProperty(right)) {
|
||
|
|
return -1;
|
||
|
|
} else if (!isPrefixedProperty(left) && isPrefixedProperty(right)) {
|
||
|
|
return 1;
|
||
|
|
}
|
||
|
|
return 0;
|
||
|
|
}).reduce(function (sortedStyle, prop) {
|
||
|
|
sortedStyle[prop] = style[prop];
|
||
|
|
return sortedStyle;
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
|
||
|
|
function position(property, value) {
|
||
|
|
if (property === 'position' && value === 'sticky') {
|
||
|
|
return { position: ['-webkit-sticky', 'sticky'] };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// returns a style object with a single concated prefixed value string
|
||
|
|
var joinPrefixedValue = function joinPrefixedValue(property, value) {
|
||
|
|
var replacer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (prefix, value) {
|
||
|
|
return prefix + value;
|
||
|
|
};
|
||
|
|
return babelHelpers.defineProperty({}, property, ['-webkit-', '-moz-', ''].map(function (prefix) {
|
||
|
|
return replacer(prefix, value);
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
var isPrefixedValue = function isPrefixedValue(value) {
|
||
|
|
if (Array.isArray(value)) value = value.join(',');
|
||
|
|
|
||
|
|
return value.match(/-webkit-|-moz-|-ms-/) !== null;
|
||
|
|
};
|
||
|
|
|
||
|
|
function calc(property, value) {
|
||
|
|
if (typeof value === 'string' && !isPrefixedValue(value) && value.indexOf('calc(') > -1) {
|
||
|
|
return joinPrefixedValue(property, value, function (prefix, value) {
|
||
|
|
return value.replace(/calc\(/g, prefix + 'calc(');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var values = {
|
||
|
|
'zoom-in': true,
|
||
|
|
'zoom-out': true,
|
||
|
|
grab: true,
|
||
|
|
grabbing: true
|
||
|
|
};
|
||
|
|
|
||
|
|
function cursor(property, value) {
|
||
|
|
if (property === 'cursor' && values[value]) {
|
||
|
|
return joinPrefixedValue(property, value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var values$1 = { flex: true, 'inline-flex': true };
|
||
|
|
|
||
|
|
function flex(property, value) {
|
||
|
|
if (property === 'display' && values$1[value]) {
|
||
|
|
return {
|
||
|
|
display: ['-webkit-box', '-moz-box', '-ms-' + value + 'box', '-webkit-' + value, value]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var properties = {
|
||
|
|
maxHeight: true,
|
||
|
|
maxWidth: true,
|
||
|
|
width: true,
|
||
|
|
height: true,
|
||
|
|
columnWidth: true,
|
||
|
|
minWidth: true,
|
||
|
|
minHeight: true
|
||
|
|
};
|
||
|
|
var values$2 = {
|
||
|
|
'min-content': true,
|
||
|
|
'max-content': true,
|
||
|
|
'fill-available': true,
|
||
|
|
'fit-content': true,
|
||
|
|
'contain-floats': true
|
||
|
|
};
|
||
|
|
|
||
|
|
function sizing(property, value) {
|
||
|
|
if (properties[property] && values$2[value]) {
|
||
|
|
return joinPrefixedValue(property, value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var values$3 = /linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/;
|
||
|
|
|
||
|
|
function gradient(property, value) {
|
||
|
|
if (typeof value === 'string' && !isPrefixedValue(value) && value.match(values$3) !== null) {
|
||
|
|
return joinPrefixedValue(property, value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var index = __commonjs(function (module) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var uppercasePattern = /[A-Z]/g;
|
||
|
|
var msPattern = /^ms-/;
|
||
|
|
var cache = {};
|
||
|
|
|
||
|
|
function hyphenateStyleName(string) {
|
||
|
|
return string in cache ? cache[string] : cache[string] = string.replace(uppercasePattern, '-$&').toLowerCase().replace(msPattern, '-ms-');
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = hyphenateStyleName;
|
||
|
|
});
|
||
|
|
|
||
|
|
var hyphenateStyleName = index && (typeof index === 'undefined' ? 'undefined' : _typeof(index)) === 'object' && 'default' in index ? index['default'] : index;
|
||
|
|
|
||
|
|
var properties$1 = {
|
||
|
|
transition: true,
|
||
|
|
transitionProperty: true,
|
||
|
|
WebkitTransition: true,
|
||
|
|
WebkitTransitionProperty: true
|
||
|
|
};
|
||
|
|
|
||
|
|
function transition(property, value) {
|
||
|
|
// also check for already prefixed transitions
|
||
|
|
if (typeof value === 'string' && properties$1[property]) {
|
||
|
|
var _ref2;
|
||
|
|
|
||
|
|
var outputValue = prefixValue(value);
|
||
|
|
var webkitOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (value) {
|
||
|
|
return value.match(/-moz-|-ms-/) === null;
|
||
|
|
}).join(',');
|
||
|
|
|
||
|
|
// if the property is already prefixed
|
||
|
|
if (property.indexOf('Webkit') > -1) {
|
||
|
|
return babelHelpers.defineProperty({}, property, webkitOutput);
|
||
|
|
}
|
||
|
|
|
||
|
|
return _ref2 = {}, babelHelpers.defineProperty(_ref2, 'Webkit' + capitalizeString(property), webkitOutput), babelHelpers.defineProperty(_ref2, property, outputValue), _ref2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function prefixValue(value) {
|
||
|
|
if (isPrefixedValue(value)) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
|
||
|
|
// only split multi values, not cubic beziers
|
||
|
|
var multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g);
|
||
|
|
|
||
|
|
// iterate each single value and check for transitioned properties
|
||
|
|
// that need to be prefixed as well
|
||
|
|
multipleValues.forEach(function (val, index) {
|
||
|
|
multipleValues[index] = Object.keys(prefixProps).reduce(function (out, prefix) {
|
||
|
|
var dashCasePrefix = '-' + prefix.toLowerCase() + '-';
|
||
|
|
|
||
|
|
Object.keys(prefixProps[prefix]).forEach(function (prop) {
|
||
|
|
var dashCaseProperty = hyphenateStyleName(prop);
|
||
|
|
|
||
|
|
if (val.indexOf(dashCaseProperty) > -1 && dashCaseProperty !== 'order') {
|
||
|
|
// join all prefixes and create a new value
|
||
|
|
out = val.replace(dashCaseProperty, dashCasePrefix + dashCaseProperty) + ',' + out;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return out;
|
||
|
|
}, val);
|
||
|
|
});
|
||
|
|
|
||
|
|
return multipleValues.join(',');
|
||
|
|
}
|
||
|
|
|
||
|
|
var alternativeValues = {
|
||
|
|
'space-around': 'distribute',
|
||
|
|
'space-between': 'justify',
|
||
|
|
'flex-start': 'start',
|
||
|
|
'flex-end': 'end'
|
||
|
|
};
|
||
|
|
var alternativeProps = {
|
||
|
|
alignContent: 'msFlexLinePack',
|
||
|
|
alignSelf: 'msFlexItemAlign',
|
||
|
|
alignItems: 'msFlexAlign',
|
||
|
|
justifyContent: 'msFlexPack',
|
||
|
|
order: 'msFlexOrder',
|
||
|
|
flexGrow: 'msFlexPositive',
|
||
|
|
flexShrink: 'msFlexNegative',
|
||
|
|
flexBasis: 'msPreferredSize'
|
||
|
|
};
|
||
|
|
|
||
|
|
function flexboxIE(property, value) {
|
||
|
|
if (alternativeProps[property]) {
|
||
|
|
return babelHelpers.defineProperty({}, alternativeProps[property], alternativeValues[value] || value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var alternativeValues$1 = {
|
||
|
|
'space-around': 'justify',
|
||
|
|
'space-between': 'justify',
|
||
|
|
'flex-start': 'start',
|
||
|
|
'flex-end': 'end',
|
||
|
|
'wrap-reverse': 'multiple',
|
||
|
|
wrap: 'multiple'
|
||
|
|
};
|
||
|
|
|
||
|
|
var alternativeProps$1 = {
|
||
|
|
alignItems: 'WebkitBoxAlign',
|
||
|
|
justifyContent: 'WebkitBoxPack',
|
||
|
|
flexWrap: 'WebkitBoxLines'
|
||
|
|
};
|
||
|
|
|
||
|
|
function flexboxOld(property, value) {
|
||
|
|
if (property === 'flexDirection' && typeof value === 'string') {
|
||
|
|
return {
|
||
|
|
WebkitBoxOrient: value.indexOf('column') > -1 ? 'vertical' : 'horizontal',
|
||
|
|
WebkitBoxDirection: value.indexOf('reverse') > -1 ? 'reverse' : 'normal'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if (alternativeProps$1[property]) {
|
||
|
|
return babelHelpers.defineProperty({}, alternativeProps$1[property], alternativeValues$1[value] || value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var plugins = [position, calc, cursor, sizing, gradient, transition, flexboxIE, flexboxOld, flex];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Returns a prefixed version of the style object using all vendor prefixes
|
||
|
|
* @param {Object} styles - Style object that gets prefixed properties added
|
||
|
|
* @returns {Object} - Style object with prefixed properties and values
|
||
|
|
*/
|
||
|
|
function prefixAll(styles) {
|
||
|
|
Object.keys(styles).forEach(function (property) {
|
||
|
|
var value = styles[property];
|
||
|
|
if (value instanceof Object && !Array.isArray(value)) {
|
||
|
|
// recurse through nested style objects
|
||
|
|
styles[property] = prefixAll(value);
|
||
|
|
} else {
|
||
|
|
Object.keys(prefixProps).forEach(function (prefix) {
|
||
|
|
var properties = prefixProps[prefix];
|
||
|
|
// add prefixes if needed
|
||
|
|
if (properties[property]) {
|
||
|
|
styles[prefix + capitalizeString(property)] = value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Object.keys(styles).forEach(function (property) {
|
||
|
|
[].concat(styles[property]).forEach(function (value, index) {
|
||
|
|
// resolve every special plugins
|
||
|
|
plugins.forEach(function (plugin) {
|
||
|
|
return assignStyles(styles, plugin(property, value));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
return sortPrefixedStyle(styles);
|
||
|
|
}
|
||
|
|
|
||
|
|
function assignStyles(base) {
|
||
|
|
var extend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||
|
|
|
||
|
|
Object.keys(extend).forEach(function (property) {
|
||
|
|
var baseValue = base[property];
|
||
|
|
if (Array.isArray(baseValue)) {
|
||
|
|
[].concat(extend[property]).forEach(function (value) {
|
||
|
|
var valueIndex = baseValue.indexOf(value);
|
||
|
|
if (valueIndex > -1) {
|
||
|
|
base[property].splice(valueIndex, 1);
|
||
|
|
}
|
||
|
|
base[property].push(value);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
base[property] = extend[property];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return prefixAll;
|
||
|
|
});
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 85 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = doHash;
|
||
|
|
// murmurhash2 via https://gist.github.com/raycmorgan/588423
|
||
|
|
|
||
|
|
function doHash(str, seed) {
|
||
|
|
var m = 0x5bd1e995;
|
||
|
|
var r = 24;
|
||
|
|
var h = seed ^ str.length;
|
||
|
|
var length = str.length;
|
||
|
|
var currentIndex = 0;
|
||
|
|
|
||
|
|
while (length >= 4) {
|
||
|
|
var k = UInt32(str, currentIndex);
|
||
|
|
|
||
|
|
k = Umul32(k, m);
|
||
|
|
k ^= k >>> r;
|
||
|
|
k = Umul32(k, m);
|
||
|
|
|
||
|
|
h = Umul32(h, m);
|
||
|
|
h ^= k;
|
||
|
|
|
||
|
|
currentIndex += 4;
|
||
|
|
length -= 4;
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (length) {
|
||
|
|
case 3:
|
||
|
|
h ^= UInt16(str, currentIndex);
|
||
|
|
h ^= str.charCodeAt(currentIndex + 2) << 16;
|
||
|
|
h = Umul32(h, m);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 2:
|
||
|
|
h ^= UInt16(str, currentIndex);
|
||
|
|
h = Umul32(h, m);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 1:
|
||
|
|
h ^= str.charCodeAt(currentIndex);
|
||
|
|
h = Umul32(h, m);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
h ^= h >>> 13;
|
||
|
|
h = Umul32(h, m);
|
||
|
|
h ^= h >>> 15;
|
||
|
|
|
||
|
|
return h >>> 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
function UInt32(str, pos) {
|
||
|
|
return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8) + (str.charCodeAt(pos++) << 16) + (str.charCodeAt(pos) << 24);
|
||
|
|
}
|
||
|
|
|
||
|
|
function UInt16(str, pos) {
|
||
|
|
return str.charCodeAt(pos++) + (str.charCodeAt(pos++) << 8);
|
||
|
|
}
|
||
|
|
|
||
|
|
function Umul32(n, m) {
|
||
|
|
n = n | 0;
|
||
|
|
m = m | 0;
|
||
|
|
var nlo = n & 0xffff;
|
||
|
|
var nhi = n >>> 16;
|
||
|
|
var res = nlo * m + ((nhi * m & 0xffff) << 16) | 0;
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 86 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||
|
|
|
||
|
|
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
||
|
|
|
||
|
|
// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
|
||
|
|
var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius']]);
|
||
|
|
|
||
|
|
// this is the same as the propertiesToConvert except for values
|
||
|
|
var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
|
||
|
|
|
||
|
|
// some values require a little fudging, that fudging goes here.
|
||
|
|
var propertyValueConverters = {
|
||
|
|
padding: function padding(value) {
|
||
|
|
if (isNumber(value)) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
return handleQuartetValues(value);
|
||
|
|
},
|
||
|
|
textShadow: function textShadow(value) {
|
||
|
|
// intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
|
||
|
|
return value.replace(/(-*)([.|\d]+)/, function (match, negative, number) {
|
||
|
|
if (number === '0') {
|
||
|
|
return match;
|
||
|
|
}
|
||
|
|
var doubleNegative = negative === '' ? '-' : '';
|
||
|
|
return '' + doubleNegative + number;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
borderColor: function borderColor(value) {
|
||
|
|
return handleQuartetValues(value);
|
||
|
|
},
|
||
|
|
borderRadius: function borderRadius(value) {
|
||
|
|
if (isNumber(value)) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
if (includes(value, '/')) {
|
||
|
|
var _value$split = value.split('/'),
|
||
|
|
_value$split2 = _slicedToArray(_value$split, 2),
|
||
|
|
radius1 = _value$split2[0],
|
||
|
|
radius2 = _value$split2[1];
|
||
|
|
|
||
|
|
var convertedRadius1 = propertyValueConverters.borderRadius(radius1.trim());
|
||
|
|
var convertedRadius2 = propertyValueConverters.borderRadius(radius2.trim());
|
||
|
|
return convertedRadius1 + ' / ' + convertedRadius2;
|
||
|
|
}
|
||
|
|
var splitValues = getValuesAsList(value);
|
||
|
|
switch (splitValues.length) {
|
||
|
|
case 2:
|
||
|
|
{
|
||
|
|
return splitValues.reverse().join(' ');
|
||
|
|
}
|
||
|
|
case 4:
|
||
|
|
{
|
||
|
|
var _splitValues = _slicedToArray(splitValues, 4),
|
||
|
|
topLeft = _splitValues[0],
|
||
|
|
topRight = _splitValues[1],
|
||
|
|
bottomRight = _splitValues[2],
|
||
|
|
bottomLeft = _splitValues[3];
|
||
|
|
|
||
|
|
return [topRight, topLeft, bottomLeft, bottomRight].join(' ');
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
{
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
background: function background(value) {
|
||
|
|
// Yeah, this is in need of a refactor 🙃...
|
||
|
|
// but this property is a tough cookie 🍪
|
||
|
|
// get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value
|
||
|
|
var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim();
|
||
|
|
// replace that backgroundPosition value with the converted version
|
||
|
|
value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition(backgroundPositionValue));
|
||
|
|
// do the backgroundImage value replacing on the whole value (because why not?)
|
||
|
|
return propertyValueConverters.backgroundImage(value);
|
||
|
|
},
|
||
|
|
backgroundImage: function backgroundImage(value) {
|
||
|
|
if (!includes(value, 'url(')) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
// sorry for the regex 😞, but basically this replaces _every_ instance of `ltr`, `rtl`, `right`, and `left` with
|
||
|
|
// the corresponding opposite. A situation we're accepting here:
|
||
|
|
// url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
|
||
|
|
// Definite trade-offs here, but I think it's a good call.
|
||
|
|
return value.replace(/(^|\W|_)((ltr)|(rtl)|(left)|(right))(\W|_|$)/g, function (match, g1, group2) {
|
||
|
|
return match.replace(group2, valuesToConvert[group2]);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
backgroundPosition: function backgroundPosition(value) {
|
||
|
|
return value
|
||
|
|
// intentionally only grabbing the first instance of this because that represents `left`
|
||
|
|
.replace(/^((-|\d|\.)+%)/, function (match, group) {
|
||
|
|
return calculateNewBackgroundPosition(group);
|
||
|
|
}).replace(/(left)|(right)/, function (match) {
|
||
|
|
return valuesToConvert[match];
|
||
|
|
});
|
||
|
|
},
|
||
|
|
backgroundPositionX: function backgroundPositionX(value) {
|
||
|
|
if (isNumber(value)) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
return propertyValueConverters.backgroundPosition(value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
propertyValueConverters.margin = propertyValueConverters.padding;
|
||
|
|
propertyValueConverters.borderWidth = propertyValueConverters.padding;
|
||
|
|
propertyValueConverters.boxShadow = propertyValueConverters.textShadow;
|
||
|
|
propertyValueConverters.webkitBoxShadow = propertyValueConverters.textShadow;
|
||
|
|
propertyValueConverters.mozBoxShadow = propertyValueConverters.textShadow;
|
||
|
|
propertyValueConverters.borderStyle = propertyValueConverters.borderColor;
|
||
|
|
|
||
|
|
// here's our main export! 👋
|
||
|
|
exports.default = convert;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* converts properties and values in the CSS in JS object to their corresponding RTL values
|
||
|
|
* @param {Object} object the CSS in JS object
|
||
|
|
* @return {Object} the RTL converted object
|
||
|
|
*/
|
||
|
|
|
||
|
|
function convert(object) {
|
||
|
|
return Object.keys(object).reduce(function (newObj, originalKey) {
|
||
|
|
var originalValue = object[originalKey];
|
||
|
|
if (isString(originalValue)) {
|
||
|
|
// you're welcome to later code 😺
|
||
|
|
originalValue = originalValue.trim();
|
||
|
|
}
|
||
|
|
|
||
|
|
var _convertProperty = convertProperty(originalKey, originalValue),
|
||
|
|
key = _convertProperty.key,
|
||
|
|
value = _convertProperty.value;
|
||
|
|
|
||
|
|
newObj[key] = value;
|
||
|
|
return newObj;
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Converts a property and its value to the corresponding RTL key and value
|
||
|
|
* @param {String} originalKey the original property key
|
||
|
|
* @param {Number|String|Object} originalValue the original css property value
|
||
|
|
* @return {Object} the new {key, value} pair
|
||
|
|
*/
|
||
|
|
function convertProperty(originalKey, originalValue) {
|
||
|
|
var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue);
|
||
|
|
var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey);
|
||
|
|
var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue);
|
||
|
|
return { key: key, value: value };
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This gets the RTL version of the given property if it has a corresponding RTL property
|
||
|
|
* @param {String} property the name of the property
|
||
|
|
* @return {String} the name of the RTL property
|
||
|
|
*/
|
||
|
|
function getPropertyDoppelganger(property) {
|
||
|
|
return propertiesToConvert[property] || property;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This converts the given value to the RTL version of that value based on the key
|
||
|
|
* @param {String} key this is the key (note: this should be the RTL version of the originalKey)
|
||
|
|
* @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well
|
||
|
|
* @return {String|Number|Object} the converted value
|
||
|
|
*/
|
||
|
|
function getValueDoppelganger(key, originalValue) {
|
||
|
|
/* eslint complexity:[2, 7] */ // let's try to keep the complexity down... If we have to do this much more, let's break this up
|
||
|
|
if (isObject(originalValue)) {
|
||
|
|
return convert(originalValue); // recurssion 🌀
|
||
|
|
}
|
||
|
|
var isNum = isNumber(originalValue);
|
||
|
|
var importantlessValue = isNum ? originalValue : originalValue.replace(/ !important.*?$/, '');
|
||
|
|
var isImportant = !isNum && importantlessValue.length !== originalValue.length;
|
||
|
|
var valueConverter = propertyValueConverters[key];
|
||
|
|
var newValue = void 0;
|
||
|
|
if (valueConverter) {
|
||
|
|
newValue = valueConverter(importantlessValue);
|
||
|
|
} else {
|
||
|
|
newValue = valuesToConvert[importantlessValue] || importantlessValue;
|
||
|
|
}
|
||
|
|
if (isImportant) {
|
||
|
|
return newValue + ' !important';
|
||
|
|
}
|
||
|
|
return newValue;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This takes a list of CSS values and converts it to an array
|
||
|
|
* @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
|
||
|
|
* @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
|
||
|
|
*/
|
||
|
|
function getValuesAsList(value) {
|
||
|
|
return value.replace(/ +/g, ' ') // remove all extraneous spaces
|
||
|
|
.split(' ').map(function (i) {
|
||
|
|
return i.trim();
|
||
|
|
}) // get rid of extra space before/after each item
|
||
|
|
.filter(Boolean) // get rid of empty strings
|
||
|
|
// join items which are within parenthese
|
||
|
|
// luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
|
||
|
|
.reduce(function (_ref, item) {
|
||
|
|
var list = _ref.list,
|
||
|
|
state = _ref.state;
|
||
|
|
|
||
|
|
var openParansCount = (item.match(/\(/g) || []).length;
|
||
|
|
var closedParansCount = (item.match(/\)/g) || []).length;
|
||
|
|
if (state.parensDepth > 0) {
|
||
|
|
list[list.length - 1] = list[list.length - 1] + ' ' + item;
|
||
|
|
} else {
|
||
|
|
list.push(item);
|
||
|
|
}
|
||
|
|
state.parensDepth += openParansCount - closedParansCount;
|
||
|
|
return { list: list, state: state };
|
||
|
|
}, { list: [], state: { parensDepth: 0 } }).list;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
|
||
|
|
* @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
|
||
|
|
* simply returns the value in those cases (which is the correct behavior)
|
||
|
|
* @return {String} the result - `1px 4px 3px 2px` for example.
|
||
|
|
*/
|
||
|
|
function handleQuartetValues(value) {
|
||
|
|
var splitValues = getValuesAsList(value);
|
||
|
|
if (splitValues.length <= 3 || splitValues.length > 4) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
|
||
|
|
var _splitValues2 = _slicedToArray(splitValues, 4),
|
||
|
|
top = _splitValues2[0],
|
||
|
|
right = _splitValues2[1],
|
||
|
|
bottom = _splitValues2[2],
|
||
|
|
left = _splitValues2[3];
|
||
|
|
|
||
|
|
return [top, left, bottom, right].join(' ');
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Takes a percentage for background position and inverts it.
|
||
|
|
* This was copied and modified from CSSJanus:
|
||
|
|
* https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
|
||
|
|
* @param {String} value - the original value (for example 77%)
|
||
|
|
* @return {String} the result (for example 23%)
|
||
|
|
*/
|
||
|
|
function calculateNewBackgroundPosition(value) {
|
||
|
|
var idx = value.indexOf('.');
|
||
|
|
if (idx === -1) {
|
||
|
|
value = 100 - parseFloat(value) + '%';
|
||
|
|
} else {
|
||
|
|
// Two off, one for the "%" at the end, one for the dot itself
|
||
|
|
var len = value.length - idx - 2;
|
||
|
|
value = 100 - parseFloat(value);
|
||
|
|
value = value.toFixed(len) + '%';
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
|
||
|
|
* @param {Array} array the array of pairs
|
||
|
|
* @return {Object} the {key, value} pair object
|
||
|
|
*/
|
||
|
|
function arrayToObject(array) {
|
||
|
|
return array.reduce(function (obj, _ref2) {
|
||
|
|
var _ref3 = _slicedToArray(_ref2, 2),
|
||
|
|
prop1 = _ref3[0],
|
||
|
|
prop2 = _ref3[1];
|
||
|
|
|
||
|
|
obj[prop1] = prop2;
|
||
|
|
obj[prop2] = prop1;
|
||
|
|
return obj;
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
|
||
|
|
function isNumber(val) {
|
||
|
|
return typeof val === 'number';
|
||
|
|
}
|
||
|
|
|
||
|
|
function isObject(val) {
|
||
|
|
return (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object';
|
||
|
|
}
|
||
|
|
|
||
|
|
function isString(val) {
|
||
|
|
return typeof val === 'string';
|
||
|
|
}
|
||
|
|
|
||
|
|
function includes(inclusive, inclusee) {
|
||
|
|
return inclusive.indexOf(inclusee) !== -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 87 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(88));
|
||
|
|
__export(__webpack_require__(89));
|
||
|
|
__export(__webpack_require__(94));
|
||
|
|
__export(__webpack_require__(96));
|
||
|
|
__export(__webpack_require__(98));
|
||
|
|
__export(__webpack_require__(90));
|
||
|
|
__export(__webpack_require__(99));
|
||
|
|
__export(__webpack_require__(100));
|
||
|
|
__export(__webpack_require__(101));
|
||
|
|
__export(__webpack_require__(102));
|
||
|
|
__export(__webpack_require__(103));
|
||
|
|
__export(__webpack_require__(104));
|
||
|
|
__export(__webpack_require__(92));
|
||
|
|
__export(__webpack_require__(105));
|
||
|
|
__export(__webpack_require__(106));
|
||
|
|
__export(__webpack_require__(107));
|
||
|
|
__export(__webpack_require__(108));
|
||
|
|
__export(__webpack_require__(109));
|
||
|
|
__export(__webpack_require__(97));
|
||
|
|
__export(__webpack_require__(110));
|
||
|
|
__export(__webpack_require__(111));
|
||
|
|
__export(__webpack_require__(112));
|
||
|
|
__export(__webpack_require__(113));
|
||
|
|
__export(__webpack_require__(91));
|
||
|
|
__export(__webpack_require__(114));
|
||
|
|
__export(__webpack_require__(95));
|
||
|
|
__export(__webpack_require__(115));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 88 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bugs often appear in async code when stuff gets disposed, but async operations don't get canceled.
|
||
|
|
* This Async helper class solves these issues by tying async code to the lifetime of a disposable object.
|
||
|
|
*
|
||
|
|
* Usage: Anything class extending from BaseModel can access this helper via this.async. Otherwise create a
|
||
|
|
* new instance of the class and remember to call dispose() during your code's dispose handler.
|
||
|
|
*/
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Async = (function () {
|
||
|
|
function Async(parent, onError) {
|
||
|
|
this._timeoutIds = null;
|
||
|
|
this._immediateIds = null;
|
||
|
|
this._intervalIds = null;
|
||
|
|
this._animationFrameIds = null;
|
||
|
|
this._isDisposed = false;
|
||
|
|
this._parent = parent || null;
|
||
|
|
this._onErrorHandler = onError;
|
||
|
|
this._noop = function () { };
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Dispose function, clears all async operations.
|
||
|
|
*/
|
||
|
|
Async.prototype.dispose = function () {
|
||
|
|
var id;
|
||
|
|
this._isDisposed = true;
|
||
|
|
this._parent = null;
|
||
|
|
// Clear timeouts.
|
||
|
|
if (this._timeoutIds) {
|
||
|
|
for (id in this._timeoutIds) {
|
||
|
|
if (this._timeoutIds.hasOwnProperty(id)) {
|
||
|
|
this.clearTimeout(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._timeoutIds = null;
|
||
|
|
}
|
||
|
|
// Clear immediates.
|
||
|
|
if (this._immediateIds) {
|
||
|
|
for (id in this._immediateIds) {
|
||
|
|
if (this._immediateIds.hasOwnProperty(id)) {
|
||
|
|
this.clearImmediate(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._immediateIds = null;
|
||
|
|
}
|
||
|
|
// Clear intervals.
|
||
|
|
if (this._intervalIds) {
|
||
|
|
for (id in this._intervalIds) {
|
||
|
|
if (this._intervalIds.hasOwnProperty(id)) {
|
||
|
|
this.clearInterval(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._intervalIds = null;
|
||
|
|
}
|
||
|
|
// Clear animation frames.
|
||
|
|
if (this._animationFrameIds) {
|
||
|
|
for (id in this._animationFrameIds) {
|
||
|
|
if (this._animationFrameIds.hasOwnProperty(id)) {
|
||
|
|
this.cancelAnimationFrame(id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._animationFrameIds = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* SetTimeout override, which will auto cancel the timeout during dispose.
|
||
|
|
* @param callback - Callback to execute.
|
||
|
|
* @param duration - Duration in milliseconds.
|
||
|
|
* @returns The setTimeout id.
|
||
|
|
*/
|
||
|
|
Async.prototype.setTimeout = function (callback, duration) {
|
||
|
|
var _this = this;
|
||
|
|
var timeoutId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._timeoutIds) {
|
||
|
|
this._timeoutIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
timeoutId = setTimeout(function () {
|
||
|
|
// Time to execute the timeout, enqueue it as a foreground task to be executed.
|
||
|
|
try {
|
||
|
|
// Now delete the record and call the callback.
|
||
|
|
delete _this._timeoutIds[timeoutId];
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
if (_this._onErrorHandler) {
|
||
|
|
_this._onErrorHandler(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, duration);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._timeoutIds[timeoutId] = true;
|
||
|
|
}
|
||
|
|
return timeoutId;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Clears the timeout.
|
||
|
|
* @param id - Id to cancel.
|
||
|
|
*/
|
||
|
|
Async.prototype.clearTimeout = function (id) {
|
||
|
|
if (this._timeoutIds && this._timeoutIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
clearTimeout(id);
|
||
|
|
delete this._timeoutIds[id];
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* SetImmediate override, which will auto cancel the immediate during dispose.
|
||
|
|
* @param callback - Callback to execute.
|
||
|
|
* @returns The setTimeout id.
|
||
|
|
*/
|
||
|
|
Async.prototype.setImmediate = function (callback) {
|
||
|
|
var _this = this;
|
||
|
|
var immediateId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._immediateIds) {
|
||
|
|
this._immediateIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
var setImmediateCallback = function () {
|
||
|
|
// Time to execute the timeout, enqueue it as a foreground task to be executed.
|
||
|
|
try {
|
||
|
|
// Now delete the record and call the callback.
|
||
|
|
delete _this._immediateIds[immediateId];
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
_this._logError(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
immediateId = window.setImmediate ? window.setImmediate(setImmediateCallback) : window.setTimeout(setImmediateCallback, 0);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._immediateIds[immediateId] = true;
|
||
|
|
}
|
||
|
|
return immediateId;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Clears the immediate.
|
||
|
|
* @param id - Id to cancel.
|
||
|
|
*/
|
||
|
|
Async.prototype.clearImmediate = function (id) {
|
||
|
|
if (this._immediateIds && this._immediateIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
window.clearImmediate ? window.clearImmediate(id) : window.clearTimeout(id);
|
||
|
|
delete this._immediateIds[id];
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* SetInterval override, which will auto cancel the timeout during dispose.
|
||
|
|
* @param callback - Callback to execute.
|
||
|
|
* @param duration - Duration in milliseconds.
|
||
|
|
* @returns The setTimeout id.
|
||
|
|
*/
|
||
|
|
Async.prototype.setInterval = function (callback, duration) {
|
||
|
|
var _this = this;
|
||
|
|
var intervalId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._intervalIds) {
|
||
|
|
this._intervalIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
intervalId = setInterval(function () {
|
||
|
|
// Time to execute the interval callback, enqueue it as a foreground task to be executed.
|
||
|
|
try {
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
_this._logError(e);
|
||
|
|
}
|
||
|
|
}, duration);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._intervalIds[intervalId] = true;
|
||
|
|
}
|
||
|
|
return intervalId;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Clears the interval.
|
||
|
|
* @param id - Id to cancel.
|
||
|
|
*/
|
||
|
|
Async.prototype.clearInterval = function (id) {
|
||
|
|
if (this._intervalIds && this._intervalIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
clearInterval(id);
|
||
|
|
delete this._intervalIds[id];
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Creates a function that, when executed, will only call the func function at most once per
|
||
|
|
* every wait milliseconds. Provide an options object to indicate that func should be invoked
|
||
|
|
* on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled
|
||
|
|
* function will return the result of the last func call.
|
||
|
|
*
|
||
|
|
* Note: If leading and trailing options are true func will be called on the trailing edge of
|
||
|
|
* the timeout only if the the throttled function is invoked more than once during the wait timeout.
|
||
|
|
*
|
||
|
|
* @param func - The function to throttle.
|
||
|
|
* @param wait - The number of milliseconds to throttle executions to. Defaults to 0.
|
||
|
|
* @param options - The options object.
|
||
|
|
* @returns The new throttled function.
|
||
|
|
*/
|
||
|
|
Async.prototype.throttle = function (func, wait, options) {
|
||
|
|
var _this = this;
|
||
|
|
if (this._isDisposed) {
|
||
|
|
return this._noop;
|
||
|
|
}
|
||
|
|
var waitMS = wait || 0;
|
||
|
|
var leading = true;
|
||
|
|
var trailing = true;
|
||
|
|
var lastExecuteTime = 0;
|
||
|
|
var lastResult;
|
||
|
|
var lastArgs;
|
||
|
|
var timeoutId = null;
|
||
|
|
if (options && typeof (options.leading) === 'boolean') {
|
||
|
|
leading = options.leading;
|
||
|
|
}
|
||
|
|
if (options && typeof (options.trailing) === 'boolean') {
|
||
|
|
trailing = options.trailing;
|
||
|
|
}
|
||
|
|
var callback = function (userCall) {
|
||
|
|
var now = (new Date).getTime();
|
||
|
|
var delta = now - lastExecuteTime;
|
||
|
|
var waitLength = leading ? waitMS - delta : waitMS;
|
||
|
|
if (delta >= waitMS && (!userCall || leading)) {
|
||
|
|
lastExecuteTime = now;
|
||
|
|
if (timeoutId) {
|
||
|
|
_this.clearTimeout(timeoutId);
|
||
|
|
timeoutId = null;
|
||
|
|
}
|
||
|
|
lastResult = func.apply(_this._parent, lastArgs);
|
||
|
|
}
|
||
|
|
else if (timeoutId === null && trailing) {
|
||
|
|
timeoutId = _this.setTimeout(callback, waitLength);
|
||
|
|
}
|
||
|
|
return lastResult;
|
||
|
|
};
|
||
|
|
var resultFunction = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
lastArgs = args;
|
||
|
|
return callback(true);
|
||
|
|
};
|
||
|
|
return resultFunction;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Creates a function that will delay the execution of func until after wait milliseconds have
|
||
|
|
* elapsed since the last time it was invoked. Provide an options object to indicate that func
|
||
|
|
* should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls
|
||
|
|
* to the debounced function will return the result of the last func call.
|
||
|
|
*
|
||
|
|
* Note: If leading and trailing options are true func will be called on the trailing edge of
|
||
|
|
* the timeout only if the the debounced function is invoked more than once during the wait
|
||
|
|
* timeout.
|
||
|
|
*
|
||
|
|
* @param func - The function to debounce.
|
||
|
|
* @param wait - The number of milliseconds to delay.
|
||
|
|
* @param options - The options object.
|
||
|
|
* @returns The new debounced function.
|
||
|
|
*/
|
||
|
|
Async.prototype.debounce = function (func, wait, options) {
|
||
|
|
var _this = this;
|
||
|
|
if (this._isDisposed) {
|
||
|
|
return this._noop;
|
||
|
|
}
|
||
|
|
var waitMS = wait || 0;
|
||
|
|
var leading = false;
|
||
|
|
var trailing = true;
|
||
|
|
var maxWait = null;
|
||
|
|
var lastCallTime = 0;
|
||
|
|
var lastExecuteTime = (new Date).getTime();
|
||
|
|
var lastResult;
|
||
|
|
var lastArgs;
|
||
|
|
var timeoutId = null;
|
||
|
|
if (options && typeof (options.leading) === 'boolean') {
|
||
|
|
leading = options.leading;
|
||
|
|
}
|
||
|
|
if (options && typeof (options.trailing) === 'boolean') {
|
||
|
|
trailing = options.trailing;
|
||
|
|
}
|
||
|
|
if (options && typeof (options.maxWait) === 'number' && !isNaN(options.maxWait)) {
|
||
|
|
maxWait = options.maxWait;
|
||
|
|
}
|
||
|
|
var callback = function (userCall) {
|
||
|
|
var now = (new Date).getTime();
|
||
|
|
var executeImmediately = false;
|
||
|
|
if (userCall) {
|
||
|
|
if (leading && now - lastCallTime >= waitMS) {
|
||
|
|
executeImmediately = true;
|
||
|
|
}
|
||
|
|
lastCallTime = now;
|
||
|
|
}
|
||
|
|
var delta = now - lastCallTime;
|
||
|
|
var waitLength = waitMS - delta;
|
||
|
|
var maxWaitDelta = now - lastExecuteTime;
|
||
|
|
var maxWaitExpired = false;
|
||
|
|
if (maxWait !== null) {
|
||
|
|
// maxWait only matters when there is a pending callback
|
||
|
|
if (maxWaitDelta >= maxWait && timeoutId) {
|
||
|
|
maxWaitExpired = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
waitLength = Math.min(waitLength, maxWait - maxWaitDelta);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (delta >= waitMS || maxWaitExpired || executeImmediately) {
|
||
|
|
if (timeoutId) {
|
||
|
|
_this.clearTimeout(timeoutId);
|
||
|
|
timeoutId = null;
|
||
|
|
}
|
||
|
|
lastExecuteTime = now;
|
||
|
|
lastResult = func.apply(_this._parent, lastArgs);
|
||
|
|
}
|
||
|
|
else if ((timeoutId === null || !userCall) && trailing) {
|
||
|
|
timeoutId = _this.setTimeout(callback, waitLength);
|
||
|
|
}
|
||
|
|
return lastResult;
|
||
|
|
};
|
||
|
|
var resultFunction = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
lastArgs = args;
|
||
|
|
return callback(true);
|
||
|
|
};
|
||
|
|
return resultFunction;
|
||
|
|
};
|
||
|
|
Async.prototype.requestAnimationFrame = function (callback) {
|
||
|
|
var _this = this;
|
||
|
|
var animationFrameId = 0;
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
if (!this._animationFrameIds) {
|
||
|
|
this._animationFrameIds = {};
|
||
|
|
}
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
var animationFrameCallback = function () {
|
||
|
|
try {
|
||
|
|
// Now delete the record and call the callback.
|
||
|
|
delete _this._animationFrameIds[animationFrameId];
|
||
|
|
callback.apply(_this._parent);
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
_this._logError(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
animationFrameId = window.requestAnimationFrame ?
|
||
|
|
window.requestAnimationFrame(animationFrameCallback) :
|
||
|
|
window.setTimeout(animationFrameCallback, 0);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
this._animationFrameIds[animationFrameId] = true;
|
||
|
|
}
|
||
|
|
return animationFrameId;
|
||
|
|
};
|
||
|
|
Async.prototype.cancelAnimationFrame = function (id) {
|
||
|
|
if (this._animationFrameIds && this._animationFrameIds[id]) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
window.cancelAnimationFrame ? window.cancelAnimationFrame(id) : window.clearTimeout(id);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
delete this._animationFrameIds[id];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Async.prototype._logError = function (e) {
|
||
|
|
if (this._onErrorHandler) {
|
||
|
|
this._onErrorHandler(e);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Async;
|
||
|
|
}());
|
||
|
|
exports.Async = Async;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 89 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var EventGroup_1 = __webpack_require__(90);
|
||
|
|
var scroll_1 = __webpack_require__(91);
|
||
|
|
var dom_1 = __webpack_require__(92);
|
||
|
|
var SCROLL_ITERATION_DELAY = 16;
|
||
|
|
var SCROLL_GUTTER_HEIGHT = 100;
|
||
|
|
var MAX_SCROLL_VELOCITY = 15;
|
||
|
|
/**
|
||
|
|
* AutoScroll simply hooks up mouse events given a parent element, and scrolls the container
|
||
|
|
* up/down depending on how close the mouse is to the top/bottom of the container.
|
||
|
|
*
|
||
|
|
* Once you don't want autoscroll any more, just dispose the helper and it will unhook events.
|
||
|
|
*/
|
||
|
|
var AutoScroll = (function () {
|
||
|
|
function AutoScroll(element) {
|
||
|
|
this._events = new EventGroup_1.EventGroup(this);
|
||
|
|
this._scrollableParent = scroll_1.findScrollableParent(element);
|
||
|
|
this._incrementScroll = this._incrementScroll.bind(this);
|
||
|
|
this._scrollRect = dom_1.getRect(this._scrollableParent);
|
||
|
|
if (this._scrollableParent === window) {
|
||
|
|
this._scrollableParent = document.body;
|
||
|
|
}
|
||
|
|
if (this._scrollableParent) {
|
||
|
|
this._events.on(window, 'mousemove', this._onMouseMove, true);
|
||
|
|
this._events.on(window, 'touchmove', this._onTouchMove, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
AutoScroll.prototype.dispose = function () {
|
||
|
|
this._events.dispose();
|
||
|
|
this._stopScroll();
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._onMouseMove = function (ev) {
|
||
|
|
this._computeScrollVelocity(ev.clientY);
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._onTouchMove = function (ev) {
|
||
|
|
if (ev.touches.length > 0) {
|
||
|
|
this._computeScrollVelocity(ev.touches[0].clientY);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._computeScrollVelocity = function (clientY) {
|
||
|
|
var scrollRectTop = this._scrollRect.top;
|
||
|
|
var scrollClientBottom = scrollRectTop + this._scrollRect.height - SCROLL_GUTTER_HEIGHT;
|
||
|
|
if (clientY < (scrollRectTop + SCROLL_GUTTER_HEIGHT)) {
|
||
|
|
this._scrollVelocity = Math.max(-MAX_SCROLL_VELOCITY, -MAX_SCROLL_VELOCITY * ((SCROLL_GUTTER_HEIGHT - (clientY - scrollRectTop)) / SCROLL_GUTTER_HEIGHT));
|
||
|
|
}
|
||
|
|
else if (clientY > scrollClientBottom) {
|
||
|
|
this._scrollVelocity = Math.min(MAX_SCROLL_VELOCITY, MAX_SCROLL_VELOCITY * ((clientY - scrollClientBottom) / SCROLL_GUTTER_HEIGHT));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._scrollVelocity = 0;
|
||
|
|
}
|
||
|
|
if (this._scrollVelocity) {
|
||
|
|
this._startScroll();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._stopScroll();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._startScroll = function () {
|
||
|
|
if (!this._timeoutId) {
|
||
|
|
this._incrementScroll();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._incrementScroll = function () {
|
||
|
|
this._scrollableParent.scrollTop += Math.round(this._scrollVelocity);
|
||
|
|
this._timeoutId = setTimeout(this._incrementScroll, SCROLL_ITERATION_DELAY);
|
||
|
|
};
|
||
|
|
AutoScroll.prototype._stopScroll = function () {
|
||
|
|
if (this._timeoutId) {
|
||
|
|
clearTimeout(this._timeoutId);
|
||
|
|
delete this._timeoutId;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return AutoScroll;
|
||
|
|
}());
|
||
|
|
exports.AutoScroll = AutoScroll;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 90 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/* tslint:disable:no-string-literal */
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/** An instance of EventGroup allows anything with a handle to it to trigger events on it.
|
||
|
|
* If the target is an HTMLElement, the event will be attached to the element and can be
|
||
|
|
* triggered as usual (like clicking for onclick).
|
||
|
|
* The event can be triggered by calling EventGroup.raise() here. If the target is an
|
||
|
|
* HTMLElement, the event gets raised and is handled by the browser. Otherwise, it gets
|
||
|
|
* handled here in EventGroup, and the handler is called in the context of the parent
|
||
|
|
* (which is passed in in the constructor).
|
||
|
|
*/
|
||
|
|
var EventGroup = (function () {
|
||
|
|
/** parent: the context in which events attached to non-HTMLElements are called */
|
||
|
|
function EventGroup(parent) {
|
||
|
|
this._id = EventGroup._uniqueId++;
|
||
|
|
this._parent = parent;
|
||
|
|
this._eventRecords = [];
|
||
|
|
}
|
||
|
|
/** For IE8, bubbleEvent is ignored here and must be dealt with by the handler.
|
||
|
|
* Events raised here by default have bubbling set to false and cancelable set to true.
|
||
|
|
* This applies also to built-in events being raised manually here on HTMLElements,
|
||
|
|
* which may lead to unexpected behavior if it differs from the defaults.
|
||
|
|
*/
|
||
|
|
EventGroup.raise = function (target, eventName, eventArgs, bubbleEvent) {
|
||
|
|
var retVal;
|
||
|
|
if (EventGroup._isElement(target)) {
|
||
|
|
if (document.createEvent) {
|
||
|
|
var ev = document.createEvent('HTMLEvents');
|
||
|
|
ev.initEvent(eventName, bubbleEvent, true);
|
||
|
|
ev['args'] = eventArgs;
|
||
|
|
retVal = target.dispatchEvent(ev);
|
||
|
|
}
|
||
|
|
else if (document['createEventObject']) {
|
||
|
|
var evObj = document['createEventObject'](eventArgs);
|
||
|
|
// cannot set cancelBubble on evObj, fireEvent will overwrite it
|
||
|
|
target.fireEvent('on' + eventName, evObj);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
while (target && retVal !== false) {
|
||
|
|
var events = target.__events__;
|
||
|
|
var eventRecords = events ? events[eventName] : null;
|
||
|
|
for (var id in eventRecords) {
|
||
|
|
if (eventRecords.hasOwnProperty(id)) {
|
||
|
|
var eventRecordList = eventRecords[id];
|
||
|
|
for (var listIndex = 0; retVal !== false && listIndex < eventRecordList.length; listIndex++) {
|
||
|
|
var record = eventRecordList[listIndex];
|
||
|
|
if (record.objectCallback) {
|
||
|
|
retVal = record.objectCallback.call(record.parent, eventArgs);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// If the target has a parent, bubble the event up.
|
||
|
|
target = bubbleEvent ? target.parent : null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return retVal;
|
||
|
|
};
|
||
|
|
EventGroup.isObserved = function (target, eventName) {
|
||
|
|
var events = target && target.__events__;
|
||
|
|
return !!events && !!events[eventName];
|
||
|
|
};
|
||
|
|
/** Check to see if the target has declared support of the given event. */
|
||
|
|
EventGroup.isDeclared = function (target, eventName) {
|
||
|
|
var declaredEvents = target && target.__declaredEvents;
|
||
|
|
return !!declaredEvents && !!declaredEvents[eventName];
|
||
|
|
};
|
||
|
|
EventGroup.stopPropagation = function (event) {
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
event.cancelBubble = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EventGroup._isElement = function (target) {
|
||
|
|
return !!target && (target.addEventListener || target instanceof HTMLElement);
|
||
|
|
};
|
||
|
|
EventGroup.prototype.dispose = function () {
|
||
|
|
if (!this._isDisposed) {
|
||
|
|
this._isDisposed = true;
|
||
|
|
this.off();
|
||
|
|
this._parent = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** On the target, attach a set of events, where the events object is a name to function mapping. */
|
||
|
|
EventGroup.prototype.onAll = function (target, events, useCapture) {
|
||
|
|
for (var eventName in events) {
|
||
|
|
if (events.hasOwnProperty(eventName)) {
|
||
|
|
this.on(target, eventName, events[eventName], useCapture);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** On the target, attach an event whose handler will be called in the context of the parent
|
||
|
|
* of this instance of EventGroup.
|
||
|
|
*/
|
||
|
|
EventGroup.prototype.on = function (target, eventName, callback, useCapture) {
|
||
|
|
var _this = this;
|
||
|
|
if (eventName.indexOf(',') > -1) {
|
||
|
|
var events = eventName.split(/[ ,]+/);
|
||
|
|
for (var i = 0; i < events.length; i++) {
|
||
|
|
this.on(target, events[i], callback, useCapture);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var parent_1 = this._parent;
|
||
|
|
var eventRecord = {
|
||
|
|
target: target,
|
||
|
|
eventName: eventName,
|
||
|
|
parent: parent_1,
|
||
|
|
callback: callback,
|
||
|
|
objectCallback: null,
|
||
|
|
elementCallback: null,
|
||
|
|
useCapture: useCapture
|
||
|
|
};
|
||
|
|
// Initialize and wire up the record on the target, so that it can call the callback if the event fires.
|
||
|
|
var events = (target.__events__ = target.__events__ || {});
|
||
|
|
events[eventName] = events[eventName] || {
|
||
|
|
count: 0
|
||
|
|
};
|
||
|
|
events[eventName][this._id] = events[eventName][this._id] || [];
|
||
|
|
events[eventName][this._id].push(eventRecord);
|
||
|
|
events[eventName].count++;
|
||
|
|
if (EventGroup._isElement(target)) {
|
||
|
|
var processElementEvent = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
if (_this._isDisposed) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var result;
|
||
|
|
try {
|
||
|
|
result = callback.apply(parent_1, args);
|
||
|
|
if (result === false && args[0]) {
|
||
|
|
var e = args[0];
|
||
|
|
if (e.preventDefault) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
if (e.stopPropagation) {
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
e.cancelBubble = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
/* ErrorHelper.log(e); */
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
eventRecord.elementCallback = processElementEvent;
|
||
|
|
if (target.addEventListener) {
|
||
|
|
/* tslint:disable:ban-native-functions */
|
||
|
|
target.addEventListener(eventName, processElementEvent, useCapture);
|
||
|
|
/* tslint:enable:ban-native-functions */
|
||
|
|
}
|
||
|
|
else if (target.attachEvent) {
|
||
|
|
target.attachEvent('on' + eventName, processElementEvent);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var processObjectEvent = function () {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
if (_this._isDisposed) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
return callback.apply(parent_1, args);
|
||
|
|
};
|
||
|
|
eventRecord.objectCallback = processObjectEvent;
|
||
|
|
}
|
||
|
|
// Remember the record locally, so that it can be removed.
|
||
|
|
this._eventRecords.push(eventRecord);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
EventGroup.prototype.off = function (target, eventName, callback, useCapture) {
|
||
|
|
for (var i = 0; i < this._eventRecords.length; i++) {
|
||
|
|
var eventRecord = this._eventRecords[i];
|
||
|
|
if ((!target || target === eventRecord.target) &&
|
||
|
|
(!eventName || eventName === eventRecord.eventName) &&
|
||
|
|
(!callback || callback === eventRecord.callback) &&
|
||
|
|
((typeof useCapture !== 'boolean') || useCapture === eventRecord.useCapture)) {
|
||
|
|
var events = eventRecord.target.__events__;
|
||
|
|
var targetArrayLookup = events[eventRecord.eventName];
|
||
|
|
var targetArray = targetArrayLookup ? targetArrayLookup[this._id] : null;
|
||
|
|
// We may have already target's entries, so check for null.
|
||
|
|
if (targetArray) {
|
||
|
|
if (targetArray.length === 1 || !callback) {
|
||
|
|
targetArrayLookup.count -= targetArray.length;
|
||
|
|
delete events[eventRecord.eventName][this._id];
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
targetArrayLookup.count--;
|
||
|
|
targetArray.splice(targetArray.indexOf(eventRecord), 1);
|
||
|
|
}
|
||
|
|
if (!targetArrayLookup.count) {
|
||
|
|
delete events[eventRecord.eventName];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (eventRecord.elementCallback) {
|
||
|
|
if (eventRecord.target.removeEventListener) {
|
||
|
|
eventRecord.target.removeEventListener(eventRecord.eventName, eventRecord.elementCallback, eventRecord.useCapture);
|
||
|
|
}
|
||
|
|
else if (eventRecord.target.detachEvent) {
|
||
|
|
eventRecord.target.detachEvent('on' + eventRecord.eventName, eventRecord.elementCallback);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._eventRecords.splice(i--, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** Trigger the given event in the context of this instance of EventGroup. */
|
||
|
|
EventGroup.prototype.raise = function (eventName, eventArgs, bubbleEvent) {
|
||
|
|
return EventGroup.raise(this._parent, eventName, eventArgs, bubbleEvent);
|
||
|
|
};
|
||
|
|
/** Declare an event as being supported by this instance of EventGroup. */
|
||
|
|
EventGroup.prototype.declare = function (event) {
|
||
|
|
var declaredEvents = this._parent.__declaredEvents = this._parent.__declaredEvents || {};
|
||
|
|
if (typeof event === 'string') {
|
||
|
|
declaredEvents[event] = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (var i = 0; i < event.length; i++) {
|
||
|
|
declaredEvents[event[i]] = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return EventGroup;
|
||
|
|
}());
|
||
|
|
EventGroup._uniqueId = 0;
|
||
|
|
exports.EventGroup = EventGroup;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 91 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var dom_1 = __webpack_require__(92);
|
||
|
|
var scroll_scss_1 = __webpack_require__(93);
|
||
|
|
var _scrollbarWidth;
|
||
|
|
var _bodyScrollDisabledCount = 0;
|
||
|
|
exports.DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable';
|
||
|
|
function disableBodyScroll() {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc && doc.body && !_bodyScrollDisabledCount) {
|
||
|
|
doc.body.classList.add(scroll_scss_1.default.msFabricScrollDisabled);
|
||
|
|
}
|
||
|
|
_bodyScrollDisabledCount++;
|
||
|
|
}
|
||
|
|
exports.disableBodyScroll = disableBodyScroll;
|
||
|
|
function enableBodyScroll() {
|
||
|
|
if (_bodyScrollDisabledCount > 0) {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc && doc.body && _bodyScrollDisabledCount === 1) {
|
||
|
|
doc.body.classList.remove(scroll_scss_1.default.msFabricScrollDisabled);
|
||
|
|
}
|
||
|
|
_bodyScrollDisabledCount--;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.enableBodyScroll = enableBodyScroll;
|
||
|
|
/** Calculates the width of a scrollbar for the browser/os. */
|
||
|
|
function getScrollbarWidth() {
|
||
|
|
if (_scrollbarWidth === undefined) {
|
||
|
|
var scrollDiv = document.createElement('div');
|
||
|
|
scrollDiv.style.setProperty('width', '100px');
|
||
|
|
scrollDiv.style.setProperty('height', '100px');
|
||
|
|
scrollDiv.style.setProperty('overflow', 'scroll');
|
||
|
|
scrollDiv.style.setProperty('position', 'absolute');
|
||
|
|
scrollDiv.style.setProperty('top', '-9999px');
|
||
|
|
document.body.appendChild(scrollDiv);
|
||
|
|
// Get the scrollbar width
|
||
|
|
_scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||
|
|
// Delete the DIV
|
||
|
|
document.body.removeChild(scrollDiv);
|
||
|
|
}
|
||
|
|
return _scrollbarWidth;
|
||
|
|
}
|
||
|
|
exports.getScrollbarWidth = getScrollbarWidth;
|
||
|
|
/**
|
||
|
|
* Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns
|
||
|
|
* document.body.
|
||
|
|
*/
|
||
|
|
function findScrollableParent(startingElement) {
|
||
|
|
var el = startingElement;
|
||
|
|
// First do a quick scan for the scrollable attribute.
|
||
|
|
while (el && el !== document.body) {
|
||
|
|
if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) === 'true') {
|
||
|
|
return el;
|
||
|
|
}
|
||
|
|
el = el.parentElement;
|
||
|
|
}
|
||
|
|
// If we haven't found it, the use the slower method: compute styles to evaluate if overflow is set.
|
||
|
|
el = startingElement;
|
||
|
|
while (el && el !== document.body) {
|
||
|
|
if (el.getAttribute(exports.DATA_IS_SCROLLABLE_ATTRIBUTE) !== 'false') {
|
||
|
|
var styles_1 = getComputedStyle(el);
|
||
|
|
var overflowY = styles_1 ? styles_1.getPropertyValue('overflow-y') : '';
|
||
|
|
if (overflowY && (overflowY === 'scroll' || overflowY === 'auto')) {
|
||
|
|
return el;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
el = el.parentElement;
|
||
|
|
}
|
||
|
|
// Fall back to window scroll.
|
||
|
|
if (!el || el === document.body) {
|
||
|
|
el = window;
|
||
|
|
}
|
||
|
|
return el;
|
||
|
|
}
|
||
|
|
exports.findScrollableParent = findScrollableParent;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 92 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Sets the virtual parent of an element.
|
||
|
|
* Pass `undefined` as the `parent` to clear the virtual parent.
|
||
|
|
*/
|
||
|
|
function setVirtualParent(child, parent) {
|
||
|
|
var virtualChild = child;
|
||
|
|
var virtualParent = parent;
|
||
|
|
if (!virtualChild._virtual) {
|
||
|
|
virtualChild._virtual = {
|
||
|
|
children: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
var oldParent = virtualChild._virtual.parent;
|
||
|
|
if (oldParent && oldParent !== parent) {
|
||
|
|
// Remove the child from its old parent.
|
||
|
|
var index = oldParent._virtual.children.indexOf(virtualChild);
|
||
|
|
if (index > -1) {
|
||
|
|
oldParent._virtual.children.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
virtualChild._virtual.parent = virtualParent || undefined;
|
||
|
|
if (virtualParent) {
|
||
|
|
if (!virtualParent._virtual) {
|
||
|
|
virtualParent._virtual = {
|
||
|
|
children: []
|
||
|
|
};
|
||
|
|
}
|
||
|
|
virtualParent._virtual.children.push(virtualChild);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.setVirtualParent = setVirtualParent;
|
||
|
|
function getVirtualParent(child) {
|
||
|
|
var parent;
|
||
|
|
if (child && isVirtualElement(child)) {
|
||
|
|
parent = child._virtual.parent;
|
||
|
|
}
|
||
|
|
return parent;
|
||
|
|
}
|
||
|
|
exports.getVirtualParent = getVirtualParent;
|
||
|
|
/**
|
||
|
|
* Gets the element which is the parent of a given element.
|
||
|
|
* If `allowVirtuaParents` is `true`, this method prefers the virtual parent over
|
||
|
|
* real DOM parent when present.
|
||
|
|
*/
|
||
|
|
function getParent(child, allowVirtualParents) {
|
||
|
|
if (allowVirtualParents === void 0) { allowVirtualParents = true; }
|
||
|
|
return child && (allowVirtualParents && getVirtualParent(child) ||
|
||
|
|
child.parentNode && child.parentNode);
|
||
|
|
}
|
||
|
|
exports.getParent = getParent;
|
||
|
|
/**
|
||
|
|
* Determines whether or not a parent element contains a given child element.
|
||
|
|
* If `allowVirtualParents` is true, this method may return `true` if the child
|
||
|
|
* has the parent in its virtual element hierarchy.
|
||
|
|
*/
|
||
|
|
function elementContains(parent, child, allowVirtualParents) {
|
||
|
|
if (allowVirtualParents === void 0) { allowVirtualParents = true; }
|
||
|
|
var isContained = false;
|
||
|
|
if (parent && child) {
|
||
|
|
if (allowVirtualParents) {
|
||
|
|
isContained = false;
|
||
|
|
while (child) {
|
||
|
|
var nextParent = getParent(child);
|
||
|
|
if (nextParent === parent) {
|
||
|
|
isContained = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
child = nextParent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (parent.contains) {
|
||
|
|
isContained = parent.contains(child);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return isContained;
|
||
|
|
}
|
||
|
|
exports.elementContains = elementContains;
|
||
|
|
var _isSSR = false;
|
||
|
|
/**
|
||
|
|
* Helper to set ssr mode to simulate no window object returned from getWindow helper.
|
||
|
|
*/
|
||
|
|
function setSSR(isEnabled) {
|
||
|
|
_isSSR = isEnabled;
|
||
|
|
}
|
||
|
|
exports.setSSR = setSSR;
|
||
|
|
/** Helper to get the window object. */
|
||
|
|
function getWindow(rootElement) {
|
||
|
|
if (_isSSR) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return (rootElement &&
|
||
|
|
rootElement.ownerDocument &&
|
||
|
|
rootElement.ownerDocument.defaultView ?
|
||
|
|
rootElement.ownerDocument.defaultView :
|
||
|
|
window);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.getWindow = getWindow;
|
||
|
|
/**
|
||
|
|
* Helper to get the document object.
|
||
|
|
*/
|
||
|
|
function getDocument(rootElement) {
|
||
|
|
if (_isSSR) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return rootElement && rootElement.ownerDocument ? rootElement.ownerDocument : document;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.getDocument = getDocument;
|
||
|
|
/**
|
||
|
|
* Helper to get bounding client rect, works with window.
|
||
|
|
*/
|
||
|
|
function getRect(element) {
|
||
|
|
var rect;
|
||
|
|
if (element) {
|
||
|
|
if (element === window) {
|
||
|
|
rect = {
|
||
|
|
left: 0,
|
||
|
|
top: 0,
|
||
|
|
width: window.innerWidth,
|
||
|
|
height: window.innerHeight,
|
||
|
|
right: window.innerWidth,
|
||
|
|
bottom: window.innerHeight
|
||
|
|
};
|
||
|
|
}
|
||
|
|
else if (element.getBoundingClientRect) {
|
||
|
|
rect = element.getBoundingClientRect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return rect;
|
||
|
|
}
|
||
|
|
exports.getRect = getRect;
|
||
|
|
/**
|
||
|
|
* Determines whether or not an element has the virtual hierarchy extension.
|
||
|
|
*/
|
||
|
|
function isVirtualElement(element) {
|
||
|
|
return element && !!element._virtual;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 93 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
msFabricScrollDisabled: 'msFabricScrollDisabled_23e3aef2',
|
||
|
|
};
|
||
|
|
exports.default = styles;
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".msFabricScrollDisabled_23e3aef2{overflow:hidden!important}" }]);
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 94 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Async_1 = __webpack_require__(88);
|
||
|
|
var EventGroup_1 = __webpack_require__(90);
|
||
|
|
var warn_1 = __webpack_require__(95);
|
||
|
|
var BaseComponent = (function (_super) {
|
||
|
|
__extends(BaseComponent, _super);
|
||
|
|
/**
|
||
|
|
* BaseComponent constructor
|
||
|
|
* @param props - The props for the component.
|
||
|
|
* @param context - The context for the component.
|
||
|
|
*/
|
||
|
|
function BaseComponent(props, context) {
|
||
|
|
var _this = _super.call(this, props, context) || this;
|
||
|
|
_this.props = props;
|
||
|
|
_this._shouldUpdateComponentRef = true;
|
||
|
|
_makeAllSafe(_this, BaseComponent.prototype, [
|
||
|
|
'componentWillMount',
|
||
|
|
'componentDidMount',
|
||
|
|
'shouldComponentUpdate',
|
||
|
|
'componentWillUpdate',
|
||
|
|
'componentWillReceiveProps',
|
||
|
|
'render',
|
||
|
|
'componentDidUpdate',
|
||
|
|
'componentWillUnmount'
|
||
|
|
]);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* When the component will receive props, make sure the componentRef is updated.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype.componentWillReceiveProps = function (newProps, newContext) {
|
||
|
|
this._updateComponentRef(this.props, newProps);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* When the component has mounted, update the componentRef.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype.componentDidMount = function () {
|
||
|
|
this._updateComponentRef(undefined, this.props);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* If we have disposables, dispose them automatically on unmount.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype.componentWillUnmount = function () {
|
||
|
|
if (this.__disposables) {
|
||
|
|
for (var i = 0, len = this._disposables.length; i < len; i++) {
|
||
|
|
var disposable = this.__disposables[i];
|
||
|
|
if (disposable.dispose) {
|
||
|
|
disposable.dispose();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.__disposables = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "className", {
|
||
|
|
/**
|
||
|
|
* Gets the object's class name.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__className) {
|
||
|
|
var funcNameRegex = /function (.{1,})\(/;
|
||
|
|
var results = (funcNameRegex).exec((this).constructor.toString());
|
||
|
|
this.__className = (results && results.length > 1) ? results[1] : '';
|
||
|
|
}
|
||
|
|
return this.__className;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "_disposables", {
|
||
|
|
/**
|
||
|
|
* Allows subclasses to push things to this._disposables to be auto disposed.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__disposables) {
|
||
|
|
this.__disposables = [];
|
||
|
|
}
|
||
|
|
return this.__disposables;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "_async", {
|
||
|
|
/**
|
||
|
|
* Gets the async instance associated with the component, created on demand. The async instance gives
|
||
|
|
* subclasses a way to execute setTimeout/setInterval async calls safely, where the callbacks
|
||
|
|
* will be cleared/ignored automatically after unmounting. The helpers within the async object also
|
||
|
|
* preserve the this pointer so that you don't need to "bind" the callbacks.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__async) {
|
||
|
|
this.__async = new Async_1.Async(this);
|
||
|
|
this._disposables.push(this.__async);
|
||
|
|
}
|
||
|
|
return this.__async;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseComponent.prototype, "_events", {
|
||
|
|
/**
|
||
|
|
* Gets the event group instance assocaited with the component, created on demand. The event instance
|
||
|
|
* provides on/off methods for listening to DOM (or regular javascript object) events. The event callbacks
|
||
|
|
* will be automatically disconnected after unmounting. The helpers within the events object also
|
||
|
|
* preserve the this reference so that you don't need to "bind" the callbacks.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
if (!this.__events) {
|
||
|
|
this.__events = new EventGroup_1.EventGroup(this);
|
||
|
|
this._disposables.push(this.__events);
|
||
|
|
}
|
||
|
|
return this.__events;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* Helper to return a memoized ref resolver function.
|
||
|
|
* @param refName - Name of the member to assign the ref to.
|
||
|
|
* @returns A function instance keyed from the given refname.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._resolveRef = function (refName) {
|
||
|
|
var _this = this;
|
||
|
|
if (!this.__resolves) {
|
||
|
|
this.__resolves = {};
|
||
|
|
}
|
||
|
|
if (!this.__resolves[refName]) {
|
||
|
|
this.__resolves[refName] = function (ref) {
|
||
|
|
return _this[refName] = ref;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return this.__resolves[refName];
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Updates the componentRef (by calling it with "this" when necessary.)
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._updateComponentRef = function (currentProps, newProps) {
|
||
|
|
if (newProps === void 0) { newProps = {}; }
|
||
|
|
if (this._shouldUpdateComponentRef &&
|
||
|
|
((!currentProps && newProps.componentRef) ||
|
||
|
|
(currentProps && currentProps.componentRef !== newProps.componentRef))) {
|
||
|
|
if (currentProps && currentProps.componentRef) {
|
||
|
|
currentProps.componentRef(null);
|
||
|
|
}
|
||
|
|
if (newProps.componentRef) {
|
||
|
|
newProps.componentRef(this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Warns when a deprecated props are being used.
|
||
|
|
*
|
||
|
|
* @param deprecationMap - The map of deprecations, where key is the prop name and the value is
|
||
|
|
* either null or a replacement prop name.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._warnDeprecations = function (deprecationMap) {
|
||
|
|
warn_1.warnDeprecations(this.className, this.props, deprecationMap);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Warns when props which are mutually exclusive with each other are both used.
|
||
|
|
*
|
||
|
|
* @param mutuallyExclusiveMap - The map of mutually exclusive props.
|
||
|
|
*/
|
||
|
|
BaseComponent.prototype._warnMutuallyExclusive = function (mutuallyExclusiveMap) {
|
||
|
|
warn_1.warnMutuallyExclusive(this.className, this.props, mutuallyExclusiveMap);
|
||
|
|
};
|
||
|
|
return BaseComponent;
|
||
|
|
}(React.Component));
|
||
|
|
exports.BaseComponent = BaseComponent;
|
||
|
|
/**
|
||
|
|
* Helper to override a given method with a wrapper method that can try/catch the original, but also
|
||
|
|
* ensures that the BaseComponent's methods are called before the subclass's. This ensures that
|
||
|
|
* componentWillUnmount in the base is called and that things in the _disposables array are disposed.
|
||
|
|
*/
|
||
|
|
function _makeAllSafe(obj, prototype, methodNames) {
|
||
|
|
for (var i = 0, len = methodNames.length; i < len; i++) {
|
||
|
|
_makeSafe(obj, prototype, methodNames[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _makeSafe(obj, prototype, methodName) {
|
||
|
|
var classMethod = obj[methodName];
|
||
|
|
var prototypeMethod = prototype[methodName];
|
||
|
|
if (classMethod || prototypeMethod) {
|
||
|
|
obj[methodName] = function () {
|
||
|
|
var retVal;
|
||
|
|
try {
|
||
|
|
if (prototypeMethod) {
|
||
|
|
retVal = prototypeMethod.apply(this, arguments);
|
||
|
|
}
|
||
|
|
if (classMethod !== prototypeMethod) {
|
||
|
|
retVal = classMethod.apply(this, arguments);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
var errorMessage = "Exception in " + obj.className + "." + methodName + "(): " + (typeof e === 'string' ? e : e.stack);
|
||
|
|
if (BaseComponent.onError) {
|
||
|
|
BaseComponent.onError(errorMessage, e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return retVal;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
BaseComponent.onError = function (errorMessage) {
|
||
|
|
console.error(errorMessage);
|
||
|
|
throw errorMessage;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Simple constant function for returning null, used to render empty templates in JSX.
|
||
|
|
*/
|
||
|
|
function nullRender() { return null; }
|
||
|
|
exports.nullRender = nullRender;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 95 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var _warningCallback = warn;
|
||
|
|
/**
|
||
|
|
* Warns when a deprecated props are being used.
|
||
|
|
*
|
||
|
|
* @param componentName - The name of the component being used.
|
||
|
|
* @param props - The props passed into the component.
|
||
|
|
* @param deprecationMap - The map of deprecations, where key is the prop name and the value is
|
||
|
|
* either null or a replacement prop name.
|
||
|
|
*/
|
||
|
|
function warnDeprecations(componentName, props, deprecationMap) {
|
||
|
|
for (var propName in deprecationMap) {
|
||
|
|
if (props && propName in props) {
|
||
|
|
var deprecationMessage = componentName + " property '" + propName + "' was used but has been deprecated.";
|
||
|
|
var replacementPropName = deprecationMap[propName];
|
||
|
|
if (replacementPropName) {
|
||
|
|
deprecationMessage += " Use '" + replacementPropName + "' instead.";
|
||
|
|
}
|
||
|
|
_warningCallback(deprecationMessage);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.warnDeprecations = warnDeprecations;
|
||
|
|
/**
|
||
|
|
* Warns when two props which are mutually exclusive are both being used.
|
||
|
|
*
|
||
|
|
* @param componentName - The name of the component being used.
|
||
|
|
* @param props - The props passed into the component.
|
||
|
|
* @param exclusiveMap - A map where the key is a parameter, and the value is the other parameter.
|
||
|
|
*/
|
||
|
|
function warnMutuallyExclusive(componentName, props, exclusiveMap) {
|
||
|
|
for (var propName in exclusiveMap) {
|
||
|
|
if (props && propName in props && exclusiveMap[propName] in props) {
|
||
|
|
_warningCallback(componentName + " property '" + propName + "' is mutually exclusive with '" + exclusiveMap[propName] + "'. Use one or the other.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.warnMutuallyExclusive = warnMutuallyExclusive;
|
||
|
|
/**
|
||
|
|
* Sends a warning to console, if the api is present.
|
||
|
|
* @param message - Warning message.
|
||
|
|
*/
|
||
|
|
function warn(message) {
|
||
|
|
if (console && console.warn) {
|
||
|
|
console.warn(message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.warn = warn;
|
||
|
|
/**
|
||
|
|
* Configures the warning callback. Passing in undefined will reset it to use the default
|
||
|
|
* console.warn function.
|
||
|
|
*
|
||
|
|
* @param warningCallback - Callback to override the generated warnings.
|
||
|
|
*/
|
||
|
|
function setWarningCallback(warningCallback) {
|
||
|
|
_warningCallback = warningCallback === undefined ? warn : warningCallback;
|
||
|
|
}
|
||
|
|
exports.setWarningCallback = setWarningCallback;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 96 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var PropTypes = __webpack_require__(22);
|
||
|
|
var BaseComponent_1 = __webpack_require__(94);
|
||
|
|
var object_1 = __webpack_require__(97);
|
||
|
|
/**
|
||
|
|
* The Customizer component allows for default props to be mixed into components which
|
||
|
|
* are decorated with the customizable() decorator. This enables injection scenarios like:
|
||
|
|
*
|
||
|
|
* 1. render svg icons instead of the icon font within all buttons
|
||
|
|
* 2. inject a custom theme object into a component
|
||
|
|
*
|
||
|
|
* Props are provided via the settings prop, which should be a json map where the key is
|
||
|
|
* the name of the customizable component, and the value is are the props to pass in.
|
||
|
|
*/
|
||
|
|
var Customizer = (function (_super) {
|
||
|
|
__extends(Customizer, _super);
|
||
|
|
function Customizer(props, context) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = _this._getInjectedProps(props, context);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Customizer.prototype.getChildContext = function () {
|
||
|
|
return this.state;
|
||
|
|
};
|
||
|
|
Customizer.prototype.componentWillReceiveProps = function (newProps, newContext) {
|
||
|
|
this.setState(this._getInjectedProps(newProps, newContext));
|
||
|
|
};
|
||
|
|
Customizer.prototype.render = function () {
|
||
|
|
return React.Children.only(this.props.children);
|
||
|
|
};
|
||
|
|
Customizer.prototype._getInjectedProps = function (props, context) {
|
||
|
|
var _a = props.settings, injectedPropsFromSettings = _a === void 0 ? {} : _a;
|
||
|
|
var _b = context.injectedProps, injectedPropsFromContext = _b === void 0 ? {} : _b;
|
||
|
|
return {
|
||
|
|
injectedProps: object_1.assign({}, injectedPropsFromContext, injectedPropsFromSettings)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
return Customizer;
|
||
|
|
}(BaseComponent_1.BaseComponent));
|
||
|
|
Customizer.contextTypes = {
|
||
|
|
injectedProps: PropTypes.object
|
||
|
|
};
|
||
|
|
Customizer.childContextTypes = Customizer.contextTypes;
|
||
|
|
exports.Customizer = Customizer;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 97 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */(function(process) {"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
// Initialize global window id.
|
||
|
|
var CURRENT_ID_PROPERTY = '__currentId__';
|
||
|
|
var _global = (typeof window !== 'undefined' && window) || process;
|
||
|
|
if (_global[CURRENT_ID_PROPERTY] === undefined) {
|
||
|
|
_global[CURRENT_ID_PROPERTY] = 0;
|
||
|
|
}
|
||
|
|
function checkProperties(a, b) {
|
||
|
|
for (var propName in a) {
|
||
|
|
if (a.hasOwnProperty(propName)) {
|
||
|
|
if (!b.hasOwnProperty(propName) || (b[propName] !== a[propName])) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
// Compare a to b and b to a
|
||
|
|
function shallowCompare(a, b) {
|
||
|
|
return checkProperties(a, b) && checkProperties(b, a);
|
||
|
|
}
|
||
|
|
exports.shallowCompare = shallowCompare;
|
||
|
|
/**
|
||
|
|
* Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more
|
||
|
|
* objects as arguments and they will be merged sequentially into the target. Note that this will
|
||
|
|
* shallow merge; it will not create new cloned values for target members.
|
||
|
|
*
|
||
|
|
* @param target - Target object to merge following object arguments into.
|
||
|
|
* @param args - One or more objects that will be mixed into the target in the order they are provided.
|
||
|
|
* @returns Resulting merged target.
|
||
|
|
*/
|
||
|
|
function assign(target) {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 1; _i < arguments.length; _i++) {
|
||
|
|
args[_i - 1] = arguments[_i];
|
||
|
|
}
|
||
|
|
return filteredAssign.apply(this, [null, target].concat(args));
|
||
|
|
}
|
||
|
|
exports.assign = assign;
|
||
|
|
/**
|
||
|
|
* Makes a resulting merge of a bunch of objects, but allows a filter function to be passed in to filter
|
||
|
|
* the resulting merges. This allows for scenarios where you want to merge "everything except that one thing"
|
||
|
|
* or "properties that start with data-". Note that this will shallow merge; it will not create new cloned
|
||
|
|
* values for target members.
|
||
|
|
*
|
||
|
|
* @param isAllowed - Callback to determine if the given propName is allowed in the result.
|
||
|
|
* @param target - Target object to merge following object arguments into.
|
||
|
|
* @param args - One or more objects that will be mixed into the target in the order they are provided.
|
||
|
|
* @returns Resulting merged target.
|
||
|
|
*/
|
||
|
|
function filteredAssign(isAllowed, target) {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 2; _i < arguments.length; _i++) {
|
||
|
|
args[_i - 2] = arguments[_i];
|
||
|
|
}
|
||
|
|
target = target || {};
|
||
|
|
for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
|
||
|
|
var sourceObject = args_1[_a];
|
||
|
|
if (sourceObject) {
|
||
|
|
for (var propName in sourceObject) {
|
||
|
|
if (sourceObject.hasOwnProperty(propName) &&
|
||
|
|
!isAllowed || isAllowed(propName)) {
|
||
|
|
target[propName] = sourceObject[propName];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return target;
|
||
|
|
}
|
||
|
|
exports.filteredAssign = filteredAssign;
|
||
|
|
/** Generates a unique id in the global scope (this spans across duplicate copies of the same library.) */
|
||
|
|
function getId(prefix) {
|
||
|
|
var index = _global[CURRENT_ID_PROPERTY]++;
|
||
|
|
return (prefix || '') + index;
|
||
|
|
}
|
||
|
|
exports.getId = getId;
|
||
|
|
|
||
|
|
|
||
|
|
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(23)))
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 98 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/**
|
||
|
|
* Utility component for delaying the render of a child component after a given delay. This component
|
||
|
|
* requires a single child component; don't pass in many components. Wrap multiple components in a DIV
|
||
|
|
* if necessary.
|
||
|
|
*/
|
||
|
|
var DelayedRender = (function (_super) {
|
||
|
|
__extends(DelayedRender, _super);
|
||
|
|
function DelayedRender(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isRendered: false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DelayedRender.prototype.componentDidMount = function () {
|
||
|
|
var _this = this;
|
||
|
|
var delay = this.props.delay;
|
||
|
|
this._timeoutId = setTimeout(function () {
|
||
|
|
_this.setState({
|
||
|
|
isRendered: true
|
||
|
|
});
|
||
|
|
}, delay);
|
||
|
|
};
|
||
|
|
DelayedRender.prototype.componentWillUnmount = function () {
|
||
|
|
clearTimeout(this._timeoutId);
|
||
|
|
};
|
||
|
|
DelayedRender.prototype.render = function () {
|
||
|
|
return this.state.isRendered ? React.Children.only(this.props.children) : null;
|
||
|
|
};
|
||
|
|
return DelayedRender;
|
||
|
|
}(React.Component));
|
||
|
|
DelayedRender.defaultProps = {
|
||
|
|
delay: 0
|
||
|
|
};
|
||
|
|
exports.DelayedRender = DelayedRender;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 99 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var KeyCodes;
|
||
|
|
(function (KeyCodes) {
|
||
|
|
KeyCodes[KeyCodes["a"] = 65] = "a";
|
||
|
|
KeyCodes[KeyCodes["backspace"] = 8] = "backspace";
|
||
|
|
KeyCodes[KeyCodes["comma"] = 188] = "comma";
|
||
|
|
KeyCodes[KeyCodes["del"] = 46] = "del";
|
||
|
|
KeyCodes[KeyCodes["down"] = 40] = "down";
|
||
|
|
KeyCodes[KeyCodes["end"] = 35] = "end";
|
||
|
|
KeyCodes[KeyCodes["enter"] = 13] = "enter";
|
||
|
|
KeyCodes[KeyCodes["escape"] = 27] = "escape";
|
||
|
|
KeyCodes[KeyCodes["home"] = 36] = "home";
|
||
|
|
KeyCodes[KeyCodes["left"] = 37] = "left";
|
||
|
|
KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
|
||
|
|
KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
|
||
|
|
KeyCodes[KeyCodes["right"] = 39] = "right";
|
||
|
|
KeyCodes[KeyCodes["semicolon"] = 186] = "semicolon";
|
||
|
|
KeyCodes[KeyCodes["space"] = 32] = "space";
|
||
|
|
KeyCodes[KeyCodes["tab"] = 9] = "tab";
|
||
|
|
KeyCodes[KeyCodes["up"] = 38] = "up";
|
||
|
|
})(KeyCodes = exports.KeyCodes || (exports.KeyCodes = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 100 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Rectangle = (function () {
|
||
|
|
function Rectangle(left, right, top, bottom) {
|
||
|
|
if (left === void 0) { left = 0; }
|
||
|
|
if (right === void 0) { right = 0; }
|
||
|
|
if (top === void 0) { top = 0; }
|
||
|
|
if (bottom === void 0) { bottom = 0; }
|
||
|
|
this.top = top;
|
||
|
|
this.bottom = bottom;
|
||
|
|
this.left = left;
|
||
|
|
this.right = right;
|
||
|
|
}
|
||
|
|
Object.defineProperty(Rectangle.prototype, "width", {
|
||
|
|
/**
|
||
|
|
* Calculated automatically by subtracting the right from left
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
return this.right - this.left;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(Rectangle.prototype, "height", {
|
||
|
|
/**
|
||
|
|
* Calculated automatically by subtracting the bottom from top.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
return this.bottom - this.top;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* Tests if another rect is approximately equal to this rect (within 4 decimal places.)
|
||
|
|
*/
|
||
|
|
Rectangle.prototype.equals = function (rect) {
|
||
|
|
// I'm fixing it to 4 decimal places because it allows enough precision and will handle cases when something should be rounded,
|
||
|
|
// like .999999 should round to 1.
|
||
|
|
return (parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) &&
|
||
|
|
parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) &&
|
||
|
|
parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) &&
|
||
|
|
parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4)));
|
||
|
|
};
|
||
|
|
return Rectangle;
|
||
|
|
}());
|
||
|
|
exports.Rectangle = Rectangle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 101 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
function findIndex(array, cb) {
|
||
|
|
var index = -1;
|
||
|
|
for (var i = 0; array && i < array.length; i++) {
|
||
|
|
if (cb(array[i], i)) {
|
||
|
|
index = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return index;
|
||
|
|
}
|
||
|
|
exports.findIndex = findIndex;
|
||
|
|
function createArray(size, getItem) {
|
||
|
|
var array = [];
|
||
|
|
for (var i = 0; i < size; i++) {
|
||
|
|
array.push(getItem(i));
|
||
|
|
}
|
||
|
|
return array;
|
||
|
|
}
|
||
|
|
exports.createArray = createArray;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 102 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Autobind is a utility for binding methods in a class. This simplifies tagging methods as being "bound" to the this pointer
|
||
|
|
* so that they can be used in scenarios that simply require a function callback.
|
||
|
|
*/
|
||
|
|
function autobind(target, key, descriptor) {
|
||
|
|
var fn = descriptor.value;
|
||
|
|
var defining = false;
|
||
|
|
return {
|
||
|
|
configurable: true,
|
||
|
|
get: function () {
|
||
|
|
if (defining || this === fn.prototype || this.hasOwnProperty(key)) {
|
||
|
|
return fn;
|
||
|
|
}
|
||
|
|
// Bind method only once, and update the property to return the bound value from now on
|
||
|
|
var fnBound = fn.bind(this);
|
||
|
|
defining = true;
|
||
|
|
Object.defineProperty(this, key, {
|
||
|
|
configurable: true,
|
||
|
|
writable: true,
|
||
|
|
enumerable: true,
|
||
|
|
value: fnBound
|
||
|
|
});
|
||
|
|
defining = false;
|
||
|
|
return fnBound;
|
||
|
|
},
|
||
|
|
set: function (newValue) {
|
||
|
|
Object.defineProperty(this, key, {
|
||
|
|
configurable: true,
|
||
|
|
writable: true,
|
||
|
|
enumerable: true,
|
||
|
|
value: newValue
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.autobind = autobind;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 103 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
function css() {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
var classes = [];
|
||
|
|
for (var _a = 0, args_1 = args; _a < args_1.length; _a++) {
|
||
|
|
var arg = args_1[_a];
|
||
|
|
if (arg) {
|
||
|
|
if (typeof arg === 'string') {
|
||
|
|
classes.push(arg);
|
||
|
|
}
|
||
|
|
else if ((arg.hasOwnProperty('toString') && typeof (arg.toString) === 'function')) {
|
||
|
|
classes.push(arg.toString());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (var key in arg) {
|
||
|
|
if (arg[key]) {
|
||
|
|
classes.push(key);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return classes.join(' ');
|
||
|
|
}
|
||
|
|
exports.css = css;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 104 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var PropTypes = __webpack_require__(22);
|
||
|
|
function customizable(componentName) {
|
||
|
|
return function customizableFactory(ComposedComponent) {
|
||
|
|
return _a = (function (_super) {
|
||
|
|
__extends(ComponentWithInjectedProps, _super);
|
||
|
|
function ComponentWithInjectedProps() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
ComponentWithInjectedProps.prototype.render = function () {
|
||
|
|
var defaultProps = ((this.context.injectedProps) ?
|
||
|
|
this.context.injectedProps[componentName] :
|
||
|
|
null) || {};
|
||
|
|
return (React.createElement(ComposedComponent, __assign({}, defaultProps, this.props)));
|
||
|
|
};
|
||
|
|
return ComponentWithInjectedProps;
|
||
|
|
}(React.Component)),
|
||
|
|
_a.contextTypes = {
|
||
|
|
injectedProps: PropTypes.object
|
||
|
|
},
|
||
|
|
_a;
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.customizable = customizable;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 105 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
/* tslint:disable:no-string-literal */
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var dom_1 = __webpack_require__(92);
|
||
|
|
var IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
|
||
|
|
var IS_VISIBLE_ATTRIBUTE = 'data-is-visible';
|
||
|
|
var FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';
|
||
|
|
function getFirstFocusable(rootElement, currentElement, includeElementsInFocusZones) {
|
||
|
|
return getNextElement(rootElement, currentElement, true, false, false, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
exports.getFirstFocusable = getFirstFocusable;
|
||
|
|
function getLastFocusable(rootElement, currentElement, includeElementsInFocusZones) {
|
||
|
|
return getPreviousElement(rootElement, currentElement, true, false, true, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
exports.getLastFocusable = getLastFocusable;
|
||
|
|
/**
|
||
|
|
* Attempts to focus the first focusable element that is a child or child's child of the rootElement.
|
||
|
|
* @param rootElement - Element to start the search for a focusable child.
|
||
|
|
* @returns True if focus was set, false if it was not.
|
||
|
|
*/
|
||
|
|
function focusFirstChild(rootElement) {
|
||
|
|
var element = getNextElement(rootElement, rootElement, true, false, false, true);
|
||
|
|
if (element) {
|
||
|
|
element.focus();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
exports.focusFirstChild = focusFirstChild;
|
||
|
|
/** Traverse to find the previous element. */
|
||
|
|
function getPreviousElement(rootElement, currentElement, checkNode, suppressParentTraversal, traverseChildren, includeElementsInFocusZones) {
|
||
|
|
if (!currentElement ||
|
||
|
|
currentElement === rootElement) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var isCurrentElementVisible = isElementVisible(currentElement);
|
||
|
|
// Check its children.
|
||
|
|
if (traverseChildren && (includeElementsInFocusZones || !isElementFocusZone(currentElement)) && isCurrentElementVisible) {
|
||
|
|
var childMatch = getPreviousElement(rootElement, currentElement.lastElementChild, true, true, true, includeElementsInFocusZones);
|
||
|
|
if (childMatch) {
|
||
|
|
return childMatch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Check the current node, if it's not the first traversal.
|
||
|
|
if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) {
|
||
|
|
return currentElement;
|
||
|
|
}
|
||
|
|
// Check its previous sibling.
|
||
|
|
var siblingMatch = getPreviousElement(rootElement, currentElement.previousElementSibling, true, true, true, includeElementsInFocusZones);
|
||
|
|
if (siblingMatch) {
|
||
|
|
return siblingMatch;
|
||
|
|
}
|
||
|
|
// Check its parent.
|
||
|
|
if (!suppressParentTraversal) {
|
||
|
|
return getPreviousElement(rootElement, currentElement.parentElement, true, false, false, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
exports.getPreviousElement = getPreviousElement;
|
||
|
|
/** Traverse to find the next focusable element. */
|
||
|
|
function getNextElement(rootElement, currentElement, checkNode, suppressParentTraversal, suppressChildTraversal, includeElementsInFocusZones) {
|
||
|
|
if (!currentElement ||
|
||
|
|
(currentElement === rootElement && suppressChildTraversal)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var isCurrentElementVisible = isElementVisible(currentElement);
|
||
|
|
// Check the current node, if it's not the first traversal.
|
||
|
|
if (checkNode && isCurrentElementVisible && isElementTabbable(currentElement)) {
|
||
|
|
return currentElement;
|
||
|
|
}
|
||
|
|
// Check its children.
|
||
|
|
if (!suppressChildTraversal && isCurrentElementVisible && (includeElementsInFocusZones || !isElementFocusZone(currentElement))) {
|
||
|
|
var childMatch = getNextElement(rootElement, currentElement.firstElementChild, true, true, false, includeElementsInFocusZones);
|
||
|
|
if (childMatch) {
|
||
|
|
return childMatch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (currentElement === rootElement) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
// Check its sibling.
|
||
|
|
var siblingMatch = getNextElement(rootElement, currentElement.nextElementSibling, true, true, false, includeElementsInFocusZones);
|
||
|
|
if (siblingMatch) {
|
||
|
|
return siblingMatch;
|
||
|
|
}
|
||
|
|
if (!suppressParentTraversal) {
|
||
|
|
return getNextElement(rootElement, currentElement.parentElement, false, false, true, includeElementsInFocusZones);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
exports.getNextElement = getNextElement;
|
||
|
|
function isElementVisible(element) {
|
||
|
|
// If the element is not valid, return false.
|
||
|
|
if (!element || !element.getAttribute) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
var visibilityAttribute = element.getAttribute(IS_VISIBLE_ATTRIBUTE);
|
||
|
|
// If the element is explicitly marked with the visibility attribute, return that value as boolean.
|
||
|
|
if (visibilityAttribute !== null && visibilityAttribute !== undefined) {
|
||
|
|
return visibilityAttribute === 'true';
|
||
|
|
}
|
||
|
|
// Fallback to other methods of determining actual visibility.
|
||
|
|
return (element.offsetHeight !== 0 ||
|
||
|
|
element.offsetParent !== null ||
|
||
|
|
element.isVisible === true); // used as a workaround for testing.
|
||
|
|
}
|
||
|
|
exports.isElementVisible = isElementVisible;
|
||
|
|
function isElementTabbable(element) {
|
||
|
|
// If this element is null or is disabled, it is not considered tabbable.
|
||
|
|
if (!element || element.disabled) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// In IE, element.tabIndex is default to 0. We need to use element get tabIndex attribute to get the correct tabIndex
|
||
|
|
var tabIndex = -1;
|
||
|
|
if (element && element.getAttribute) {
|
||
|
|
tabIndex = parseInt(element.getAttribute('tabIndex'), 10);
|
||
|
|
}
|
||
|
|
var isFocusableAttribute = element.getAttribute ? element.getAttribute(IS_FOCUSABLE_ATTRIBUTE) : null;
|
||
|
|
return (!!element && isFocusableAttribute !== 'false' &&
|
||
|
|
(element.tagName === 'A' ||
|
||
|
|
(element.tagName === 'BUTTON') ||
|
||
|
|
(element.tagName === 'INPUT') ||
|
||
|
|
(element.tagName === 'TEXTAREA') ||
|
||
|
|
(tabIndex >= 0) ||
|
||
|
|
(element.getAttribute && (isFocusableAttribute === 'true' ||
|
||
|
|
element.getAttribute('role') === 'button'))));
|
||
|
|
}
|
||
|
|
exports.isElementTabbable = isElementTabbable;
|
||
|
|
function isElementFocusZone(element) {
|
||
|
|
return element && !!element.getAttribute(FOCUSZONE_ID_ATTRIBUTE);
|
||
|
|
}
|
||
|
|
exports.isElementFocusZone = isElementFocusZone;
|
||
|
|
function doesElementContainFocus(element) {
|
||
|
|
var currentActiveElement = dom_1.getDocument(element).activeElement;
|
||
|
|
if (currentActiveElement && dom_1.elementContains(element, currentActiveElement)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
exports.doesElementContainFocus = doesElementContainFocus;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 106 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var REACT_LIFECYCLE_EXCLUSIONS = [
|
||
|
|
'setState',
|
||
|
|
'render',
|
||
|
|
'componentWillMount',
|
||
|
|
'componentDidMount',
|
||
|
|
'componentWillReceiveProps',
|
||
|
|
'shouldComponentUpdate',
|
||
|
|
'componentWillUpdate',
|
||
|
|
'componentDidUpdate',
|
||
|
|
'componentWillUnmount'
|
||
|
|
];
|
||
|
|
/**
|
||
|
|
* Allows you to hoist methods, except those in an exclusion set from a source object into a destination object.
|
||
|
|
*
|
||
|
|
* @param destination - The instance of the object to hoist the methods onto.
|
||
|
|
* @param source - The instance of the object where the methods are hoisted from.
|
||
|
|
* @param exclusions - (Optional) What methods to exclude from being hoisted.
|
||
|
|
* @returns An array of names of methods that were hoisted.
|
||
|
|
*/
|
||
|
|
function hoistMethods(destination, source, exclusions) {
|
||
|
|
if (exclusions === void 0) { exclusions = REACT_LIFECYCLE_EXCLUSIONS; }
|
||
|
|
var hoisted = [];
|
||
|
|
var _loop_1 = function (methodName) {
|
||
|
|
if (typeof source[methodName] === 'function' &&
|
||
|
|
destination[methodName] === undefined &&
|
||
|
|
(!exclusions || exclusions.indexOf(methodName) === -1)) {
|
||
|
|
hoisted.push(methodName);
|
||
|
|
/* tslint:disable:no-function-expression */
|
||
|
|
destination[methodName] = function () { source[methodName].apply(source, arguments); };
|
||
|
|
/* tslint:enable */
|
||
|
|
}
|
||
|
|
};
|
||
|
|
for (var methodName in source) {
|
||
|
|
_loop_1(methodName);
|
||
|
|
}
|
||
|
|
return hoisted;
|
||
|
|
}
|
||
|
|
exports.hoistMethods = hoistMethods;
|
||
|
|
/**
|
||
|
|
* Provides a method for convenience to unhoist hoisted methods.
|
||
|
|
*
|
||
|
|
* @param source - The source object upon which methods were hoisted.
|
||
|
|
* @param methodNames - An array of method names to unhoist.
|
||
|
|
*/
|
||
|
|
function unhoistMethods(source, methodNames) {
|
||
|
|
methodNames
|
||
|
|
.forEach(function (methodName) { return delete source[methodName]; });
|
||
|
|
}
|
||
|
|
exports.unhoistMethods = unhoistMethods;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 107 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Regular expression matching characters to ignore when calculating the initials.
|
||
|
|
* The first part matches characters within parenthesis, including the parenthesis.
|
||
|
|
* The second part matches special ASCII characters except space, plus some unicode special characters.
|
||
|
|
*/
|
||
|
|
var UNWANTED_CHARS_REGEX = /\([^)]*\)|[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
|
||
|
|
/** Regular expression matching one or more spaces. */
|
||
|
|
var MULTIPLE_WHITESPACES_REGEX = /\s+/g;
|
||
|
|
/**
|
||
|
|
* Regular expression matching languages for which we currently don't support initials.
|
||
|
|
* Arabic: Arabic, Arabic Supplement, Arabic Extended-A.
|
||
|
|
* Korean: Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
|
||
|
|
* Japanese: Hiragana, Katakana.
|
||
|
|
* CJK: CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs, CJK Unified Ideographs Extension B
|
||
|
|
*/
|
||
|
|
/* tslint:disable:max-line-length */
|
||
|
|
var UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
|
||
|
|
/* tslint:enable:max-line-length */
|
||
|
|
function getInitialsLatin(displayName, isRtl) {
|
||
|
|
var initials = '';
|
||
|
|
var splits = displayName.split(' ');
|
||
|
|
if (splits.length === 2) {
|
||
|
|
initials += splits[0].charAt(0).toUpperCase();
|
||
|
|
initials += splits[1].charAt(0).toUpperCase();
|
||
|
|
}
|
||
|
|
else if (splits.length === 3) {
|
||
|
|
initials += splits[0].charAt(0).toUpperCase();
|
||
|
|
initials += splits[2].charAt(0).toUpperCase();
|
||
|
|
}
|
||
|
|
else if (splits.length !== 0) {
|
||
|
|
initials += splits[0].charAt(0).toUpperCase();
|
||
|
|
}
|
||
|
|
if (isRtl && initials.length > 1) {
|
||
|
|
return initials.charAt(1) + initials.charAt(0);
|
||
|
|
}
|
||
|
|
return initials;
|
||
|
|
}
|
||
|
|
function cleanupDisplayName(displayName) {
|
||
|
|
displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
|
||
|
|
displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
|
||
|
|
displayName = displayName.trim();
|
||
|
|
return displayName;
|
||
|
|
}
|
||
|
|
/** Get (up to 2 characters) initials based on display name of the persona. */
|
||
|
|
function getInitials(displayName, isRtl) {
|
||
|
|
if (displayName == null) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
displayName = cleanupDisplayName(displayName);
|
||
|
|
if (UNSUPPORTED_TEXT_REGEX.test(displayName)) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
return getInitialsLatin(displayName, isRtl);
|
||
|
|
}
|
||
|
|
exports.getInitials = getInitials;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 108 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var dom_1 = __webpack_require__(92);
|
||
|
|
// Default to undefined so that we initialize on first read.
|
||
|
|
var _language;
|
||
|
|
/**
|
||
|
|
* Gets the rtl state of the page (returns true if in rtl.)
|
||
|
|
*/
|
||
|
|
function getLanguage() {
|
||
|
|
if (_language === undefined) {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage']) {
|
||
|
|
var savedLanguage = localStorage.getItem('language');
|
||
|
|
if (savedLanguage !== null) {
|
||
|
|
_language = savedLanguage;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (_language === undefined && doc) {
|
||
|
|
_language = doc.documentElement.getAttribute('lang');
|
||
|
|
}
|
||
|
|
if (_language === undefined) {
|
||
|
|
setLanguage('en', false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _language;
|
||
|
|
}
|
||
|
|
exports.getLanguage = getLanguage;
|
||
|
|
/**
|
||
|
|
* Sets the rtl state of the page (by adjusting the dir attribute of the html element.)
|
||
|
|
*/
|
||
|
|
function setLanguage(language, avoidPersisting) {
|
||
|
|
if (avoidPersisting === void 0) { avoidPersisting = false; }
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc) {
|
||
|
|
doc.documentElement.setAttribute('lang', language);
|
||
|
|
}
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage'] && !avoidPersisting) {
|
||
|
|
localStorage.setItem('language', language);
|
||
|
|
}
|
||
|
|
_language = language;
|
||
|
|
}
|
||
|
|
exports.setLanguage = setLanguage;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 109 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
function getDistanceBetweenPoints(point1, point2) {
|
||
|
|
var distance = Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
|
||
|
|
return distance;
|
||
|
|
}
|
||
|
|
exports.getDistanceBetweenPoints = getDistanceBetweenPoints;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 110 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Detects whether an element's content has horizontal overflow
|
||
|
|
*
|
||
|
|
* @param element - Element to check for overflow
|
||
|
|
* @returns True if element's content overflows
|
||
|
|
*/
|
||
|
|
function hasHorizontalOverflow(element) {
|
||
|
|
return element.clientWidth < element.scrollWidth;
|
||
|
|
}
|
||
|
|
exports.hasHorizontalOverflow = hasHorizontalOverflow;
|
||
|
|
/**
|
||
|
|
* Detects whether an element's content has vertical overflow
|
||
|
|
*
|
||
|
|
* @param element - Element to check for overflow
|
||
|
|
* @returns True if element's content overflows
|
||
|
|
*/
|
||
|
|
function hasVerticalOverflow(element) {
|
||
|
|
return element.clientHeight < element.scrollHeight;
|
||
|
|
}
|
||
|
|
exports.hasVerticalOverflow = hasVerticalOverflow;
|
||
|
|
/**
|
||
|
|
* Detects whether an element's content has overflow in any direction
|
||
|
|
*
|
||
|
|
* @param element - Element to check for overflow
|
||
|
|
* @returns True if element's content overflows
|
||
|
|
*/
|
||
|
|
function hasOverflow(element) {
|
||
|
|
return hasHorizontalOverflow(element) || hasVerticalOverflow(element);
|
||
|
|
}
|
||
|
|
exports.hasOverflow = hasOverflow;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 111 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var object_1 = __webpack_require__(97);
|
||
|
|
exports.baseElementEvents = [
|
||
|
|
'onCopy',
|
||
|
|
'onCut',
|
||
|
|
'onPaste',
|
||
|
|
'onCompositionEnd',
|
||
|
|
'onCompositionStart',
|
||
|
|
'onCompositionUpdate',
|
||
|
|
'onFocus',
|
||
|
|
'onFocusCapture',
|
||
|
|
'onBlur',
|
||
|
|
'onBlurCapture',
|
||
|
|
'onChange',
|
||
|
|
'onInput',
|
||
|
|
'onSubmit',
|
||
|
|
'onLoad',
|
||
|
|
'onError',
|
||
|
|
'onKeyDown',
|
||
|
|
'onKeyDownCapture',
|
||
|
|
'onKeyPress',
|
||
|
|
'onKeyUp',
|
||
|
|
'onAbort',
|
||
|
|
'onCanPlay',
|
||
|
|
'onCanPlayThrough',
|
||
|
|
'onDurationChange',
|
||
|
|
'onEmptied',
|
||
|
|
'onEncrypted',
|
||
|
|
'onEnded',
|
||
|
|
'onLoadedData',
|
||
|
|
'onLoadedMetadata',
|
||
|
|
'onLoadStart',
|
||
|
|
'onPause',
|
||
|
|
'onPlay',
|
||
|
|
'onPlaying',
|
||
|
|
'onProgress',
|
||
|
|
'onRateChange',
|
||
|
|
'onSeeked',
|
||
|
|
'onSeeking',
|
||
|
|
'onStalled',
|
||
|
|
'onSuspend',
|
||
|
|
'onTimeUpdate',
|
||
|
|
'onVolumeChange',
|
||
|
|
'onWaiting',
|
||
|
|
'onClick',
|
||
|
|
'onClickCapture',
|
||
|
|
'onContextMenu',
|
||
|
|
'onDoubleClick',
|
||
|
|
'onDrag',
|
||
|
|
'onDragEnd',
|
||
|
|
'onDragEnter',
|
||
|
|
'onDragExit',
|
||
|
|
'onDragLeave',
|
||
|
|
'onDragOver',
|
||
|
|
'onDragStart',
|
||
|
|
'onDrop',
|
||
|
|
'onMouseDown',
|
||
|
|
'onMouseDownCapture',
|
||
|
|
'onMouseEnter',
|
||
|
|
'onMouseLeave',
|
||
|
|
'onMouseMove',
|
||
|
|
'onMouseOut',
|
||
|
|
'onMouseOver',
|
||
|
|
'onMouseUp',
|
||
|
|
'onMouseUpCapture',
|
||
|
|
'onSelect',
|
||
|
|
'onTouchCancel',
|
||
|
|
'onTouchEnd',
|
||
|
|
'onTouchMove',
|
||
|
|
'onTouchStart',
|
||
|
|
'onScroll',
|
||
|
|
'onWheel'
|
||
|
|
];
|
||
|
|
exports.baseElementProperties = [
|
||
|
|
'defaultChecked',
|
||
|
|
'defaultValue',
|
||
|
|
'accept',
|
||
|
|
'acceptCharset',
|
||
|
|
'accessKey',
|
||
|
|
'action',
|
||
|
|
'allowFullScreen',
|
||
|
|
'allowTransparency',
|
||
|
|
'alt',
|
||
|
|
'async',
|
||
|
|
'autoComplete',
|
||
|
|
'autoFocus',
|
||
|
|
'autoPlay',
|
||
|
|
'capture',
|
||
|
|
'cellPadding',
|
||
|
|
'cellSpacing',
|
||
|
|
'charSet',
|
||
|
|
'challenge',
|
||
|
|
'checked',
|
||
|
|
'children',
|
||
|
|
'classID',
|
||
|
|
'className',
|
||
|
|
'cols',
|
||
|
|
'colSpan',
|
||
|
|
'content',
|
||
|
|
'contentEditable',
|
||
|
|
'contextMenu',
|
||
|
|
'controls',
|
||
|
|
'coords',
|
||
|
|
'crossOrigin',
|
||
|
|
'data',
|
||
|
|
'dateTime',
|
||
|
|
'default',
|
||
|
|
'defer',
|
||
|
|
'dir',
|
||
|
|
'download',
|
||
|
|
'draggable',
|
||
|
|
'encType',
|
||
|
|
'form',
|
||
|
|
'formAction',
|
||
|
|
'formEncType',
|
||
|
|
'formMethod',
|
||
|
|
'formNoValidate',
|
||
|
|
'formTarget',
|
||
|
|
'frameBorder',
|
||
|
|
'headers',
|
||
|
|
'height',
|
||
|
|
'hidden',
|
||
|
|
'high',
|
||
|
|
'hrefLang',
|
||
|
|
'htmlFor',
|
||
|
|
'httpEquiv',
|
||
|
|
'icon',
|
||
|
|
'id',
|
||
|
|
'inputMode',
|
||
|
|
'integrity',
|
||
|
|
'is',
|
||
|
|
'keyParams',
|
||
|
|
'keyType',
|
||
|
|
'kind',
|
||
|
|
'lang',
|
||
|
|
'list',
|
||
|
|
'loop',
|
||
|
|
'low',
|
||
|
|
'manifest',
|
||
|
|
'marginHeight',
|
||
|
|
'marginWidth',
|
||
|
|
'max',
|
||
|
|
'maxLength',
|
||
|
|
'media',
|
||
|
|
'mediaGroup',
|
||
|
|
'method',
|
||
|
|
'min',
|
||
|
|
'minLength',
|
||
|
|
'multiple',
|
||
|
|
'muted',
|
||
|
|
'name',
|
||
|
|
'noValidate',
|
||
|
|
'open',
|
||
|
|
'optimum',
|
||
|
|
'pattern',
|
||
|
|
'placeholder',
|
||
|
|
'poster',
|
||
|
|
'preload',
|
||
|
|
'radioGroup',
|
||
|
|
'readOnly',
|
||
|
|
'rel',
|
||
|
|
'required',
|
||
|
|
'role',
|
||
|
|
'rows',
|
||
|
|
'rowSpan',
|
||
|
|
'sandbox',
|
||
|
|
'scope',
|
||
|
|
'scoped',
|
||
|
|
'scrolling',
|
||
|
|
'seamless',
|
||
|
|
'selected',
|
||
|
|
'shape',
|
||
|
|
'size',
|
||
|
|
'sizes',
|
||
|
|
'span',
|
||
|
|
'spellCheck',
|
||
|
|
'src',
|
||
|
|
'srcDoc',
|
||
|
|
'srcLang',
|
||
|
|
'srcSet',
|
||
|
|
'start',
|
||
|
|
'step',
|
||
|
|
'style',
|
||
|
|
'summary',
|
||
|
|
'tabIndex',
|
||
|
|
'title',
|
||
|
|
'type',
|
||
|
|
'useMap',
|
||
|
|
'value',
|
||
|
|
'width',
|
||
|
|
'wmode',
|
||
|
|
'wrap'
|
||
|
|
];
|
||
|
|
exports.htmlElementProperties = exports.baseElementProperties.concat(exports.baseElementEvents);
|
||
|
|
exports.anchorProperties = exports.htmlElementProperties.concat([
|
||
|
|
'href',
|
||
|
|
'target'
|
||
|
|
]);
|
||
|
|
exports.buttonProperties = exports.htmlElementProperties.concat([
|
||
|
|
'disabled'
|
||
|
|
]);
|
||
|
|
exports.divProperties = exports.htmlElementProperties.concat(['align', 'noWrap']);
|
||
|
|
exports.inputProperties = exports.buttonProperties;
|
||
|
|
exports.textAreaProperties = exports.buttonProperties;
|
||
|
|
exports.imageProperties = exports.divProperties;
|
||
|
|
/**
|
||
|
|
* Gets native supported props for an html element provided the allowance set. Use one of the property
|
||
|
|
* sets defined (divProperties, buttonPropertes, etc) to filter out supported properties from a given
|
||
|
|
* props set. Note that all data- and aria- prefixed attributes will be allowed.
|
||
|
|
* NOTE: getNativeProps should always be applied first when adding props to a react component. The
|
||
|
|
* non-native props should be applied second. This will prevent getNativeProps from overriding your custom props.
|
||
|
|
* For example, if props passed to getNativeProps has an onClick function and getNativeProps is added to
|
||
|
|
* the component after an onClick function is added, then the getNativeProps onClick will override it.
|
||
|
|
* @param props - The unfiltered input props
|
||
|
|
* @param allowedPropsNames- The array of allowed propnames.
|
||
|
|
* @returns The filtered props
|
||
|
|
*/
|
||
|
|
function getNativeProps(props, allowedPropNames, excludedPropNames) {
|
||
|
|
return object_1.filteredAssign(function (propName) {
|
||
|
|
return ((!excludedPropNames || excludedPropNames.indexOf(propName) < 0) && ((propName.indexOf('data-') === 0) ||
|
||
|
|
(propName.indexOf('aria-') === 0) ||
|
||
|
|
(allowedPropNames.indexOf(propName) >= 0)));
|
||
|
|
}, {}, props);
|
||
|
|
}
|
||
|
|
exports.getNativeProps = getNativeProps;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 112 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var _baseUrl = '';
|
||
|
|
/** Sets the current base url used for fetching images. */
|
||
|
|
function getResourceUrl(url) {
|
||
|
|
return _baseUrl + url;
|
||
|
|
}
|
||
|
|
exports.getResourceUrl = getResourceUrl;
|
||
|
|
/** Gets the current base url used for fetching images. */
|
||
|
|
function setBaseUrl(baseUrl) {
|
||
|
|
_baseUrl = baseUrl;
|
||
|
|
}
|
||
|
|
exports.setBaseUrl = setBaseUrl;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 113 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var KeyCodes_1 = __webpack_require__(99);
|
||
|
|
var dom_1 = __webpack_require__(92);
|
||
|
|
// Default to undefined so that we initialize on first read.
|
||
|
|
var _isRTL;
|
||
|
|
/**
|
||
|
|
* Gets the rtl state of the page (returns true if in rtl.)
|
||
|
|
*/
|
||
|
|
function getRTL() {
|
||
|
|
if (_isRTL === undefined) {
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage']) {
|
||
|
|
var savedRTL = localStorage.getItem('isRTL');
|
||
|
|
if (savedRTL !== null) {
|
||
|
|
_isRTL = savedRTL === '1';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (_isRTL === undefined && doc) {
|
||
|
|
_isRTL = doc.documentElement.getAttribute('dir') === 'rtl';
|
||
|
|
}
|
||
|
|
if (_isRTL !== undefined) {
|
||
|
|
setRTL(_isRTL, true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
throw new Error('getRTL was called in a server environment without setRTL being called first. ' +
|
||
|
|
'Call setRTL to set the correct direction first.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _isRTL;
|
||
|
|
}
|
||
|
|
exports.getRTL = getRTL;
|
||
|
|
/**
|
||
|
|
* Sets the rtl state of the page (by adjusting the dir attribute of the html element.)
|
||
|
|
*/
|
||
|
|
function setRTL(isRTL, avoidPersisting) {
|
||
|
|
if (avoidPersisting === void 0) { avoidPersisting = false; }
|
||
|
|
var doc = dom_1.getDocument();
|
||
|
|
if (doc) {
|
||
|
|
doc.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
|
||
|
|
}
|
||
|
|
var win = dom_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
if (win && win['localStorage'] && !avoidPersisting) {
|
||
|
|
localStorage.setItem('isRTL', isRTL ? '1' : '0');
|
||
|
|
}
|
||
|
|
_isRTL = isRTL;
|
||
|
|
}
|
||
|
|
exports.setRTL = setRTL;
|
||
|
|
/**
|
||
|
|
* Returns the given key, but flips right/left arrows if necessary.
|
||
|
|
*/
|
||
|
|
function getRTLSafeKeyCode(key) {
|
||
|
|
if (getRTL()) {
|
||
|
|
if (key === KeyCodes_1.KeyCodes.left) {
|
||
|
|
key = KeyCodes_1.KeyCodes.right;
|
||
|
|
}
|
||
|
|
else if (key === KeyCodes_1.KeyCodes.right) {
|
||
|
|
key = KeyCodes_1.KeyCodes.left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return key;
|
||
|
|
}
|
||
|
|
exports.getRTLSafeKeyCode = getRTLSafeKeyCode;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 114 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
// Regex that finds { and } so they can be removed on a lookup for string format
|
||
|
|
var FORMAT_ARGS_REGEX = /[\{\}]/g;
|
||
|
|
// Regex that finds {#} so it can be replaced by the arguments in string format
|
||
|
|
var FORMAT_REGEX = /\{\d+\}/g;
|
||
|
|
/**
|
||
|
|
* String Format is like C# string format.
|
||
|
|
* Usage Example: "hello {0}!".format("mike") will return "hello mike!"
|
||
|
|
* Calling format on a string with less arguments than specified in the format is invalid
|
||
|
|
* Example "I love {0} every {1}".format("CXP") will result in a Debug Exception.
|
||
|
|
*/
|
||
|
|
function format(s) {
|
||
|
|
'use strict';
|
||
|
|
var values = [];
|
||
|
|
for (var _i = 1; _i < arguments.length; _i++) {
|
||
|
|
values[_i - 1] = arguments[_i];
|
||
|
|
}
|
||
|
|
var args = values;
|
||
|
|
// Callback match function
|
||
|
|
function replace_func(match) {
|
||
|
|
// looks up in the args
|
||
|
|
var replacement = args[match.replace(FORMAT_ARGS_REGEX, '')];
|
||
|
|
// catches undefined in nondebug and null in debug and nondebug
|
||
|
|
if (replacement === null || replacement === undefined) {
|
||
|
|
replacement = '';
|
||
|
|
}
|
||
|
|
return replacement;
|
||
|
|
}
|
||
|
|
return (s.replace(FORMAT_REGEX, replace_func));
|
||
|
|
}
|
||
|
|
exports.format = format;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 115 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var _emptyObject = { empty: true };
|
||
|
|
var _dictionary = {};
|
||
|
|
function memoize(target, key, descriptor) {
|
||
|
|
// We bind to "null" to prevent people from inadvertently pulling values from "this",
|
||
|
|
// rather than passing them in as input values which can be memoized.
|
||
|
|
var fn = memoizeFunction(descriptor.value.bind(null));
|
||
|
|
return {
|
||
|
|
configurable: true,
|
||
|
|
get: function () {
|
||
|
|
return fn;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.memoize = memoize;
|
||
|
|
/**
|
||
|
|
* Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result.
|
||
|
|
* Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise
|
||
|
|
* it will grow the cache unnecessarily.
|
||
|
|
*
|
||
|
|
* By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is
|
||
|
|
* unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard
|
||
|
|
* by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter.
|
||
|
|
*
|
||
|
|
* @param cb - The function to memoize.
|
||
|
|
* @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call.
|
||
|
|
* @returns A memoized version of the function.
|
||
|
|
*/
|
||
|
|
function memoizeFunction(cb, maxCacheSize) {
|
||
|
|
if (maxCacheSize === void 0) { maxCacheSize = 100; }
|
||
|
|
var rootNode;
|
||
|
|
var cacheSize = 0;
|
||
|
|
// tslint:disable-next-line:no-function-expression
|
||
|
|
return function memoizedFunction() {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
var currentNode = rootNode;
|
||
|
|
if (rootNode === undefined || (maxCacheSize > 0 && cacheSize > maxCacheSize)) {
|
||
|
|
rootNode = _createNode();
|
||
|
|
cacheSize = 0;
|
||
|
|
}
|
||
|
|
currentNode = rootNode;
|
||
|
|
// Traverse the tree until we find the match.
|
||
|
|
for (var i = 0; i < args.length; i++) {
|
||
|
|
var arg = _normalizeArg(args[i]);
|
||
|
|
if (!currentNode.map.has(arg)) {
|
||
|
|
currentNode.map.set(arg, _createNode());
|
||
|
|
}
|
||
|
|
currentNode = currentNode.map.get(arg);
|
||
|
|
}
|
||
|
|
if (!currentNode.hasOwnProperty('value')) {
|
||
|
|
currentNode.value = cb.apply(void 0, args);
|
||
|
|
cacheSize++;
|
||
|
|
}
|
||
|
|
return currentNode.value;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.memoizeFunction = memoizeFunction;
|
||
|
|
function _normalizeArg(val) {
|
||
|
|
if (!val) {
|
||
|
|
return _emptyObject;
|
||
|
|
}
|
||
|
|
else if (typeof val === 'object') {
|
||
|
|
return val;
|
||
|
|
}
|
||
|
|
else if (!_dictionary[val]) {
|
||
|
|
_dictionary[val] = { val: val };
|
||
|
|
}
|
||
|
|
return _dictionary[val];
|
||
|
|
}
|
||
|
|
function _createNode() {
|
||
|
|
return {
|
||
|
|
map: new WeakMap()
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 116 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var AnimationClassNames_1 = __webpack_require__(117);
|
||
|
|
exports.AnimationClassNames = AnimationClassNames_1.AnimationClassNames;
|
||
|
|
var FontClassNames_1 = __webpack_require__(129);
|
||
|
|
exports.FontClassNames = FontClassNames_1.FontClassNames;
|
||
|
|
var IconClassNames_1 = __webpack_require__(130);
|
||
|
|
exports.IconClassNames = IconClassNames_1.IconClassNames;
|
||
|
|
var ColorClassNames_1 = __webpack_require__(131);
|
||
|
|
exports.ColorClassNames = ColorClassNames_1.ColorClassNames;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 117 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var index_1 = __webpack_require__(118);
|
||
|
|
var index_2 = __webpack_require__(120);
|
||
|
|
exports.AnimationClassNames = index_1.buildClassMap(index_2.AnimationStyles);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 118 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var theme_1 = __webpack_require__(119);
|
||
|
|
exports.getTheme = theme_1.getTheme;
|
||
|
|
exports.loadTheme = theme_1.loadTheme;
|
||
|
|
var mergeStyles_1 = __webpack_require__(126);
|
||
|
|
exports.mergeStyles = mergeStyles_1.mergeStyles;
|
||
|
|
var mergeStyleSets_1 = __webpack_require__(127);
|
||
|
|
exports.mergeStyleSets = mergeStyleSets_1.mergeStyleSets;
|
||
|
|
var buildClassMap_1 = __webpack_require__(128);
|
||
|
|
exports.buildClassMap = buildClassMap_1.buildClassMap;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 119 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var assign = __webpack_require__(72);
|
||
|
|
var index_1 = __webpack_require__(120);
|
||
|
|
var _theme = {
|
||
|
|
palette: index_1.DefaultPalette,
|
||
|
|
semanticColors: _makeSemanticColorsFromPalette(index_1.DefaultPalette),
|
||
|
|
fonts: index_1.DefaultFontStyles
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Gets the theme object.
|
||
|
|
*/
|
||
|
|
function getTheme() {
|
||
|
|
return _theme;
|
||
|
|
}
|
||
|
|
exports.getTheme = getTheme;
|
||
|
|
/**
|
||
|
|
* Mixes the given theme settings into the current theme object.
|
||
|
|
*/
|
||
|
|
function loadTheme(theme) {
|
||
|
|
_theme.palette = assign({}, _theme.palette, theme.palette);
|
||
|
|
_theme.semanticColors = assign({}, _makeSemanticColorsFromPalette(_theme.palette), theme.semanticColors);
|
||
|
|
_theme.fonts = assign({}, _theme.fonts, theme.fonts);
|
||
|
|
}
|
||
|
|
exports.loadTheme = loadTheme;
|
||
|
|
// Generates all the semantic slot colors based on the Fabric palette.
|
||
|
|
// We'll use these as fallbacks for semantic slots that the passed in theme did not define.
|
||
|
|
function _makeSemanticColorsFromPalette(p) {
|
||
|
|
return {
|
||
|
|
bodyBackground: p.white,
|
||
|
|
bodyText: p.neutralPrimary,
|
||
|
|
bodySubtext: p.neutralSecondary,
|
||
|
|
disabledBackground: p.neutralLighter,
|
||
|
|
disabledText: p.neutralTertiaryAlt,
|
||
|
|
disabledSubtext: p.neutralQuaternary,
|
||
|
|
focusBorder: p.black,
|
||
|
|
// errorBackground: todo,
|
||
|
|
errorText: p.redDark,
|
||
|
|
inputBorder: p.neutralTertiary,
|
||
|
|
inputBorderHovered: p.neutralPrimary,
|
||
|
|
inputBackgroundSelected: p.themePrimary,
|
||
|
|
inputBackgroundSelectedHovered: p.themeDarkAlt,
|
||
|
|
inputForegroundSelected: p.white
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 120 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var AnimationStyles_1 = __webpack_require__(121);
|
||
|
|
exports.AnimationStyles = AnimationStyles_1.AnimationStyles;
|
||
|
|
var DefaultPalette_1 = __webpack_require__(122);
|
||
|
|
exports.DefaultPalette = DefaultPalette_1.DefaultPalette;
|
||
|
|
var DefaultFontStyles_1 = __webpack_require__(123);
|
||
|
|
exports.DefaultFontStyles = DefaultFontStyles_1.DefaultFontStyles;
|
||
|
|
exports.FontSizes = DefaultFontStyles_1.FontSizes;
|
||
|
|
exports.FontWeights = DefaultFontStyles_1.FontWeights;
|
||
|
|
var IconCodes_1 = __webpack_require__(124);
|
||
|
|
exports.IconCodes = IconCodes_1.IconCodes;
|
||
|
|
var getFocusStyle_1 = __webpack_require__(125);
|
||
|
|
exports.getFocusStyle = getFocusStyle_1.getFocusStyle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 121 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var glamorExports_1 = __webpack_require__(70);
|
||
|
|
/* Register the keyframes */
|
||
|
|
var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
|
||
|
|
var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
|
||
|
|
var DURATION_1 = '0.167s';
|
||
|
|
var DURATION_2 = '0.267s';
|
||
|
|
var DURATION_3 = '0.367s';
|
||
|
|
var DURATION_4 = '0.467s';
|
||
|
|
var FADE_IN = glamorExports_1.keyframes({
|
||
|
|
from: { opacity: 0 },
|
||
|
|
to: { opacity: 1 }
|
||
|
|
});
|
||
|
|
var FADE_OUT = glamorExports_1.keyframes({
|
||
|
|
from: { opacity: 1 },
|
||
|
|
to: { opacity: 0 }
|
||
|
|
});
|
||
|
|
var SLIDE_RIGHT_IN10 = _createSlideInX(-10);
|
||
|
|
var SLIDE_RIGHT_IN20 = _createSlideInX(-20);
|
||
|
|
var SLIDE_RIGHT_IN40 = _createSlideInX(-40);
|
||
|
|
var SLIDE_RIGHT_IN400 = _createSlideInX(-400);
|
||
|
|
var SLIDE_LEFT_IN10 = _createSlideInX(10);
|
||
|
|
var SLIDE_LEFT_IN20 = _createSlideInX(20);
|
||
|
|
var SLIDE_LEFT_IN40 = _createSlideInX(40);
|
||
|
|
var SLIDE_LEFT_IN400 = _createSlideInX(400);
|
||
|
|
var SLIDE_UP_IN10 = _createSlideInY(10);
|
||
|
|
var SLIDE_UP_IN20 = _createSlideInY(20);
|
||
|
|
var SLIDE_DOWN_IN10 = _createSlideInY(-10);
|
||
|
|
var SLIDE_DOWN_IN20 = _createSlideInY(-20);
|
||
|
|
var SLIDE_RIGHT_OUT10 = _createSlideOutX(10);
|
||
|
|
var SLIDE_RIGHT_OUT20 = _createSlideOutX(20);
|
||
|
|
var SLIDE_RIGHT_OUT40 = _createSlideOutX(40);
|
||
|
|
var SLIDE_RIGHT_OUT400 = _createSlideOutX(400);
|
||
|
|
var SLIDE_LEFT_OUT10 = _createSlideOutX(-10);
|
||
|
|
var SLIDE_LEFT_OUT20 = _createSlideOutX(-20);
|
||
|
|
var SLIDE_LEFT_OUT40 = _createSlideOutX(-40);
|
||
|
|
var SLIDE_LEFT_OUT400 = _createSlideOutX(-400);
|
||
|
|
var SLIDE_UP_OUT10 = _createSlideOutY(-10);
|
||
|
|
var SLIDE_UP_OUT20 = _createSlideOutY(-20);
|
||
|
|
var SLIDE_DOWN_OUT10 = _createSlideOutY(10);
|
||
|
|
var SLIDE_DOWN_OUT20 = _createSlideOutY(20);
|
||
|
|
var SCALE_UP100 = glamorExports_1.keyframes({
|
||
|
|
from: { transform: 'scale3d(.98,.98,1)' },
|
||
|
|
to: { transform: 'scale3d(1,1,1)' }
|
||
|
|
});
|
||
|
|
var SCALE_DOWN98 = glamorExports_1.keyframes({
|
||
|
|
from: { transform: 'scale3d(1,1,1)' },
|
||
|
|
'top': { transform: 'scale3d(.98,.98,1)' },
|
||
|
|
});
|
||
|
|
var SCALE_DOWN100 = glamorExports_1.keyframes({
|
||
|
|
from: { transform: 'scale3d(1.03,1.03,1)' },
|
||
|
|
to: { transform: 'scale3d(1,1,1)' }
|
||
|
|
});
|
||
|
|
var SCALE_UP103 = glamorExports_1.keyframes({
|
||
|
|
from: { transform: 'scale3d(1,1,1)' },
|
||
|
|
to: { transform: 'scale3d(1.03,1.03,1)' }
|
||
|
|
});
|
||
|
|
var ROTATE90 = glamorExports_1.keyframes({
|
||
|
|
from: { transform: 'rotateZ(0deg)' },
|
||
|
|
to: { transform: 'rotateZ(90deg)' }
|
||
|
|
});
|
||
|
|
var ROTATE_N90 = glamorExports_1.keyframes({
|
||
|
|
from: { transform: 'rotateZ(0deg)' },
|
||
|
|
to: { transform: 'rotateZ(-90deg)' }
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* All Fabric standard animations, exposed as json objects referencing predefined
|
||
|
|
* keyframes. These objects can be mixed in with other class definitions.
|
||
|
|
*/
|
||
|
|
exports.AnimationStyles = {
|
||
|
|
slideRightIn10: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightIn20: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightIn40: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN40, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightIn400: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN400, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftIn10: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftIn20: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftIn40: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN40, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftIn400: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN400, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideUpIn10: _createAnimation(FADE_IN + "," + SLIDE_UP_IN10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideUpIn20: _createAnimation(FADE_IN + "," + SLIDE_UP_IN20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideDownIn10: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideDownIn20: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightOut10: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightOut20: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightOut40: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT40, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideRightOut400: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT400, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftOut10: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftOut20: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftOut40: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT40, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideLeftOut400: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT400, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideUpOut10: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideUpOut20: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideDownOut10: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT10, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
slideDownOut20: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT20, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
scaleUpIn100: _createAnimation(FADE_IN + "," + SCALE_UP100, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
scaleDownIn100: _createAnimation(FADE_IN + "," + SCALE_DOWN100, DURATION_3, EASING_FUNCTION_1),
|
||
|
|
scaleUpOut103: _createAnimation(FADE_OUT + "," + SCALE_UP103, DURATION_1, EASING_FUNCTION_2),
|
||
|
|
scaleDownOut98: _createAnimation(FADE_OUT + "," + SCALE_DOWN98, DURATION_1, EASING_FUNCTION_2),
|
||
|
|
fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),
|
||
|
|
fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),
|
||
|
|
fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),
|
||
|
|
fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),
|
||
|
|
fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),
|
||
|
|
fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),
|
||
|
|
fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),
|
||
|
|
fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),
|
||
|
|
rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),
|
||
|
|
rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2)
|
||
|
|
// expandCollapse 100/200/400, delay 100/200
|
||
|
|
};
|
||
|
|
function _createAnimation(animationName, animationDuration, animationTimingFunction) {
|
||
|
|
return {
|
||
|
|
animationName: animationName,
|
||
|
|
animationDuration: animationDuration,
|
||
|
|
animationTimingFunction: animationTimingFunction,
|
||
|
|
animationFillMode: 'both'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _createSlideInX(fromX) {
|
||
|
|
return glamorExports_1.keyframes({
|
||
|
|
from: { transform: "translate3d(" + fromX + "px,0,0)" },
|
||
|
|
to: { transform: "translate3d(0,0,0)" }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _createSlideInY(fromY) {
|
||
|
|
return glamorExports_1.keyframes({
|
||
|
|
from: { transform: "translate3d(0," + fromY + "px,0)" },
|
||
|
|
to: { transform: "translate3d(0,0,0)" }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _createSlideOutX(toX) {
|
||
|
|
return glamorExports_1.keyframes({
|
||
|
|
from: { transform: "translate3d(0,0,0)" },
|
||
|
|
to: { transform: "translate3d(" + toX + "px,0,0)" }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _createSlideOutY(toY) {
|
||
|
|
return glamorExports_1.keyframes({
|
||
|
|
from: { transform: "translate3d(0,0,0)" },
|
||
|
|
to: { transform: "translate3d(0," + toY + "px,0)" }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 122 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.DefaultPalette = {
|
||
|
|
themeDarker: '#004578',
|
||
|
|
themeDark: '#005a9e',
|
||
|
|
themeDarkAlt: '#106ebe',
|
||
|
|
themePrimary: '#0078d7',
|
||
|
|
themeSecondary: '#2b88d8',
|
||
|
|
themeTertiary: '#71afe5',
|
||
|
|
themeLight: '#c7e0f4',
|
||
|
|
themeLighter: '#deecf9',
|
||
|
|
themeLighterAlt: '#eff6fc',
|
||
|
|
black: '#000000',
|
||
|
|
blackTranslucent40: 'rgba(0,0,0,.4)',
|
||
|
|
neutralDark: '#212121',
|
||
|
|
neutralPrimary: '#333333',
|
||
|
|
neutralPrimaryAlt: '#3c3c3c',
|
||
|
|
neutralSecondary: '#666666',
|
||
|
|
neutralTertiary: '#a6a6a6',
|
||
|
|
neutralTertiaryAlt: '#c8c8c8',
|
||
|
|
neutralQuaternary: '#d0d0d0',
|
||
|
|
neutralQuaternaryAlt: '#dadada',
|
||
|
|
neutralLight: '#eaeaea',
|
||
|
|
neutralLighter: '#f4f4f4',
|
||
|
|
neutralLighterAlt: '#f8f8f8',
|
||
|
|
white: '#ffffff',
|
||
|
|
yellow: '#ffb900',
|
||
|
|
yellowLight: '#fff100',
|
||
|
|
orange: '#d83b01',
|
||
|
|
orangeLight: '#ea4300',
|
||
|
|
orangeLighter: '#ff8c00',
|
||
|
|
redDark: '#a80000',
|
||
|
|
red: '#e81123',
|
||
|
|
magentaDark: '#5c005c',
|
||
|
|
magenta: '#b4009e',
|
||
|
|
magentaLight: '#e3008c',
|
||
|
|
purpleDark: '#32145a',
|
||
|
|
purple: '#5c2d91',
|
||
|
|
purpleLight: '#b4a0ff',
|
||
|
|
blueDark: '#002050',
|
||
|
|
blueMid: '#00188f',
|
||
|
|
blue: '#0078d7',
|
||
|
|
blueLight: '#00bcf2',
|
||
|
|
tealDark: '#004b50',
|
||
|
|
teal: '#008272',
|
||
|
|
tealLight: '#00b294',
|
||
|
|
greenDark: '#004b1c',
|
||
|
|
green: '#107c10',
|
||
|
|
greenLight: '#bad80a'
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 123 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var glamorExports_1 = __webpack_require__(70);
|
||
|
|
var index_1 = __webpack_require__(87);
|
||
|
|
// Default urls.
|
||
|
|
var DefaultBaseUrl = 'https://static2.sharepointonline.com/files/fabric/assets';
|
||
|
|
// Fallback fonts, if specified system or web fonts are unavailable.
|
||
|
|
var FontFamilyFallbacks = "-apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif";
|
||
|
|
// Font face names to be registered.
|
||
|
|
var FontNameArabic = 'Segoe UI Web (Arabic)';
|
||
|
|
var FontNameCyrillic = 'Segoe UI Web (Cyrillic)';
|
||
|
|
var FontNameEastEuropean = 'Segoe UI Web (East European)';
|
||
|
|
var FontNameGreek = 'Segoe UI Web (Greek)';
|
||
|
|
var FontNameHebrew = 'Segoe UI Web (Hebrew)';
|
||
|
|
var FontNameThai = 'Leelawadee UI Web';
|
||
|
|
var FontNameVietnamese = 'Segoe UI Web (Vietnamese)';
|
||
|
|
var FontNameWestEuropean = 'Segoe UI Web (West European)';
|
||
|
|
var FontNameSelawik = 'Selawik Web';
|
||
|
|
// Font families with fallbacks, for the general regions.
|
||
|
|
var FontFamilyArabic = "'" + FontNameArabic + "'";
|
||
|
|
var FontFamilyChineseSimplified = "'Microsoft Yahei', Verdana, Simsun";
|
||
|
|
var FontFamilyChineseTraditional = "'Microsoft Jhenghei', Pmingliu";
|
||
|
|
var FontFamilyCyrillic = "'" + FontNameCyrillic + "'";
|
||
|
|
var FontFamilyEastEuropean = "'" + FontNameEastEuropean + "'";
|
||
|
|
var FontFamilyGreek = "'" + FontNameGreek + "'";
|
||
|
|
var FontFamilyHebrew = "'" + FontNameHebrew + "'";
|
||
|
|
var FontFamilyHindi = "'Nirmala UI'";
|
||
|
|
var FontFamilyJapanese = "'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka";
|
||
|
|
var FontFamilyKorean = "'Malgun Gothic', Gulim";
|
||
|
|
var FontFamilySelawik = "'" + FontNameSelawik + "'";
|
||
|
|
var FontFamilyThai = "'Leelawadee UI Web', 'Kmer UI'";
|
||
|
|
var FontFamilyVietnamese = "'" + FontNameVietnamese + "'";
|
||
|
|
var FontFamilyWestEuropean = "'" + FontNameWestEuropean + "'";
|
||
|
|
// Mapping of language prefix to to font family.
|
||
|
|
var LanguageToFontMap = {
|
||
|
|
'ar': FontFamilyArabic,
|
||
|
|
'bg': FontFamilyCyrillic,
|
||
|
|
'cs': FontFamilyEastEuropean,
|
||
|
|
'el': FontFamilyGreek,
|
||
|
|
'et': FontFamilyEastEuropean,
|
||
|
|
'he': FontFamilyHebrew,
|
||
|
|
'hi': FontFamilyHindi,
|
||
|
|
'hr': FontFamilyEastEuropean,
|
||
|
|
'hu': FontFamilyEastEuropean,
|
||
|
|
'ja': FontFamilyJapanese,
|
||
|
|
'kk': FontFamilyEastEuropean,
|
||
|
|
'ko': FontFamilyKorean,
|
||
|
|
'lt': FontFamilyEastEuropean,
|
||
|
|
'lv': FontFamilyEastEuropean,
|
||
|
|
'pl': FontFamilyEastEuropean,
|
||
|
|
'ru': FontFamilyCyrillic,
|
||
|
|
'sk': FontFamilyEastEuropean,
|
||
|
|
'sr-latn': FontFamilyEastEuropean,
|
||
|
|
'th': FontFamilyThai,
|
||
|
|
'tr': FontFamilyEastEuropean,
|
||
|
|
'uk': FontFamilyCyrillic,
|
||
|
|
'vi': FontFamilyVietnamese,
|
||
|
|
'zh-hans': FontFamilyChineseSimplified,
|
||
|
|
'zh-hant': FontFamilyChineseTraditional,
|
||
|
|
};
|
||
|
|
// Standard font sizes.
|
||
|
|
var FontSizes;
|
||
|
|
(function (FontSizes) {
|
||
|
|
FontSizes.mini = '10px';
|
||
|
|
FontSizes.xSmall = '11px';
|
||
|
|
FontSizes.small = '12px';
|
||
|
|
FontSizes.smallPlus = '13px';
|
||
|
|
FontSizes.medium = '14px';
|
||
|
|
FontSizes.mediumPlus = '15px';
|
||
|
|
FontSizes.icon = '16px';
|
||
|
|
FontSizes.large = '17px';
|
||
|
|
FontSizes.xLarge = '21px';
|
||
|
|
FontSizes.xxLarge = '28px';
|
||
|
|
FontSizes.superLarge = '42px';
|
||
|
|
FontSizes.mega = '72px';
|
||
|
|
})(FontSizes = exports.FontSizes || (exports.FontSizes = {}));
|
||
|
|
// Standard font weights.
|
||
|
|
var FontWeights;
|
||
|
|
(function (FontWeights) {
|
||
|
|
FontWeights.light = 100;
|
||
|
|
FontWeights.semilight = 300;
|
||
|
|
FontWeights.regular = 400;
|
||
|
|
FontWeights.semibold = 600;
|
||
|
|
FontWeights.bold = 700;
|
||
|
|
})(FontWeights = exports.FontWeights || (exports.FontWeights = {}));
|
||
|
|
// Standard font styling.
|
||
|
|
exports.DefaultFontStyles = {
|
||
|
|
tiny: _createFont(FontSizes.mini, FontWeights.semibold),
|
||
|
|
xSmall: _createFont(FontSizes.xSmall, FontWeights.regular),
|
||
|
|
small: _createFont(FontSizes.small, FontWeights.regular),
|
||
|
|
smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular),
|
||
|
|
medium: _createFont(FontSizes.medium, FontWeights.regular),
|
||
|
|
mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular),
|
||
|
|
large: _createFont(FontSizes.large, FontWeights.semilight),
|
||
|
|
xLarge: _createFont(FontSizes.xLarge, FontWeights.light),
|
||
|
|
xxLarge: _createFont(FontSizes.xxLarge, FontWeights.light),
|
||
|
|
superLarge: _createFont(FontSizes.superLarge, FontWeights.light),
|
||
|
|
mega: _createFont(FontSizes.mega, FontWeights.light),
|
||
|
|
icon: {
|
||
|
|
fontFamily: '"FabricMDL2Icons"',
|
||
|
|
fontWeight: FontWeights.regular,
|
||
|
|
fontStyle: 'normal'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
function _getFontFamily() {
|
||
|
|
var language = index_1.getLanguage();
|
||
|
|
var fontFamily = FontFamilyWestEuropean;
|
||
|
|
for (var lang in LanguageToFontMap) {
|
||
|
|
if (LanguageToFontMap.hasOwnProperty(lang) && lang.indexOf(language) === 0) {
|
||
|
|
fontFamily = LanguageToFontMap[lang];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return fontFamily + ", " + FontFamilyFallbacks;
|
||
|
|
}
|
||
|
|
function _createFont(size, weight) {
|
||
|
|
return {
|
||
|
|
fontFamily: _getFontFamily(),
|
||
|
|
MozOsxFontSmoothing: 'grayscale',
|
||
|
|
MsHighContrastAdjust: 'none',
|
||
|
|
WebkitFontSmoothing: 'antialiased',
|
||
|
|
fontSize: size,
|
||
|
|
fontWeight: weight
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _registerFontFace(fontFamily, url, fontWeight) {
|
||
|
|
fontFamily = "'" + fontFamily + "'";
|
||
|
|
glamorExports_1.fontFace({
|
||
|
|
fontFamily: fontFamily,
|
||
|
|
src: "url('" + url + ".woff2') format('woff2')," +
|
||
|
|
("url('" + url + ".woff') format('woff')"),
|
||
|
|
fontWeight: fontWeight,
|
||
|
|
fontStyle: 'normal'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _registerFontFaceSet(baseUrl, fontFamily, cdnFolder, cdnFontName) {
|
||
|
|
if (cdnFontName === void 0) { cdnFontName = 'segoeui'; }
|
||
|
|
var urlBase = baseUrl + "/" + cdnFolder + "/" + cdnFontName;
|
||
|
|
_registerFontFace(fontFamily, urlBase + '-light', FontWeights.light);
|
||
|
|
_registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight);
|
||
|
|
_registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular);
|
||
|
|
_registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold);
|
||
|
|
}
|
||
|
|
function _registerDefaultFontFaces() {
|
||
|
|
var baseUrl = _getFontBaseUrl();
|
||
|
|
if (baseUrl) {
|
||
|
|
var fontUrl = baseUrl + "/fonts";
|
||
|
|
var iconUrl = baseUrl + "/icons";
|
||
|
|
// Produce @font-face definitions for all supported web fonts.
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameThai, 'leelawadeeui-thai', 'leelawadeeui');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameArabic, 'segoeui-arabic');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameCyrillic, 'segoeui-cyrillic');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameEastEuropean, 'segoeui-easteuropean');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameGreek, 'segoeui-greek');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameHebrew, 'segoeui-hebrew');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameVietnamese, 'segoeui-vietnamese');
|
||
|
|
_registerFontFaceSet(fontUrl, FontNameWestEuropean, 'segoeui-westeuropean');
|
||
|
|
_registerFontFaceSet(fontUrl, FontFamilySelawik, 'selawik', 'selawik');
|
||
|
|
// Leelawadee UI (Thai) does not have a 'light' weight, so we override
|
||
|
|
// the font-face generated above to use the 'semilight' weight instead.
|
||
|
|
_registerFontFace('Leelawadee UI Web', fontUrl + "/leelawadeeui-thai/leelawadeeui-semilight", FontWeights.light);
|
||
|
|
// Leelawadee UI (Thai) does not have a 'semibold' weight, so we override
|
||
|
|
// the font-face generated above to use the 'bold' weight instead.
|
||
|
|
_registerFontFace('Leelawadee UI Web', fontUrl + "/leelawadeeui-thai/leelawadeeui-bold", FontWeights.semibold);
|
||
|
|
// Register icon urls.
|
||
|
|
_registerFontFace('FabricMDL2Icons', iconUrl + "/fabricmdl2icons", FontWeights.regular);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Reads the fontBaseUrl from window.FabricConfig.fontBaseUrl or falls back to a default.
|
||
|
|
*/
|
||
|
|
function _getFontBaseUrl() {
|
||
|
|
var win = index_1.getWindow();
|
||
|
|
// tslint:disable-next-line:no-string-literal
|
||
|
|
var fabricConfig = win ? win['FabricConfig'] : undefined;
|
||
|
|
return (fabricConfig && fabricConfig.fontBaseUrl !== undefined) ? fabricConfig.fontBaseUrl : DefaultBaseUrl;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Register the font faces.
|
||
|
|
*/
|
||
|
|
_registerDefaultFontFaces();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 124 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.IconCodes = {
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED68'.
|
||
|
|
*/
|
||
|
|
aadLogo: '\uED68',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8FB'.
|
||
|
|
*/
|
||
|
|
accept: '\uE8FB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED69'.
|
||
|
|
*/
|
||
|
|
accessLogo: '\uED69',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE910'.
|
||
|
|
*/
|
||
|
|
accounts: '\uE910',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE710'.
|
||
|
|
*/
|
||
|
|
add: '\uE710',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEB5'.
|
||
|
|
*/
|
||
|
|
addEvent: '\uEEB5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0C8'.
|
||
|
|
*/
|
||
|
|
addFavorite: '\uF0C8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0C9'.
|
||
|
|
*/
|
||
|
|
addFavoriteFill: '\uF0C9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8FA'.
|
||
|
|
*/
|
||
|
|
addFriend: '\uE8FA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE3D'.
|
||
|
|
*/
|
||
|
|
addGroup: '\uEE3D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED8E'.
|
||
|
|
*/
|
||
|
|
addOnlineMeeting: '\uED8E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED96'.
|
||
|
|
*/
|
||
|
|
addPhone: '\uED96',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECC8'.
|
||
|
|
*/
|
||
|
|
addTo: '\uECC8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7EF'.
|
||
|
|
*/
|
||
|
|
admin: '\uE7EF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED6A'.
|
||
|
|
*/
|
||
|
|
adminALogo: '\uED6A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED6B'.
|
||
|
|
*/
|
||
|
|
adminCLogo: '\uED6B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED6C'.
|
||
|
|
*/
|
||
|
|
adminDLogo: '\uED6C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED6D'.
|
||
|
|
*/
|
||
|
|
adminELogo: '\uED6D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED6E'.
|
||
|
|
*/
|
||
|
|
adminLLogo: '\uED6E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED6F'.
|
||
|
|
*/
|
||
|
|
adminMLogo: '\uED6F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED70'.
|
||
|
|
*/
|
||
|
|
adminOLogo: '\uED70',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED71'.
|
||
|
|
*/
|
||
|
|
adminPLogo: '\uED71',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED72'.
|
||
|
|
*/
|
||
|
|
adminSLogo: '\uED72',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED73'.
|
||
|
|
*/
|
||
|
|
adminYLogo: '\uED73',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF7A'.
|
||
|
|
*/
|
||
|
|
airTickets: '\uEF7A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE709'.
|
||
|
|
*/
|
||
|
|
airplane: '\uE709',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE919'.
|
||
|
|
*/
|
||
|
|
alarmClock: '\uE919',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7AB'.
|
||
|
|
*/
|
||
|
|
album: '\uE7AB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC62'.
|
||
|
|
*/
|
||
|
|
albumRemove: '\uEC62',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED74'.
|
||
|
|
*/
|
||
|
|
alchemyLogo: '\uED74',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E3'.
|
||
|
|
*/
|
||
|
|
alignCenter: '\uE8E3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E4'.
|
||
|
|
*/
|
||
|
|
alignLeft: '\uE8E4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E2'.
|
||
|
|
*/
|
||
|
|
alignRight: '\uE8E2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF8B'.
|
||
|
|
*/
|
||
|
|
androidLogo: '\uEF8B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE924'.
|
||
|
|
*/
|
||
|
|
annotation: '\uE924',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEC7'.
|
||
|
|
*/
|
||
|
|
appForOfficeLogo: '\uEEC7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECAA'.
|
||
|
|
*/
|
||
|
|
appIconDefault: '\uECAA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB34'.
|
||
|
|
*/
|
||
|
|
arrivals: '\uEB34',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED5'.
|
||
|
|
*/
|
||
|
|
arrowDownRight8: '\uEED5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEF0'.
|
||
|
|
*/
|
||
|
|
arrowDownRightMirrored8: '\uEEF0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED4'.
|
||
|
|
*/
|
||
|
|
arrowUpRight8: '\uEED4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEEF'.
|
||
|
|
*/
|
||
|
|
arrowUpRightMirrored8: '\uEEEF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAC1'.
|
||
|
|
*/
|
||
|
|
articles: '\uEAC1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC0'.
|
||
|
|
*/
|
||
|
|
ascending: '\uEDC0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEB6'.
|
||
|
|
*/
|
||
|
|
assetLibrary: '\uEEB6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA38'.
|
||
|
|
*/
|
||
|
|
asterisk: '\uEA38',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF85'.
|
||
|
|
*/
|
||
|
|
atpLogo: '\uEF85',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE723'.
|
||
|
|
*/
|
||
|
|
attach: '\uE723',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE70'.
|
||
|
|
*/
|
||
|
|
australianRules: '\uEE70',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE78E'.
|
||
|
|
*/
|
||
|
|
autoEnhanceOff: '\uE78E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE78D'.
|
||
|
|
*/
|
||
|
|
autoEnhanceOn: '\uE78D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB24'.
|
||
|
|
*/
|
||
|
|
autoRacing: '\uEB24',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE6A'.
|
||
|
|
*/
|
||
|
|
awayStatus: '\uEE6A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB6A'.
|
||
|
|
*/
|
||
|
|
azureLogo: '\uEB6A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE72B'.
|
||
|
|
*/
|
||
|
|
back: '\uE72B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE73F'.
|
||
|
|
*/
|
||
|
|
backToWindow: '\uE73F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC1B'.
|
||
|
|
*/
|
||
|
|
badge: '\uEC1B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED7E'.
|
||
|
|
*/
|
||
|
|
balloons: '\uED7E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAE7'.
|
||
|
|
*/
|
||
|
|
barChart4: '\uEAE7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9EB'.
|
||
|
|
*/
|
||
|
|
barChartHorizontal: '\uE9EB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB20'.
|
||
|
|
*/
|
||
|
|
baseball: '\uEB20',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9AA'.
|
||
|
|
*/
|
||
|
|
bidiLtr: '\uE9AA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9AB'.
|
||
|
|
*/
|
||
|
|
bidiRtl: '\uE9AB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB6B'.
|
||
|
|
*/
|
||
|
|
bingLogo: '\uEB6B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F8'.
|
||
|
|
*/
|
||
|
|
blockContact: '\uE8F8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECE4'.
|
||
|
|
*/
|
||
|
|
blocked2: '\uECE4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE733'.
|
||
|
|
*/
|
||
|
|
blocked: '\uE733',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C9'.
|
||
|
|
*/
|
||
|
|
blowingSnow: '\uE9C9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF68'.
|
||
|
|
*/
|
||
|
|
boards: '\uEF68',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8DD'.
|
||
|
|
*/
|
||
|
|
bold: '\uE8DD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC7'.
|
||
|
|
*/
|
||
|
|
bookingsLogo: '\uEDC7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A4'.
|
||
|
|
*/
|
||
|
|
bookmarks: '\uE8A4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA41'.
|
||
|
|
*/
|
||
|
|
bookmarksMirrored: '\uEA41',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED75'.
|
||
|
|
*/
|
||
|
|
boxLogo: '\uED75',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF173'.
|
||
|
|
*/
|
||
|
|
branchFork: '\uF173',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF8C'.
|
||
|
|
*/
|
||
|
|
breadcrumb: '\uEF8C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE706'.
|
||
|
|
*/
|
||
|
|
brightness: '\uE706',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA99'.
|
||
|
|
*/
|
||
|
|
broom: '\uEA99',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0D0'.
|
||
|
|
*/
|
||
|
|
bufferTimeAfter: '\uF0D0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0CF'.
|
||
|
|
*/
|
||
|
|
bufferTimeBefore: '\uF0CF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0D1'.
|
||
|
|
*/
|
||
|
|
bufferTimeBoth: '\uF0D1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8FD'.
|
||
|
|
*/
|
||
|
|
bulletedList: '\uE8FD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA42'.
|
||
|
|
*/
|
||
|
|
bulletedListMirrored: '\uEA42',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB47'.
|
||
|
|
*/
|
||
|
|
busSolid: '\uEB47',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC32'.
|
||
|
|
*/
|
||
|
|
cafe: '\uEC32',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA4'.
|
||
|
|
*/
|
||
|
|
cake: '\uECA4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE948'.
|
||
|
|
*/
|
||
|
|
calculatorAddition: '\uE948',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE949'.
|
||
|
|
*/
|
||
|
|
calculatorSubtract: '\uE949',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE787'.
|
||
|
|
*/
|
||
|
|
calendar: '\uE787',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE9A'.
|
||
|
|
*/
|
||
|
|
calendarAgenda: '\uEE9A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8BF'.
|
||
|
|
*/
|
||
|
|
calendarDay: '\uE8BF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED28'.
|
||
|
|
*/
|
||
|
|
calendarMirrored: '\uED28',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F5'.
|
||
|
|
*/
|
||
|
|
calendarReply: '\uE8F5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8C0'.
|
||
|
|
*/
|
||
|
|
calendarWeek: '\uE8C0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF51'.
|
||
|
|
*/
|
||
|
|
calendarWorkWeek: '\uEF51',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF172'.
|
||
|
|
*/
|
||
|
|
caloriesAdd: '\uF172',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE722'.
|
||
|
|
*/
|
||
|
|
camera: '\uE722',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE711'.
|
||
|
|
*/
|
||
|
|
cancel: '\uE711',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE804'.
|
||
|
|
*/
|
||
|
|
car: '\uE804',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF121'.
|
||
|
|
*/
|
||
|
|
caretBottomLeftSolid8: '\uF121',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF122'.
|
||
|
|
*/
|
||
|
|
caretBottomRightSolid8: '\uF122',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD8'.
|
||
|
|
*/
|
||
|
|
caretDown8: '\uEDD8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDDC'.
|
||
|
|
*/
|
||
|
|
caretDownSolid8: '\uEDDC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE817'.
|
||
|
|
*/
|
||
|
|
caretHollow: '\uE817',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA45'.
|
||
|
|
*/
|
||
|
|
caretHollowMirrored: '\uEA45',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD5'.
|
||
|
|
*/
|
||
|
|
caretLeft8: '\uEDD5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD9'.
|
||
|
|
*/
|
||
|
|
caretLeftSolid8: '\uEDD9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD6'.
|
||
|
|
*/
|
||
|
|
caretRight8: '\uEDD6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDDA'.
|
||
|
|
*/
|
||
|
|
caretRightSolid8: '\uEDDA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE818'.
|
||
|
|
*/
|
||
|
|
caretSolid: '\uE818',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA46'.
|
||
|
|
*/
|
||
|
|
caretSolidMirrored: '\uEA46',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF54'.
|
||
|
|
*/
|
||
|
|
caretTopLeftSolid8: '\uEF54',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF55'.
|
||
|
|
*/
|
||
|
|
caretTopRightSolid8: '\uEF55',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD7'.
|
||
|
|
*/
|
||
|
|
caretUp8: '\uEDD7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDDB'.
|
||
|
|
*/
|
||
|
|
caretUpSolid8: '\uEDDB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED7F'.
|
||
|
|
*/
|
||
|
|
cat: '\uED7F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8EA'.
|
||
|
|
*/
|
||
|
|
cellPhone: '\uE8EA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB95'.
|
||
|
|
*/
|
||
|
|
certificate: '\uEB95',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE999'.
|
||
|
|
*/
|
||
|
|
chart: '\uE999',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE901'.
|
||
|
|
*/
|
||
|
|
chat: '\uE901',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECFE'.
|
||
|
|
*/
|
||
|
|
chatInviteFriend: '\uECFE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9D5'.
|
||
|
|
*/
|
||
|
|
checkList: '\uE9D5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE73E'.
|
||
|
|
*/
|
||
|
|
checkMark: '\uE73E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE739'.
|
||
|
|
*/
|
||
|
|
checkbox: '\uE739',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE73A'.
|
||
|
|
*/
|
||
|
|
checkboxComposite: '\uE73A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE73C'.
|
||
|
|
*/
|
||
|
|
checkboxIndeterminate: '\uE73C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE70D'.
|
||
|
|
*/
|
||
|
|
chevronDown: '\uE70D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE972'.
|
||
|
|
*/
|
||
|
|
chevronDownMed: '\uE972',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE96E'.
|
||
|
|
*/
|
||
|
|
chevronDownSmall: '\uE96E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE76B'.
|
||
|
|
*/
|
||
|
|
chevronLeft: '\uE76B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE973'.
|
||
|
|
*/
|
||
|
|
chevronLeftMed: '\uE973',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE96F'.
|
||
|
|
*/
|
||
|
|
chevronLeftSmall: '\uE96F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE76C'.
|
||
|
|
*/
|
||
|
|
chevronRight: '\uE76C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE974'.
|
||
|
|
*/
|
||
|
|
chevronRightMed: '\uE974',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE970'.
|
||
|
|
*/
|
||
|
|
chevronRightSmall: '\uE970',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE70E'.
|
||
|
|
*/
|
||
|
|
chevronUp: '\uE70E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE971'.
|
||
|
|
*/
|
||
|
|
chevronUpMed: '\uE971',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE96D'.
|
||
|
|
*/
|
||
|
|
chevronUpSmall: '\uE96D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE830'.
|
||
|
|
*/
|
||
|
|
chromeBack: '\uE830',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA47'.
|
||
|
|
*/
|
||
|
|
chromeBackMirrored: '\uEA47',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8BB'.
|
||
|
|
*/
|
||
|
|
chromeClose: '\uE8BB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE921'.
|
||
|
|
*/
|
||
|
|
chromeMinimize: '\uE921',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA3B'.
|
||
|
|
*/
|
||
|
|
circleFill: '\uEA3B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED9E'.
|
||
|
|
*/
|
||
|
|
circleHalfFull: '\uED9E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAEE'.
|
||
|
|
*/
|
||
|
|
circlePlus: '\uEAEE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA3A'.
|
||
|
|
*/
|
||
|
|
circleRing: '\uEA3A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC8'.
|
||
|
|
*/
|
||
|
|
classNotebookLogo: '\uEDC8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF75'.
|
||
|
|
*/
|
||
|
|
classroomLogo: '\uEF75',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE894'.
|
||
|
|
*/
|
||
|
|
clear: '\uE894',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF8F'.
|
||
|
|
*/
|
||
|
|
clearFilter: '\uEF8F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDDD'.
|
||
|
|
*/
|
||
|
|
clearFormatting: '\uEDDD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C2'.
|
||
|
|
*/
|
||
|
|
clearNight: '\uE9C2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE917'.
|
||
|
|
*/
|
||
|
|
clock: '\uE917',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE89F'.
|
||
|
|
*/
|
||
|
|
closePane: '\uE89F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA49'.
|
||
|
|
*/
|
||
|
|
closePaneMirrored: '\uEA49',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF84'.
|
||
|
|
*/
|
||
|
|
closedCaption: '\uEF84',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA9'.
|
||
|
|
*/
|
||
|
|
cloudAdd: '\uECA9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEBD3'.
|
||
|
|
*/
|
||
|
|
cloudDownload: '\uEBD3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC8E'.
|
||
|
|
*/
|
||
|
|
cloudUpload: '\uEC8E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9BE'.
|
||
|
|
*/
|
||
|
|
cloudWeather: '\uE9BE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9BF'.
|
||
|
|
*/
|
||
|
|
cloudy: '\uE9BF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA9D'.
|
||
|
|
*/
|
||
|
|
cocktails: '\uEA9D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE943'.
|
||
|
|
*/
|
||
|
|
code: '\uE943',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAEF'.
|
||
|
|
*/
|
||
|
|
coffee: '\uEAEF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC9'.
|
||
|
|
*/
|
||
|
|
collabsDbLogo: '\uEDC9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF66'.
|
||
|
|
*/
|
||
|
|
collapseMenu: '\uEF66',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB26'.
|
||
|
|
*/
|
||
|
|
collegeFootball: '\uEB26',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB25'.
|
||
|
|
*/
|
||
|
|
collegeHoops: '\uEB25',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE790'.
|
||
|
|
*/
|
||
|
|
color: '\uE790',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDBB'.
|
||
|
|
*/
|
||
|
|
combine: '\uEDBB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE942'.
|
||
|
|
*/
|
||
|
|
compassNW: '\uE942',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE930'.
|
||
|
|
*/
|
||
|
|
completed: '\uE930',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC61'.
|
||
|
|
*/
|
||
|
|
completedSolid: '\uEC61',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE77B'.
|
||
|
|
*/
|
||
|
|
contact: '\uE77B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEBD'.
|
||
|
|
*/
|
||
|
|
contactCard: '\uEEBD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE779'.
|
||
|
|
*/
|
||
|
|
contactInfo: '\uE779',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7B8'.
|
||
|
|
*/
|
||
|
|
container: '\uE7B8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7A1'.
|
||
|
|
*/
|
||
|
|
contrast: '\uE7A1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8C8'.
|
||
|
|
*/
|
||
|
|
copy: '\uE8C8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAF3'.
|
||
|
|
*/
|
||
|
|
cotton: '\uEAF3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB1E'.
|
||
|
|
*/
|
||
|
|
cricket: '\uEB1E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEBEF'.
|
||
|
|
*/
|
||
|
|
css: '\uEBEF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEBE'.
|
||
|
|
*/
|
||
|
|
customList: '\uEEBE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEBF'.
|
||
|
|
*/
|
||
|
|
customListMirrored: '\uEEBF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAC7'.
|
||
|
|
*/
|
||
|
|
cycling: '\uEAC7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEB7'.
|
||
|
|
*/
|
||
|
|
dataConnectionLibrary: '\uEEB7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA17'.
|
||
|
|
*/
|
||
|
|
dateTime2: '\uEA17',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC92'.
|
||
|
|
*/
|
||
|
|
dateTime: '\uEC92',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE93'.
|
||
|
|
*/
|
||
|
|
dateTimeMirrored: '\uEE93',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE290'.
|
||
|
|
*/
|
||
|
|
decreaseIndentLegacy: '\uE290',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEEE'.
|
||
|
|
*/
|
||
|
|
delveAnalytics: '\uEEEE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDCA'.
|
||
|
|
*/
|
||
|
|
delveAnalyticsLogo: '\uEDCA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED76'.
|
||
|
|
*/
|
||
|
|
delveLogo: '\uED76',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC1'.
|
||
|
|
*/
|
||
|
|
descending: '\uEDC1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB3C'.
|
||
|
|
*/
|
||
|
|
design: '\uEB3C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC7A'.
|
||
|
|
*/
|
||
|
|
developerTools: '\uEC7A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA6C'.
|
||
|
|
*/
|
||
|
|
devices3: '\uEA6C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB66'.
|
||
|
|
*/
|
||
|
|
devices4: '\uEB66',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE75F'.
|
||
|
|
*/
|
||
|
|
dialpad: '\uE75F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE82D'.
|
||
|
|
*/
|
||
|
|
dictionary: '\uE82D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAC8'.
|
||
|
|
*/
|
||
|
|
dietPlanNotebook: '\uEAC8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D8'.
|
||
|
|
*/
|
||
|
|
disableUpdates: '\uE8D8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E0'.
|
||
|
|
*/
|
||
|
|
dislike: '\uE8E0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEB8'.
|
||
|
|
*/
|
||
|
|
docLibrary: '\uEEB8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE90C'.
|
||
|
|
*/
|
||
|
|
dockLeft: '\uE90C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA4C'.
|
||
|
|
*/
|
||
|
|
dockLeftMirrored: '\uEA4C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE90D'.
|
||
|
|
*/
|
||
|
|
dockRight: '\uE90D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDCB'.
|
||
|
|
*/
|
||
|
|
docsLogo: '\uEDCB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A5'.
|
||
|
|
*/
|
||
|
|
document: '\uE8A5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF57'.
|
||
|
|
*/
|
||
|
|
documentReply: '\uEF57',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF6C'.
|
||
|
|
*/
|
||
|
|
documentSearch: '\uEF6C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED6'.
|
||
|
|
*/
|
||
|
|
documentSet: '\uEED6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC17'.
|
||
|
|
*/
|
||
|
|
documentation: '\uEC17',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB75'.
|
||
|
|
*/
|
||
|
|
door: '\uEB75',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB8F'.
|
||
|
|
*/
|
||
|
|
doubleBookmark: '\uEB8F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE97'.
|
||
|
|
*/
|
||
|
|
doubleChevronDown12: '\uEE97',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE04'.
|
||
|
|
*/
|
||
|
|
doubleChevronDown: '\uEE04',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE98'.
|
||
|
|
*/
|
||
|
|
doubleChevronLeft12: '\uEE98',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDBE'.
|
||
|
|
*/
|
||
|
|
doubleChevronLeft: '\uEDBE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE991'.
|
||
|
|
*/
|
||
|
|
doubleChevronLeftMed: '\uE991',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA4D'.
|
||
|
|
*/
|
||
|
|
doubleChevronLeftMedMirrored: '\uEA4D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE99'.
|
||
|
|
*/
|
||
|
|
doubleChevronRight12: '\uEE99',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDBF'.
|
||
|
|
*/
|
||
|
|
doubleChevronRight: '\uEDBF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE96'.
|
||
|
|
*/
|
||
|
|
doubleChevronUp12: '\uEE96',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDBD'.
|
||
|
|
*/
|
||
|
|
doubleChevronUp: '\uEDBD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE74B'.
|
||
|
|
*/
|
||
|
|
down: '\uE74B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE896'.
|
||
|
|
*/
|
||
|
|
download: '\uE896',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA8'.
|
||
|
|
*/
|
||
|
|
drm: '\uECA8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB42'.
|
||
|
|
*/
|
||
|
|
drop: '\uEB42',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED77'.
|
||
|
|
*/
|
||
|
|
dropboxLogo: '\uED77',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC5'.
|
||
|
|
*/
|
||
|
|
dropdown: '\uEDC5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9CD'.
|
||
|
|
*/
|
||
|
|
duststorm: '\uE9CD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDCD'.
|
||
|
|
*/
|
||
|
|
dynamicSmbLogo: '\uEDCD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDCC'.
|
||
|
|
*/
|
||
|
|
dynamics365Logo: '\uEDCC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE807'.
|
||
|
|
*/
|
||
|
|
eatDrink: '\uE807',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC60'.
|
||
|
|
*/
|
||
|
|
edgeLogo: '\uEC60',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE70F'.
|
||
|
|
*/
|
||
|
|
edit: '\uE70F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF61'.
|
||
|
|
*/
|
||
|
|
editMail: '\uEF61',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB7E'.
|
||
|
|
*/
|
||
|
|
editMirrored: '\uEB7E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED9D'.
|
||
|
|
*/
|
||
|
|
editNote: '\uED9D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF77'.
|
||
|
|
*/
|
||
|
|
editPhoto: '\uEF77',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF60'.
|
||
|
|
*/
|
||
|
|
editStyle: '\uEF60',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECCE'.
|
||
|
|
*/
|
||
|
|
embed: '\uECCE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE731'.
|
||
|
|
*/
|
||
|
|
emi: '\uE731',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE76E'.
|
||
|
|
*/
|
||
|
|
emoji2: '\uE76E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE899'.
|
||
|
|
*/
|
||
|
|
emoji: '\uE899',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA88'.
|
||
|
|
*/
|
||
|
|
emojiDisappointed: '\uEA88',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA87'.
|
||
|
|
*/
|
||
|
|
emojiNeutral: '\uEA87',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF88'.
|
||
|
|
*/
|
||
|
|
emptyRecycleBin: '\uEF88',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9E9'.
|
||
|
|
*/
|
||
|
|
equalizer: '\uE9E9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE75C'.
|
||
|
|
*/
|
||
|
|
eraseTool: '\uE75C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE783'.
|
||
|
|
*/
|
||
|
|
error: '\uE783',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA39'.
|
||
|
|
*/
|
||
|
|
errorBadge: '\uEA39',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA3'.
|
||
|
|
*/
|
||
|
|
event: '\uECA3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED8B'.
|
||
|
|
*/
|
||
|
|
eventInfo: '\uED8B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF73'.
|
||
|
|
*/
|
||
|
|
excelDocument: '\uEF73',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC28'.
|
||
|
|
*/
|
||
|
|
excelLogo: '\uEC28',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED78'.
|
||
|
|
*/
|
||
|
|
exchangeLogo: '\uED78',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF67'.
|
||
|
|
*/
|
||
|
|
expandMenu: '\uEF67',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF09C'.
|
||
|
|
*/
|
||
|
|
fabricAssetLibrary: '\uF09C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF09D'.
|
||
|
|
*/
|
||
|
|
fabricDataConnectionLibrary: '\uF09D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF09E'.
|
||
|
|
*/
|
||
|
|
fabricDocLibrary: '\uF09E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A9'.
|
||
|
|
*/
|
||
|
|
fabricFolder: '\uF0A9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0AA'.
|
||
|
|
*/
|
||
|
|
fabricFolderFill: '\uF0AA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A4'.
|
||
|
|
*/
|
||
|
|
fabricFolderSearch: '\uF0A4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF09F'.
|
||
|
|
*/
|
||
|
|
fabricFormLibrary: '\uF09F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A0'.
|
||
|
|
*/
|
||
|
|
fabricFormLibraryMirrored: '\uF0A0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A5'.
|
||
|
|
*/
|
||
|
|
fabricMovetoFolder: '\uF0A5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0AB'.
|
||
|
|
*/
|
||
|
|
fabricNewFolder: '\uF0AB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A8'.
|
||
|
|
*/
|
||
|
|
fabricOpenFolderHorizontal: '\uF0A8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0AC'.
|
||
|
|
*/
|
||
|
|
fabricPictureLibrary: '\uF0AC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A3'.
|
||
|
|
*/
|
||
|
|
fabricPublicFolder: '\uF0A3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A1'.
|
||
|
|
*/
|
||
|
|
fabricReportLibrary: '\uF0A1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A2'.
|
||
|
|
*/
|
||
|
|
fabricReportLibraryMirrored: '\uF0A2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A7'.
|
||
|
|
*/
|
||
|
|
fabricSyncFolder: '\uF0A7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF0A6'.
|
||
|
|
*/
|
||
|
|
fabricUnsyncFolder: '\uF0A6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECB3'.
|
||
|
|
*/
|
||
|
|
facebookLogo: '\uECB3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEBDA'.
|
||
|
|
*/
|
||
|
|
family: '\uEBDA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECEB'.
|
||
|
|
*/
|
||
|
|
fangBody: '\uECEB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE728'.
|
||
|
|
*/
|
||
|
|
favoriteList: '\uE728',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE734'.
|
||
|
|
*/
|
||
|
|
favoriteStar: '\uE734',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE735'.
|
||
|
|
*/
|
||
|
|
favoriteStarFill: '\uE735',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF5C'.
|
||
|
|
*/
|
||
|
|
fax: '\uEF5C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7E3'.
|
||
|
|
*/
|
||
|
|
ferry: '\uE7E3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB48'.
|
||
|
|
*/
|
||
|
|
ferrySolid: '\uEB48',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE71C'.
|
||
|
|
*/
|
||
|
|
filter: '\uE71C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE795'.
|
||
|
|
*/
|
||
|
|
filters: '\uE795',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7BB'.
|
||
|
|
*/
|
||
|
|
financial: '\uE7BB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE928'.
|
||
|
|
*/
|
||
|
|
fingerprint: '\uE928',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7C1'.
|
||
|
|
*/
|
||
|
|
flag: '\uE7C1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE935'.
|
||
|
|
*/
|
||
|
|
flickDown: '\uE935',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE937'.
|
||
|
|
*/
|
||
|
|
flickLeft: '\uE937',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE938'.
|
||
|
|
*/
|
||
|
|
flickRight: '\uE938',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE936'.
|
||
|
|
*/
|
||
|
|
flickUp: '\uE936',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF90'.
|
||
|
|
*/
|
||
|
|
flow: '\uEF90',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9CB'.
|
||
|
|
*/
|
||
|
|
fog: '\uE9CB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8B7'.
|
||
|
|
*/
|
||
|
|
folder: '\uE8B7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D5'.
|
||
|
|
*/
|
||
|
|
folderFill: '\uE8D5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF12B'.
|
||
|
|
*/
|
||
|
|
folderHorizontal: '\uF12B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE838'.
|
||
|
|
*/
|
||
|
|
folderOpen: '\uE838',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF65'.
|
||
|
|
*/
|
||
|
|
folderSearch: '\uEF65',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D2'.
|
||
|
|
*/
|
||
|
|
font: '\uE8D2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D3'.
|
||
|
|
*/
|
||
|
|
fontColor: '\uE8D3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E7'.
|
||
|
|
*/
|
||
|
|
fontDecrease: '\uE8E7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E8'.
|
||
|
|
*/
|
||
|
|
fontIncrease: '\uE8E8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E9'.
|
||
|
|
*/
|
||
|
|
fontSize: '\uE8E9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEB9'.
|
||
|
|
*/
|
||
|
|
formLibrary: '\uEEB9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEBA'.
|
||
|
|
*/
|
||
|
|
formLibraryMirrored: '\uEEBA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE72A'.
|
||
|
|
*/
|
||
|
|
forward: '\uE72A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED8C'.
|
||
|
|
*/
|
||
|
|
forwardEvent: '\uED8C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9EF'.
|
||
|
|
*/
|
||
|
|
freezing: '\uE9EF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9CA'.
|
||
|
|
*/
|
||
|
|
frigid: '\uE9CA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE91F'.
|
||
|
|
*/
|
||
|
|
fullCircleMask: '\uE91F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE740'.
|
||
|
|
*/
|
||
|
|
fullScreen: '\uE740',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9DA'.
|
||
|
|
*/
|
||
|
|
generate: '\uE9DA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB8E'.
|
||
|
|
*/
|
||
|
|
giftCard: '\uEB8E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC1F'.
|
||
|
|
*/
|
||
|
|
giftbox: '\uEC1F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA16'.
|
||
|
|
*/
|
||
|
|
glasses: '\uEA16',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECF4'.
|
||
|
|
*/
|
||
|
|
glimmer: '\uECF4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE700'.
|
||
|
|
*/
|
||
|
|
globalNavButton: '\uE700',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE774'.
|
||
|
|
*/
|
||
|
|
globe: '\uE774',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF53'.
|
||
|
|
*/
|
||
|
|
globeFavorite: '\uEF53',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB1F'.
|
||
|
|
*/
|
||
|
|
golf: '\uEB1F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE0B'.
|
||
|
|
*/
|
||
|
|
googleDriveLogo: '\uEE0B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D1'.
|
||
|
|
*/
|
||
|
|
gotoToday: '\uE8D1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE75E'.
|
||
|
|
*/
|
||
|
|
gripperTool: '\uE75E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE902'.
|
||
|
|
*/
|
||
|
|
group: '\uE902',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE67'.
|
||
|
|
*/
|
||
|
|
groupedAscending: '\uEE67',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE66'.
|
||
|
|
*/
|
||
|
|
groupedDescending: '\uEE66',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF74'.
|
||
|
|
*/
|
||
|
|
groupedList: '\uEF74',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA00'.
|
||
|
|
*/
|
||
|
|
hailDay: '\uEA00',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA13'.
|
||
|
|
*/
|
||
|
|
hailNight: '\uEA13',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE929'.
|
||
|
|
*/
|
||
|
|
handwriting: '\uE929',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA19'.
|
||
|
|
*/
|
||
|
|
header1: '\uEA19',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF36'.
|
||
|
|
*/
|
||
|
|
header2: '\uEF36',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF37'.
|
||
|
|
*/
|
||
|
|
header3: '\uEF37',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF38'.
|
||
|
|
*/
|
||
|
|
header4: '\uEF38',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE95B'.
|
||
|
|
*/
|
||
|
|
headset: '\uE95B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE95E'.
|
||
|
|
*/
|
||
|
|
health: '\uE95E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB51'.
|
||
|
|
*/
|
||
|
|
heart: '\uEB51',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB52'.
|
||
|
|
*/
|
||
|
|
heartFill: '\uEB52',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE897'.
|
||
|
|
*/
|
||
|
|
help: '\uE897',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA51'.
|
||
|
|
*/
|
||
|
|
helpMirrored: '\uEA51',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF89'.
|
||
|
|
*/
|
||
|
|
hide2: '\uEF89',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED1A'.
|
||
|
|
*/
|
||
|
|
hide: '\uED1A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE81C'.
|
||
|
|
*/
|
||
|
|
history: '\uE81C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE80F'.
|
||
|
|
*/
|
||
|
|
home: '\uE80F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA8A'.
|
||
|
|
*/
|
||
|
|
homeSolid: '\uEA8A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE91D'.
|
||
|
|
*/
|
||
|
|
hospital: '\uE91D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE824'.
|
||
|
|
*/
|
||
|
|
hotel: '\uE824',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF8A'.
|
||
|
|
*/
|
||
|
|
iOsAppStoreLogo: '\uEF8A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8C9'.
|
||
|
|
*/
|
||
|
|
important: '\uE8C9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF64'.
|
||
|
|
*/
|
||
|
|
inboxCheck: '\uEF64',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE814'.
|
||
|
|
*/
|
||
|
|
incidentTriangle: '\uE814',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE291'.
|
||
|
|
*/
|
||
|
|
increaseIndentLegacy: '\uE291',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA1F'.
|
||
|
|
*/
|
||
|
|
info2: '\uEA1F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE946'.
|
||
|
|
*/
|
||
|
|
info: '\uE946',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC7D'.
|
||
|
|
*/
|
||
|
|
insertTextBox: '\uEC7D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE704'.
|
||
|
|
*/
|
||
|
|
internetSharing: '\uE704',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEC0'.
|
||
|
|
*/
|
||
|
|
issueTracking: '\uEEC0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEC1'.
|
||
|
|
*/
|
||
|
|
issueTrackingMirrored: '\uEEC1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8DB'.
|
||
|
|
*/
|
||
|
|
italic: '\uE8DB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED8F'.
|
||
|
|
*/
|
||
|
|
joinOnlineMeeting: '\uED8F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEBF0'.
|
||
|
|
*/
|
||
|
|
js: '\uEBF0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE932'.
|
||
|
|
*/
|
||
|
|
label: '\uE932',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF6B'.
|
||
|
|
*/
|
||
|
|
landscapeOrientation: '\uEF6B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC76'.
|
||
|
|
*/
|
||
|
|
laptopSelected: '\uEC76',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEECB'.
|
||
|
|
*/
|
||
|
|
largeGrid: '\uEECB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F1'.
|
||
|
|
*/
|
||
|
|
library: '\uE8F1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF62'.
|
||
|
|
*/
|
||
|
|
lifesaver: '\uEF62',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF63'.
|
||
|
|
*/
|
||
|
|
lifesaverLock: '\uEF63',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE793'.
|
||
|
|
*/
|
||
|
|
light: '\uE793',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA80'.
|
||
|
|
*/
|
||
|
|
lightbulb: '\uEA80',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE945'.
|
||
|
|
*/
|
||
|
|
lightningBolt: '\uE945',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E1'.
|
||
|
|
*/
|
||
|
|
like: '\uE8E1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE71B'.
|
||
|
|
*/
|
||
|
|
link: '\uE71B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA37'.
|
||
|
|
*/
|
||
|
|
list: '\uEA37',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA55'.
|
||
|
|
*/
|
||
|
|
listMirrored: '\uEA55',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE81D'.
|
||
|
|
*/
|
||
|
|
location: '\uE81D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE80E'.
|
||
|
|
*/
|
||
|
|
locationCircle: '\uE80E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE827'.
|
||
|
|
*/
|
||
|
|
locationDot: '\uE827',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE920'.
|
||
|
|
*/
|
||
|
|
locationFill: '\uE920',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE72E'.
|
||
|
|
*/
|
||
|
|
lock: '\uE72E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC8A'.
|
||
|
|
*/
|
||
|
|
lowerBrightness: '\uEC8A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED79'.
|
||
|
|
*/
|
||
|
|
lyncLogo: '\uED79',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE715'.
|
||
|
|
*/
|
||
|
|
mail: '\uE715',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED80'.
|
||
|
|
*/
|
||
|
|
mailAlert: '\uED80',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED81'.
|
||
|
|
*/
|
||
|
|
mailCheck: '\uED81',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A8'.
|
||
|
|
*/
|
||
|
|
mailFill: '\uE8A8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE89C'.
|
||
|
|
*/
|
||
|
|
mailForward: '\uE89C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA56'.
|
||
|
|
*/
|
||
|
|
mailForwardMirrored: '\uEA56',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED82'.
|
||
|
|
*/
|
||
|
|
mailLowImportance: '\uED82',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED83'.
|
||
|
|
*/
|
||
|
|
mailPause: '\uED83',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED84'.
|
||
|
|
*/
|
||
|
|
mailRepeat: '\uED84',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8CA'.
|
||
|
|
*/
|
||
|
|
mailReply: '\uE8CA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8C2'.
|
||
|
|
*/
|
||
|
|
mailReplyAll: '\uE8C2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA58'.
|
||
|
|
*/
|
||
|
|
mailReplyAllMirrored: '\uEA58',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA57'.
|
||
|
|
*/
|
||
|
|
mailReplyMirrored: '\uEA57',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE816'.
|
||
|
|
*/
|
||
|
|
mapDirections: '\uE816',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE707'.
|
||
|
|
*/
|
||
|
|
mapPin: '\uE707',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAFC'.
|
||
|
|
*/
|
||
|
|
market: '\uEAFC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF42'.
|
||
|
|
*/
|
||
|
|
marketDown: '\uEF42',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE789'.
|
||
|
|
*/
|
||
|
|
megaphone: '\uE789',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE77C'.
|
||
|
|
*/
|
||
|
|
memo: '\uE77C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7D5'.
|
||
|
|
*/
|
||
|
|
merge: '\uE7D5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8BD'.
|
||
|
|
*/
|
||
|
|
message: '\uE8BD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC70'.
|
||
|
|
*/
|
||
|
|
messageFill: '\uEC70',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE720'.
|
||
|
|
*/
|
||
|
|
microphone: '\uE720',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF130'.
|
||
|
|
*/
|
||
|
|
microsoftStaffhubLogo: '\uF130',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE732'.
|
||
|
|
*/
|
||
|
|
miniLink: '\uE732',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC75'.
|
||
|
|
*/
|
||
|
|
mobileSelected: '\uEC75',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEAFD'.
|
||
|
|
*/
|
||
|
|
money: '\uEAFD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE712'.
|
||
|
|
*/
|
||
|
|
more: '\uE712',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB22'.
|
||
|
|
*/
|
||
|
|
moreSports: '\uEB22',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7C2'.
|
||
|
|
*/
|
||
|
|
move: '\uE7C2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8DE'.
|
||
|
|
*/
|
||
|
|
moveToFolder: '\uE8DE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB6C'.
|
||
|
|
*/
|
||
|
|
msnLogo: '\uEB6C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE762'.
|
||
|
|
*/
|
||
|
|
multiSelect: '\uE762',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA98'.
|
||
|
|
*/
|
||
|
|
multiSelectMirrored: '\uEA98',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE940'.
|
||
|
|
*/
|
||
|
|
musicInCollection: '\uE940',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA36'.
|
||
|
|
*/
|
||
|
|
musicInCollectionFill: '\uEA36',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC4F'.
|
||
|
|
*/
|
||
|
|
musicNote: '\uEC4F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE800'.
|
||
|
|
*/
|
||
|
|
nav2DMapView: '\uE800',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F4'.
|
||
|
|
*/
|
||
|
|
newFolder: '\uE8F4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE900'.
|
||
|
|
*/
|
||
|
|
news: '\uE900',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED99'.
|
||
|
|
*/
|
||
|
|
noteForward: '\uED99',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED9A'.
|
||
|
|
*/
|
||
|
|
notePinned: '\uED9A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED98'.
|
||
|
|
*/
|
||
|
|
noteReply: '\uED98',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC4'.
|
||
|
|
*/
|
||
|
|
numberField: '\uEDC4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA1C'.
|
||
|
|
*/
|
||
|
|
numberedList: '\uEA1C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDCE'.
|
||
|
|
*/
|
||
|
|
officeAssistantLogo: '\uEDCE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF86'.
|
||
|
|
*/
|
||
|
|
officeFormLogo: '\uEF86',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB6E'.
|
||
|
|
*/
|
||
|
|
officeLogo: '\uEB6E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDCF'.
|
||
|
|
*/
|
||
|
|
officeStoreLogo: '\uEDCF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED7A'.
|
||
|
|
*/
|
||
|
|
officeVideoLogo: '\uED7A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEC8'.
|
||
|
|
*/
|
||
|
|
offlineOneDriveParachute: '\uEEC8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEC9'.
|
||
|
|
*/
|
||
|
|
offlineOneDriveParachuteDisabled: '\uEEC9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE941'.
|
||
|
|
*/
|
||
|
|
oneDrive: '\uE941',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF32'.
|
||
|
|
*/
|
||
|
|
oneDriveAdd: '\uEF32',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD0'.
|
||
|
|
*/
|
||
|
|
oneNoteEduLogo: '\uEDD0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC0D'.
|
||
|
|
*/
|
||
|
|
oneNoteLogo: '\uEC0D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8E5'.
|
||
|
|
*/
|
||
|
|
openFile: '\uE8E5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED25'.
|
||
|
|
*/
|
||
|
|
openFolderHorizontal: '\uED25',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A7'.
|
||
|
|
*/
|
||
|
|
openInNewWindow: '\uE8A7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A0'.
|
||
|
|
*/
|
||
|
|
openPane: '\uE8A0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA5B'.
|
||
|
|
*/
|
||
|
|
openPaneMirrored: '\uEA5B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA6'.
|
||
|
|
*/
|
||
|
|
org: '\uECA6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED34'.
|
||
|
|
*/
|
||
|
|
outOfOffice: '\uED34',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB6D'.
|
||
|
|
*/
|
||
|
|
outlookLogo: '\uEB6D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7C3'.
|
||
|
|
*/
|
||
|
|
page: '\uE7C3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA1A'.
|
||
|
|
*/
|
||
|
|
pageAdd: '\uEA1A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF02C'.
|
||
|
|
*/
|
||
|
|
pageCheckedOut: '\uF02C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF104'.
|
||
|
|
*/
|
||
|
|
pageCheckedin: '\uF104',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE760'.
|
||
|
|
*/
|
||
|
|
pageLeft: '\uE760',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE761'.
|
||
|
|
*/
|
||
|
|
pageRight: '\uE761',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE729'.
|
||
|
|
*/
|
||
|
|
pageSolid: '\uE729',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7B0'.
|
||
|
|
*/
|
||
|
|
panoIndicator: '\uE7B0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED7B'.
|
||
|
|
*/
|
||
|
|
paratureLogo: '\uED7B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C0'.
|
||
|
|
*/
|
||
|
|
partlyCloudyDay: '\uE9C0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C1'.
|
||
|
|
*/
|
||
|
|
partlyCloudyNight: '\uE9C1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA7'.
|
||
|
|
*/
|
||
|
|
partyLeader: '\uECA7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE769'.
|
||
|
|
*/
|
||
|
|
pause: '\uE769',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8C7'.
|
||
|
|
*/
|
||
|
|
paymentCard: '\uE8C7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE977'.
|
||
|
|
*/
|
||
|
|
pc1: '\uE977',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA90'.
|
||
|
|
*/
|
||
|
|
pdf: '\uEA90',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF7B'.
|
||
|
|
*/
|
||
|
|
pencilReply: '\uEF7B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE716'.
|
||
|
|
*/
|
||
|
|
people: '\uE716',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA15'.
|
||
|
|
*/
|
||
|
|
peopleAdd: '\uEA15',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED93'.
|
||
|
|
*/
|
||
|
|
peopleAlert: '\uED93',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED91'.
|
||
|
|
*/
|
||
|
|
peopleBlock: '\uED91',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED94'.
|
||
|
|
*/
|
||
|
|
peoplePause: '\uED94',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED92'.
|
||
|
|
*/
|
||
|
|
peopleRepeat: '\uED92',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D7'.
|
||
|
|
*/
|
||
|
|
permissions: '\uE8D7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE717'.
|
||
|
|
*/
|
||
|
|
phone: '\uE717',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB9F'.
|
||
|
|
*/
|
||
|
|
photo2: '\uEB9F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECAB'.
|
||
|
|
*/
|
||
|
|
photo2Add: '\uECAB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECAC'.
|
||
|
|
*/
|
||
|
|
photo2Remove: '\uECAC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7AA'.
|
||
|
|
*/
|
||
|
|
photoCollection: '\uE7AA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8B9'.
|
||
|
|
*/
|
||
|
|
picture: '\uE8B9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEC2'.
|
||
|
|
*/
|
||
|
|
pictureLibrary: '\uEEC2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB04'.
|
||
|
|
*/
|
||
|
|
pieDouble: '\uEB04',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEACB'.
|
||
|
|
*/
|
||
|
|
pill: '\uEACB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE718'.
|
||
|
|
*/
|
||
|
|
pin: '\uE718',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE840'.
|
||
|
|
*/
|
||
|
|
pinned: '\uE840',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE842'.
|
||
|
|
*/
|
||
|
|
pinnedFill: '\uE842',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD1'.
|
||
|
|
*/
|
||
|
|
planner: '\uEDD1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE768'.
|
||
|
|
*/
|
||
|
|
play: '\uE768',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF58'.
|
||
|
|
*/
|
||
|
|
playerSettings: '\uEF58',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECAF'.
|
||
|
|
*/
|
||
|
|
poi: '\uECAF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F3'.
|
||
|
|
*/
|
||
|
|
postUpdate: '\uE8F3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF092'.
|
||
|
|
*/
|
||
|
|
powerApps2Logo: '\uF092',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD2'.
|
||
|
|
*/
|
||
|
|
powerApps: '\uEDD2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF091'.
|
||
|
|
*/
|
||
|
|
powerAppsLogo: '\uF091',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA1E'.
|
||
|
|
*/
|
||
|
|
powerBiLogo: '\uEA1E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF72'.
|
||
|
|
*/
|
||
|
|
powerPointDocument: '\uEF72',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC2A'.
|
||
|
|
*/
|
||
|
|
powerPointLogo: '\uEC2A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9CF'.
|
||
|
|
*/
|
||
|
|
precipitation: '\uE9CF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE979'.
|
||
|
|
*/
|
||
|
|
presenceChickletVideo: '\uE979',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8FF'.
|
||
|
|
*/
|
||
|
|
preview: '\uE8FF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A1'.
|
||
|
|
*/
|
||
|
|
previewLink: '\uE8A1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE749'.
|
||
|
|
*/
|
||
|
|
print: '\uE749',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE956'.
|
||
|
|
*/
|
||
|
|
printfaxPrinterFile: '\uE956',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB27'.
|
||
|
|
*/
|
||
|
|
proFootball: '\uEB27',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB28'.
|
||
|
|
*/
|
||
|
|
proHockey: '\uEB28',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECDC'.
|
||
|
|
*/
|
||
|
|
product: '\uECDC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD4'.
|
||
|
|
*/
|
||
|
|
projectLogo: '\uEDD4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A6'.
|
||
|
|
*/
|
||
|
|
protectedDocument: '\uE8A6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF6D'.
|
||
|
|
*/
|
||
|
|
publicCalendar: '\uEF6D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF6E'.
|
||
|
|
*/
|
||
|
|
publicContactCard: '\uEF6E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF6F'.
|
||
|
|
*/
|
||
|
|
publicEmail: '\uEF6F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF70'.
|
||
|
|
*/
|
||
|
|
publicFolder: '\uEF70',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA86'.
|
||
|
|
*/
|
||
|
|
puzzle: '\uEA86',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE19'.
|
||
|
|
*/
|
||
|
|
questionnaire: '\uEE19',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE4B'.
|
||
|
|
*/
|
||
|
|
questionnaireMirrored: '\uEE4B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE70B'.
|
||
|
|
*/
|
||
|
|
quickNote: '\uE70B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECCB'.
|
||
|
|
*/
|
||
|
|
radioBtnOn: '\uECCB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE915'.
|
||
|
|
*/
|
||
|
|
radioBullet: '\uE915',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C4'.
|
||
|
|
*/
|
||
|
|
rain: '\uE9C4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C3'.
|
||
|
|
*/
|
||
|
|
rainShowersDay: '\uE9C3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA0F'.
|
||
|
|
*/
|
||
|
|
rainShowersNight: '\uEA0F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C7'.
|
||
|
|
*/
|
||
|
|
rainSnow: '\uE9C7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8C3'.
|
||
|
|
*/
|
||
|
|
read: '\uE8C3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE736'.
|
||
|
|
*/
|
||
|
|
readingMode: '\uE736',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF5B'.
|
||
|
|
*/
|
||
|
|
receiptCheck: '\uEF5B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF59'.
|
||
|
|
*/
|
||
|
|
receiptForward: '\uEF59',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF5A'.
|
||
|
|
*/
|
||
|
|
receiptReply: '\uEF5A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE823'.
|
||
|
|
*/
|
||
|
|
recent: '\uE823',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF5D'.
|
||
|
|
*/
|
||
|
|
recurringEvent: '\uEF5D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDB2'.
|
||
|
|
*/
|
||
|
|
recurringTask: '\uEDB2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF87'.
|
||
|
|
*/
|
||
|
|
recycleBin: '\uEF87',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7B3'.
|
||
|
|
*/
|
||
|
|
redEye: '\uE7B3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7A6'.
|
||
|
|
*/
|
||
|
|
redo: '\uE7A6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE72C'.
|
||
|
|
*/
|
||
|
|
refresh: '\uE72C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEBF8'.
|
||
|
|
*/
|
||
|
|
reminderGroup: '\uEBF8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE738'.
|
||
|
|
*/
|
||
|
|
remove: '\uE738',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED8A'.
|
||
|
|
*/
|
||
|
|
removeEvent: '\uED8A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB08'.
|
||
|
|
*/
|
||
|
|
removeFilter: '\uEB08',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED90'.
|
||
|
|
*/
|
||
|
|
removeLink: '\uED90',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED9B'.
|
||
|
|
*/
|
||
|
|
removeOccurrence: '\uED9B',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8AC'.
|
||
|
|
*/
|
||
|
|
rename: '\uE8AC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED50'.
|
||
|
|
*/
|
||
|
|
reopenPages: '\uED50',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE90F'.
|
||
|
|
*/
|
||
|
|
repair: '\uE90F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE97A'.
|
||
|
|
*/
|
||
|
|
reply: '\uE97A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE0A'.
|
||
|
|
*/
|
||
|
|
replyAll: '\uEE0A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF5F'.
|
||
|
|
*/
|
||
|
|
replyAllAlt: '\uEF5F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE36'.
|
||
|
|
*/
|
||
|
|
replyAllMirrored: '\uEE36',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF5E'.
|
||
|
|
*/
|
||
|
|
replyAlt: '\uEF5E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE35'.
|
||
|
|
*/
|
||
|
|
replyMirrored: '\uEE35',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEBB'.
|
||
|
|
*/
|
||
|
|
reportLibrary: '\uEEBB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEEBC'.
|
||
|
|
*/
|
||
|
|
reportLibraryMirrored: '\uEEBC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED24'.
|
||
|
|
*/
|
||
|
|
returnToSession: '\uED24',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE845'.
|
||
|
|
*/
|
||
|
|
revToggleKey: '\uE845',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9D1'.
|
||
|
|
*/
|
||
|
|
ribbon: '\uE9D1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9B1'.
|
||
|
|
*/
|
||
|
|
rightDoubleQuote: '\uE9B1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA8F'.
|
||
|
|
*/
|
||
|
|
ringer: '\uEA8F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED9F'.
|
||
|
|
*/
|
||
|
|
room: '\uED9F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7AD'.
|
||
|
|
*/
|
||
|
|
rotate: '\uE7AD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB2D'.
|
||
|
|
*/
|
||
|
|
rugby: '\uEB2D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEADA'.
|
||
|
|
*/
|
||
|
|
running: '\uEADA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE757'.
|
||
|
|
*/
|
||
|
|
sad: '\uE757',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE74E'.
|
||
|
|
*/
|
||
|
|
save: '\uE74E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE792'.
|
||
|
|
*/
|
||
|
|
saveAs: '\uE792',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE721'.
|
||
|
|
*/
|
||
|
|
search: '\uE721',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC0C'.
|
||
|
|
*/
|
||
|
|
section: '\uEC0C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF76'.
|
||
|
|
*/
|
||
|
|
sections: '\uEF76',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED85'.
|
||
|
|
*/
|
||
|
|
securityGroup: '\uED85',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE724'.
|
||
|
|
*/
|
||
|
|
send: '\uE724',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA63'.
|
||
|
|
*/
|
||
|
|
sendMirrored: '\uEA63',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uF071'.
|
||
|
|
*/
|
||
|
|
setAction: '\uF071',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE713'.
|
||
|
|
*/
|
||
|
|
settings: '\uE713',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE72D'.
|
||
|
|
*/
|
||
|
|
share: '\uE72D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF79'.
|
||
|
|
*/
|
||
|
|
shareiOs: '\uEF79',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED18'.
|
||
|
|
*/
|
||
|
|
sharepointLogo: '\uED18',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA18'.
|
||
|
|
*/
|
||
|
|
shield: '\uEA18',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE719'.
|
||
|
|
*/
|
||
|
|
shop: '\uE719',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7BF'.
|
||
|
|
*/
|
||
|
|
shoppingCart: '\uE7BF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8BC'.
|
||
|
|
*/
|
||
|
|
showResults: '\uE8BC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA65'.
|
||
|
|
*/
|
||
|
|
showResultsMirrored: '\uEA65',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF52'.
|
||
|
|
*/
|
||
|
|
sidePanel: '\uEF52',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDFF'.
|
||
|
|
*/
|
||
|
|
singleBookmark: '\uEDFF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE759'.
|
||
|
|
*/
|
||
|
|
sipMove: '\uE759',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF80'.
|
||
|
|
*/
|
||
|
|
skypeCheck: '\uEF80',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF7D'.
|
||
|
|
*/
|
||
|
|
skypeCircleCheck: '\uEF7D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF7E'.
|
||
|
|
*/
|
||
|
|
skypeCircleClock: '\uEF7E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF7F'.
|
||
|
|
*/
|
||
|
|
skypeCircleMinus: '\uEF7F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF81'.
|
||
|
|
*/
|
||
|
|
skypeClock: '\uEF81',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB6F'.
|
||
|
|
*/
|
||
|
|
skypeLogo: '\uEB6F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF83'.
|
||
|
|
*/
|
||
|
|
skypeMessage: '\uEF83',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF82'.
|
||
|
|
*/
|
||
|
|
skypeMinus: '\uEF82',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC13'.
|
||
|
|
*/
|
||
|
|
sliderThumb: '\uEC13',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB46'.
|
||
|
|
*/
|
||
|
|
snow: '\uEB46',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9FD'.
|
||
|
|
*/
|
||
|
|
snowShowerDay: '\uE9FD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA11'.
|
||
|
|
*/
|
||
|
|
snowShowerNight: '\uEA11',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB21'.
|
||
|
|
*/
|
||
|
|
soccer: '\uEB21',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED7C'.
|
||
|
|
*/
|
||
|
|
socialListeningLogo: '\uED7C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8CB'.
|
||
|
|
*/
|
||
|
|
sort: '\uE8CB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE69'.
|
||
|
|
*/
|
||
|
|
sortDown: '\uEE69',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9D0'.
|
||
|
|
*/
|
||
|
|
sortLines: '\uE9D0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE68'.
|
||
|
|
*/
|
||
|
|
sortUp: '\uEE68',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7F5'.
|
||
|
|
*/
|
||
|
|
speakers: '\uE7F5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC4A'.
|
||
|
|
*/
|
||
|
|
speedHigh: '\uEC4A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDBC'.
|
||
|
|
*/
|
||
|
|
split: '\uEDBC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9CC'.
|
||
|
|
*/
|
||
|
|
squalls: '\uE9CC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7FF'.
|
||
|
|
*/
|
||
|
|
stackIndicator: '\uE7FF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF78'.
|
||
|
|
*/
|
||
|
|
starburst: '\uEF78',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB90'.
|
||
|
|
*/
|
||
|
|
statusErrorFull: '\uEB90',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA82'.
|
||
|
|
*/
|
||
|
|
statusTriangle: '\uEA82',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB0F'.
|
||
|
|
*/
|
||
|
|
stockDown: '\uEB0F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB11'.
|
||
|
|
*/
|
||
|
|
stockUp: '\uEB11',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE916'.
|
||
|
|
*/
|
||
|
|
stopwatch: '\uE916',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA96'.
|
||
|
|
*/
|
||
|
|
storeLogo: '\uEA96',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA04'.
|
||
|
|
*/
|
||
|
|
storeLogoMed: '\uEA04',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDE0'.
|
||
|
|
*/
|
||
|
|
strikethrough: '\uEDE0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDA1'.
|
||
|
|
*/
|
||
|
|
subscribe: '\uEDA1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDDF'.
|
||
|
|
*/
|
||
|
|
subscript: '\uEDDF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDD3'.
|
||
|
|
*/
|
||
|
|
suitcase: '\uEDD3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF69'.
|
||
|
|
*/
|
||
|
|
sunAdd: '\uEF69',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF6A'.
|
||
|
|
*/
|
||
|
|
sunQuestionMark: '\uEF6A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9BD'.
|
||
|
|
*/
|
||
|
|
sunny: '\uE9BD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDDE'.
|
||
|
|
*/
|
||
|
|
superscript: '\uEDDE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED29'.
|
||
|
|
*/
|
||
|
|
swayLogo: '\uED29',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8AB'.
|
||
|
|
*/
|
||
|
|
switcher: '\uE8AB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE810'.
|
||
|
|
*/
|
||
|
|
switcherStartEnd: '\uE810',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE895'.
|
||
|
|
*/
|
||
|
|
sync: '\uE895',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F7'.
|
||
|
|
*/
|
||
|
|
syncFolder: '\uE8F7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE6E'.
|
||
|
|
*/
|
||
|
|
syncToPc: '\uEE6E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE770'.
|
||
|
|
*/
|
||
|
|
system: '\uE770',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7E9'.
|
||
|
|
*/
|
||
|
|
tab: '\uE7E9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED86'.
|
||
|
|
*/
|
||
|
|
table: '\uED86',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE70A'.
|
||
|
|
*/
|
||
|
|
tablet: '\uE70A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC74'.
|
||
|
|
*/
|
||
|
|
tabletSelected: '\uEC74',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8EC'.
|
||
|
|
*/
|
||
|
|
tag: '\uE8EC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDB7'.
|
||
|
|
*/
|
||
|
|
taskManager: '\uEDB7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDB8'.
|
||
|
|
*/
|
||
|
|
taskManagerMirrored: '\uEDB8',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA12'.
|
||
|
|
*/
|
||
|
|
teamwork: '\uEA12',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEE58'.
|
||
|
|
*/
|
||
|
|
temporaryUser: '\uEE58',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB33'.
|
||
|
|
*/
|
||
|
|
tennis: '\uEB33',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC2'.
|
||
|
|
*/
|
||
|
|
textBox: '\uEDC2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDC3'.
|
||
|
|
*/
|
||
|
|
textField: '\uEDC3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7B6'.
|
||
|
|
*/
|
||
|
|
thumbnailView: '\uE7B6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA67'.
|
||
|
|
*/
|
||
|
|
thumbnailViewMirrored: '\uEA67',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE9C6'.
|
||
|
|
*/
|
||
|
|
thunderstorms: '\uE9C6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB54'.
|
||
|
|
*/
|
||
|
|
ticket: '\uEB54',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF7C'.
|
||
|
|
*/
|
||
|
|
tiles2: '\uEF7C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uECA5'.
|
||
|
|
*/
|
||
|
|
tiles: '\uECA5',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED9C'.
|
||
|
|
*/
|
||
|
|
timeline: '\uED9C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE91E'.
|
||
|
|
*/
|
||
|
|
timer: '\uE91E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC12'.
|
||
|
|
*/
|
||
|
|
toggleBorder: '\uEC12',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC11'.
|
||
|
|
*/
|
||
|
|
toggleFilled: '\uEC11',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC14'.
|
||
|
|
*/
|
||
|
|
toggleThumb: '\uEC14',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE815'.
|
||
|
|
*/
|
||
|
|
touch: '\uE815',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7C9'.
|
||
|
|
*/
|
||
|
|
touchPointer: '\uE7C9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7C0'.
|
||
|
|
*/
|
||
|
|
train: '\uE7C0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB4D'.
|
||
|
|
*/
|
||
|
|
trainSolid: '\uEB4D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED95'.
|
||
|
|
*/
|
||
|
|
transferCall: '\uED95',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE74D'.
|
||
|
|
*/
|
||
|
|
trash: '\uE74D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED1'.
|
||
|
|
*/
|
||
|
|
triangleDown12: '\uEED1',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED2'.
|
||
|
|
*/
|
||
|
|
triangleLeft12: '\uEED2',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED3'.
|
||
|
|
*/
|
||
|
|
triangleRight12: '\uEED3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEECD'.
|
||
|
|
*/
|
||
|
|
triangleSolidDown12: '\uEECD',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEECE'.
|
||
|
|
*/
|
||
|
|
triangleSolidLeft12: '\uEECE',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEECF'.
|
||
|
|
*/
|
||
|
|
triangleSolidRight12: '\uEECF',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEECC'.
|
||
|
|
*/
|
||
|
|
triangleSolidUp12: '\uEECC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEED0'.
|
||
|
|
*/
|
||
|
|
triangleUp12: '\uEED0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED3F'.
|
||
|
|
*/
|
||
|
|
trophy: '\uED3F',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7DB'.
|
||
|
|
*/
|
||
|
|
turnRight: '\uE7DB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7F4'.
|
||
|
|
*/
|
||
|
|
tvMonitor: '\uE7F4',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC77'.
|
||
|
|
*/
|
||
|
|
tvMonitorSelected: '\uEC77',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8DC'.
|
||
|
|
*/
|
||
|
|
underline: '\uE8DC',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7A7'.
|
||
|
|
*/
|
||
|
|
undo: '\uE7A7',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8D9'.
|
||
|
|
*/
|
||
|
|
unfavorite: '\uE8D9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED97'.
|
||
|
|
*/
|
||
|
|
unknownCall: '\uED97',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE785'.
|
||
|
|
*/
|
||
|
|
unlock: '\uE785',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE77A'.
|
||
|
|
*/
|
||
|
|
unpin: '\uE77A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEDA0'.
|
||
|
|
*/
|
||
|
|
unsubscribe: '\uEDA0',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8F6'.
|
||
|
|
*/
|
||
|
|
unsyncFolder: '\uE8F6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE74A'.
|
||
|
|
*/
|
||
|
|
up: '\uE74A',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE898'.
|
||
|
|
*/
|
||
|
|
upload: '\uE898',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE714'.
|
||
|
|
*/
|
||
|
|
video: '\uE714',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA0C'.
|
||
|
|
*/
|
||
|
|
videoSolid: '\uEA0C',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE890'.
|
||
|
|
*/
|
||
|
|
view: '\uE890',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF56'.
|
||
|
|
*/
|
||
|
|
viewAll2: '\uEF56',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A9'.
|
||
|
|
*/
|
||
|
|
viewAll: '\uE8A9',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED7D'.
|
||
|
|
*/
|
||
|
|
visioLogo: '\uED7D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED87'.
|
||
|
|
*/
|
||
|
|
voicemailForward: '\uED87',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED88'.
|
||
|
|
*/
|
||
|
|
voicemailReply: '\uED88',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE992'.
|
||
|
|
*/
|
||
|
|
volume0: '\uE992',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE993'.
|
||
|
|
*/
|
||
|
|
volume1: '\uE993',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE994'.
|
||
|
|
*/
|
||
|
|
volume2: '\uE994',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE995'.
|
||
|
|
*/
|
||
|
|
volume3: '\uE995',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA85'.
|
||
|
|
*/
|
||
|
|
volumeDisabled: '\uEA85',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED89'.
|
||
|
|
*/
|
||
|
|
waffle: '\uED89',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE7BA'.
|
||
|
|
*/
|
||
|
|
warning: '\uE7BA',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEB41'.
|
||
|
|
*/
|
||
|
|
website: '\uEB41',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEADB'.
|
||
|
|
*/
|
||
|
|
weights: '\uEADB',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEBE6'.
|
||
|
|
*/
|
||
|
|
windDirection: '\uEBE6',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE782'.
|
||
|
|
*/
|
||
|
|
windowsLogo: '\uE782',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED8D'.
|
||
|
|
*/
|
||
|
|
wipePhone: '\uED8D',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEF71'.
|
||
|
|
*/
|
||
|
|
wordDocument: '\uEF71',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEC29'.
|
||
|
|
*/
|
||
|
|
wordLogo: '\uEC29',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE821'.
|
||
|
|
*/
|
||
|
|
work: '\uE821',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uEA01'.
|
||
|
|
*/
|
||
|
|
workFlow: '\uEA01',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE918'.
|
||
|
|
*/
|
||
|
|
worldClock: '\uE918',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uED19'.
|
||
|
|
*/
|
||
|
|
yammerLogo: '\uED19',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE71E'.
|
||
|
|
*/
|
||
|
|
zoom: '\uE71E',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE8A3'.
|
||
|
|
*/
|
||
|
|
zoomIn: '\uE8A3',
|
||
|
|
/**
|
||
|
|
* Icon code with the value '\uE71F'.
|
||
|
|
*/
|
||
|
|
zoomOut: '\uE71F'
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 125 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var index_1 = __webpack_require__(118);
|
||
|
|
var glamorExports_1 = __webpack_require__(70);
|
||
|
|
/**
|
||
|
|
* Generates a focus style which can be used to define an :after focus border.
|
||
|
|
*
|
||
|
|
* @param theme - The theme object to use.
|
||
|
|
* @param inset - The number of pixels to inset the border.
|
||
|
|
* @param color - The color for the border.
|
||
|
|
* @param position - The positioning applied to the container. Must
|
||
|
|
* be 'relative' or 'absolute' so that the focus border can live around it.
|
||
|
|
* @returns The style object.
|
||
|
|
*/
|
||
|
|
function getFocusStyle(theme, inset, color, position) {
|
||
|
|
if (inset === void 0) { inset = '0'; }
|
||
|
|
if (color === void 0) { color = theme.palette.neutralSecondary; }
|
||
|
|
if (position === void 0) { position = 'relative'; }
|
||
|
|
return index_1.mergeStyles({
|
||
|
|
outline: 'transparent',
|
||
|
|
position: position
|
||
|
|
}, glamorExports_1.parent('.ms-Fabric.is-focusVisible', {
|
||
|
|
':focus:after': {
|
||
|
|
content: '""',
|
||
|
|
position: 'absolute',
|
||
|
|
left: inset,
|
||
|
|
top: inset,
|
||
|
|
bottom: inset,
|
||
|
|
right: inset,
|
||
|
|
border: '1px solid ' + color
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
exports.getFocusStyle = getFocusStyle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 126 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var glamor_1 = __webpack_require__(71);
|
||
|
|
/**
|
||
|
|
* Takes a collection of collection of styles, defined in various formats, and compresses them into
|
||
|
|
* a single thing of one format to return.
|
||
|
|
* If any class names (strings) are passed in, it will return a list of space-separated class names,
|
||
|
|
* using glamor to generate a class name for all passed in style objects.
|
||
|
|
* Otherwise, all style objects passed in will be compressed into a single IProcessedStyle.
|
||
|
|
*
|
||
|
|
* @export
|
||
|
|
* @param {(...(IStyle | string)[])} args
|
||
|
|
* @returns {IStyle}
|
||
|
|
*/
|
||
|
|
function mergeStyles() {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
var classes = [];
|
||
|
|
var rules = [];
|
||
|
|
function _parseArgs(theArgs) {
|
||
|
|
for (var _i = 0, theArgs_1 = theArgs; _i < theArgs_1.length; _i++) {
|
||
|
|
var arg = theArgs_1[_i];
|
||
|
|
if (arg) {
|
||
|
|
if (typeof arg === 'string') {
|
||
|
|
classes.push(arg);
|
||
|
|
}
|
||
|
|
else if (Array.isArray(arg)) {
|
||
|
|
_parseArgs(arg);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
rules.push(arg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_parseArgs(args);
|
||
|
|
var rulesObject = rules.length ? glamor_1.css.apply(void 0, rules) : null;
|
||
|
|
if (classes.length) {
|
||
|
|
if (rulesObject) {
|
||
|
|
classes.push(rulesObject.toString());
|
||
|
|
}
|
||
|
|
return classes.join(' ');
|
||
|
|
}
|
||
|
|
return rulesObject;
|
||
|
|
}
|
||
|
|
exports.mergeStyles = mergeStyles;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 127 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var mergeStyles_1 = __webpack_require__(126);
|
||
|
|
/**
|
||
|
|
* Merges a give set of styles by running mergeStyles for each unique key. Works
|
||
|
|
* like Object.assign in that it layers them in the argument order specified, but will
|
||
|
|
* not mutate them and will return the merged result.
|
||
|
|
*/
|
||
|
|
function mergeStyleSets() {
|
||
|
|
var args = [];
|
||
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||
|
|
args[_i] = arguments[_i];
|
||
|
|
}
|
||
|
|
var mergedRules = {};
|
||
|
|
var setStyles = {};
|
||
|
|
args.forEach(function (arg) { return arg && Object.keys(arg).forEach(function (key) {
|
||
|
|
if (!setStyles[key]) {
|
||
|
|
setStyles[key] = [];
|
||
|
|
}
|
||
|
|
setStyles[key].push(arg[key]);
|
||
|
|
}); });
|
||
|
|
Object.keys(setStyles).forEach(function (key) {
|
||
|
|
mergedRules[key] = mergeStyles_1.mergeStyles(setStyles[key]);
|
||
|
|
});
|
||
|
|
return mergedRules;
|
||
|
|
}
|
||
|
|
exports.mergeStyleSets = mergeStyleSets;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 128 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var mergeStyles_1 = __webpack_require__(126);
|
||
|
|
/**
|
||
|
|
* Builds a class names object from a given map.
|
||
|
|
*
|
||
|
|
* @param styles - Map of unprocessed styles.
|
||
|
|
* @returns Map of property name to class name.
|
||
|
|
*/
|
||
|
|
function buildClassMap(styles) {
|
||
|
|
return Object
|
||
|
|
.keys(styles)
|
||
|
|
.reduce(function (classNames, className) {
|
||
|
|
classNames[className] = mergeStyles_1.mergeStyles(styles[className]).toString();
|
||
|
|
return classNames;
|
||
|
|
}, {});
|
||
|
|
}
|
||
|
|
exports.buildClassMap = buildClassMap;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 129 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var index_1 = __webpack_require__(118);
|
||
|
|
var index_2 = __webpack_require__(120);
|
||
|
|
exports.FontClassNames = index_1.buildClassMap(index_2.DefaultFontStyles);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 130 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var index_1 = __webpack_require__(120);
|
||
|
|
var index_2 = __webpack_require__(118);
|
||
|
|
/**
|
||
|
|
* All class names for all Fabric icons.
|
||
|
|
*/
|
||
|
|
exports.IconClassNames = {};
|
||
|
|
var _loop_1 = function (iconName) {
|
||
|
|
Object.defineProperty(exports.IconClassNames, iconName, {
|
||
|
|
get: function () {
|
||
|
|
var className = index_2.mergeStyles(index_1.DefaultFontStyles.icon, {
|
||
|
|
':before': {
|
||
|
|
content: "\"" + index_1.IconCodes[iconName] + "\""
|
||
|
|
}
|
||
|
|
}).toString();
|
||
|
|
return className;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// tslint:disable-next-line:forin
|
||
|
|
for (var iconName in index_1.IconCodes) {
|
||
|
|
_loop_1(iconName);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 131 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var index_1 = __webpack_require__(118);
|
||
|
|
var DefaultPalette_1 = __webpack_require__(122);
|
||
|
|
exports.ColorClassNames = {};
|
||
|
|
for (var colorName in DefaultPalette_1.DefaultPalette) {
|
||
|
|
if (DefaultPalette_1.DefaultPalette.hasOwnProperty(colorName)) {
|
||
|
|
// Foreground color
|
||
|
|
_defineGetter(exports.ColorClassNames, colorName, '', false, 'color');
|
||
|
|
// Hover color
|
||
|
|
_defineGetter(exports.ColorClassNames, colorName, 'Hover', true, 'color');
|
||
|
|
// Background color
|
||
|
|
_defineGetter(exports.ColorClassNames, colorName, 'Background', false, 'background');
|
||
|
|
// Background hover
|
||
|
|
_defineGetter(exports.ColorClassNames, colorName, 'BackgroundHover', true, 'background');
|
||
|
|
// Border color
|
||
|
|
_defineGetter(exports.ColorClassNames, colorName, 'Border', false, 'borderColor');
|
||
|
|
// Border hover color
|
||
|
|
_defineGetter(exports.ColorClassNames, colorName, 'BorderHover', true, 'borderColor');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Defines a getter for the given class configuration.
|
||
|
|
*/
|
||
|
|
function _defineGetter(obj, colorName, suffix, isHover, cssProperty) {
|
||
|
|
Object.defineProperty(obj, colorName + suffix, {
|
||
|
|
get: function () {
|
||
|
|
var style = (_a = {}, _a[cssProperty] = index_1.getTheme().palette[colorName], _a);
|
||
|
|
return index_1.mergeStyles(isHover ? { ':hover': style } : style).toString();
|
||
|
|
var _a;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 132 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(133));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 133 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(134));
|
||
|
|
__export(__webpack_require__(140));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 134 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var ReactDOM = __webpack_require__(3);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Fabric_1 = __webpack_require__(135);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(139);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var _layersByHostId = {};
|
||
|
|
var Layer = (function (_super) {
|
||
|
|
__extends(Layer, _super);
|
||
|
|
function Layer(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({
|
||
|
|
onLayerMounted: 'onLayerDidMount'
|
||
|
|
});
|
||
|
|
if (_this.props.hostId) {
|
||
|
|
if (!_layersByHostId[_this.props.hostId]) {
|
||
|
|
_layersByHostId[_this.props.hostId] = [];
|
||
|
|
}
|
||
|
|
_layersByHostId[_this.props.hostId].push(_this);
|
||
|
|
}
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
|
||
|
|
* care about the specific host.
|
||
|
|
*/
|
||
|
|
Layer.notifyHostChanged = function (id) {
|
||
|
|
if (_layersByHostId[id]) {
|
||
|
|
_layersByHostId[id].forEach(function (layer) { return layer.forceUpdate(); });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Layer.prototype.componentDidMount = function () {
|
||
|
|
this.componentDidUpdate();
|
||
|
|
};
|
||
|
|
Layer.prototype.componentWillUnmount = function () {
|
||
|
|
var _this = this;
|
||
|
|
this._removeLayerElement();
|
||
|
|
if (this.props.hostId) {
|
||
|
|
_layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(function (layer) { return layer !== _this; });
|
||
|
|
if (!_layersByHostId[this.props.hostId].length) {
|
||
|
|
delete _layersByHostId[this.props.hostId];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Layer.prototype.componentDidUpdate = function () {
|
||
|
|
var _this = this;
|
||
|
|
var host = this._getHost();
|
||
|
|
if (host !== this._host) {
|
||
|
|
this._removeLayerElement();
|
||
|
|
}
|
||
|
|
if (host) {
|
||
|
|
this._host = host;
|
||
|
|
if (!this._layerElement) {
|
||
|
|
var doc = Utilities_1.getDocument(this._rootElement);
|
||
|
|
this._layerElement = doc.createElement('div');
|
||
|
|
this._layerElement.className = Utilities_1.css('ms-Layer', (_a = {},
|
||
|
|
_a['ms-Layer--fixed ' + styles.rootIsFixed] = !this.props.hostId,
|
||
|
|
_a));
|
||
|
|
host.appendChild(this._layerElement);
|
||
|
|
Utilities_1.setVirtualParent(this._layerElement, this._rootElement);
|
||
|
|
}
|
||
|
|
// Using this 'unstable' method allows us to retain the React context across the layer projection.
|
||
|
|
ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(Fabric_1.Fabric, { className: Utilities_1.css('ms-Layer-content', styles.content) }, this.props.children), this._layerElement, function () {
|
||
|
|
if (!_this._hasMounted) {
|
||
|
|
_this._hasMounted = true;
|
||
|
|
// TODO: @deprecated cleanup required.
|
||
|
|
if (_this.props.onLayerMounted) {
|
||
|
|
_this.props.onLayerMounted();
|
||
|
|
}
|
||
|
|
_this.props.onLayerDidMount();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Layer.prototype.render = function () {
|
||
|
|
return (React.createElement("span", { className: 'ms-Layer', ref: this._resolveRef('_rootElement') }));
|
||
|
|
};
|
||
|
|
Layer.prototype._removeLayerElement = function () {
|
||
|
|
if (this._layerElement) {
|
||
|
|
this.props.onLayerWillUnmount();
|
||
|
|
ReactDOM.unmountComponentAtNode(this._layerElement);
|
||
|
|
var parentNode = this._layerElement.parentNode;
|
||
|
|
if (parentNode) {
|
||
|
|
parentNode.removeChild(this._layerElement);
|
||
|
|
}
|
||
|
|
this._layerElement = undefined;
|
||
|
|
this._hasMounted = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Layer.prototype._getHost = function () {
|
||
|
|
var hostId = this.props.hostId;
|
||
|
|
var doc = Utilities_1.getDocument(this._rootElement);
|
||
|
|
if (hostId) {
|
||
|
|
return doc.getElementById(hostId);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return doc.body;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Layer;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Layer.defaultProps = {
|
||
|
|
onLayerDidMount: function () { return undefined; },
|
||
|
|
onLayerWillUnmount: function () { return undefined; }
|
||
|
|
};
|
||
|
|
exports.Layer = Layer;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 135 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(136));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 136 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(137));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 137 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Fabric_styles_1 = __webpack_require__(138);
|
||
|
|
var DIRECTIONAL_KEY_CODES = [
|
||
|
|
Utilities_1.KeyCodes.up,
|
||
|
|
Utilities_1.KeyCodes.down,
|
||
|
|
Utilities_1.KeyCodes.left,
|
||
|
|
Utilities_1.KeyCodes.right,
|
||
|
|
Utilities_1.KeyCodes.home,
|
||
|
|
Utilities_1.KeyCodes.end,
|
||
|
|
Utilities_1.KeyCodes.tab,
|
||
|
|
Utilities_1.KeyCodes.pageUp,
|
||
|
|
Utilities_1.KeyCodes.pageDown
|
||
|
|
];
|
||
|
|
// We will track the last focus visibility state so that if we tear down and recreate
|
||
|
|
// the Fabric component, we will use the last known value as the default.
|
||
|
|
var _lastIsFocusVisible = false;
|
||
|
|
// Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work.
|
||
|
|
if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) {
|
||
|
|
document.documentElement.setAttribute('dir', 'ltr');
|
||
|
|
}
|
||
|
|
var Fabric = (function (_super) {
|
||
|
|
__extends(Fabric, _super);
|
||
|
|
function Fabric() {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
_this.state = {
|
||
|
|
isFocusVisible: _lastIsFocusVisible
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Fabric.prototype.componentDidMount = function () {
|
||
|
|
this._events.on(document.body, 'mousedown', this._onMouseDown, true);
|
||
|
|
this._events.on(document.body, 'keydown', this._onKeyDown, true);
|
||
|
|
};
|
||
|
|
Fabric.prototype.render = function () {
|
||
|
|
var isFocusVisible = this.state.isFocusVisible;
|
||
|
|
var styles = Fabric_styles_1.getStyles();
|
||
|
|
var rootClass = Styling_1.mergeStyles('ms-Fabric', styles.root, this.props.className, isFocusVisible && 'is-focusVisible');
|
||
|
|
return (React.createElement("div", __assign({}, this.props, { className: rootClass, ref: 'root' })));
|
||
|
|
};
|
||
|
|
Fabric.prototype._onMouseDown = function () {
|
||
|
|
if (this.state.isFocusVisible) {
|
||
|
|
this.setState({
|
||
|
|
isFocusVisible: false
|
||
|
|
});
|
||
|
|
_lastIsFocusVisible = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Fabric.prototype._onKeyDown = function (ev) {
|
||
|
|
if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
|
||
|
|
this.setState({
|
||
|
|
isFocusVisible: true
|
||
|
|
});
|
||
|
|
_lastIsFocusVisible = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Fabric;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.Fabric = Fabric;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 138 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var inheritFont = { fontFamily: 'inherit' };
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
return {
|
||
|
|
root: [
|
||
|
|
theme.fonts.medium,
|
||
|
|
{
|
||
|
|
color: theme.palette.neutralPrimary,
|
||
|
|
'& button': inheritFont,
|
||
|
|
'& input': inheritFont
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 139 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
rootIsFixed: 'rootIsFixed_cadfc200',
|
||
|
|
content: 'content_cadfc200',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".rootIsFixed_cadfc200{position:fixed;z-index:1000000;top:0;left:0;width:100vw;height:100vh;visibility:hidden}.content_cadfc200{visibility:visible}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 140 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Layer_1 = __webpack_require__(134);
|
||
|
|
var LayerHost = (function (_super) {
|
||
|
|
__extends(LayerHost, _super);
|
||
|
|
function LayerHost() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
LayerHost.prototype.shouldComponentUpdate = function () {
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
LayerHost.prototype.componentDidMount = function () {
|
||
|
|
Layer_1.Layer.notifyHostChanged(this.props.id);
|
||
|
|
};
|
||
|
|
LayerHost.prototype.componentWillUnmount = function () {
|
||
|
|
Layer_1.Layer.notifyHostChanged(this.props.id);
|
||
|
|
};
|
||
|
|
LayerHost.prototype.render = function () {
|
||
|
|
return (React.createElement("div", __assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className) })));
|
||
|
|
};
|
||
|
|
return LayerHost;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.LayerHost = LayerHost;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 141 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(142));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 142 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(143));
|
||
|
|
__export(__webpack_require__(144));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 143 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __assign = (this && this.__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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable */
|
||
|
|
var Icon_Props_1 = __webpack_require__(144);
|
||
|
|
var Image_1 = __webpack_require__(145);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Icon_styles_1 = __webpack_require__(148);
|
||
|
|
function Icon(props) {
|
||
|
|
var ariaLabel = props.ariaLabel, className = props.className, customStyles = props.styles, iconName = props.iconName;
|
||
|
|
var styles = Icon_styles_1.getStyles(undefined, customStyles);
|
||
|
|
if (props.iconType === Icon_Props_1.IconType.image || props.iconType === Icon_Props_1.IconType.Image) {
|
||
|
|
var containerClassName = Utilities_1.css('ms-Icon', 'ms-Icon-imageContainer', styles.root, styles.imageContainer, className);
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css(containerClassName, styles.root) },
|
||
|
|
"l ",
|
||
|
|
React.createElement(Image_1.Image, __assign({}, props.imageProps))));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var iconMemberName = iconName ? iconName.charAt(0).toLowerCase() + iconName.substr(1) : '';
|
||
|
|
return (React.createElement("i", __assign({ "aria-label": ariaLabel }, (ariaLabel ? {} : {
|
||
|
|
role: 'presentation',
|
||
|
|
'aria-hidden': true
|
||
|
|
}), Utilities_1.getNativeProps(props, Utilities_1.htmlElementProperties), { className: Utilities_1.css('ms-Icon', Styling_1.IconClassNames[iconMemberName], styles.root, props.className) })));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.Icon = Icon;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 144 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
// Please keep alphabetized
|
||
|
|
var IconType;
|
||
|
|
(function (IconType) {
|
||
|
|
/**
|
||
|
|
* Render using the fabric icon font.
|
||
|
|
*/
|
||
|
|
IconType[IconType["default"] = 0] = "default";
|
||
|
|
/**
|
||
|
|
* Render using an image, where imageProps would be used.
|
||
|
|
*/
|
||
|
|
IconType[IconType["image"] = 1] = "image";
|
||
|
|
/**
|
||
|
|
* Deprecated, use default.
|
||
|
|
* @deprecated
|
||
|
|
*/
|
||
|
|
IconType[IconType["Default"] = 100000] = "Default";
|
||
|
|
/**
|
||
|
|
* Deprecated, use image.
|
||
|
|
* @deprecated
|
||
|
|
*/
|
||
|
|
IconType[IconType["Image"] = 100001] = "Image";
|
||
|
|
})(IconType = exports.IconType || (exports.IconType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 145 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Image_Props_1 = __webpack_require__(146);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var stylesImport = __webpack_require__(147);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var CoverStyle;
|
||
|
|
(function (CoverStyle) {
|
||
|
|
CoverStyle[CoverStyle["landscape"] = 0] = "landscape";
|
||
|
|
CoverStyle[CoverStyle["portrait"] = 1] = "portrait";
|
||
|
|
})(CoverStyle = exports.CoverStyle || (exports.CoverStyle = {}));
|
||
|
|
exports.CoverStyleMap = (_a = {},
|
||
|
|
_a[CoverStyle.landscape] = 'ms-Image-image--landscape ' + styles.imageIsLandscape,
|
||
|
|
_a[CoverStyle.portrait] = 'ms-Image-image--portrait ' + styles.imageIsPortrait,
|
||
|
|
_a);
|
||
|
|
exports.ImageFitMap = (_b = {},
|
||
|
|
_b[Image_Props_1.ImageFit.center] = 'ms-Image-image--center ' + styles.imageIsCenter,
|
||
|
|
_b[Image_Props_1.ImageFit.contain] = 'ms-Image-image--contain ' + styles.imageIsContain,
|
||
|
|
_b[Image_Props_1.ImageFit.cover] = 'ms-Image-image--cover ' + styles.imageIsCover,
|
||
|
|
_b[Image_Props_1.ImageFit.none] = 'ms-Image-image--none ' + styles.imageIsNone,
|
||
|
|
_b);
|
||
|
|
var KEY_PREFIX = 'fabricImage';
|
||
|
|
var Image = (function (_super) {
|
||
|
|
__extends(Image, _super);
|
||
|
|
function Image(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
// Make an initial assumption about the image layout until we can
|
||
|
|
// check the rendered element. The value here only takes effect when
|
||
|
|
// shouldStartVisible is true.
|
||
|
|
_this._coverStyle = CoverStyle.portrait;
|
||
|
|
_this.state = {
|
||
|
|
loadState: Image_Props_1.ImageLoadState.notLoaded
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Image.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
if (nextProps.src !== this.props.src) {
|
||
|
|
this.setState({
|
||
|
|
loadState: Image_Props_1.ImageLoadState.notLoaded
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if (this.state.loadState === Image_Props_1.ImageLoadState.loaded) {
|
||
|
|
this._computeCoverStyle(nextProps);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Image.prototype.componentDidUpdate = function (prevProps, prevState) {
|
||
|
|
this._checkImageLoaded();
|
||
|
|
if (this.props.onLoadingStateChange
|
||
|
|
&& prevState.loadState !== this.state.loadState) {
|
||
|
|
this.props.onLoadingStateChange(this.state.loadState);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Image.prototype.render = function () {
|
||
|
|
var imageProps = Utilities_1.getNativeProps(this.props, Utilities_1.imageProperties, ['width', 'height']);
|
||
|
|
var _a = this.props, src = _a.src, alt = _a.alt, width = _a.width, height = _a.height, shouldFadeIn = _a.shouldFadeIn, className = _a.className, imageFit = _a.imageFit, role = _a.role, maximizeFrame = _a.maximizeFrame;
|
||
|
|
var loadState = this.state.loadState;
|
||
|
|
var coverStyle = this._coverStyle;
|
||
|
|
var loaded = loadState === Image_Props_1.ImageLoadState.loaded || (loadState === Image_Props_1.ImageLoadState.notLoaded && this.props.shouldStartVisible);
|
||
|
|
// If image dimensions aren't specified, the natural size of the image is used.
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Image', styles.root, className, (_b = {},
|
||
|
|
_b['ms-Image--maximizeFrame ' + styles.rootIsMaximizeFrame] = maximizeFrame,
|
||
|
|
_b)), style: { width: width, height: height }, ref: this._resolveRef('_frameElement') },
|
||
|
|
React.createElement("img", __assign({}, imageProps, { onLoad: this._onImageLoaded, onError: this._onImageError, key: KEY_PREFIX + this.props.src || '', className: Utilities_1.css('ms-Image-image', styles.image, exports.CoverStyleMap[coverStyle], (imageFit !== undefined) && exports.ImageFitMap[imageFit], !loaded && 'is-notLoaded', loaded && 'is-loaded ' + styles.imageIsLoaded, shouldFadeIn && 'is-fadeIn', loadState === Image_Props_1.ImageLoadState.error && 'is-error', loaded && shouldFadeIn && Styling_1.AnimationClassNames.fadeIn400, (_c = {},
|
||
|
|
_c['ms-Image-image--scaleWidth ' + styles.imageIsScaleWidth] = (imageFit === undefined && !!width && !height),
|
||
|
|
_c['ms-Image-image--scaleHeight ' + styles.imageIsScaleHeight] = (imageFit === undefined && !width && !!height),
|
||
|
|
_c['ms-Image-image--scaleWidthHeight ' + styles.imageIsScaleWidthHeight] = (imageFit === undefined && !!width && !!height),
|
||
|
|
_c)), ref: this._resolveRef('_imageElement'), src: src, alt: alt, role: role }))));
|
||
|
|
var _b, _c;
|
||
|
|
};
|
||
|
|
Image.prototype._onImageLoaded = function (ev) {
|
||
|
|
var _a = this.props, src = _a.src, onLoad = _a.onLoad;
|
||
|
|
if (onLoad) {
|
||
|
|
onLoad(ev);
|
||
|
|
}
|
||
|
|
this._computeCoverStyle(this.props);
|
||
|
|
if (src) {
|
||
|
|
this.setState({
|
||
|
|
loadState: Image_Props_1.ImageLoadState.loaded
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Image.prototype._checkImageLoaded = function () {
|
||
|
|
var src = this.props.src;
|
||
|
|
var loadState = this.state.loadState;
|
||
|
|
if (loadState === Image_Props_1.ImageLoadState.notLoaded) {
|
||
|
|
// testing if naturalWidth and naturalHeight are greater than zero is better than checking
|
||
|
|
// .complete, because .complete will also be set to true if the image breaks. However,
|
||
|
|
// for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back
|
||
|
|
// to checking .complete for these images.
|
||
|
|
var isLoaded = src && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) ||
|
||
|
|
(this._imageElement.complete && Image._svgRegex.test(src));
|
||
|
|
if (isLoaded) {
|
||
|
|
this._computeCoverStyle(this.props);
|
||
|
|
this.setState({
|
||
|
|
loadState: Image_Props_1.ImageLoadState.loaded
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Image.prototype._computeCoverStyle = function (props) {
|
||
|
|
var imageFit = props.imageFit, width = props.width, height = props.height;
|
||
|
|
if (imageFit === Image_Props_1.ImageFit.cover || imageFit === Image_Props_1.ImageFit.contain) {
|
||
|
|
if (this._imageElement) {
|
||
|
|
// Determine the desired ratio using the width and height props.
|
||
|
|
// If those props aren't available, measure measure the frame.
|
||
|
|
var desiredRatio = void 0;
|
||
|
|
if (!!width && !!height) {
|
||
|
|
desiredRatio = width / height;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
|
||
|
|
}
|
||
|
|
// Examine the source image to determine its original ratio.
|
||
|
|
var naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
|
||
|
|
// Should we crop from the top or the sides?
|
||
|
|
if (naturalRatio > desiredRatio) {
|
||
|
|
this._coverStyle = CoverStyle.landscape;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._coverStyle = CoverStyle.portrait;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Image.prototype._onImageError = function (ev) {
|
||
|
|
if (this.props.onError) {
|
||
|
|
this.props.onError(ev);
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
loadState: Image_Props_1.ImageLoadState.error
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return Image;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Image.defaultProps = {
|
||
|
|
shouldFadeIn: true
|
||
|
|
};
|
||
|
|
Image._svgRegex = /\.svg$/i;
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Image.prototype, "_onImageLoaded", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Image.prototype, "_onImageError", null);
|
||
|
|
exports.Image = Image;
|
||
|
|
var _a, _b;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 146 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* The possible methods that can be used to fit the image.
|
||
|
|
*/
|
||
|
|
var ImageFit;
|
||
|
|
(function (ImageFit) {
|
||
|
|
/**
|
||
|
|
* The image is not scaled. The image is centered and cropped within the content box.
|
||
|
|
*/
|
||
|
|
ImageFit[ImageFit["center"] = 0] = "center";
|
||
|
|
/**
|
||
|
|
* The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will
|
||
|
|
* be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of
|
||
|
|
* the frame will be empty depending on the difference in aspect ratio between the image and the frame.
|
||
|
|
*/
|
||
|
|
ImageFit[ImageFit["contain"] = 1] = "contain";
|
||
|
|
/**
|
||
|
|
* The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped from
|
||
|
|
* the top and bottom, or from the sides, depending on the difference in aspect ratio between the image and the frame.
|
||
|
|
*/
|
||
|
|
ImageFit[ImageFit["cover"] = 2] = "cover";
|
||
|
|
/**
|
||
|
|
* Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the
|
||
|
|
* frame will have empty space.
|
||
|
|
*/
|
||
|
|
ImageFit[ImageFit["none"] = 3] = "none";
|
||
|
|
})(ImageFit = exports.ImageFit || (exports.ImageFit = {}));
|
||
|
|
var ImageLoadState;
|
||
|
|
(function (ImageLoadState) {
|
||
|
|
/**
|
||
|
|
* The image has not yet been loaded, and there is no error yet.
|
||
|
|
*/
|
||
|
|
ImageLoadState[ImageLoadState["notLoaded"] = 0] = "notLoaded";
|
||
|
|
/**
|
||
|
|
* The image has been loaded successfully.
|
||
|
|
*/
|
||
|
|
ImageLoadState[ImageLoadState["loaded"] = 1] = "loaded";
|
||
|
|
/**
|
||
|
|
* An error has been encountered while loading the image.
|
||
|
|
*/
|
||
|
|
ImageLoadState[ImageLoadState["error"] = 2] = "error";
|
||
|
|
/**
|
||
|
|
* Deprecated at v1.3.6, to replace the src in case of errors, use onLoadingStateChange instead
|
||
|
|
* and rerender the Image with a difference src.
|
||
|
|
* @deprecated
|
||
|
|
*/
|
||
|
|
ImageLoadState[ImageLoadState["errorLoaded"] = 3] = "errorLoaded";
|
||
|
|
})(ImageLoadState = exports.ImageLoadState || (exports.ImageLoadState = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 147 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_9f38a260',
|
||
|
|
rootIsMaximizeFrame: 'rootIsMaximizeFrame_9f38a260',
|
||
|
|
image: 'image_9f38a260',
|
||
|
|
imageIsLoaded: 'imageIsLoaded_9f38a260',
|
||
|
|
imageIsCenter: 'imageIsCenter_9f38a260',
|
||
|
|
imageIsContain: 'imageIsContain_9f38a260',
|
||
|
|
imageIsCover: 'imageIsCover_9f38a260',
|
||
|
|
imageIsLandscape: 'imageIsLandscape_9f38a260',
|
||
|
|
imageIsPortrait: 'imageIsPortrait_9f38a260',
|
||
|
|
imageIsNone: 'imageIsNone_9f38a260',
|
||
|
|
imageIsScaleWidthHeight: 'imageIsScaleWidthHeight_9f38a260',
|
||
|
|
imageIsScaleWidth: 'imageIsScaleWidth_9f38a260',
|
||
|
|
imageIsScaleHeight: 'imageIsScaleHeight_9f38a260',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_9f38a260{overflow:hidden}.rootIsMaximizeFrame_9f38a260{height:100%;width:100%}.image_9f38a260{display:block;opacity:0}.image_9f38a260.imageIsLoaded_9f38a260{opacity:1}.imageIsCenter_9f38a260,.imageIsContain_9f38a260,.imageIsCover_9f38a260{position:relative;top:50%}[dir=ltr] .imageIsCenter_9f38a260,[dir=ltr] .imageIsContain_9f38a260,[dir=ltr] .imageIsCover_9f38a260{left:50%}[dir=rtl] .imageIsCenter_9f38a260,[dir=rtl] .imageIsContain_9f38a260,[dir=rtl] .imageIsCover_9f38a260{right:50%}html[dir=ltr] .imageIsCenter_9f38a260,html[dir=ltr] .imageIsContain_9f38a260,html[dir=ltr] .imageIsCover_9f38a260{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}html[dir=rtl] .imageIsCenter_9f38a260,html[dir=rtl] .imageIsContain_9f38a260,html[dir=rtl] .imageIsCover_9f38a260{-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.imageIsContain_9f38a260.imageIsLandscape_9f38a260{width:100%;height:auto}.imageIsContain_9f38a260.imageIsPortrait_9f38a260{height:100%;width:auto}.imageIsCover_9f38a260.imageIsLandscape_9f38a260{height:100%;width:auto}.imageIsCover_9f38a260.imageIsPortrait_9f38a260{width:100%;height:auto}.imageIsNone_9f38a260{height:auto;width:auto}.imageIsScaleWidthHeight_9f38a260{height:100%;width:100%}.imageIsScaleWidth_9f38a260{height:auto;width:100%}.imageIsScaleHeight_9f38a260{height:100%;width:auto}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 148 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
if (customStyles === void 0) { customStyles = undefined; }
|
||
|
|
var iconStyles = {
|
||
|
|
root: Styling_1.mergeStyles({
|
||
|
|
display: 'inline-block'
|
||
|
|
}),
|
||
|
|
imageContainer: Styling_1.mergeStyles({
|
||
|
|
overflow: 'hidden'
|
||
|
|
})
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(iconStyles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 149 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_cf3f75c8',
|
||
|
|
list: 'list_cf3f75c8',
|
||
|
|
item: 'item_cf3f75c8',
|
||
|
|
link: 'link_cf3f75c8',
|
||
|
|
isDisabled: 'isDisabled_cf3f75c8',
|
||
|
|
icon: 'icon_cf3f75c8',
|
||
|
|
isExpanded: 'isExpanded_cf3f75c8',
|
||
|
|
header: 'header_cf3f75c8',
|
||
|
|
linkContent: 'linkContent_cf3f75c8',
|
||
|
|
divider: 'divider_cf3f75c8',
|
||
|
|
iconColor: 'iconColor_cf3f75c8',
|
||
|
|
itemText: 'itemText_cf3f75c8',
|
||
|
|
submenuIcon: 'submenuIcon_cf3f75c8',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_cf3f75c8{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:180px}.list_cf3f75c8{list-style-type:none;margin:0;padding:0;line-height:0}.item_cf3f75c8{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;box-sizing:border-box}.link_cf3f75c8{font:inherit;color:inherit;background:0 0;border:none;width:100%;height:36px;line-height:36px;display:block;cursor:pointer;padding:0 6px}.link_cf3f75c8::-moz-focus-inner{border:0}.link_cf3f75c8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .link_cf3f75c8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .link_cf3f75c8{text-align:left}html[dir=rtl] .link_cf3f75c8{text-align:right}.link_cf3f75c8:hover:not([disabled]){background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_cf3f75c8.isDisabled_cf3f75c8,.link_cf3f75c8[disabled]{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor:default;pointer-events:none}.link_cf3f75c8.isDisabled_cf3f75c8 .icon_cf3f75c8,.link_cf3f75c8[disabled] .icon_cf3f75c8{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.is-focusVisible .link_cf3f75c8:focus{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.link_cf3f75c8.isExpanded_cf3f75c8,.link_cf3f75c8.isExpanded_cf3f75c8:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-weight:600}.header_cf3f75c8{font-size:12px;font-weight:400;font-weight:600;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:0 0;border:none;height:36px;line-height:36px;cursor:default;padding:0 6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.header_cf3f75c8::-moz-focus-inner{border:0}.header_cf3f75c8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .header_cf3f75c8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .header_cf3f75c8{text-align:left}html[dir=rtl] .header_cf3f75c8{text-align:right}a.link_cf3f75c8{padding:0 6px;text-rendering:auto;color:inherit;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-decoration:none;box-sizing:border-box}.linkContent_cf3f75c8{white-space:nowrap;height:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%}.divider_cf3f75c8{display:block;height:1px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";position:relative}.icon_cf3f75c8{display:inline-block;min-height:1px;max-height:36px;width:14px;margin:0 4px;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}.iconColor_cf3f75c8{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.itemText_cf3f75c8{margin:0 4px;vertical-align:middle;display:inline-block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.submenuIcon_cf3f75c8{height:36px;line-height:36px;text-align:center;font-size:10px;display:inline-block;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 150 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(151));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 151 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(152));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 152 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(153);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Link = (function (_super) {
|
||
|
|
__extends(Link, _super);
|
||
|
|
function Link() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Link.prototype.render = function () {
|
||
|
|
var _a = this.props, disabled = _a.disabled, children = _a.children, className = _a.className, href = _a.href;
|
||
|
|
return (href ? (React.createElement("a", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.anchorProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_b = {
|
||
|
|
'is-disabled': disabled
|
||
|
|
},
|
||
|
|
_b[styles.isDisabled] = disabled,
|
||
|
|
_b[styles.isEnabled] = !disabled,
|
||
|
|
_b)), onClick: this._onClick, ref: this._resolveRef('_link'), target: this.props.target }), children)) : (React.createElement("button", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.buttonProperties), { className: Utilities_1.css('ms-Link', styles.root, className, (_c = {
|
||
|
|
'is-disabled': disabled
|
||
|
|
},
|
||
|
|
_c[styles.isDisabled] = disabled,
|
||
|
|
_c)), onClick: this._onClick, ref: this._resolveRef('_link') }), children)));
|
||
|
|
var _b, _c;
|
||
|
|
};
|
||
|
|
Link.prototype.focus = function () {
|
||
|
|
if (this._link) {
|
||
|
|
this._link.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Link.prototype._onClick = function (ev) {
|
||
|
|
var onClick = this.props.onClick;
|
||
|
|
if (onClick) {
|
||
|
|
onClick(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Link;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Link.prototype, "_onClick", null);
|
||
|
|
exports.Link = Link;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 153 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_f147fff6',
|
||
|
|
isEnabled: 'isEnabled_f147fff6',
|
||
|
|
isDisabled: 'isDisabled_f147fff6',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_f147fff6{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin:0;overflow:inherit;padding:0;text-overflow:inherit}.isEnabled_f147fff6:focus,.isEnabled_f147fff6:hover{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.isEnabled_f147fff6:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isDisabled_f147fff6{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";pointer-events:none;cursor:default}button.root_f147fff6{background:0 0;border:none;cursor:pointer;display:inline;font-size:inherit}button.root_f147fff6::-moz-focus-inner{border:0}button.root_f147fff6{outline:transparent;position:relative}.ms-Fabric.is-focusVisible button.root_f147fff6:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] button.root_f147fff6{text-align:left}html[dir=rtl] button.root_f147fff6{text-align:right}a.root_f147fff6{text-decoration:none}.ms-Fabric.is-focusVisible a.root_f147fff6:focus{outline:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 154 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(155));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 155 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(156));
|
||
|
|
__export(__webpack_require__(157));
|
||
|
|
__export(__webpack_require__(158));
|
||
|
|
__export(__webpack_require__(162));
|
||
|
|
__export(__webpack_require__(164));
|
||
|
|
__export(__webpack_require__(159));
|
||
|
|
__export(__webpack_require__(168));
|
||
|
|
__export(__webpack_require__(166));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 156 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var ContextualMenu_1 = __webpack_require__(54);
|
||
|
|
var BaseButton = (function (_super) {
|
||
|
|
__extends(BaseButton, _super);
|
||
|
|
function BaseButton(props, rootClassName) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({
|
||
|
|
rootProps: null,
|
||
|
|
icon: 'iconProps',
|
||
|
|
menuIconName: 'menuIconProps',
|
||
|
|
toggled: 'checked'
|
||
|
|
});
|
||
|
|
_this._labelId = Utilities_1.getId();
|
||
|
|
_this._descriptionId = Utilities_1.getId();
|
||
|
|
_this._ariaDescriptionId = Utilities_1.getId();
|
||
|
|
_this.state = {
|
||
|
|
menuProps: null
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
BaseButton.prototype.render = function () {
|
||
|
|
var _a = this.props, ariaDescription = _a.ariaDescription, ariaLabel = _a.ariaLabel, className = _a.className, description = _a.description, disabled = _a.disabled, href = _a.href, iconProps = _a.iconProps, styles = _a.styles, checked = _a.checked, variantClassName = _a.variantClassName;
|
||
|
|
this._classNames = this._getClassNames(styles, className, variantClassName, iconProps && iconProps.className, disabled, checked);
|
||
|
|
var _b = this, _ariaDescriptionId = _b._ariaDescriptionId, _labelId = _b._labelId, _descriptionId = _b._descriptionId;
|
||
|
|
var renderAsAnchor = !!href;
|
||
|
|
var tag = renderAsAnchor ? 'a' : 'button';
|
||
|
|
var nativeProps = Utilities_1.getNativeProps(Utilities_1.assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props), renderAsAnchor ? Utilities_1.anchorProperties : Utilities_1.buttonProperties, [
|
||
|
|
'disabled' // Let disabled buttons be focused and styled as disabled.
|
||
|
|
]);
|
||
|
|
// Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby
|
||
|
|
// otherwise default to null.
|
||
|
|
var ariaDescribedBy;
|
||
|
|
if (ariaDescription) {
|
||
|
|
ariaDescribedBy = _ariaDescriptionId;
|
||
|
|
}
|
||
|
|
else if (description) {
|
||
|
|
ariaDescribedBy = _descriptionId;
|
||
|
|
}
|
||
|
|
else if (nativeProps['aria-describedby']) {
|
||
|
|
ariaDescribedBy = nativeProps['aria-describedby'];
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
ariaDescribedBy = null;
|
||
|
|
}
|
||
|
|
var buttonProps = Utilities_1.assign(nativeProps, {
|
||
|
|
className: this._classNames.root,
|
||
|
|
ref: this._resolveRef('_buttonElement'),
|
||
|
|
'disabled': disabled,
|
||
|
|
'aria-label': ariaLabel,
|
||
|
|
'aria-labelledby': ariaLabel ? null : _labelId,
|
||
|
|
'aria-describedby': ariaDescribedBy,
|
||
|
|
'aria-disabled': disabled,
|
||
|
|
'data-is-focusable': disabled ? false : true,
|
||
|
|
'aria-pressed': checked
|
||
|
|
});
|
||
|
|
// Override onClick if contextualMenuItems passed in. Eventually allow _onToggleMenu to
|
||
|
|
// be assigned to split button click if onClick already has a value
|
||
|
|
if (this.props.menuProps) {
|
||
|
|
Utilities_1.assign(buttonProps, {
|
||
|
|
'onClick': this._onToggleMenu,
|
||
|
|
'aria-expanded': this.state.menuProps ? true : false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return this._onRenderContent(tag, buttonProps);
|
||
|
|
};
|
||
|
|
BaseButton.prototype.focus = function () {
|
||
|
|
if (this._buttonElement) {
|
||
|
|
this._buttonElement.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderContent = function (tag, buttonProps) {
|
||
|
|
var props = this.props;
|
||
|
|
var baseClassName = props.baseClassName, styles = props.styles, menuIconName = props.menuIconName, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderText, onRenderText = _b === void 0 ? this._onRenderText : _b, _c = props.onRenderDescription, onRenderDescription = _c === void 0 ? this._onRenderDescription : _c, _d = props.onRenderAriaDescription, onRenderAriaDescription = _d === void 0 ? this._onRenderAriaDescription : _d, _e = props.onRenderChildren, onRenderChildren = _e === void 0 ? this._onRenderChildren : _e, _f = props.onRenderMenu, onRenderMenu = _f === void 0 ? this._onRenderMenu : _f, _g = props.onRenderMenuIcon, onRenderMenuIcon = _g === void 0 ? this._onRenderMenuIcon : _g;
|
||
|
|
var className = Styling_1.mergeStyles(baseClassName + '-flexContainer', styles.flexContainer);
|
||
|
|
return React.createElement(tag, buttonProps, React.createElement('div', { className: className }, onRenderIcon(props, this._onRenderIcon), onRenderText(props, this._onRenderText), onRenderDescription(props, this._onRenderDescription), onRenderAriaDescription(props, this._onRenderAriaDescription), onRenderChildren(props, this._onRenderChildren), (menuProps || menuIconName || this.props.onRenderMenuIcon) && onRenderMenuIcon(this.props, this._onRenderMenuIcon), this.state.menuProps && onRenderMenu(menuProps, this._onRenderMenu)));
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderIcon = function (buttonProps, defaultRender) {
|
||
|
|
var _a = this.props, baseClassName = _a.baseClassName, disabled = _a.disabled, icon = _a.icon, iconProps = _a.iconProps, styles = _a.styles, checked = _a.checked;
|
||
|
|
if (icon || iconProps) {
|
||
|
|
iconProps = iconProps || {
|
||
|
|
iconName: icon
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return iconProps && (React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: this._classNames.icon })));
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderText = function () {
|
||
|
|
var _a = this.props, children = _a.children, disabled = _a.disabled, styles = _a.styles, text = _a.text;
|
||
|
|
// For backwards compat, we should continue to take in the text content from children.
|
||
|
|
if (text === undefined && typeof (children) === 'string') {
|
||
|
|
text = children;
|
||
|
|
}
|
||
|
|
return text && (React.createElement("span", { className: this._classNames.label, id: this._labelId }, text));
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderChildren = function () {
|
||
|
|
var children = this.props.children;
|
||
|
|
// If children is just a string, either it or the text will be rendered via onRenderLabel
|
||
|
|
// If children is another component, it will be rendered after text
|
||
|
|
if (typeof (children) === 'string') {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return children;
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderDescription = function (props) {
|
||
|
|
var description = this.props.description;
|
||
|
|
// ms-Button-description is only shown when the button type is compound.
|
||
|
|
// In other cases it will not be displayed.
|
||
|
|
return description ? (React.createElement("span", { className: this._classNames.description, id: this._descriptionId }, description)) : (null);
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderAriaDescription = function () {
|
||
|
|
var _a = this.props, ariaDescription = _a.ariaDescription, styles = _a.styles;
|
||
|
|
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
|
||
|
|
// otherwise it will be assigned to descriptionSpan.
|
||
|
|
return ariaDescription ? (React.createElement("span", { className: styles.screenReaderText, id: this._ariaDescriptionId }, ariaDescription)) : (null);
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderMenuIcon = function (props) {
|
||
|
|
var _a = this.props, baseClassName = _a.baseClassName, checked = _a.checked, disabled = _a.disabled, menuIconName = _a.menuIconName, menuIconProps = _a.menuIconProps, styles = _a.styles;
|
||
|
|
if (menuIconProps === undefined) {
|
||
|
|
menuIconProps = {
|
||
|
|
iconName: menuIconName === undefined ? 'ChevronDown' : menuIconName
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return (menuIconProps ?
|
||
|
|
React.createElement(Icon_1.Icon, __assign({}, menuIconProps, { className: Styling_1.mergeStyles(baseClassName + "-icon", styles.menuIcon, disabled && styles.menuIconDisabled, !disabled && checked && styles.menuIconChecked, menuIconProps.className) }))
|
||
|
|
:
|
||
|
|
null);
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onRenderMenu = function (menuProps) {
|
||
|
|
return (React.createElement(ContextualMenu_1.ContextualMenu, __assign({ isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, menuProps, { className: Styling_1.mergeStyles('ms-BaseButton-menuhost', menuProps.className), target: this._buttonElement, labelElementId: this._labelId, onDismiss: this._onToggleMenu })));
|
||
|
|
};
|
||
|
|
BaseButton.prototype._onToggleMenu = function () {
|
||
|
|
var menuProps = this.props.menuProps;
|
||
|
|
var currentMenuProps = this.state.menuProps;
|
||
|
|
this.setState({ menuProps: currentMenuProps ? null : menuProps });
|
||
|
|
};
|
||
|
|
BaseButton.prototype._getClassNames = function (styles, className, variantClassName, iconClassName, disabled, checked) {
|
||
|
|
return {
|
||
|
|
root: Styling_1.mergeStyles(className, 'ms-Button', variantClassName, styles.root, checked && [
|
||
|
|
'is-checked',
|
||
|
|
styles.rootChecked
|
||
|
|
], disabled && [
|
||
|
|
'is-disabled',
|
||
|
|
styles.rootDisabled
|
||
|
|
], !disabled && {
|
||
|
|
':hover': styles.rootHovered,
|
||
|
|
':hover .ms-Button-description': styles.descriptionHovered,
|
||
|
|
':active': styles.rootPressed,
|
||
|
|
':active .ms-Button-description': styles.descriptionPressed
|
||
|
|
}),
|
||
|
|
flexContainer: Styling_1.mergeStyles('ms-Button-flexContainer', styles.flexContainer),
|
||
|
|
icon: Styling_1.mergeStyles('ms-Button-icon', iconClassName, styles.icon, checked && styles.iconChecked, disabled && styles.iconDisabled),
|
||
|
|
label: Styling_1.mergeStyles('ms-Button-label', styles.label, checked && styles.labelChecked, disabled && styles.labelDisabled),
|
||
|
|
menuIcon: Styling_1.mergeStyles('ms-Button-menuIcon', styles.menuIcon, checked && styles.menuIconChecked, disabled && styles.menuIconDisabled),
|
||
|
|
description: Styling_1.mergeStyles('ms-Button-description', styles.description, checked && styles.descriptionChecked, disabled && styles.descriptionDisabled),
|
||
|
|
screenReaderText: Styling_1.mergeStyles('ms-Button-screenReaderText', styles.screenReaderText)
|
||
|
|
};
|
||
|
|
};
|
||
|
|
return BaseButton;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
BaseButton.defaultProps = {
|
||
|
|
baseClassName: 'ms-Button',
|
||
|
|
classNames: {},
|
||
|
|
styles: {}
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderIcon", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderText", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderChildren", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderDescription", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderAriaDescription", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderMenuIcon", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onRenderMenu", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseButton.prototype, "_onToggleMenu", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.memoize
|
||
|
|
], BaseButton.prototype, "_getClassNames", null);
|
||
|
|
exports.BaseButton = BaseButton;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 157 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var ElementType;
|
||
|
|
(function (ElementType) {
|
||
|
|
/** <button> element. */
|
||
|
|
ElementType[ElementType["button"] = 0] = "button";
|
||
|
|
/** <a> element. */
|
||
|
|
ElementType[ElementType["anchor"] = 1] = "anchor";
|
||
|
|
})(ElementType = exports.ElementType || (exports.ElementType = {}));
|
||
|
|
var ButtonType;
|
||
|
|
(function (ButtonType) {
|
||
|
|
ButtonType[ButtonType["normal"] = 0] = "normal";
|
||
|
|
ButtonType[ButtonType["primary"] = 1] = "primary";
|
||
|
|
ButtonType[ButtonType["hero"] = 2] = "hero";
|
||
|
|
ButtonType[ButtonType["compound"] = 3] = "compound";
|
||
|
|
ButtonType[ButtonType["command"] = 4] = "command";
|
||
|
|
ButtonType[ButtonType["icon"] = 5] = "icon";
|
||
|
|
ButtonType[ButtonType["default"] = 6] = "default";
|
||
|
|
})(ButtonType = exports.ButtonType || (exports.ButtonType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 158 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Button_Props_1 = __webpack_require__(157);
|
||
|
|
var DefaultButton_1 = __webpack_require__(159);
|
||
|
|
var CommandButton_1 = __webpack_require__(162);
|
||
|
|
var CompoundButton_1 = __webpack_require__(164);
|
||
|
|
var IconButton_1 = __webpack_require__(166);
|
||
|
|
var PrimaryButton_1 = __webpack_require__(168);
|
||
|
|
/**
|
||
|
|
* This class is deprecated. Use the individual *Button components instead.
|
||
|
|
* @deprecated
|
||
|
|
*/
|
||
|
|
var Button = (function (_super) {
|
||
|
|
__extends(Button, _super);
|
||
|
|
function Button(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
/**
|
||
|
|
* Set this BaseComponent._resolveComponentRef to false, bypassing resolution of componentRef.
|
||
|
|
*/
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
Utilities_1.warn("The Button component has been deprecated. Use specific variants instead. " +
|
||
|
|
"(PrimaryButton, DefaultButton, IconButton, CommandButton, etc.)");
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Button.prototype.render = function () {
|
||
|
|
var props = this.props;
|
||
|
|
switch (props.buttonType) {
|
||
|
|
case Button_Props_1.ButtonType.command:
|
||
|
|
return React.createElement(CommandButton_1.CommandButton, __assign({}, props));
|
||
|
|
case Button_Props_1.ButtonType.compound:
|
||
|
|
return React.createElement(CompoundButton_1.CompoundButton, __assign({}, props));
|
||
|
|
case Button_Props_1.ButtonType.icon:
|
||
|
|
return React.createElement(IconButton_1.IconButton, __assign({}, props));
|
||
|
|
case Button_Props_1.ButtonType.primary:
|
||
|
|
return React.createElement(PrimaryButton_1.PrimaryButton, __assign({}, props));
|
||
|
|
default:
|
||
|
|
return React.createElement(DefaultButton_1.DefaultButton, __assign({}, props));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Button;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.Button = Button;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 159 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var BaseButton_1 = __webpack_require__(156);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DefaultButton_styles_1 = __webpack_require__(160);
|
||
|
|
var DefaultButton = (function (_super) {
|
||
|
|
__extends(DefaultButton, _super);
|
||
|
|
function DefaultButton() {
|
||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
/**
|
||
|
|
* Tell BaseComponent to bypass resolution of componentRef.
|
||
|
|
*/
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DefaultButton.prototype.render = function () {
|
||
|
|
var styles = this.props.styles;
|
||
|
|
return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--default', styles: DefaultButton_styles_1.getStyles(undefined, styles), onRenderDescription: Utilities_1.nullRender })));
|
||
|
|
};
|
||
|
|
return DefaultButton;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DefaultButton = DefaultButton;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 160 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var BaseButton_styles_1 = __webpack_require__(161);
|
||
|
|
var DEFAULT_BUTTON_HEIGHT = '32px';
|
||
|
|
var DEFAULT_BUTTON_MINWIDTH = '80px';
|
||
|
|
var DEFAULT_PADDING = '0 16px';
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, focusInset, focusColor) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
var baseButtonStyles = BaseButton_styles_1.getStyles(theme, focusInset, focusColor);
|
||
|
|
var defaultButtonStyles = {
|
||
|
|
root: {
|
||
|
|
minWidth: DEFAULT_BUTTON_MINWIDTH,
|
||
|
|
height: DEFAULT_BUTTON_HEIGHT,
|
||
|
|
backgroundColor: theme.palette.neutralLighter,
|
||
|
|
color: theme.palette.neutralPrimary
|
||
|
|
},
|
||
|
|
rootHovered: {
|
||
|
|
backgroundColor: theme.palette.neutralLight,
|
||
|
|
color: theme.palette.black
|
||
|
|
},
|
||
|
|
rootPressed: {
|
||
|
|
backgroundColor: theme.palette.themePrimary,
|
||
|
|
color: theme.palette.white
|
||
|
|
},
|
||
|
|
rootChecked: {
|
||
|
|
backgroundColor: theme.palette.themePrimary,
|
||
|
|
color: theme.palette.white
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
fontWeight: 'bold' // theme.fontWeights.semibold,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(baseButtonStyles, defaultButtonStyles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 161 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var noOutline = {
|
||
|
|
outline: 0
|
||
|
|
};
|
||
|
|
var iconStyle = {
|
||
|
|
fontSize: Styling_1.FontSizes.icon,
|
||
|
|
margin: '0 4px',
|
||
|
|
height: '16px',
|
||
|
|
lineHeight: '16px',
|
||
|
|
textAlign: 'center',
|
||
|
|
verticalAlign: 'middle'
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Gets the base button styles. Note: because it is a base class to be used with the `mergeRules`
|
||
|
|
* helper, it should have values for all class names in the interface. This let `mergeRules` optimize
|
||
|
|
* mixing class names together.
|
||
|
|
*/
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, focusInset, focusColor) {
|
||
|
|
if (focusInset === void 0) { focusInset = '0'; }
|
||
|
|
if (focusColor === void 0) { focusColor = theme.palette.neutralSecondary; }
|
||
|
|
return {
|
||
|
|
root: [
|
||
|
|
Styling_1.getFocusStyle(theme, focusInset, focusColor),
|
||
|
|
theme.fonts.medium,
|
||
|
|
{
|
||
|
|
// this transparent border converts to the correct colors in HC mode
|
||
|
|
boxSizing: 'border-box',
|
||
|
|
border: '1px solid transparent',
|
||
|
|
userSelect: 'none',
|
||
|
|
display: 'inline-block',
|
||
|
|
textDecoration: 'none',
|
||
|
|
textAlign: 'center',
|
||
|
|
cursor: 'pointer',
|
||
|
|
verticalAlign: 'top',
|
||
|
|
padding: '0 16px'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
rootDisabled: {
|
||
|
|
backgroundColor: theme.palette.neutralLighter,
|
||
|
|
color: theme.palette.neutralTertiary,
|
||
|
|
cursor: 'default',
|
||
|
|
pointerEvents: 'none',
|
||
|
|
':hover': noOutline,
|
||
|
|
':focus': noOutline
|
||
|
|
},
|
||
|
|
flexContainer: {
|
||
|
|
display: 'flex',
|
||
|
|
height: '100%',
|
||
|
|
flexWrap: 'nowrap',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center'
|
||
|
|
},
|
||
|
|
icon: iconStyle,
|
||
|
|
menuIcon: [
|
||
|
|
iconStyle,
|
||
|
|
{
|
||
|
|
fontSize: Styling_1.FontSizes.small
|
||
|
|
}
|
||
|
|
],
|
||
|
|
label: {
|
||
|
|
margin: '0 4px',
|
||
|
|
lineHeight: '100%'
|
||
|
|
},
|
||
|
|
screenReaderText: {
|
||
|
|
position: 'absolute',
|
||
|
|
width: '1px',
|
||
|
|
height: '1px',
|
||
|
|
margin: '-1px',
|
||
|
|
padding: 0,
|
||
|
|
overflow: 'hidden',
|
||
|
|
clip: 'rect(0,0,0,0)',
|
||
|
|
border: 0
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 162 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var BaseButton_1 = __webpack_require__(156);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var CommandButton_styles_1 = __webpack_require__(163);
|
||
|
|
var CommandButton = (function (_super) {
|
||
|
|
__extends(CommandButton, _super);
|
||
|
|
function CommandButton() {
|
||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
/**
|
||
|
|
* Tell BaseComponent to bypass resolution of componentRef.
|
||
|
|
*/
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
CommandButton.prototype.render = function () {
|
||
|
|
var styles = this.props.styles;
|
||
|
|
return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--command', styles: CommandButton_styles_1.getStyles(undefined, styles), onRenderDescription: Utilities_1.nullRender })));
|
||
|
|
};
|
||
|
|
return CommandButton;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.CommandButton = CommandButton;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 163 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var BaseButton_styles_1 = __webpack_require__(161);
|
||
|
|
var DEFAULT_BUTTON_HEIGHT = '40px';
|
||
|
|
var DEFAULT_PADDING = '0 4px';
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
var baseButtonStyles = BaseButton_styles_1.getStyles(theme);
|
||
|
|
var commandButtonStyles = {
|
||
|
|
root: {
|
||
|
|
borderWidth: '0',
|
||
|
|
padding: DEFAULT_PADDING,
|
||
|
|
height: DEFAULT_BUTTON_HEIGHT,
|
||
|
|
color: theme.palette.neutralPrimary,
|
||
|
|
backgroundColor: 'transparent'
|
||
|
|
},
|
||
|
|
rootHovered: {
|
||
|
|
color: theme.palette.themeDarker
|
||
|
|
},
|
||
|
|
rootPressed: {
|
||
|
|
color: theme.palette.themePrimary
|
||
|
|
},
|
||
|
|
rootDisabled: {
|
||
|
|
color: theme.palette.neutralTertiary,
|
||
|
|
backgroundColor: 'transparent'
|
||
|
|
},
|
||
|
|
rootChecked: {
|
||
|
|
backgroundColor: theme.palette.neutralTertiaryAlt,
|
||
|
|
':hover': {
|
||
|
|
backgroundColor: theme.palette.neutralLight
|
||
|
|
}
|
||
|
|
},
|
||
|
|
flexContainer: {
|
||
|
|
justifyContent: 'flex-start'
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
color: theme.palette.themePrimary
|
||
|
|
},
|
||
|
|
iconDisabled: {
|
||
|
|
color: 'inherit'
|
||
|
|
},
|
||
|
|
menuIcon: {
|
||
|
|
color: theme.palette.neutralSecondary
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(baseButtonStyles, commandButtonStyles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 164 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var BaseButton_1 = __webpack_require__(156);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var CompoundButton_styles_1 = __webpack_require__(165);
|
||
|
|
var CompoundButton = (function (_super) {
|
||
|
|
__extends(CompoundButton, _super);
|
||
|
|
function CompoundButton() {
|
||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
/**
|
||
|
|
* Tell BaseComponent to bypass resolution of componentRef.
|
||
|
|
*/
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
CompoundButton.prototype.render = function () {
|
||
|
|
var styles = this.props.styles;
|
||
|
|
return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--compound', styles: CompoundButton_styles_1.getStyles(undefined, styles), onRenderIcon: Utilities_1.nullRender })));
|
||
|
|
};
|
||
|
|
return CompoundButton;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.CompoundButton = CompoundButton;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 165 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DefaultButton_styles_1 = __webpack_require__(160);
|
||
|
|
var DEFAULT_BUTTON_HEIGHT = '32px';
|
||
|
|
var DEFAULT_BUTTON_MINWIDTH = '80px';
|
||
|
|
var DEFAULT_PADDING = '0 16px';
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
var defaultButtonStyles = DefaultButton_styles_1.getStyles(theme, customStyles);
|
||
|
|
var compoundButtonStyles = {
|
||
|
|
root: {
|
||
|
|
maxWidth: '280px',
|
||
|
|
minHeight: '72px',
|
||
|
|
height: 'auto',
|
||
|
|
padding: '20px'
|
||
|
|
},
|
||
|
|
flexContainer: {
|
||
|
|
flexDirection: 'column',
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
minWidth: '100%',
|
||
|
|
margin: ''
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
margin: '0 0 5px',
|
||
|
|
lineHeight: '100%'
|
||
|
|
},
|
||
|
|
description: [
|
||
|
|
theme.fonts.small,
|
||
|
|
{
|
||
|
|
color: theme.palette.neutralSecondary,
|
||
|
|
lineHeight: '100%'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
descriptionHovered: {
|
||
|
|
color: theme.palette.neutralDark
|
||
|
|
},
|
||
|
|
descriptionPressed: {
|
||
|
|
color: 'inherit'
|
||
|
|
},
|
||
|
|
descriptionChecked: {
|
||
|
|
color: 'inherit'
|
||
|
|
},
|
||
|
|
descriptionDisabled: {
|
||
|
|
color: 'inherit'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(defaultButtonStyles, compoundButtonStyles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 166 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var BaseButton_1 = __webpack_require__(156);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var IconButton_styles_1 = __webpack_require__(167);
|
||
|
|
var IconButton = (function (_super) {
|
||
|
|
__extends(IconButton, _super);
|
||
|
|
function IconButton() {
|
||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
/**
|
||
|
|
* Tell BaseComponent to bypass resolution of componentRef.
|
||
|
|
*/
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
IconButton.prototype.render = function () {
|
||
|
|
var styles = this.props.styles;
|
||
|
|
return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--icon', styles: IconButton_styles_1.getStyles(undefined, styles), onRenderText: Utilities_1.nullRender, onRenderDescription: Utilities_1.nullRender })));
|
||
|
|
};
|
||
|
|
return IconButton;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.IconButton = IconButton;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 167 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var BaseButton_styles_1 = __webpack_require__(161);
|
||
|
|
var DEFAULT_BUTTON_HEIGHT = '32px';
|
||
|
|
var DEFAULT_PADDING = '0 4px';
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
var baseButtonStyles = BaseButton_styles_1.getStyles(theme);
|
||
|
|
var iconButtonStyles = {
|
||
|
|
root: {
|
||
|
|
padding: '0 4px',
|
||
|
|
width: '32px',
|
||
|
|
height: '32px',
|
||
|
|
backgroundColor: 'transparent'
|
||
|
|
},
|
||
|
|
rootHovered: {
|
||
|
|
color: theme.palette.themeDarker
|
||
|
|
},
|
||
|
|
rootPressed: {
|
||
|
|
color: theme.palette.themePrimary
|
||
|
|
},
|
||
|
|
rootChecked: {
|
||
|
|
backgroundColor: theme.palette.neutralTertiaryAlt,
|
||
|
|
':hover': {
|
||
|
|
backgroundColor: theme.palette.neutralLight
|
||
|
|
}
|
||
|
|
},
|
||
|
|
rootDisabled: {
|
||
|
|
color: theme.palette.neutralTertiary
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(baseButtonStyles, iconButtonStyles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 168 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var BaseButton_1 = __webpack_require__(156);
|
||
|
|
var PrimaryButton_styles_1 = __webpack_require__(169);
|
||
|
|
var PrimaryButton = (function (_super) {
|
||
|
|
__extends(PrimaryButton, _super);
|
||
|
|
function PrimaryButton() {
|
||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
/**
|
||
|
|
* Set this BaseComponent._resolveComponentRef to false, bypassing resolution of componentRef.
|
||
|
|
*/
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
PrimaryButton.prototype.render = function () {
|
||
|
|
var styles = this.props.styles;
|
||
|
|
return (React.createElement(BaseButton_1.BaseButton, __assign({}, this.props, { variantClassName: 'ms-Button--primary', onRenderDescription: Utilities_1.nullRender, styles: PrimaryButton_styles_1.getStyles(undefined, styles) })));
|
||
|
|
};
|
||
|
|
return PrimaryButton;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.PrimaryButton = PrimaryButton;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 169 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DefaultButton_styles_1 = __webpack_require__(160);
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
var palette = theme.palette;
|
||
|
|
var defaultButtonStyles = DefaultButton_styles_1.getStyles(theme, customStyles, '0px', palette.white);
|
||
|
|
var primaryButtonStyles = {
|
||
|
|
root: {
|
||
|
|
backgroundColor: palette.themePrimary,
|
||
|
|
color: palette.white
|
||
|
|
},
|
||
|
|
rootHovered: {
|
||
|
|
backgroundColor: palette.themeDark,
|
||
|
|
color: palette.white
|
||
|
|
},
|
||
|
|
rootPressed: {
|
||
|
|
backgroundColor: palette.themePrimary,
|
||
|
|
color: palette.white
|
||
|
|
},
|
||
|
|
rootChecked: {
|
||
|
|
backgroundColor: palette.themeDark,
|
||
|
|
color: palette.white,
|
||
|
|
':hover': {
|
||
|
|
backgroundColor: theme.palette.neutralLight,
|
||
|
|
color: theme.palette.black
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(defaultButtonStyles, primaryButtonStyles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 170 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_f13b2dea',
|
||
|
|
list: 'list_f13b2dea',
|
||
|
|
chevron: 'chevron_f13b2dea',
|
||
|
|
listItem: 'listItem_f13b2dea',
|
||
|
|
item: 'item_f13b2dea',
|
||
|
|
itemLink: 'itemLink_f13b2dea',
|
||
|
|
overflow: 'overflow_f13b2dea',
|
||
|
|
overflowButton: 'overflowButton_f13b2dea',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_f13b2dea{margin:23px 0 1px}.list_f13b2dea{white-space:nowrap;padding:0;margin:0}.chevron_f13b2dea{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";line-height:28px}.listItem_f13b2dea{list-style-type:none;vertical-align:top;margin:0;padding:0;display:inline-block;position:relative}.listItem_f13b2dea:last-of-type .chevron_f13b2dea{display:none}.listItem_f13b2dea .itemLink_f13b2dea,.listItem_f13b2dea .item_f13b2dea{font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;padding:0 8px;max-width:160px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:top}.overflow_f13b2dea{display:inline-block;position:relative}.overflowButton_f13b2dea{font-size:16px;display:inline-block;vertical-align:top;height:28px;line-height:1}.overflowButton_f13b2dea:hover{cursor:pointer;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.item_f13b2dea:hover{cursor:default}.root_f13b2dea .itemLink_f13b2dea:hover{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:initial;cursor:pointer}.root_f13b2dea .itemLink_f13b2dea:focus{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.root_f13b2dea .itemLink_f13b2dea:active{outline:transparent;background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemLink_f13b2dea,.overflowButton_f13b2dea{text-decoration:none;outline:transparent}@media screen and (max-width:639px){.listItem_f13b2dea .itemLink_f13b2dea{font-size:17px}.chevron_f13b2dea{font-size:10px;line-height:17px}.overflowButton_f13b2dea{font-size:15px}}@media screen and (max-width:479px){.listItem_f13b2dea .itemLink_f13b2dea{font-size:14px;max-width:116px}.chevron_f13b2dea{font-size:8px;line-height:14px}.overflowButton_f13b2dea{padding:4px 6px}}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 171 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(172));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 172 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(173));
|
||
|
|
__export(__webpack_require__(179));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 173 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var DateValues_1 = __webpack_require__(174);
|
||
|
|
var CalendarDay_1 = __webpack_require__(175);
|
||
|
|
var CalendarMonth_1 = __webpack_require__(178);
|
||
|
|
var DateMath_1 = __webpack_require__(176);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(177);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Calendar = (function (_super) {
|
||
|
|
__extends(Calendar, _super);
|
||
|
|
function Calendar(props) {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
var currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
|
||
|
|
_this.state = {
|
||
|
|
selectedDate: currentDate,
|
||
|
|
navigatedDate: currentDate
|
||
|
|
};
|
||
|
|
_this._focusOnUpdate = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Calendar.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
var autoNavigateOnSelection = nextProps.autoNavigateOnSelection, value = nextProps.value, _a = nextProps.today, today = _a === void 0 ? new Date() : _a;
|
||
|
|
// Make sure auto-navigation is supported for programmatic changes to selected date, i.e.,
|
||
|
|
// if selected date is updated via props, we may need to modify the navigated date
|
||
|
|
var overrideNavigatedDate = (autoNavigateOnSelection && !DateMath_1.compareDates(value, this.props.value));
|
||
|
|
if (overrideNavigatedDate) {
|
||
|
|
this.setState({
|
||
|
|
navigatedDate: value
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
selectedDate: value || today
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Calendar.prototype.componentDidUpdate = function () {
|
||
|
|
if (this._focusOnUpdate) {
|
||
|
|
this.refs.dayPicker.focus();
|
||
|
|
this._focusOnUpdate = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Calendar.prototype.render = function () {
|
||
|
|
var rootClass = 'ms-DatePicker';
|
||
|
|
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, dateRangeType = _a.dateRangeType, strings = _a.strings, isMonthPickerVisible = _a.isMonthPickerVisible, autoNavigateOnSelection = _a.autoNavigateOnSelection, showGoToToday = _a.showGoToToday;
|
||
|
|
var _b = this.state, selectedDate = _b.selectedDate, navigatedDate = _b.navigatedDate;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css(rootClass, styles.root), ref: 'root', role: 'application' },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused', styles.picker, styles.pickerIsOpened, styles.pickerIsFocused, isMonthPickerVisible && ('is-monthPickerVisible ' + styles.pickerIsMonthPickerVisible)) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-holder ms-slideDownIn10', styles.holder), onKeyDown: this._onDatePickerPopupKeyDown },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-frame', styles.frame) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-wrap', styles.wrap) },
|
||
|
|
React.createElement(CalendarDay_1.CalendarDay, { selectedDate: selectedDate, navigatedDate: navigatedDate, today: this.props.today, onSelectDate: this._onSelectDate, onNavigateDate: this._onNavigateDate, onDismiss: this.props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, autoNavigateOnSelection: autoNavigateOnSelection, strings: strings, ref: 'dayPicker' }),
|
||
|
|
isMonthPickerVisible && React.createElement(CalendarMonth_1.CalendarMonth, { navigatedDate: navigatedDate, strings: strings, onNavigateDate: this._onNavigateDate }),
|
||
|
|
showGoToToday &&
|
||
|
|
React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-goToday js-goToday', styles.goToday), onClick: this._onGotoToday, onKeyDown: this._onGotoTodayKeyDown, tabIndex: 0 }, strings.goToToday)))))));
|
||
|
|
};
|
||
|
|
Calendar.prototype.focus = function () {
|
||
|
|
if (this.refs.dayPicker) {
|
||
|
|
this.refs.dayPicker.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Calendar.prototype._navigateDay = function (date) {
|
||
|
|
this.setState({
|
||
|
|
navigatedDate: date
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Calendar.prototype._onNavigateDate = function (date, focusOnNavigatedDay) {
|
||
|
|
this._navigateDay(date);
|
||
|
|
this._focusOnUpdate = focusOnNavigatedDay;
|
||
|
|
};
|
||
|
|
Calendar.prototype._onSelectDate = function (date, selectedDateRangeArray) {
|
||
|
|
var onSelectDate = this.props.onSelectDate;
|
||
|
|
this.setState({
|
||
|
|
selectedDate: date
|
||
|
|
});
|
||
|
|
if (onSelectDate) {
|
||
|
|
onSelectDate(date, selectedDateRangeArray);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Calendar.prototype._onGotoToday = function () {
|
||
|
|
this._navigateDay(this.props.today);
|
||
|
|
this._focusOnUpdate = true;
|
||
|
|
};
|
||
|
|
Calendar.prototype._onGotoTodayKeyDown = function (ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
|
||
|
|
ev.preventDefault();
|
||
|
|
this._onGotoToday();
|
||
|
|
}
|
||
|
|
else if (ev.which === Utilities_1.KeyCodes.tab && !ev.shiftKey) {
|
||
|
|
if (this.props.onDismiss) {
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
this.props.onDismiss();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Calendar.prototype._onDatePickerPopupKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.enter:
|
||
|
|
ev.preventDefault();
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.backspace:
|
||
|
|
ev.preventDefault();
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
this._handleEscKey(ev);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Calendar.prototype._handleEscKey = function (ev) {
|
||
|
|
if (this.props.onDismiss() != null) {
|
||
|
|
this.props.onDismiss();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Calendar;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Calendar.defaultProps = {
|
||
|
|
onSelectDate: null,
|
||
|
|
onDismiss: null,
|
||
|
|
isMonthPickerVisible: true,
|
||
|
|
value: null,
|
||
|
|
today: new Date(),
|
||
|
|
firstDayOfWeek: DateValues_1.DayOfWeek.Sunday,
|
||
|
|
dateRangeType: DateValues_1.DateRangeType.Day,
|
||
|
|
autoNavigateOnSelection: false,
|
||
|
|
showGoToToday: true,
|
||
|
|
strings: null
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_navigateDay", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_onNavigateDate", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_onSelectDate", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_onGotoToday", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_onGotoTodayKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_onDatePickerPopupKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Calendar.prototype, "_handleEscKey", null);
|
||
|
|
exports.Calendar = Calendar;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 174 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* The days of the week
|
||
|
|
*/
|
||
|
|
var DayOfWeek;
|
||
|
|
(function (DayOfWeek) {
|
||
|
|
DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
|
||
|
|
DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
|
||
|
|
DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday";
|
||
|
|
DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday";
|
||
|
|
DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday";
|
||
|
|
DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday";
|
||
|
|
DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday";
|
||
|
|
})(DayOfWeek = exports.DayOfWeek || (exports.DayOfWeek = {}));
|
||
|
|
/**
|
||
|
|
* The supported date range types
|
||
|
|
*/
|
||
|
|
var DateRangeType;
|
||
|
|
(function (DateRangeType) {
|
||
|
|
DateRangeType[DateRangeType["Day"] = 0] = "Day";
|
||
|
|
DateRangeType[DateRangeType["Week"] = 1] = "Week";
|
||
|
|
DateRangeType[DateRangeType["Month"] = 2] = "Month";
|
||
|
|
})(DateRangeType = exports.DateRangeType || (exports.DateRangeType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 175 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var DateMath_1 = __webpack_require__(176);
|
||
|
|
var stylesImport = __webpack_require__(177);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DAYS_IN_WEEK = 7;
|
||
|
|
var CalendarDay = (function (_super) {
|
||
|
|
__extends(CalendarDay, _super);
|
||
|
|
function CalendarDay(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
activeDescendantId: Utilities_1.getId('DatePickerDay-active'),
|
||
|
|
weeks: _this._getWeeks(props)
|
||
|
|
};
|
||
|
|
_this._onSelectNextMonth = _this._onSelectNextMonth.bind(_this);
|
||
|
|
_this._onSelectPrevMonth = _this._onSelectPrevMonth.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
CalendarDay.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
var navigatedDate = nextProps.navigatedDate, selectedDate = nextProps.selectedDate, today = nextProps.today;
|
||
|
|
this.setState({
|
||
|
|
weeks: this._getWeeks(nextProps)
|
||
|
|
});
|
||
|
|
};
|
||
|
|
CalendarDay.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.state, activeDescendantId = _a.activeDescendantId, weeks = _a.weeks;
|
||
|
|
var _b = this.props, firstDayOfWeek = _b.firstDayOfWeek, strings = _b.strings, navigatedDate = _b.navigatedDate, onSelectDate = _b.onSelectDate;
|
||
|
|
var dayPickerId = Utilities_1.getId('DatePickerDay-dayPicker');
|
||
|
|
var monthAndYearId = Utilities_1.getId('DatePickerDay-monthAndYear');
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-dayPicker', styles.dayPicker), id: dayPickerId },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
|
||
|
|
React.createElement("div", { "aria-live": 'polite', "aria-relevant": 'text', "aria-atomic": 'true', id: monthAndYearId },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-month', styles.month) }, strings.months[navigatedDate.getMonth()]),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-year', styles.year) }, navigatedDate.getFullYear()))),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthComponents', styles.monthComponents) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-navContainer', styles.navContainer) },
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth), onClick: this._onSelectPrevMonth, onKeyDown: this._onPrevMonthKeyDown, "aria-controls": dayPickerId, "aria-label": strings.prevMonthAriaLabel, role: 'button', tabIndex: 0 },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronRight' : 'chevronLeft' })),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth), onClick: this._onSelectNextMonth, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextMonth), "aria-controls": dayPickerId, "aria-label": strings.nextMonthAriaLabel, role: 'button', tabIndex: 0 },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronLeft' : 'chevronRight' }))),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-headerToggleView js-showMonthPicker', styles.headerToggleView) })),
|
||
|
|
React.createElement(FocusZone_1.FocusZone, null,
|
||
|
|
React.createElement("table", { className: Utilities_1.css('ms-DatePicker-table', styles.table), "aria-readonly": 'true', "aria-multiselectable": 'false', "aria-labelledby": monthAndYearId, "aria-activedescendant": activeDescendantId },
|
||
|
|
React.createElement("thead", null,
|
||
|
|
React.createElement("tr", null, strings.shortDays.map(function (val, index) {
|
||
|
|
return React.createElement("th", { className: Utilities_1.css('ms-DatePicker-weekday', styles.weekday), scope: 'col', key: index, title: strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK], "aria-label": strings.days[(index + firstDayOfWeek) % DAYS_IN_WEEK] }, strings.shortDays[(index + firstDayOfWeek) % DAYS_IN_WEEK]);
|
||
|
|
}))),
|
||
|
|
React.createElement("tbody", null, weeks.map(function (week, weekIndex) {
|
||
|
|
return React.createElement("tr", { key: weekIndex }, week.map(function (day, dayIndex) {
|
||
|
|
return React.createElement("td", { key: day.key },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-day', styles.day, (_a = {},
|
||
|
|
_a['ms-DatePicker-day--infocus ' + styles.dayIsFocused] = day.isInMonth,
|
||
|
|
_a['ms-DatePicker-day--outfocus ' + styles.dayIsUnfocused] = !day.isInMonth,
|
||
|
|
_a['ms-DatePicker-day--today ' + styles.dayIsToday] = day.isToday,
|
||
|
|
_a['ms-DatePicker-day--highlighted ' + styles.dayIsHighlighted] = day.isSelected,
|
||
|
|
_a)), role: 'button', onClick: day.onSelected, onKeyDown: function (ev) {
|
||
|
|
return _this._navigateMonthEdge(ev, day.originalDate, weekIndex, dayIndex);
|
||
|
|
}, "aria-selected": day.isSelected, "aria-label": day.originalDate.toLocaleString ?
|
||
|
|
day.originalDate.toLocaleString([], { day: 'numeric', month: 'long', year: 'numeric' }) : day.originalDate.getDate(), id: DateMath_1.compareDates(navigatedDate, day.originalDate) ? activeDescendantId : null, "data-is-focusable": true, ref: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null, key: DateMath_1.compareDates(navigatedDate, day.originalDate) ? 'navigatedDay' : null },
|
||
|
|
React.createElement("span", { "aria-hidden": 'true' }, day.date)));
|
||
|
|
var _a;
|
||
|
|
}));
|
||
|
|
}))))));
|
||
|
|
};
|
||
|
|
CalendarDay.prototype.focus = function () {
|
||
|
|
if (this.refs.navigatedDay) {
|
||
|
|
this.refs.navigatedDay.tabIndex = 0;
|
||
|
|
this.refs.navigatedDay.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._navigateMonthEdge = function (ev, date, weekIndex, dayIndex) {
|
||
|
|
if (weekIndex === 0 && ev.which === Utilities_1.KeyCodes.up) {
|
||
|
|
this.props.onNavigateDate(DateMath_1.addWeeks(date, -1), true);
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
else if (weekIndex === (this.state.weeks.length - 1) && ev.which === Utilities_1.KeyCodes.down) {
|
||
|
|
this.props.onNavigateDate(DateMath_1.addWeeks(date, 1), true);
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
else if (dayIndex === 0 && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left)) {
|
||
|
|
this.props.onNavigateDate(DateMath_1.addDays(date, -1), true);
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
else if (dayIndex === (DAYS_IN_WEEK - 1) && ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)) {
|
||
|
|
this.props.onNavigateDate(DateMath_1.addDays(date, 1), true);
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._onKeyDown = function (callback, ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._onSelectDate = function (selectedDate) {
|
||
|
|
var _a = this.props, onSelectDate = _a.onSelectDate, dateRangeType = _a.dateRangeType, firstDayOfWeek = _a.firstDayOfWeek, navigatedDate = _a.navigatedDate, autoNavigateOnSelection = _a.autoNavigateOnSelection;
|
||
|
|
var dateRange = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek);
|
||
|
|
if (onSelectDate != null) {
|
||
|
|
onSelectDate(selectedDate, dateRange);
|
||
|
|
}
|
||
|
|
// Navigate to next or previous month if needed
|
||
|
|
if (autoNavigateOnSelection && selectedDate.getMonth() !== navigatedDate.getMonth()) {
|
||
|
|
var compareResult = DateMath_1.compareDatePart(selectedDate, navigatedDate);
|
||
|
|
if (compareResult < 0) {
|
||
|
|
this._onSelectPrevMonth();
|
||
|
|
}
|
||
|
|
else if (compareResult > 0) {
|
||
|
|
this._onSelectNextMonth();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._onSelectNextMonth = function () {
|
||
|
|
this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, 1), false);
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._onSelectPrevMonth = function () {
|
||
|
|
this.props.onNavigateDate(DateMath_1.addMonths(this.props.navigatedDate, -1), false);
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._onPrevMonthKeyDown = function (ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.tab && ev.shiftKey) {
|
||
|
|
if (this.props.onDismiss) {
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
this.props.onDismiss();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._onKeyDown(this._onSelectPrevMonth, ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalendarDay.prototype._getWeeks = function (propsToUse) {
|
||
|
|
var navigatedDate = propsToUse.navigatedDate, selectedDate = propsToUse.selectedDate, dateRangeType = propsToUse.dateRangeType, firstDayOfWeek = propsToUse.firstDayOfWeek, today = propsToUse.today;
|
||
|
|
var date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
|
||
|
|
var todaysDate = today || new Date();
|
||
|
|
var weeks = [];
|
||
|
|
var week;
|
||
|
|
// Cycle the date backwards to get to the first day of the week.
|
||
|
|
while (date.getDay() !== firstDayOfWeek) {
|
||
|
|
date.setDate(date.getDate() - 1);
|
||
|
|
}
|
||
|
|
// a flag to indicate whether all days of the week are in the month
|
||
|
|
var isAllDaysOfWeekOutOfMonth = false;
|
||
|
|
var selectedDates = DateMath_1.getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek);
|
||
|
|
for (var weekIndex = 0; !isAllDaysOfWeekOutOfMonth; weekIndex++) {
|
||
|
|
week = [];
|
||
|
|
isAllDaysOfWeekOutOfMonth = true;
|
||
|
|
for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
|
||
|
|
var originalDate = new Date(date.toString());
|
||
|
|
var dayInfo = {
|
||
|
|
key: date.toString(),
|
||
|
|
date: date.getDate(),
|
||
|
|
originalDate: originalDate,
|
||
|
|
isInMonth: date.getMonth() === navigatedDate.getMonth(),
|
||
|
|
isToday: DateMath_1.compareDates(todaysDate, date),
|
||
|
|
isSelected: DateMath_1.isInDateRangeArray(date, selectedDates),
|
||
|
|
onSelected: this._onSelectDate.bind(this, originalDate)
|
||
|
|
};
|
||
|
|
week.push(dayInfo);
|
||
|
|
if (dayInfo.isInMonth) {
|
||
|
|
isAllDaysOfWeekOutOfMonth = false;
|
||
|
|
}
|
||
|
|
date.setDate(date.getDate() + 1);
|
||
|
|
}
|
||
|
|
if (!isAllDaysOfWeekOutOfMonth) {
|
||
|
|
weeks.push(week);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return weeks;
|
||
|
|
};
|
||
|
|
return CalendarDay;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], CalendarDay.prototype, "_onPrevMonthKeyDown", null);
|
||
|
|
exports.CalendarDay = CalendarDay;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 176 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DateValues_1 = __webpack_require__(174);
|
||
|
|
var DAYS_IN_WEEK = 7;
|
||
|
|
var MONTHS_IN_YEAR = 12;
|
||
|
|
/**
|
||
|
|
* Returns a date offset from the given date by the specified number of days.
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @param {number} days - The number of days to offset. 'days' can be negative.
|
||
|
|
* @return {Date} A new Date object offset from the origin date by the given number of days
|
||
|
|
*/
|
||
|
|
function addDays(date, days) {
|
||
|
|
var result = new Date(date.getTime());
|
||
|
|
result.setDate(result.getDate() + days);
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
exports.addDays = addDays;
|
||
|
|
/**
|
||
|
|
* Returns a date offset from the given date by the specified number of weeks.
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @param {number} weeks - The number of weeks to offset. 'weeks' can be negative.
|
||
|
|
* @return {Date} A new Date object offset from the origin date by the given number of weeks
|
||
|
|
*/
|
||
|
|
function addWeeks(date, weeks) {
|
||
|
|
return addDays(date, weeks * DAYS_IN_WEEK);
|
||
|
|
}
|
||
|
|
exports.addWeeks = addWeeks;
|
||
|
|
/**
|
||
|
|
* Returns a date offset from the given date by the specified number of months.
|
||
|
|
* The method tries to preserve the day-of-month; however, if the new month does not have enough days
|
||
|
|
* to contain the original day-of-month, we'll use the last day of the new month.
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @param {number} months - The number of months to offset. 'months' can be negative.
|
||
|
|
* @return {Date} A new Date object offset from the origin date by the given number of months
|
||
|
|
*/
|
||
|
|
function addMonths(date, months) {
|
||
|
|
var result = new Date(date.getTime());
|
||
|
|
var newMonth = result.getMonth() + months;
|
||
|
|
result.setMonth(newMonth);
|
||
|
|
// We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
|
||
|
|
// Loop until we back up to a day the new month has.
|
||
|
|
// (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)
|
||
|
|
if (result.getMonth() !== ((newMonth % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) {
|
||
|
|
result = addDays(result, -result.getDate());
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
exports.addMonths = addMonths;
|
||
|
|
/**
|
||
|
|
* Returns a date offset from the given date by the specified number of years.
|
||
|
|
* The method tries to preserve the day-of-month; however, if the new month does not have enough days
|
||
|
|
* to contain the original day-of-month, we'll use the last day of the new month.
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @param {number} years - The number of years to offset. 'years' can be negative.
|
||
|
|
* @return {Date} A new Date object offset from the origin date by the given number of years
|
||
|
|
*/
|
||
|
|
function addYears(date, years) {
|
||
|
|
var result = new Date(date.getTime());
|
||
|
|
result.setFullYear(date.getFullYear() + years);
|
||
|
|
// We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
|
||
|
|
// Loop until we back up to a day the new month has.
|
||
|
|
// (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)
|
||
|
|
if (result.getMonth() !== ((date.getMonth() % MONTHS_IN_YEAR) + MONTHS_IN_YEAR) % MONTHS_IN_YEAR) {
|
||
|
|
result = addDays(result, -result.getDate());
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
}
|
||
|
|
exports.addYears = addYears;
|
||
|
|
/**
|
||
|
|
* Returns a date that is a copy of the given date, aside from the month changing to the given month.
|
||
|
|
* The method tries to preserve the day-of-month; however, if the new month does not have enough days
|
||
|
|
* to contain the original day-of-month, we'll use the last day of the new month.
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @param {number} month - The 0-based index of the month to set on the date.
|
||
|
|
* @return {Date} A new Date object with the given month set.
|
||
|
|
*/
|
||
|
|
function setMonth(date, month) {
|
||
|
|
return addMonths(date, month - date.getMonth());
|
||
|
|
}
|
||
|
|
exports.setMonth = setMonth;
|
||
|
|
/**
|
||
|
|
* Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal.
|
||
|
|
* @return {boolean} True if the two dates represent the same date (regardless of time-of-day), false otherwise.
|
||
|
|
*/
|
||
|
|
function compareDates(date1, date2) {
|
||
|
|
if (date1 == null && date2 == null) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if (date1 == null || date2 == null) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return (date1.getFullYear() === date2.getFullYear()
|
||
|
|
&& date1.getMonth() === date2.getMonth()
|
||
|
|
&& date1.getDate() === date2.getDate());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.compareDates = compareDates;
|
||
|
|
/**
|
||
|
|
* Compare the date parts of two dates
|
||
|
|
* @param {Date} date1 - The first date to compare
|
||
|
|
* @param {Date} date2 - The second date to compare
|
||
|
|
* @returns {Number} A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value
|
||
|
|
* if date1 is later than date2.
|
||
|
|
*/
|
||
|
|
function compareDatePart(date1, date2) {
|
||
|
|
return getDatePartHashValue(date1) - getDatePartHashValue(date2);
|
||
|
|
}
|
||
|
|
exports.compareDatePart = compareDatePart;
|
||
|
|
/**
|
||
|
|
* Gets the date range array including the specified date. The date range array is calculated as the list
|
||
|
|
* of dates accounting for the specified first day of the week and date range type.
|
||
|
|
* @param {Date} date - The input date
|
||
|
|
* @param {DateRangeType} dateRangeType - The desired date range type, i.e., day, week, month, etc.
|
||
|
|
* @param {DayOfWeek} dayOfWeek - The first day of the week.
|
||
|
|
* @returns {Date[]} An array of dates representing the date range containing the specified date.
|
||
|
|
*/
|
||
|
|
function getDateRangeArray(date, dateRangeType, firstDayOfWeek) {
|
||
|
|
var datesArray = new Array();
|
||
|
|
var startDate = null;
|
||
|
|
var endDate = null;
|
||
|
|
switch (dateRangeType) {
|
||
|
|
case DateValues_1.DateRangeType.Day:
|
||
|
|
startDate = getDatePart(date);
|
||
|
|
endDate = addDays(startDate, 1);
|
||
|
|
break;
|
||
|
|
case DateValues_1.DateRangeType.Week:
|
||
|
|
startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek);
|
||
|
|
endDate = addDays(startDate, DAYS_IN_WEEK);
|
||
|
|
break;
|
||
|
|
case DateValues_1.DateRangeType.Month:
|
||
|
|
startDate = new Date(date.getFullYear(), date.getMonth(), 1);
|
||
|
|
endDate = addMonths(startDate, 1);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
// Populate the dates array with the dates in range
|
||
|
|
datesArray.push(startDate);
|
||
|
|
var nextDate = addDays(startDate, 1);
|
||
|
|
while (!compareDates(nextDate, endDate)) {
|
||
|
|
datesArray.push(nextDate);
|
||
|
|
nextDate = addDays(nextDate, 1);
|
||
|
|
}
|
||
|
|
return datesArray;
|
||
|
|
}
|
||
|
|
exports.getDateRangeArray = getDateRangeArray;
|
||
|
|
/**
|
||
|
|
* Checks whether the specified date is in the given date range.
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @param {Date[]} dateRange - An array of dates to do the lookup on
|
||
|
|
* @returns {bool} True if the date matches one of the dates in the specified array, false otherwise.
|
||
|
|
*/
|
||
|
|
function isInDateRangeArray(date, dateRange) {
|
||
|
|
for (var _i = 0, dateRange_1 = dateRange; _i < dateRange_1.length; _i++) {
|
||
|
|
var dateInRange = dateRange_1[_i];
|
||
|
|
if (compareDates(date, dateInRange)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
exports.isInDateRangeArray = isInDateRangeArray;
|
||
|
|
/**
|
||
|
|
* Gets a new date with the time portion zeroed out, i.e., set to midnight
|
||
|
|
* @param {Date} date - The origin date
|
||
|
|
* @returns {Date} A new date with the time set to midnight
|
||
|
|
*/
|
||
|
|
function getDatePart(date) {
|
||
|
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Gets the date for the first day of the week based on the given date assuming
|
||
|
|
* the specified first day of the week.
|
||
|
|
* @param {Date} date - The date to find the beginning of the week date for.
|
||
|
|
* @return {Date} A new date object representing the first day of the week containing the input date.
|
||
|
|
*/
|
||
|
|
function getStartDateOfWeek(date, firstDayOfWeek) {
|
||
|
|
var daysOffset = firstDayOfWeek - date.getDay();
|
||
|
|
if (daysOffset > 0) {
|
||
|
|
// If first day of week is > date, go 1 week back, to ensure resulting date is in the past.
|
||
|
|
daysOffset -= DAYS_IN_WEEK;
|
||
|
|
}
|
||
|
|
return addDays(date, daysOffset);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Helper function to assist in date comparisons
|
||
|
|
*/
|
||
|
|
function getDatePartHashValue(date) {
|
||
|
|
// Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year.
|
||
|
|
/* tslint:disable:no-bitwise */
|
||
|
|
return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9);
|
||
|
|
/* tslint:enable:no-bitwise */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 177 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_bf042f77',
|
||
|
|
picker: 'picker_bf042f77',
|
||
|
|
holder: 'holder_bf042f77',
|
||
|
|
pickerIsOpened: 'pickerIsOpened_bf042f77',
|
||
|
|
frame: 'frame_bf042f77',
|
||
|
|
wrap: 'wrap_bf042f77',
|
||
|
|
dayPicker: 'dayPicker_bf042f77',
|
||
|
|
header: 'header_bf042f77',
|
||
|
|
month: 'month_bf042f77',
|
||
|
|
year: 'year_bf042f77',
|
||
|
|
table: 'table_bf042f77',
|
||
|
|
day: 'day_bf042f77',
|
||
|
|
weekday: 'weekday_bf042f77',
|
||
|
|
dayIsToday: 'dayIsToday_bf042f77',
|
||
|
|
dayIsDisabled: 'dayIsDisabled_bf042f77',
|
||
|
|
dayIsUnfocused: 'dayIsUnfocused_bf042f77',
|
||
|
|
dayIsFocused: 'dayIsFocused_bf042f77',
|
||
|
|
dayIsHighlighted: 'dayIsHighlighted_bf042f77',
|
||
|
|
pickerIsFocused: 'pickerIsFocused_bf042f77',
|
||
|
|
dayDisabled: 'dayDisabled_bf042f77',
|
||
|
|
monthPicker: 'monthPicker_bf042f77',
|
||
|
|
yearPicker: 'yearPicker_bf042f77',
|
||
|
|
monthComponents: 'monthComponents_bf042f77',
|
||
|
|
yearComponents: 'yearComponents_bf042f77',
|
||
|
|
decadeComponents: 'decadeComponents_bf042f77',
|
||
|
|
prevMonth: 'prevMonth_bf042f77',
|
||
|
|
nextMonth: 'nextMonth_bf042f77',
|
||
|
|
prevYear: 'prevYear_bf042f77',
|
||
|
|
nextYear: 'nextYear_bf042f77',
|
||
|
|
prevDecade: 'prevDecade_bf042f77',
|
||
|
|
nextDecade: 'nextDecade_bf042f77',
|
||
|
|
headerToggleView: 'headerToggleView_bf042f77',
|
||
|
|
currentYear: 'currentYear_bf042f77',
|
||
|
|
currentDecade: 'currentDecade_bf042f77',
|
||
|
|
optionGrid: 'optionGrid_bf042f77',
|
||
|
|
monthOption: 'monthOption_bf042f77',
|
||
|
|
yearOption: 'yearOption_bf042f77',
|
||
|
|
isHighlighted: 'isHighlighted_bf042f77',
|
||
|
|
goToday: 'goToday_bf042f77',
|
||
|
|
isPickingYears: 'isPickingYears_bf042f77',
|
||
|
|
pickerIsMonthPickerVisible: 'pickerIsMonthPickerVisible_bf042f77',
|
||
|
|
toggleMonthView: 'toggleMonthView_bf042f77',
|
||
|
|
isPickingMonths: 'isPickingMonths_bf042f77',
|
||
|
|
navContainer: 'navContainer_bf042f77',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_bf042f77{box-sizing:border-box;box-shadow:none;margin:0;padding:0;margin-bottom:17px}.picker_bf042f77{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";font-size:14px;position:relative}html[dir=ltr] .picker_bf042f77{text-align:left}html[dir=rtl] .picker_bf042f77{text-align:right}.holder_bf042f77{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";min-width:300px;display:none}.picker_bf042f77.pickerIsOpened_bf042f77 .holder_bf042f77{box-sizing:border-box;display:block}.pickerIsOpened_bf042f77{position:relative}.frame_bf042f77{padding:1px;position:relative}.wrap_bf042f77{margin:-1px;padding:9px}.dayPicker_bf042f77{display:block;margin-bottom:30px}.header_bf042f77{height:40px;line-height:44px}.month_bf042f77,.year_bf042f77{display:inline-block;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-top:-1px}.month_bf042f77:hover,.year_bf042f77:hover{color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": ";cursor:pointer}html[dir=ltr] .month_bf042f77{margin-left:15px}html[dir=rtl] .month_bf042f77{margin-right:15px}html[dir=ltr] .year_bf042f77{margin-left:15px}html[dir=rtl] .year_bf042f77{margin-right:15px}.table_bf042f77{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit}.table_bf042f77 td{margin:0;padding:0}.table_bf042f77 td:hover{outline:1px solid transparent}.day_bf042f77,.weekday_bf042f77{width:40px;height:40px;padding:0;line-height:40px;font-size:15px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.dayIsToday_bf042f77{position:relative;background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.dayIsDisabled_bf042f77:before{border-top-color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.dayIsUnfocused_bf042f77{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";font-weight:400}.dayIsFocused_bf042f77:hover,.dayIsUnfocused_bf042f77:hover{cursor:pointer;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.day_bf042f77.dayIsHighlighted_bf042f77.dayIsFocused_bf042f77::-moz-focus-inner{border:0}.day_bf042f77.dayIsHighlighted_bf042f77.dayIsFocused_bf042f77{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .day_bf042f77.dayIsHighlighted_bf042f77.dayIsFocused_bf042f77:focus:after{content:'';position:absolute;top:1px;right:1px;bottom:1px;left:1px;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.dayIsHighlighted_bf042f77:hover,.pickerIsFocused_bf042f77 .dayIsHighlighted_bf042f77{cursor:pointer;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.dayIsHighlighted_bf042f77.dayDisabled_bf042f77,.dayIsHighlighted_bf042f77.dayDisabled_bf042f77:hover{background:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.monthPicker_bf042f77,.yearPicker_bf042f77{display:none}.monthComponents_bf042f77{position:absolute;top:9px}[dir=ltr] .monthComponents_bf042f77{right:9px}[dir=rtl] .monthComponents_bf042f77{left:9px}[dir=ltr] .monthComponents_bf042f77{left:9px}[dir=rtl] .monthComponents_bf042f77{right:9px}.decadeComponents_bf042f77,.yearComponents_bf042f77{position:absolute;top:-2px}[dir=ltr] .decadeComponents_bf042f77,[dir=ltr] .yearComponents_bf042f77{right:10px}[dir=rtl] .decadeComponents_bf042f77,[dir=rtl] .yearComponents_bf042f77{left:10px}.nextDecade_bf042f77,.nextMonth_bf042f77,.nextYear_bf042f77,.prevDecade_bf042f77,.prevMonth_bf042f77,.prevYear_bf042f77{width:40px;height:40px;display:block;text-align:center;line-height:40px;text-align:center;font-size:1
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 178 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var DateMath_1 = __webpack_require__(176);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(177);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var CalendarMonth = (function (_super) {
|
||
|
|
__extends(CalendarMonth, _super);
|
||
|
|
function CalendarMonth(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._selectMonthCallbacks = [];
|
||
|
|
props.strings.shortMonths.map(function (month, index) {
|
||
|
|
_this._selectMonthCallbacks[index] = _this._onSelectMonth.bind(_this, index);
|
||
|
|
});
|
||
|
|
_this._onSelectNextYear = _this._onSelectNextYear.bind(_this);
|
||
|
|
_this._onSelectPrevYear = _this._onSelectPrevYear.bind(_this);
|
||
|
|
_this._onSelectMonth = _this._onSelectMonth.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
CalendarMonth.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, navigatedDate = _a.navigatedDate, strings = _a.strings;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker-monthPicker', styles.monthPicker) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-header', styles.header) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-yearComponents ms-DatePicker-navContainer', styles.yearComponents, styles.navContainer) },
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-prevYear js-prevYear', styles.prevYear), onClick: this._onSelectPrevYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectPrevYear), "aria-label": strings.prevYearAriaLabel, role: 'button', tabIndex: 0 },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronRight' : 'chevronLeft' })),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DatePicker-nextYear js-nextYear', styles.nextYear), onClick: this._onSelectNextYear, onKeyDown: this._onKeyDown.bind(this, this._onSelectNextYear), "aria-label": strings.nextYearAriaLabel, role: 'button', tabIndex: 0 },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? 'chevronLeft' : 'chevronRight' }))),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-currentYear js-showYearPicker', styles.currentYear) }, navigatedDate.getFullYear())),
|
||
|
|
React.createElement(FocusZone_1.FocusZone, null,
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid) }, strings.shortMonths.map(function (month, index) {
|
||
|
|
return React.createElement("span", { role: 'button', className: Utilities_1.css('ms-DatePicker-monthOption', styles.monthOption), key: index, onClick: _this._selectMonthCallbacks[index], "aria-label": DateMath_1.setMonth(navigatedDate, index).toLocaleString([], { month: 'long', year: 'numeric' }), "data-is-focusable": true }, month);
|
||
|
|
})))));
|
||
|
|
};
|
||
|
|
CalendarMonth.prototype._onKeyDown = function (callback, ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CalendarMonth.prototype._onSelectNextYear = function () {
|
||
|
|
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
|
||
|
|
onNavigateDate(DateMath_1.addYears(navigatedDate, 1), false);
|
||
|
|
};
|
||
|
|
;
|
||
|
|
CalendarMonth.prototype._onSelectPrevYear = function () {
|
||
|
|
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
|
||
|
|
onNavigateDate(DateMath_1.addYears(navigatedDate, -1), false);
|
||
|
|
};
|
||
|
|
;
|
||
|
|
CalendarMonth.prototype._onSelectMonth = function (newMonth) {
|
||
|
|
var _a = this.props, navigatedDate = _a.navigatedDate, onNavigateDate = _a.onNavigateDate;
|
||
|
|
onNavigateDate(DateMath_1.setMonth(navigatedDate, newMonth), true);
|
||
|
|
};
|
||
|
|
return CalendarMonth;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.CalendarMonth = CalendarMonth;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 179 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DateValues_1 = __webpack_require__(174);
|
||
|
|
exports.DayOfWeek = DateValues_1.DayOfWeek;
|
||
|
|
exports.DateRangeType = DateValues_1.DateRangeType;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 180 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(181));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 181 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(182));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 182 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(183);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Checkbox = (function (_super) {
|
||
|
|
__extends(Checkbox, _super);
|
||
|
|
function Checkbox(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnMutuallyExclusive({
|
||
|
|
'checked': 'defaultChecked'
|
||
|
|
});
|
||
|
|
_this._id = Utilities_1.getId('checkbox-');
|
||
|
|
_this.state = {
|
||
|
|
isFocused: false,
|
||
|
|
isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Checkbox.prototype.render = function () {
|
||
|
|
var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, label = _a.label, name = _a.name;
|
||
|
|
var isFocused = this.state.isFocused;
|
||
|
|
var isChecked = checked === undefined ? this.state.isChecked : checked;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Checkbox', styles.root, className, (_b = {
|
||
|
|
'is-inFocus': isFocused
|
||
|
|
},
|
||
|
|
_b[styles.rootIsInFocus] = isFocused,
|
||
|
|
_b)) },
|
||
|
|
React.createElement("input", __assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), id: this._id, name: name || this._id, className: Utilities_1.css('ms-Checkbox-input', styles.input), type: 'checkbox', onChange: this._onChange, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked })),
|
||
|
|
this.props.children,
|
||
|
|
React.createElement("label", { htmlFor: this._id, className: Utilities_1.css('ms-Checkbox-label', styles.label, (_c = {},
|
||
|
|
_c['is-checked ' + styles.labelIsChecked] = isChecked,
|
||
|
|
_c['is-disabled ' + styles.labelIsDisabled] = disabled,
|
||
|
|
_c[styles.labelIsInFocus] = isFocused,
|
||
|
|
_c)) }, label && React.createElement("span", { className: styles.textLabel }, label))));
|
||
|
|
var _b, _c;
|
||
|
|
};
|
||
|
|
Object.defineProperty(Checkbox.prototype, "checked", {
|
||
|
|
get: function () {
|
||
|
|
return this._checkBox ? this._checkBox.checked : false;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Checkbox.prototype.focus = function () {
|
||
|
|
if (this._checkBox) {
|
||
|
|
this._checkBox.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Checkbox.prototype._onFocus = function (ev) {
|
||
|
|
var inputProps = this.props.inputProps;
|
||
|
|
if (inputProps && inputProps.onFocus) {
|
||
|
|
inputProps.onFocus(ev);
|
||
|
|
}
|
||
|
|
this.setState({ isFocused: true });
|
||
|
|
};
|
||
|
|
Checkbox.prototype._onBlur = function (ev) {
|
||
|
|
var inputProps = this.props.inputProps;
|
||
|
|
if (inputProps && inputProps.onBlur) {
|
||
|
|
inputProps.onBlur(ev);
|
||
|
|
}
|
||
|
|
this.setState({ isFocused: false });
|
||
|
|
};
|
||
|
|
Checkbox.prototype._onChange = function (ev) {
|
||
|
|
var onChange = this.props.onChange;
|
||
|
|
var isChecked = ev.target.checked;
|
||
|
|
if (onChange) {
|
||
|
|
onChange(ev, isChecked);
|
||
|
|
}
|
||
|
|
if (this.props.checked === undefined) {
|
||
|
|
this.setState({ isChecked: isChecked });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Checkbox;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Checkbox.defaultProps = {};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Checkbox.prototype, "_onFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Checkbox.prototype, "_onBlur", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Checkbox.prototype, "_onChange", null);
|
||
|
|
exports.Checkbox = Checkbox;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 183 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_ec819a34',
|
||
|
|
textLabel: 'textLabel_ec819a34',
|
||
|
|
input: 'input_ec819a34',
|
||
|
|
label: 'label_ec819a34',
|
||
|
|
labelIsDisabled: 'labelIsDisabled_ec819a34',
|
||
|
|
labelIsChecked: 'labelIsChecked_ec819a34',
|
||
|
|
labelIsInFocus: 'labelIsInFocus_ec819a34',
|
||
|
|
rootIsInFocus: 'rootIsInFocus_ec819a34',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_ec819a34{box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;min-height:36px;position:relative}.textLabel_ec819a34{font-size:14px;padding:0 0 0 26px;display:inline-block;font-size:14px}html[dir=rtl] .textLabel_ec819a34{padding:0 26px 0 0}.input_ec819a34{position:absolute;opacity:0;top:8px}.label_ec819a34::before{content:'';display:inline-block;border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;box-sizing:border-box;transition-property:background,border,border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1)}.label_ec819a34::after{content:'\\E73E';font-family:FabricMDL2Icons;display:none;position:absolute;font-weight:900;background-color:transparent;font-size:13px;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";line-height:20px;width:20px;text-align:center}.label_ec819a34{display:inline-block;cursor:pointer;margin-top:8px;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:20px;min-height:20px;line-height:20px}.label_ec819a34:hover::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34:hover .textLabel_ec819a34{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_ec819a34:focus::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34:focus.labelIsDisabled_ec819a34::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_ec819a34:focus.labelIsChecked_ec819a34::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_ec819a34:active::before{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.label_ec819a34:active .textLabel_ec819a34{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.label_ec819a34.labelIsChecked_ec819a34::before{border:10px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_ec819a34.labelIsChecked_ec819a34::before{display:none}}.label_ec819a34.labelIsChecked_ec819a34::after{display:block}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:black-on-white){.label_ec819a34.labelIsChecked_ec819a34::after{height:16px;width:16px;line-height:16px}}@media screen and (-ms-high-contrast:active){.label_ec819a34.labelIsChecked_ec819a34::after{border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.label_ec819a34.labelIsChecked_ec819a34::after{border:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.label_ec819a34.labelIsChecked_ec819a34:focus::before,.label_ec819a34.labelIsChecked_ec819a34:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.label_ec819a34.labelIsDisabled_ec819a34{cursor:default}.label_ec819a34.labelIsDisabled_ec819a34:focus::before,.label_ec819a34.labelIsDisabled_ec819a34:hover::before{border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.label_ec819a34.labelIsDisabled_ec819a34::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.label_ec819a34.labelIsDisabled_
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 184 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(185));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 185 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(186));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 186 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Image_1 = __webpack_require__(187);
|
||
|
|
var Label_1 = __webpack_require__(189);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(193);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var ChoiceGroup = (function (_super) {
|
||
|
|
__extends(ChoiceGroup, _super);
|
||
|
|
function ChoiceGroup(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({ 'onChanged': 'onChange' });
|
||
|
|
_this._warnMutuallyExclusive({
|
||
|
|
selectedKey: 'defaultSelectedKey'
|
||
|
|
});
|
||
|
|
_this.state = {
|
||
|
|
keyChecked: (props.defaultSelectedKey === undefined) ?
|
||
|
|
_this._getKeyChecked(props) :
|
||
|
|
props.defaultSelectedKey,
|
||
|
|
keyFocused: undefined
|
||
|
|
};
|
||
|
|
_this._id = Utilities_1.getId('ChoiceGroup');
|
||
|
|
_this._labelId = Utilities_1.getId('ChoiceGroupLabel');
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
var newKeyChecked = this._getKeyChecked(newProps);
|
||
|
|
var oldKeyCheched = this._getKeyChecked(this.props);
|
||
|
|
if (newKeyChecked !== oldKeyCheched) {
|
||
|
|
this.setState({
|
||
|
|
keyChecked: newKeyChecked,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ChoiceGroup.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, label = _a.label, options = _a.options, className = _a.className, required = _a.required;
|
||
|
|
var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
|
||
|
|
return (
|
||
|
|
// Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role
|
||
|
|
React.createElement("div", { role: 'application', className: className },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": this.props.label ? this._id + '-label' : '' },
|
||
|
|
this.props.label && (React.createElement(Label_1.Label, { className: className, required: required, id: this._id + '-label' }, label)),
|
||
|
|
options.map(function (option) {
|
||
|
|
var _a = option.onRenderField, onRenderField = _a === void 0 ? _this._onRenderField : _a;
|
||
|
|
// Merge internal props into option
|
||
|
|
Utilities_1.assign(option, {
|
||
|
|
checked: option.key === keyChecked,
|
||
|
|
disabled: option.disabled || _this.props.disabled,
|
||
|
|
id: _this._id + "-" + option.key,
|
||
|
|
labelId: _this._labelId + "-" + option.key
|
||
|
|
});
|
||
|
|
return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', styles.choiceField, (_b = {},
|
||
|
|
_b['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc,
|
||
|
|
_b['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps,
|
||
|
|
_b['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused,
|
||
|
|
_b)) },
|
||
|
|
React.createElement("input", { ref: function (c) { return _this._inputElement = c; }, id: option.id, className: Utilities_1.css('ms-ChoiceField-input', styles.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.disabled || _this.props.disabled, checked: option.key === keyChecked, required: required, onChange: _this._onChange.bind(_this, option), onFocus: _this._onFocus.bind(_this, option), onBlur: _this._onBlur.bind(_this, option), "aria-labelledby": option.id }),
|
||
|
|
onRenderField(option, _this._onRenderField)));
|
||
|
|
var _b;
|
||
|
|
}))));
|
||
|
|
};
|
||
|
|
ChoiceGroup.prototype.focus = function () {
|
||
|
|
if (this._inputElement) {
|
||
|
|
this._inputElement.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ChoiceGroup.prototype._onFocus = function (option, ev) {
|
||
|
|
this.setState({
|
||
|
|
keyFocused: option.key,
|
||
|
|
keyChecked: this.state.keyChecked
|
||
|
|
});
|
||
|
|
};
|
||
|
|
ChoiceGroup.prototype._onBlur = function (option, ev) {
|
||
|
|
this.setState({
|
||
|
|
keyFocused: undefined,
|
||
|
|
keyChecked: this.state.keyChecked
|
||
|
|
});
|
||
|
|
};
|
||
|
|
ChoiceGroup.prototype._onRenderField = function (option) {
|
||
|
|
return (React.createElement("label", { htmlFor: option.id, className: Utilities_1.css('ms-ChoiceField-field', styles.field, (_a = {},
|
||
|
|
_a['ms-ChoiceField-field--image ' + styles.fieldIsImage] = !!option.imageSrc,
|
||
|
|
_a['ms-ChoiceField--icon ' + styles.fieldIsIcon] = !!option.iconProps,
|
||
|
|
_a['is-checked ' + styles.fieldIsChecked] = option.checked,
|
||
|
|
_a['is-disabled ' + styles.fieldIsDisabled] = option.disabled,
|
||
|
|
_a)) },
|
||
|
|
option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {},
|
||
|
|
_b['is-hidden ' + styles.imageWrapperIsHidden] = option.checked,
|
||
|
|
_b)) },
|
||
|
|
React.createElement(Image_1.Image, { src: option.imageSrc, width: option.imageSize.width, height: option.imageSize.height })),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {},
|
||
|
|
_c['is-hidden ' + styles.imageWrapperIsHidden] = !option.checked,
|
||
|
|
_c)) },
|
||
|
|
React.createElement(Image_1.Image, { src: option.selectedImageSrc, width: option.imageSize.width, height: option.imageSize.height })))),
|
||
|
|
option.iconProps
|
||
|
|
? React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', styles.iconWrapper) },
|
||
|
|
React.createElement(Icon_1.Icon, __assign({}, option.iconProps))))
|
||
|
|
: null,
|
||
|
|
option.imageSrc || option.iconProps
|
||
|
|
? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', styles.labelWrapper) },
|
||
|
|
React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text))) : (React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text))));
|
||
|
|
var _a, _b, _c;
|
||
|
|
};
|
||
|
|
ChoiceGroup.prototype._onChange = function (option, evt) {
|
||
|
|
var _a = this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey;
|
||
|
|
// Only manage state in uncontrolled scenarios.
|
||
|
|
if (selectedKey === undefined) {
|
||
|
|
this.setState({
|
||
|
|
keyChecked: option.key
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
|
||
|
|
if (onChange) {
|
||
|
|
onChange(evt, option);
|
||
|
|
}
|
||
|
|
else if (onChanged) {
|
||
|
|
onChanged(option);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* If all the isChecked property of options are falsy values, return undefined;
|
||
|
|
* Else return the key of the first option with the truthy isChecked property.
|
||
|
|
*/
|
||
|
|
ChoiceGroup.prototype._getKeyChecked = function (props) {
|
||
|
|
if (props.selectedKey !== undefined) {
|
||
|
|
return props.selectedKey;
|
||
|
|
}
|
||
|
|
var optionsChecked = props.options.filter(function (option) {
|
||
|
|
return option.checked;
|
||
|
|
});
|
||
|
|
if (optionsChecked.length === 0) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return optionsChecked[0].key;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return ChoiceGroup;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
ChoiceGroup.defaultProps = {
|
||
|
|
options: []
|
||
|
|
};
|
||
|
|
exports.ChoiceGroup = ChoiceGroup;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 187 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(188));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 188 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(145));
|
||
|
|
__export(__webpack_require__(146));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 189 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(190));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 190 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(191));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 191 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(192);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Label = (function (_super) {
|
||
|
|
__extends(Label, _super);
|
||
|
|
function Label() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Label.prototype.render = function () {
|
||
|
|
var _a = this.props, disabled = _a.disabled, required = _a.required, children = _a.children, className = _a.className;
|
||
|
|
return (React.createElement("label", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { className: Utilities_1.css(styles.root, 'ms-Label', className, (_b = {
|
||
|
|
'is-disabled': disabled,
|
||
|
|
'is-required': required
|
||
|
|
},
|
||
|
|
_b[styles.isDisabled] = disabled,
|
||
|
|
_b[styles.isRequired] = required,
|
||
|
|
_b)) }), children));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
return Label;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.Label = Label;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 192 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_083d600e',
|
||
|
|
isRequired: 'isRequired_083d600e',
|
||
|
|
isDisabled: 'isDisabled_083d600e',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_083d600e{font-size:14px;font-weight:400;box-sizing:border-box;box-shadow:none;margin:0;padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";box-sizing:border-box;display:block;padding:5px 0;word-wrap:break-word;overflow-wrap:break-word}.isRequired_083d600e::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.isDisabled_083d600e{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 193 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_92027817',
|
||
|
|
choiceField: 'choiceField_92027817',
|
||
|
|
input: 'input_92027817',
|
||
|
|
field: 'field_92027817',
|
||
|
|
fieldIsChecked: 'fieldIsChecked_92027817',
|
||
|
|
fieldIsDisabled: 'fieldIsDisabled_92027817',
|
||
|
|
choiceFieldIsImage: 'choiceFieldIsImage_92027817',
|
||
|
|
choiceFieldIsIcon: 'choiceFieldIsIcon_92027817',
|
||
|
|
fieldIsImage: 'fieldIsImage_92027817',
|
||
|
|
fieldIsIcon: 'fieldIsIcon_92027817',
|
||
|
|
innerField: 'innerField_92027817',
|
||
|
|
imageWrapper: 'imageWrapper_92027817',
|
||
|
|
imageWrapperIsHidden: 'imageWrapperIsHidden_92027817',
|
||
|
|
labelWrapper: 'labelWrapper_92027817',
|
||
|
|
iconWrapper: 'iconWrapper_92027817',
|
||
|
|
choiceFieldIsInFocus: 'choiceFieldIsInFocus_92027817',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_92027817{margin-bottom:4px}.choiceField_92027817{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;min-height:26px;border:none;position:relative;margin-top:8px}[dir=ltr] .choiceField_92027817{padding-left:8px}[dir=rtl] .choiceField_92027817{padding-right:8px}.choiceField_92027817 .ms-Label{font-size:14px;padding:0 0 0 26px;display:inline-block}[dir=rtl] .choiceField_92027817 .ms-Label{padding:0 26px 0 0}.input_92027817{position:absolute;opacity:0;top:8px}.field_92027817::before{content:'';display:inline-block;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";width:20px;height:20px;font-weight:400;position:absolute;top:-1px;box-sizing:border-box;transition-property:border-color;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.23,1);border-radius:50%}.field_92027817::after{content:'';width:0;height:0;border-radius:50%;position:absolute;transition-property:top,left,right,width,height;transition-duration:150ms;transition-timing-function:cubic-bezier(.4,0,.23,1);box-sizing:border-box}[dir=ltr] .field_92027817::after{left:10px}[dir=rtl] .field_92027817::after{right:10px}[dir=ltr] .field_92027817::after{right:0}[dir=rtl] .field_92027817::after{left:0}@media screen and (-ms-high-contrast:active){.field_92027817::after{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817::after{color:#600000}}.field_92027817{display:inline-block;cursor:pointer;margin-top:0;position:relative;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.field_92027817:focus::before,.field_92027817:hover::before{border-color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.field_92027817:focus .ms-Label,.field_92027817:hover .ms-Label{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.field_92027817.fieldIsChecked_92027817::before{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsChecked_92027817::before{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsChecked_92027817::before{border-color:#37006e}}.field_92027817.fieldIsChecked_92027817::after{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";top:4px;width:10px;height:10px}[dir=ltr] .field_92027817.fieldIsChecked_92027817::after{left:5px}[dir=rtl] .field_92027817.fieldIsChecked_92027817::after{right:5px}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsChecked_92027817::after{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsChecked_92027817::after{background-color:#37006e}}.field_92027817.fieldIsChecked_92027817:focus::before,.field_92027817.fieldIsChecked_92027817:hover::before{border-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.field_92027817.fieldIsDisabled_92027817{cursor:default}.field_92027817.fieldIsDisabled_92027817::before{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.field_92027817.fieldIsDisabled_92027817::before{border-color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.field_92027817.fieldIsDisabled_92027817::before{border-color:#600000}}.field_92027817.fieldIsDisabled_92027817 .ms-Label{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.fie
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 194 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(195));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 195 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(196));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 196 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var TextField_1 = __webpack_require__(197);
|
||
|
|
var ColorRectangle_1 = __webpack_require__(201);
|
||
|
|
var ColorSlider_1 = __webpack_require__(205);
|
||
|
|
var colors_1 = __webpack_require__(202);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var stylesImport = __webpack_require__(204);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var ColorPicker = (function (_super) {
|
||
|
|
__extends(ColorPicker, _super);
|
||
|
|
function ColorPicker(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
color: colors_1.getColorFromString(props.color)
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ColorPicker.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.color) {
|
||
|
|
this._updateColor(colors_1.getColorFromString(newProps.color));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ColorPicker.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var color = this.state.color;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', styles.root) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', styles.panel) },
|
||
|
|
React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
|
||
|
|
React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
|
||
|
|
!this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', styles.colorSliderIsAlpha), overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChanged: this._onAChanged })),
|
||
|
|
React.createElement("table", { className: 'ms-ColorPicker-table', cellPadding: '0', cellSpacing: '0' },
|
||
|
|
React.createElement("thead", null,
|
||
|
|
React.createElement("tr", { className: Styling_1.FontClassNames.small },
|
||
|
|
React.createElement("td", null, "Hex"),
|
||
|
|
React.createElement("td", null, "Red"),
|
||
|
|
React.createElement("td", null, "Green"),
|
||
|
|
React.createElement("td", null, "Blue"),
|
||
|
|
!this.props.alphaSliderHidden && (React.createElement("td", null, "Alpha")))),
|
||
|
|
React.createElement("tbody", null,
|
||
|
|
React.createElement("tr", null,
|
||
|
|
React.createElement("td", null,
|
||
|
|
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged })),
|
||
|
|
React.createElement("td", { style: { width: '18%' } },
|
||
|
|
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return _this.rText = ref; } })),
|
||
|
|
React.createElement("td", { style: { width: '18%' } },
|
||
|
|
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return _this.gText = ref; } })),
|
||
|
|
React.createElement("td", { style: { width: '18%' } },
|
||
|
|
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return _this.bText = ref; } })),
|
||
|
|
!this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
|
||
|
|
React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; } })))))))));
|
||
|
|
};
|
||
|
|
ColorPicker.prototype._onSVChanged = function (s, v) {
|
||
|
|
this._updateColor(colors_1.updateSV(this.state.color, s, v));
|
||
|
|
};
|
||
|
|
ColorPicker.prototype._onHChanged = function (h) {
|
||
|
|
this._updateColor(colors_1.updateH(this.state.color, h));
|
||
|
|
};
|
||
|
|
ColorPicker.prototype._onAChanged = function (a) {
|
||
|
|
this._updateColor(colors_1.updateA(this.state.color, a));
|
||
|
|
};
|
||
|
|
ColorPicker.prototype._onHexChanged = function () {
|
||
|
|
this._updateColor(colors_1.getColorFromString('#' + this.hexText.value));
|
||
|
|
};
|
||
|
|
ColorPicker.prototype._onRGBAChanged = function () {
|
||
|
|
this._updateColor(colors_1.getColorFromRGBA({
|
||
|
|
r: Number(this.rText.value),
|
||
|
|
g: Number(this.gText.value),
|
||
|
|
b: Number(this.bText.value),
|
||
|
|
a: Number(this.aText.value)
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
ColorPicker.prototype._updateColor = function (newColor) {
|
||
|
|
var onColorChanged = this.props.onColorChanged;
|
||
|
|
if (newColor.str !== this.state.color.str) {
|
||
|
|
this.setState({
|
||
|
|
color: newColor
|
||
|
|
}, function () {
|
||
|
|
if (onColorChanged) {
|
||
|
|
onColorChanged(newColor.str);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return ColorPicker;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorPicker.prototype, "_onSVChanged", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorPicker.prototype, "_onHChanged", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorPicker.prototype, "_onAChanged", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorPicker.prototype, "_onHexChanged", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorPicker.prototype, "_onRGBAChanged", null);
|
||
|
|
exports.ColorPicker = ColorPicker;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 197 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(198));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 198 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(199));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 199 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Label_1 = __webpack_require__(189);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(200);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var TextField = (function (_super) {
|
||
|
|
__extends(TextField, _super);
|
||
|
|
function TextField(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({
|
||
|
|
'iconClass': 'iconProps'
|
||
|
|
});
|
||
|
|
_this._warnMutuallyExclusive({
|
||
|
|
'value': 'defaultValue'
|
||
|
|
});
|
||
|
|
_this._id = Utilities_1.getId('TextField');
|
||
|
|
_this._descriptionId = Utilities_1.getId('TextFieldDescription');
|
||
|
|
_this.state = {
|
||
|
|
value: props.value || props.defaultValue || '',
|
||
|
|
isFocused: false,
|
||
|
|
errorMessage: ''
|
||
|
|
};
|
||
|
|
_this._onInputChange = _this._onInputChange.bind(_this);
|
||
|
|
_this._onFocus = _this._onFocus.bind(_this);
|
||
|
|
_this._onBlur = _this._onBlur.bind(_this);
|
||
|
|
_this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime);
|
||
|
|
_this._lastValidation = 0;
|
||
|
|
_this._isDescriptionAvailable = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Object.defineProperty(TextField.prototype, "value", {
|
||
|
|
/**
|
||
|
|
* Gets the current value of the text field.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
return this.state.value;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
TextField.prototype.componentDidMount = function () {
|
||
|
|
this._isMounted = true;
|
||
|
|
this._adjustInputHeight();
|
||
|
|
if (this.props.validateOnLoad) {
|
||
|
|
this._validate(this.state.value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
var onBeforeChange = this.props.onBeforeChange;
|
||
|
|
if (newProps.value !== undefined && newProps.value !== this.state.value) {
|
||
|
|
if (onBeforeChange) {
|
||
|
|
onBeforeChange(newProps.value);
|
||
|
|
}
|
||
|
|
this._latestValue = newProps.value;
|
||
|
|
this.setState({
|
||
|
|
value: newProps.value,
|
||
|
|
errorMessage: ''
|
||
|
|
});
|
||
|
|
this._delayedValidate(newProps.value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype.componentWillUnmount = function () {
|
||
|
|
this._isMounted = false;
|
||
|
|
};
|
||
|
|
TextField.prototype.render = function () {
|
||
|
|
var _a = this.props, className = _a.className, description = _a.description, disabled = _a.disabled, iconClass = _a.iconClass, iconProps = _a.iconProps, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined, borderless = _a.borderless, addonString = _a.addonString, _b = _a.onRenderAddon, onRenderAddon = _b === void 0 ? this._onRenderAddon : _b;
|
||
|
|
var isFocused = this.state.isFocused;
|
||
|
|
var errorMessage = this._errorMessage;
|
||
|
|
this._isDescriptionAvailable = Boolean(description || errorMessage);
|
||
|
|
var textFieldClassName = Utilities_1.css('ms-TextField', styles.root, className, (_c = {},
|
||
|
|
_c['is-required ' + styles.rootIsRequired] = required,
|
||
|
|
_c['is-disabled ' + styles.rootIsDisabled] = disabled,
|
||
|
|
_c['is-active ' + styles.rootIsActive] = isFocused,
|
||
|
|
_c['ms-TextField--multiline ' + styles.rootIsMultiline] = multiline,
|
||
|
|
_c['ms-TextField--underlined ' + styles.rootIsUnderlined] = underlined,
|
||
|
|
_c['ms-TextField--borderless ' + styles.rootIsBorderless] = borderless,
|
||
|
|
_c));
|
||
|
|
return (React.createElement("div", { className: textFieldClassName },
|
||
|
|
label && React.createElement(Label_1.Label, { htmlFor: this._id }, label),
|
||
|
|
React.createElement("div", { className: Utilities_1.css(styles.fieldGroup, isFocused && styles.fieldGroupIsFocused) },
|
||
|
|
(addonString !== undefined || this.props.onRenderAddon) && (React.createElement("div", { className: Utilities_1.css(styles.fieldAddon) }, onRenderAddon(this.props, this._onRenderAddon))),
|
||
|
|
multiline ? this._renderTextArea() : this._renderInput(),
|
||
|
|
(iconClass || iconProps) && React.createElement(Icon_1.Icon, __assign({ className: Utilities_1.css(iconClass, styles.icon) }, iconProps))),
|
||
|
|
this._isDescriptionAvailable &&
|
||
|
|
React.createElement("span", { id: this._descriptionId },
|
||
|
|
description && React.createElement("span", { className: Utilities_1.css('ms-TextField-description', styles.description) }, description),
|
||
|
|
errorMessage &&
|
||
|
|
React.createElement("div", { "aria-live": 'assertive' },
|
||
|
|
React.createElement(Utilities_1.DelayedRender, null,
|
||
|
|
React.createElement("p", { className: Utilities_1.css('ms-TextField-errorMessage', Styling_1.AnimationClassNames.slideDownIn20, styles.errorMessage), "data-automation-id": 'error-message' },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'error', className: styles.errorIcon }),
|
||
|
|
errorMessage))))));
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets focus on the text field
|
||
|
|
*/
|
||
|
|
TextField.prototype.focus = function () {
|
||
|
|
if (this._textElement) {
|
||
|
|
this._textElement.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Selects the text field
|
||
|
|
*/
|
||
|
|
TextField.prototype.select = function () {
|
||
|
|
if (this._textElement) {
|
||
|
|
this._textElement.select();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets the selection start of the text field to a specified value
|
||
|
|
*/
|
||
|
|
TextField.prototype.setSelectionStart = function (value) {
|
||
|
|
if (this._textElement) {
|
||
|
|
this._textElement.selectionStart = value;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets the selection end of the text field to a specified value
|
||
|
|
*/
|
||
|
|
TextField.prototype.setSelectionEnd = function (value) {
|
||
|
|
if (this._textElement) {
|
||
|
|
this._textElement.selectionEnd = value;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets the start and end positions of a selection in a text field.
|
||
|
|
* @param start Index of the start of the selection.
|
||
|
|
* @param end Index of the end of the selection.
|
||
|
|
*/
|
||
|
|
TextField.prototype.setSelectionRange = function (start, end) {
|
||
|
|
if (this._textElement) {
|
||
|
|
this._textElement.setSelectionRange(start, end);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype._onFocus = function (ev) {
|
||
|
|
if (this.props.onFocus) {
|
||
|
|
this.props.onFocus(ev);
|
||
|
|
}
|
||
|
|
this.setState({ isFocused: true });
|
||
|
|
if (this.props.validateOnFocusIn) {
|
||
|
|
this._validate(this.state.value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype._onBlur = function (ev) {
|
||
|
|
if (this.props.onBlur) {
|
||
|
|
this.props.onBlur(ev);
|
||
|
|
}
|
||
|
|
this.setState({ isFocused: false });
|
||
|
|
if (this.props.validateOnFocusOut) {
|
||
|
|
this._validate(this.state.value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype._onRenderAddon = function (props) {
|
||
|
|
var addonString = props.addonString;
|
||
|
|
return (React.createElement("span", { style: { paddingBottom: '1px' } }, addonString));
|
||
|
|
};
|
||
|
|
TextField.prototype._getTextElementClassName = function () {
|
||
|
|
var errorMessage = this._errorMessage;
|
||
|
|
var textFieldClassName;
|
||
|
|
if (this.props.multiline && !this.props.resizable) {
|
||
|
|
textFieldClassName = Utilities_1.css('ms-TextField-field ms-TextField-field--unresizable', styles.field, styles.fieldIsUnresizable);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
textFieldClassName = Utilities_1.css('ms-TextField-field', styles.field);
|
||
|
|
}
|
||
|
|
return Utilities_1.css(textFieldClassName, this.props.inputClassName, (_a = {},
|
||
|
|
_a['ms-TextField-invalid ' + styles.invalid] = !!errorMessage,
|
||
|
|
_a[styles.hasIcon] = !!this.props.iconClass,
|
||
|
|
_a));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Object.defineProperty(TextField.prototype, "_errorMessage", {
|
||
|
|
get: function () {
|
||
|
|
var errorMessage = this.state.errorMessage;
|
||
|
|
if (!errorMessage) {
|
||
|
|
errorMessage = this.props.errorMessage;
|
||
|
|
}
|
||
|
|
return errorMessage;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
TextField.prototype._renderTextArea = function () {
|
||
|
|
var textAreaProps = Utilities_1.getNativeProps(this.props, Utilities_1.textAreaProperties, ['defaultValue']);
|
||
|
|
return (React.createElement("textarea", __assign({ id: this._id }, textAreaProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, "aria-label": this.props.ariaLabel, onFocus: this._onFocus, onBlur: this._onBlur })));
|
||
|
|
};
|
||
|
|
TextField.prototype._renderInput = function () {
|
||
|
|
var inputProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultValue']);
|
||
|
|
return (React.createElement("input", __assign({ type: 'text', id: this._id }, inputProps, { ref: this._resolveRef('_textElement'), value: this.state.value, onInput: this._onInputChange, onChange: this._onInputChange, className: this._getTextElementClassName(), "aria-label": this.props.ariaLabel, "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : null, "aria-invalid": !!this.state.errorMessage, onFocus: this._onFocus, onBlur: this._onBlur })));
|
||
|
|
};
|
||
|
|
TextField.prototype._onInputChange = function (event) {
|
||
|
|
var _this = this;
|
||
|
|
var element = event.target;
|
||
|
|
var value = element.value;
|
||
|
|
// Avoid doing unnecessary work when the value has not changed.
|
||
|
|
if (value === this._latestValue) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._latestValue = value;
|
||
|
|
this.setState({
|
||
|
|
value: value,
|
||
|
|
errorMessage: ''
|
||
|
|
}, function () {
|
||
|
|
_this._adjustInputHeight();
|
||
|
|
if (_this.props.onChanged) {
|
||
|
|
_this.props.onChanged(value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var _a = this.props, validateOnFocusIn = _a.validateOnFocusIn, validateOnFocusOut = _a.validateOnFocusOut;
|
||
|
|
if (!(validateOnFocusIn || validateOnFocusOut)) {
|
||
|
|
this._delayedValidate(value);
|
||
|
|
}
|
||
|
|
var onBeforeChange = this.props.onBeforeChange;
|
||
|
|
onBeforeChange(value);
|
||
|
|
};
|
||
|
|
TextField.prototype._validate = function (value) {
|
||
|
|
var _this = this;
|
||
|
|
// In case of _validate called multi-times during executing validate logic with promise return.
|
||
|
|
if (this._latestValidateValue === value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._latestValidateValue = value;
|
||
|
|
var onGetErrorMessage = this.props.onGetErrorMessage;
|
||
|
|
var result = onGetErrorMessage(value || '');
|
||
|
|
if (result !== undefined) {
|
||
|
|
if (typeof result === 'string') {
|
||
|
|
this.setState({
|
||
|
|
errorMessage: result
|
||
|
|
});
|
||
|
|
this._notifyAfterValidate(value, result);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var currentValidation_1 = ++this._lastValidation;
|
||
|
|
result.then(function (errorMessage) {
|
||
|
|
if (_this._isMounted && currentValidation_1 === _this._lastValidation) {
|
||
|
|
_this.setState({ errorMessage: errorMessage });
|
||
|
|
}
|
||
|
|
_this._notifyAfterValidate(value, errorMessage);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._notifyAfterValidate(value, '');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype._notifyAfterValidate = function (value, errorMessage) {
|
||
|
|
if (this._isMounted &&
|
||
|
|
value === this.state.value &&
|
||
|
|
this.props.onNotifyValidationResult) {
|
||
|
|
this.props.onNotifyValidationResult(errorMessage, value);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
TextField.prototype._adjustInputHeight = function () {
|
||
|
|
if (this._textElement && this.props.autoAdjustHeight && this.props.multiline) {
|
||
|
|
var textField = this._textElement;
|
||
|
|
textField.style.height = '';
|
||
|
|
var scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars
|
||
|
|
textField.style.height = scrollHeight + 'px';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return TextField;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
TextField.defaultProps = {
|
||
|
|
multiline: false,
|
||
|
|
resizable: true,
|
||
|
|
autoAdjustHeight: false,
|
||
|
|
underlined: false,
|
||
|
|
borderless: false,
|
||
|
|
onChanged: function () { },
|
||
|
|
onBeforeChange: function () { },
|
||
|
|
onNotifyValidationResult: function () { },
|
||
|
|
onGetErrorMessage: function () { return undefined; },
|
||
|
|
deferredValidationTime: 200,
|
||
|
|
errorMessage: '',
|
||
|
|
validateOnFocusIn: false,
|
||
|
|
validateOnFocusOut: false,
|
||
|
|
validateOnLoad: true,
|
||
|
|
};
|
||
|
|
exports.TextField = TextField;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 200 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_020eac03',
|
||
|
|
screenReaderOnly: 'screenReaderOnly_020eac03',
|
||
|
|
fieldGroup: 'fieldGroup_020eac03',
|
||
|
|
fieldGroupIsFocused: 'fieldGroupIsFocused_020eac03',
|
||
|
|
rootIsDisabled: 'rootIsDisabled_020eac03',
|
||
|
|
fieldAddon: 'fieldAddon_020eac03',
|
||
|
|
field: 'field_020eac03',
|
||
|
|
hasIcon: 'hasIcon_020eac03',
|
||
|
|
rootIsRequired: 'rootIsRequired_020eac03',
|
||
|
|
rootIsActive: 'rootIsActive_020eac03',
|
||
|
|
errorIcon: 'errorIcon_020eac03',
|
||
|
|
icon: 'icon_020eac03',
|
||
|
|
description: 'description_020eac03',
|
||
|
|
rootIsBorderless: 'rootIsBorderless_020eac03',
|
||
|
|
rootIsUnderlined: 'rootIsUnderlined_020eac03',
|
||
|
|
rootIsMultiline: 'rootIsMultiline_020eac03',
|
||
|
|
errorMessage: 'errorMessage_020eac03',
|
||
|
|
invalid: 'invalid_020eac03',
|
||
|
|
fieldIsUnresizable: 'fieldIsUnresizable_020eac03',
|
||
|
|
hidden: 'hidden_020eac03',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_020eac03{box-sizing:border-box;box-shadow:none;margin:0;padding:0;margin-bottom:8px;position:relative}.screenReaderOnly_020eac03{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.fieldGroup_020eac03{border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";height:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;position:relative}.fieldGroup_020eac03:hover{border-color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.fieldGroup_020eac03.fieldGroupIsFocused_020eac03{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.rootIsDisabled_020eac03>.fieldGroup_020eac03{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}@media screen and (-ms-high-contrast:active){.fieldGroup_020eac03.fieldGroupIsFocused_020eac03,.fieldGroup_020eac03:hover{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.fieldGroup_020eac03.fieldGroupIsFocused_020eac03,.fieldGroup_020eac03:hover{border-color:#37006e}}.fieldGroup_020eac03::-ms-clear{display:none}.root_020eac03.rootIsDisabled_020eac03 .field{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.fieldAddon_020eac03{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 10px;line-height:1}.field_020eac03{box-sizing:border-box;box-shadow:none;margin:0;padding:0;font-size:14px;border-radius:0;border:none;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:0 12px 0 12px;width:100%;text-overflow:ellipsis;outline:0}[dir=rtl] .field_020eac03{padding:0 12px 0 12px}.field_020eac03:active,.field_020eac03:focus,.field_020eac03:hover{outline:0}[dir=ltr] .field_020eac03.hasIcon_020eac03{padding-right:24px}[dir=rtl] .field_020eac03.hasIcon_020eac03{padding-left:24px}.field_020eac03[disabled]{background-color:transparent;border-color:transparent;pointer-events:none;cursor:default}.field_020eac03 .field_020eac03::-webkit-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field_020eac03 .field_020eac03:-ms-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field .field::-webkit-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field .field:-ms-input-placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.field_020eac03 .field_020eac03::placeholder{color:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.root_020eac03.rootIsRequired_020eac03 .ms-Label::after{content:' *';color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_020eac03.rootIsActive_020eac03{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.errorIcon_020eac03{vertical-align:middle;font-size:14px}html[dir=ltr] .errorIcon_020eac03{margin-right:5px}html[dir=rtl] .errorIcon_020eac03{margin-left:5px}.icon_020eac03{position:absolute;bottom:8px;top:auto}html[dir=ltr] .icon_020eac03{right:8px}html[dir=rtl] .i
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 201 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var colors_1 = __webpack_require__(202);
|
||
|
|
var stylesImport = __webpack_require__(204);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var ColorRectangle = (function (_super) {
|
||
|
|
__extends(ColorRectangle, _super);
|
||
|
|
function ColorRectangle(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
var color = _this.props.color;
|
||
|
|
_this.state = {
|
||
|
|
isAdjusting: false,
|
||
|
|
origin: null,
|
||
|
|
color: color,
|
||
|
|
fullColorString: colors_1.getFullColorString(color)
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ColorRectangle.prototype.componentWillUnmount = function () {
|
||
|
|
this._events.dispose();
|
||
|
|
};
|
||
|
|
ColorRectangle.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
var color = newProps.color;
|
||
|
|
this.setState({
|
||
|
|
color: color,
|
||
|
|
fullColorString: colors_1.getFullColorString(color)
|
||
|
|
});
|
||
|
|
};
|
||
|
|
ColorRectangle.prototype.render = function () {
|
||
|
|
var minSize = this.props.minSize;
|
||
|
|
var _a = this.state, color = _a.color, fullColorString = _a.fullColorString;
|
||
|
|
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-colorRect', styles.colorRect), style: { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString }, onMouseDown: this._onMouseDown },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-light', styles.light) }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-dark', styles.dark) }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb', styles.thumb), style: { left: color.s + '%', top: (colors_1.MAX_COLOR_VALUE - color.v) + '%', backgroundColor: color.str } })));
|
||
|
|
};
|
||
|
|
ColorRectangle.prototype._onMouseDown = function (ev) {
|
||
|
|
this._events.on(window, 'mousemove', this._onMouseMove, true);
|
||
|
|
this._events.on(window, 'mouseup', this._onMouseUp, true);
|
||
|
|
this._onMouseMove(ev);
|
||
|
|
};
|
||
|
|
ColorRectangle.prototype._onMouseMove = function (ev) {
|
||
|
|
var _a = this.props, color = _a.color, onSVChanged = _a.onSVChanged;
|
||
|
|
var rectSize = this.refs.root.getBoundingClientRect();
|
||
|
|
var sPercentage = (ev.clientX - rectSize.left) / rectSize.width;
|
||
|
|
var vPercentage = (ev.clientY - rectSize.top) / rectSize.height;
|
||
|
|
var newColor = Utilities_1.assign({}, color, {
|
||
|
|
s: Math.min(colors_1.MAX_COLOR_SATURATION, Math.max(0, sPercentage * colors_1.MAX_COLOR_SATURATION)),
|
||
|
|
v: Math.min(colors_1.MAX_COLOR_VALUE, Math.max(0, colors_1.MAX_COLOR_VALUE - (vPercentage * colors_1.MAX_COLOR_VALUE))),
|
||
|
|
});
|
||
|
|
newColor.hex = colors_1.hsv2hex(newColor.h, newColor.s, newColor.v);
|
||
|
|
newColor.str = newColor.a === 100 ? '#' + newColor.hex : "rgba(" + newColor.r + ", " + newColor.g + ", " + newColor.b + ", " + newColor.a / 100 + ")";
|
||
|
|
this.setState({
|
||
|
|
isAdjusting: true,
|
||
|
|
color: newColor
|
||
|
|
});
|
||
|
|
if (onSVChanged) {
|
||
|
|
onSVChanged(newColor.s, newColor.v);
|
||
|
|
}
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
ColorRectangle.prototype._onMouseUp = function (ev) {
|
||
|
|
this._events.off();
|
||
|
|
this.setState({
|
||
|
|
isAdjusting: false,
|
||
|
|
origin: null
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return ColorRectangle;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
ColorRectangle.defaultProps = {
|
||
|
|
minSize: 220
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorRectangle.prototype, "_onMouseDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorRectangle.prototype, "_onMouseMove", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorRectangle.prototype, "_onMouseUp", null);
|
||
|
|
exports.ColorRectangle = ColorRectangle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 202 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var colorValues_1 = __webpack_require__(203);
|
||
|
|
exports.MAX_COLOR_SATURATION = 100;
|
||
|
|
exports.MAX_COLOR_HUE = 359;
|
||
|
|
exports.MAX_COLOR_VALUE = 100;
|
||
|
|
exports.MAX_COLOR_RGBA = 255;
|
||
|
|
function cssColor(color) {
|
||
|
|
return _named(color)
|
||
|
|
|| _hex3(color)
|
||
|
|
|| _hex6(color)
|
||
|
|
|| _rgb(color)
|
||
|
|
|| _rgba(color)
|
||
|
|
|| _hsl(color)
|
||
|
|
|| _hsla(color);
|
||
|
|
}
|
||
|
|
exports.cssColor = cssColor;
|
||
|
|
function rgb2hex(r, g, b) {
|
||
|
|
return [
|
||
|
|
_numberToPaddedHex(r),
|
||
|
|
_numberToPaddedHex(g),
|
||
|
|
_numberToPaddedHex(b)
|
||
|
|
].join('');
|
||
|
|
}
|
||
|
|
exports.rgb2hex = rgb2hex;
|
||
|
|
function hsv2hex(h, s, v) {
|
||
|
|
var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b;
|
||
|
|
return rgb2hex(r, g, b);
|
||
|
|
}
|
||
|
|
exports.hsv2hex = hsv2hex;
|
||
|
|
function rgb2hsv(r, g, b) {
|
||
|
|
var h;
|
||
|
|
var s;
|
||
|
|
var v;
|
||
|
|
var max = Math.max(r, g, b);
|
||
|
|
var min = Math.min(r, g, b);
|
||
|
|
var delta = max - min;
|
||
|
|
// hue
|
||
|
|
if (delta === 0) {
|
||
|
|
h = 0;
|
||
|
|
}
|
||
|
|
else if (r === max) {
|
||
|
|
h = ((g - b) / delta) % 6;
|
||
|
|
}
|
||
|
|
else if (g === max) {
|
||
|
|
h = (b - r) / delta + 2;
|
||
|
|
}
|
||
|
|
else if (b === max) {
|
||
|
|
h = (r - g) / delta + 4;
|
||
|
|
}
|
||
|
|
h = Math.round(h * 60);
|
||
|
|
if (h < 0) {
|
||
|
|
h += 360;
|
||
|
|
}
|
||
|
|
// saturation
|
||
|
|
s = Math.round((max === 0 ? 0 : (delta / max)) * 100);
|
||
|
|
// value
|
||
|
|
v = Math.round(max / 255 * 100);
|
||
|
|
return { h: h, s: s, v: v };
|
||
|
|
}
|
||
|
|
exports.rgb2hsv = rgb2hsv;
|
||
|
|
function hsl2hsv(h, s, l) {
|
||
|
|
s *= ((l < 50) ? l : (100 - l)) / 100;
|
||
|
|
return {
|
||
|
|
h: h,
|
||
|
|
s: 2 * s / (l + s) * 100,
|
||
|
|
v: l + s
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.hsl2hsv = hsl2hsv;
|
||
|
|
function hsv2hsl(h, s, v) {
|
||
|
|
s /= exports.MAX_COLOR_SATURATION;
|
||
|
|
v /= exports.MAX_COLOR_VALUE;
|
||
|
|
var l = (2 - s) * v;
|
||
|
|
var sl = s * v;
|
||
|
|
sl /= (l <= 1) ? l : 2 - l;
|
||
|
|
sl = sl || 0;
|
||
|
|
l /= 2;
|
||
|
|
return { h: h, s: sl * 100, l: l * 100 };
|
||
|
|
}
|
||
|
|
exports.hsv2hsl = hsv2hsl;
|
||
|
|
function hsl2rgb(h, s, l) {
|
||
|
|
var hsv = hsl2hsv(h, s, l);
|
||
|
|
return hsv2rgb(hsv.h, hsv.s, hsv.v);
|
||
|
|
}
|
||
|
|
exports.hsl2rgb = hsl2rgb;
|
||
|
|
function hsv2rgb(h, s, v) {
|
||
|
|
s = s / 100;
|
||
|
|
v = v / 100;
|
||
|
|
var rgb = [];
|
||
|
|
var c = v * s;
|
||
|
|
var hh = h / 60;
|
||
|
|
var x = c * (1 - Math.abs(hh % 2 - 1));
|
||
|
|
var m = v - c;
|
||
|
|
switch (Math.floor(hh)) {
|
||
|
|
case 0:
|
||
|
|
rgb = [c, x, 0];
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
rgb = [x, c, 0];
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
rgb = [0, c, x];
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
rgb = [0, x, c];
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
rgb = [x, 0, c];
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
rgb = [c, 0, x];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
r: Math.round(exports.MAX_COLOR_RGBA * (rgb[0] + m)),
|
||
|
|
g: Math.round(exports.MAX_COLOR_RGBA * (rgb[1] + m)),
|
||
|
|
b: Math.round(exports.MAX_COLOR_RGBA * (rgb[2] + m))
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.hsv2rgb = hsv2rgb;
|
||
|
|
function getColorFromString(color) {
|
||
|
|
var _a = cssColor(color), a = _a.a, b = _a.b, g = _a.g, r = _a.r;
|
||
|
|
var _b = rgb2hsv(r, g, b), h = _b.h, s = _b.s, v = _b.v;
|
||
|
|
return {
|
||
|
|
a: a,
|
||
|
|
b: b,
|
||
|
|
g: g,
|
||
|
|
h: h,
|
||
|
|
hex: rgb2hex(r, g, b),
|
||
|
|
r: r,
|
||
|
|
s: s,
|
||
|
|
str: color,
|
||
|
|
v: v
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.getColorFromString = getColorFromString;
|
||
|
|
function getColorFromRGBA(rgba) {
|
||
|
|
var a = rgba.a, b = rgba.b, g = rgba.g, r = rgba.r;
|
||
|
|
var _a = rgb2hsv(r, g, b), h = _a.h, s = _a.s, v = _a.v;
|
||
|
|
var hex = rgb2hex(r, g, b);
|
||
|
|
return {
|
||
|
|
a: a,
|
||
|
|
b: b,
|
||
|
|
g: g,
|
||
|
|
h: h,
|
||
|
|
hex: hex,
|
||
|
|
r: r,
|
||
|
|
s: s,
|
||
|
|
str: (a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + a / 100 + ")",
|
||
|
|
v: v
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.getColorFromRGBA = getColorFromRGBA;
|
||
|
|
function getFullColorString(color) {
|
||
|
|
return "#" + hsv2hex(color.h, exports.MAX_COLOR_SATURATION, exports.MAX_COLOR_VALUE);
|
||
|
|
}
|
||
|
|
exports.getFullColorString = getFullColorString;
|
||
|
|
function updateSV(color, s, v) {
|
||
|
|
var _a = hsv2rgb(color.h, s, v), r = _a.r, g = _a.g, b = _a.b;
|
||
|
|
var hex = rgb2hex(r, g, b);
|
||
|
|
return {
|
||
|
|
a: color.a,
|
||
|
|
b: b,
|
||
|
|
g: g,
|
||
|
|
h: color.h,
|
||
|
|
hex: hex,
|
||
|
|
r: r,
|
||
|
|
s: s,
|
||
|
|
str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")",
|
||
|
|
v: v
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.updateSV = updateSV;
|
||
|
|
function updateH(color, h) {
|
||
|
|
var _a = hsv2rgb(h, color.s, color.v), r = _a.r, g = _a.g, b = _a.b;
|
||
|
|
var hex = rgb2hex(r, g, b);
|
||
|
|
return {
|
||
|
|
a: color.a,
|
||
|
|
b: b,
|
||
|
|
g: g,
|
||
|
|
h: h,
|
||
|
|
hex: hex,
|
||
|
|
r: r,
|
||
|
|
s: color.s,
|
||
|
|
str: (color.a === 100) ? "#" + hex : "rgba(" + r + ", " + g + ", " + b + ", " + color.a / 100 + ")",
|
||
|
|
v: color.v
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.updateH = updateH;
|
||
|
|
function updateA(color, a) {
|
||
|
|
return Utilities_1.assign({}, color, {
|
||
|
|
a: a,
|
||
|
|
str: (a === 100) ? "#" + color.hex : "rgba(" + color.r + ", " + color.g + ", " + color.b + ", " + a / 100 + ")"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
exports.updateA = updateA;
|
||
|
|
function _numberToPaddedHex(num) {
|
||
|
|
var hex = num.toString(16);
|
||
|
|
return hex.length === 1 ? '0' + hex : hex;
|
||
|
|
}
|
||
|
|
function _named(str) {
|
||
|
|
var c = colorValues_1.COLOR_VALUES[str.toLowerCase()];
|
||
|
|
if (c) {
|
||
|
|
return {
|
||
|
|
r: c[0],
|
||
|
|
g: c[1],
|
||
|
|
b: c[2],
|
||
|
|
a: 100
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _rgb(str) {
|
||
|
|
if (0 === str.indexOf('rgb(')) {
|
||
|
|
str = str.match(/rgb\(([^)]+)\)/)[1];
|
||
|
|
var parts = str.split(/ *, */).map(Number);
|
||
|
|
return {
|
||
|
|
r: parts[0],
|
||
|
|
g: parts[1],
|
||
|
|
b: parts[2],
|
||
|
|
a: 100
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _rgba(str) {
|
||
|
|
if (str.indexOf('rgba(') === 0) {
|
||
|
|
str = str.match(/rgba\(([^)]+)\)/)[1];
|
||
|
|
var parts = str.split(/ *, */).map(Number);
|
||
|
|
return {
|
||
|
|
r: parts[0],
|
||
|
|
g: parts[1],
|
||
|
|
b: parts[2],
|
||
|
|
a: parts[3] * 100
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _hex6(str) {
|
||
|
|
if ('#' === str[0] && 7 === str.length) {
|
||
|
|
return {
|
||
|
|
r: parseInt(str.slice(1, 3), 16),
|
||
|
|
g: parseInt(str.slice(3, 5), 16),
|
||
|
|
b: parseInt(str.slice(5, 7), 16),
|
||
|
|
a: 100
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _hex3(str) {
|
||
|
|
if ('#' === str[0] && 4 === str.length) {
|
||
|
|
return {
|
||
|
|
r: parseInt(str[1] + str[1], 16),
|
||
|
|
g: parseInt(str[2] + str[2], 16),
|
||
|
|
b: parseInt(str[3] + str[3], 16),
|
||
|
|
a: 100
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _hsl(str) {
|
||
|
|
if (str.indexOf('hsl(') === 0) {
|
||
|
|
str = str.match(/hsl\(([^)]+)\)/)[1];
|
||
|
|
var parts = str.split(/ *, */);
|
||
|
|
var h = parseInt(parts[0], 10);
|
||
|
|
var s = parseInt(parts[1], 10);
|
||
|
|
var l = parseInt(parts[2], 10);
|
||
|
|
var rgba = hsl2rgb(h, s, l);
|
||
|
|
rgba.a = 100;
|
||
|
|
return rgba;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function _hsla(str) {
|
||
|
|
if (str.indexOf('hsla(') === 0) {
|
||
|
|
str = str.match(/hsla\(([^)]+)\)/)[1];
|
||
|
|
var parts = str.split(/ *, */);
|
||
|
|
var h = parseInt(parts[0], 10);
|
||
|
|
var s = parseInt(parts[1], 10);
|
||
|
|
var l = parseInt(parts[2], 10);
|
||
|
|
var a = parseInt(parts[3], 10) * 100;
|
||
|
|
var rgba = hsl2rgb(h, s, l);
|
||
|
|
rgba.a = a;
|
||
|
|
return rgba;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 203 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.COLOR_VALUES = {
|
||
|
|
aliceblue: [240, 248, 255],
|
||
|
|
antiquewhite: [250, 235, 215],
|
||
|
|
aqua: [0, 255, 255],
|
||
|
|
aquamarine: [127, 255, 212],
|
||
|
|
azure: [240, 255, 255],
|
||
|
|
beige: [245, 245, 220],
|
||
|
|
bisque: [255, 228, 196],
|
||
|
|
black: [0, 0, 0],
|
||
|
|
blanchedalmond: [255, 235, 205],
|
||
|
|
blue: [0, 0, 255],
|
||
|
|
blueviolet: [138, 43, 226],
|
||
|
|
brown: [165, 42, 42],
|
||
|
|
burlywood: [222, 184, 135],
|
||
|
|
cadetblue: [95, 158, 160],
|
||
|
|
chartreuse: [127, 255, 0],
|
||
|
|
chocolate: [210, 105, 30],
|
||
|
|
coral: [255, 127, 80],
|
||
|
|
cornflowerblue: [100, 149, 237],
|
||
|
|
cornsilk: [255, 248, 220],
|
||
|
|
crimson: [220, 20, 60],
|
||
|
|
cyan: [0, 255, 255],
|
||
|
|
darkblue: [0, 0, 139],
|
||
|
|
darkcyan: [0, 139, 139],
|
||
|
|
darkgoldenrod: [184, 132, 11],
|
||
|
|
darkgray: [169, 169, 169],
|
||
|
|
darkgreen: [0, 100, 0],
|
||
|
|
darkgrey: [169, 169, 169],
|
||
|
|
darkkhaki: [189, 183, 107],
|
||
|
|
darkmagenta: [139, 0, 139],
|
||
|
|
darkolivegreen: [85, 107, 47],
|
||
|
|
darkorange: [255, 140, 0],
|
||
|
|
darkorchid: [153, 50, 204],
|
||
|
|
darkred: [139, 0, 0],
|
||
|
|
darksalmon: [233, 150, 122],
|
||
|
|
darkseagreen: [143, 188, 143],
|
||
|
|
darkslateblue: [72, 61, 139],
|
||
|
|
darkslategray: [47, 79, 79],
|
||
|
|
darkslategrey: [47, 79, 79],
|
||
|
|
darkturquoise: [0, 206, 209],
|
||
|
|
darkviolet: [148, 0, 211],
|
||
|
|
deeppink: [255, 20, 147],
|
||
|
|
deepskyblue: [0, 191, 255],
|
||
|
|
dimgray: [105, 105, 105],
|
||
|
|
dimgrey: [105, 105, 105],
|
||
|
|
dodgerblue: [30, 144, 255],
|
||
|
|
firebrick: [178, 34, 34],
|
||
|
|
floralwhite: [255, 255, 240],
|
||
|
|
forestgreen: [34, 139, 34],
|
||
|
|
fuchsia: [255, 0, 255],
|
||
|
|
gainsboro: [220, 220, 220],
|
||
|
|
ghostwhite: [248, 248, 255],
|
||
|
|
gold: [255, 215, 0],
|
||
|
|
goldenrod: [218, 165, 32],
|
||
|
|
gray: [128, 128, 128],
|
||
|
|
green: [0, 128, 0],
|
||
|
|
greenyellow: [173, 255, 47],
|
||
|
|
grey: [128, 128, 128],
|
||
|
|
honeydew: [240, 255, 240],
|
||
|
|
hotpink: [255, 105, 180],
|
||
|
|
indianred: [205, 92, 92],
|
||
|
|
indigo: [75, 0, 130],
|
||
|
|
ivory: [255, 255, 240],
|
||
|
|
khaki: [240, 230, 140],
|
||
|
|
lavender: [230, 230, 250],
|
||
|
|
lavenderblush: [255, 240, 245],
|
||
|
|
lawngreen: [124, 252, 0],
|
||
|
|
lemonchiffon: [255, 250, 205],
|
||
|
|
lightblue: [173, 216, 230],
|
||
|
|
lightcoral: [240, 128, 128],
|
||
|
|
lightcyan: [224, 255, 255],
|
||
|
|
lightgoldenrodyellow: [250, 250, 210],
|
||
|
|
lightgray: [211, 211, 211],
|
||
|
|
lightgreen: [144, 238, 144],
|
||
|
|
lightgrey: [211, 211, 211],
|
||
|
|
lightpink: [255, 182, 193],
|
||
|
|
lightsalmon: [255, 160, 122],
|
||
|
|
lightseagreen: [32, 178, 170],
|
||
|
|
lightskyblue: [135, 206, 250],
|
||
|
|
lightslategray: [119, 136, 153],
|
||
|
|
lightslategrey: [119, 136, 153],
|
||
|
|
lightsteelblue: [176, 196, 222],
|
||
|
|
lightyellow: [255, 255, 224],
|
||
|
|
lime: [0, 255, 0],
|
||
|
|
limegreen: [50, 205, 50],
|
||
|
|
linen: [250, 240, 230],
|
||
|
|
magenta: [255, 0, 255],
|
||
|
|
maroon: [128, 0, 0],
|
||
|
|
mediumaquamarine: [102, 205, 170],
|
||
|
|
mediumblue: [0, 0, 205],
|
||
|
|
mediumorchid: [186, 85, 211],
|
||
|
|
mediumpurple: [147, 112, 219],
|
||
|
|
mediumseagreen: [60, 179, 113],
|
||
|
|
mediumslateblue: [123, 104, 238],
|
||
|
|
mediumspringgreen: [0, 250, 154],
|
||
|
|
mediumturquoise: [72, 209, 204],
|
||
|
|
mediumvioletred: [199, 21, 133],
|
||
|
|
midnightblue: [25, 25, 112],
|
||
|
|
mintcream: [245, 255, 250],
|
||
|
|
mistyrose: [255, 228, 225],
|
||
|
|
moccasin: [255, 228, 181],
|
||
|
|
navajowhite: [255, 222, 173],
|
||
|
|
navy: [0, 0, 128],
|
||
|
|
oldlace: [253, 245, 230],
|
||
|
|
olive: [128, 128, 0],
|
||
|
|
olivedrab: [107, 142, 35],
|
||
|
|
orange: [255, 165, 0],
|
||
|
|
orangered: [255, 69, 0],
|
||
|
|
orchid: [218, 112, 214],
|
||
|
|
palegoldenrod: [238, 232, 170],
|
||
|
|
palegreen: [152, 251, 152],
|
||
|
|
paleturquoise: [175, 238, 238],
|
||
|
|
palevioletred: [219, 112, 147],
|
||
|
|
papayawhip: [255, 239, 213],
|
||
|
|
peachpuff: [255, 218, 185],
|
||
|
|
peru: [205, 133, 63],
|
||
|
|
pink: [255, 192, 203],
|
||
|
|
plum: [221, 160, 203],
|
||
|
|
powderblue: [176, 224, 230],
|
||
|
|
purple: [128, 0, 128],
|
||
|
|
rebeccapurple: [102, 51, 153],
|
||
|
|
red: [255, 0, 0],
|
||
|
|
rosybrown: [188, 143, 143],
|
||
|
|
royalblue: [65, 105, 225],
|
||
|
|
saddlebrown: [139, 69, 19],
|
||
|
|
salmon: [250, 128, 114],
|
||
|
|
sandybrown: [244, 164, 96],
|
||
|
|
seagreen: [46, 139, 87],
|
||
|
|
seashell: [255, 245, 238],
|
||
|
|
sienna: [160, 82, 45],
|
||
|
|
silver: [192, 192, 192],
|
||
|
|
skyblue: [135, 206, 235],
|
||
|
|
slateblue: [106, 90, 205],
|
||
|
|
slategray: [119, 128, 144],
|
||
|
|
slategrey: [119, 128, 144],
|
||
|
|
snow: [255, 255, 250],
|
||
|
|
springgreen: [0, 255, 127],
|
||
|
|
steelblue: [70, 130, 180],
|
||
|
|
tan: [210, 180, 140],
|
||
|
|
teal: [0, 128, 128],
|
||
|
|
thistle: [216, 191, 216],
|
||
|
|
tomato: [255, 99, 71],
|
||
|
|
turquoise: [64, 224, 208],
|
||
|
|
violet: [238, 130, 238],
|
||
|
|
wheat: [245, 222, 179],
|
||
|
|
white: [255, 255, 255],
|
||
|
|
whitesmoke: [245, 245, 245],
|
||
|
|
yellow: [255, 255, 0],
|
||
|
|
yellowgreen: [154, 205, 5]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 204 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_d414ad46',
|
||
|
|
panel: 'panel_d414ad46',
|
||
|
|
colorRect: 'colorRect_d414ad46',
|
||
|
|
rectContainer: 'rectContainer_d414ad46',
|
||
|
|
capture: 'capture_d414ad46',
|
||
|
|
rectContainerIsAdjusting: 'rectContainerIsAdjusting_d414ad46',
|
||
|
|
thumb: 'thumb_d414ad46',
|
||
|
|
thumbIsSlider: 'thumbIsSlider_d414ad46',
|
||
|
|
light: 'light_d414ad46',
|
||
|
|
dark: 'dark_d414ad46',
|
||
|
|
slider: 'slider_d414ad46',
|
||
|
|
colorSliderIsHue: 'colorSliderIsHue_d414ad46',
|
||
|
|
colorSliderIsAlpha: 'colorSliderIsAlpha_d414ad46',
|
||
|
|
sliderOverlay: 'sliderOverlay_d414ad46',
|
||
|
|
input: 'input_d414ad46',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_d414ad46{position:relative;max-width:300px}.panel_d414ad46{padding:16px}.colorRect_d414ad46{position:relative;margin-bottom:10px}.rectContainer_d414ad46{position:relative}.capture_d414ad46{position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(255,0,0,.1)}.rectContainer_d414ad46.rectContainerIsAdjusting_d414ad46 .capture_d414ad46{position:fixed}.thumb_d414ad46{position:absolute;width:20px;height:20px;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 15px -5px #000;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.thumb_d414ad46.thumbIsSlider_d414ad46{top:50%}.light_d414ad46{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to right,#fff 0,transparent 100%)}.dark_d414ad46{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(to bottom,transparent 0,#000 100%)}.slider_d414ad46{position:relative;height:20px;margin-bottom:5px;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box}.slider_d414ad46.colorSliderIsHue_d414ad46{background:linear-gradient(to left,red 0,#f09 10%,#cd00ff 20%,#3200ff 30%,#06f 40%,#00fffd 50%,#0f6 60%,#35ff00 70%,#cdff00 80%,#f90 90%,red 100%)}.slider_d414ad46.colorSliderIsAlpha_d414ad46{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.sliderOverlay_d414ad46{content:'';position:absolute;left:0;right:0;top:0;bottom:0}.input_d414ad46{width:100%;border:none;box-sizing:border-box;height:30px}.input_d414ad46.ms-TextField{padding-right:2px}.input_d414ad46 .input_d414ad46.ms-TextField-field{min-width:auto;padding:5px}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 205 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(204);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var ColorSlider = (function (_super) {
|
||
|
|
__extends(ColorSlider, _super);
|
||
|
|
function ColorSlider(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
var value = _this.props.value;
|
||
|
|
_this.state = {
|
||
|
|
isAdjusting: false,
|
||
|
|
origin: null,
|
||
|
|
currentValue: value
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ColorSlider.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps && newProps.value) {
|
||
|
|
this.setState({ currentValue: newProps.value });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ColorSlider.prototype.render = function () {
|
||
|
|
var _a = this.props, className = _a.className, minValue = _a.minValue, maxValue = _a.maxValue, overlayStyle = _a.overlayStyle;
|
||
|
|
var _b = this.state, currentValue = _b.currentValue, isAdjusting = _b.isAdjusting;
|
||
|
|
var currentPercentage = 100 * (currentValue - minValue) / (maxValue - minValue);
|
||
|
|
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-ColorPicker-slider', styles.slider, className, {
|
||
|
|
'is-adjusting': isAdjusting
|
||
|
|
}), onMouseDown: this._onMouseDown },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-sliderOverlay', styles.sliderOverlay), style: overlayStyle }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-thumb is-slider', styles.thumb, styles.thumbIsSlider), style: { left: currentPercentage + '%' } })));
|
||
|
|
};
|
||
|
|
ColorSlider.prototype._onMouseDown = function (ev) {
|
||
|
|
this._events.on(window, 'mousemove', this._onMouseMove, true);
|
||
|
|
this._events.on(window, 'mouseup', this._onMouseUp, true);
|
||
|
|
this._onMouseMove(ev);
|
||
|
|
};
|
||
|
|
ColorSlider.prototype._onMouseMove = function (ev) {
|
||
|
|
var _a = this.props, onChanged = _a.onChanged, minValue = _a.minValue, maxValue = _a.maxValue;
|
||
|
|
var rectSize = this.refs.root.getBoundingClientRect();
|
||
|
|
var currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
|
||
|
|
var newValue = Math.min(maxValue, Math.max(minValue, currentPercentage * maxValue));
|
||
|
|
this.setState({
|
||
|
|
isAdjusting: true,
|
||
|
|
currentValue: newValue
|
||
|
|
});
|
||
|
|
if (onChanged) {
|
||
|
|
onChanged(newValue);
|
||
|
|
}
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
ColorSlider.prototype._onMouseUp = function (ev) {
|
||
|
|
this._events.off();
|
||
|
|
this.setState({
|
||
|
|
isAdjusting: false,
|
||
|
|
origin: null
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return ColorSlider;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
ColorSlider.defaultProps = {
|
||
|
|
minValue: 0,
|
||
|
|
maxValue: 100,
|
||
|
|
thumbColor: 'inherit',
|
||
|
|
value: 0
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorSlider.prototype, "_onMouseDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorSlider.prototype, "_onMouseMove", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], ColorSlider.prototype, "_onMouseUp", null);
|
||
|
|
exports.ColorSlider = ColorSlider;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 206 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(207));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 207 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(208));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 208 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var ContextualMenu_1 = __webpack_require__(54);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var stylesImport = __webpack_require__(209);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var OVERFLOW_KEY = 'overflow';
|
||
|
|
var OVERFLOW_WIDTH = 41.5;
|
||
|
|
var CommandBar = (function (_super) {
|
||
|
|
__extends(CommandBar, _super);
|
||
|
|
function CommandBar(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = _this._getStateFromProps(props);
|
||
|
|
_this._id = Utilities_1.getId('CommandBar');
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
CommandBar.prototype.componentDidMount = function () {
|
||
|
|
this._updateItemMeasurements();
|
||
|
|
this._updateRenderedItems();
|
||
|
|
this._events.on(window, 'resize', this._updateRenderedItems);
|
||
|
|
};
|
||
|
|
CommandBar.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
this.setState(this._getStateFromProps(nextProps));
|
||
|
|
this._commandItemWidths = null;
|
||
|
|
};
|
||
|
|
CommandBar.prototype.componentDidUpdate = function (prevProps, prevStates) {
|
||
|
|
if (!this._commandItemWidths) {
|
||
|
|
this._updateItemMeasurements();
|
||
|
|
this._updateRenderedItems();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CommandBar.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, isSearchBoxVisible = _a.isSearchBoxVisible, searchPlaceholderText = _a.searchPlaceholderText, className = _a.className;
|
||
|
|
var _b = this.state, renderedItems = _b.renderedItems, contextualMenuProps = _b.contextualMenuProps, expandedMenuItemKey = _b.expandedMenuItemKey, expandedMenuId = _b.expandedMenuId, renderedOverflowItems = _b.renderedOverflowItems, contextualMenuTarget = _b.contextualMenuTarget, renderedFarItems = _b.renderedFarItems;
|
||
|
|
var searchBox;
|
||
|
|
if (isSearchBoxVisible) {
|
||
|
|
searchBox = (React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch', styles.search), ref: 'searchSurface' },
|
||
|
|
React.createElement("input", { className: Utilities_1.css('ms-CommandBarSearch-input', styles.searchInput), type: 'text', placeholder: searchPlaceholderText }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper', styles.searchIconWrapper, styles.searchIconSearchWrapper) },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'search' })),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconClearWrapper', Styling_1.FontClassNames.small, styles.searchIconWrapper, styles.searchIconClearWrapper) },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'cancel' }))));
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-CommandBar', styles.root, className), ref: 'commandBarRegion' },
|
||
|
|
searchBox,
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal, role: 'menubar' },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-CommandBar-primaryCommands', styles.primaryCommands), ref: 'commandSurface' }, renderedItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey)); }).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
|
||
|
|
React.createElement("button", { type: 'button', id: this._id + OVERFLOW_KEY, className: Utilities_1.css('ms-CommandBarItem-link', styles.itemLink, (_c = {},
|
||
|
|
_c['is-expanded ' + styles.itemLinkIsExpanded] = (expandedMenuItemKey === OVERFLOW_KEY),
|
||
|
|
_c)), onClick: this._onOverflowClick, role: 'menuitem', "aria-label": this.props.elipisisAriaLabel || '', "aria-haspopup": true, "data-automation-id": 'commandBarOverflow' },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-CommandBarItem-overflow', styles.itemOverflow), iconName: 'more' })))
|
||
|
|
] : [])),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-CommandBar-sideCommands', styles.sideCommands), ref: 'farCommandSurface' }, renderedFarItems.map(function (item, index) { return (_this._renderItemInCommandBar(item, index, expandedMenuItemKey, true)); }))),
|
||
|
|
(contextualMenuProps) ?
|
||
|
|
(React.createElement(ContextualMenu_1.ContextualMenu, __assign({ className: Utilities_1.css('ms-CommandBar-menuHost'), isBeakVisible: true, directionalHint: DirectionalHint_1.DirectionalHint.bottomAutoEdge }, contextualMenuProps, { targetElement: contextualMenuTarget, labelElementId: expandedMenuId, onDismiss: this._onContextMenuDismiss }))) : (null)));
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
CommandBar.prototype.focus = function () {
|
||
|
|
this.refs.focusZone.focus();
|
||
|
|
};
|
||
|
|
CommandBar.prototype._renderItemInCommandBar = function (item, index, expandedMenuItemKey, isFarItem) {
|
||
|
|
var _this = this;
|
||
|
|
if (item.onRender) {
|
||
|
|
return React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item, item.className), key: item.key, ref: item.key }, item.onRender(item));
|
||
|
|
}
|
||
|
|
var itemKey = item.key || String(index);
|
||
|
|
var isLink = item.onClick || ContextualMenu_1.hasSubmenuItems(item);
|
||
|
|
var className = Utilities_1.css(isLink ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText), !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName), (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded));
|
||
|
|
var hasIcon = !!item.icon || !!item.iconProps;
|
||
|
|
return React.createElement("div", { className: Utilities_1.css('ms-CommandBarItem', styles.item, item.className), key: itemKey, ref: itemKey }, (function () {
|
||
|
|
if (isLink) {
|
||
|
|
return React.createElement("button", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.buttonProperties), { id: _this._id + item.key, className: className, onClick: function (ev) { return _this._onItemClick(ev, item); }, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }),
|
||
|
|
(hasIcon) ? _this._renderIcon(item) : (null),
|
||
|
|
(!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)),
|
||
|
|
ContextualMenu_1.hasSubmenuItems(item) ? (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-CommandBarItem-chevronDown', styles.itemChevronDown), iconName: 'chevronDown' })) : (null));
|
||
|
|
}
|
||
|
|
else if (item.href) {
|
||
|
|
return React.createElement("a", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.anchorProperties), { id: _this._id + item.key, className: className, href: item.href, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item), role: 'menuitem', "aria-label": item.ariaLabel || item.name }),
|
||
|
|
(hasIcon) ? _this._renderIcon(item) : (null),
|
||
|
|
(!!item.name) && (React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText) }, item.name)));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return React.createElement("div", __assign({}, Utilities_1.getNativeProps(item, Utilities_1.divProperties), { id: _this._id + item.key, className: className, "data-command-key": index, "aria-haspopup": ContextualMenu_1.hasSubmenuItems(item) }),
|
||
|
|
(hasIcon) ? _this._renderIcon(item) : (null),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-CommandBarItem-commandText', styles.itemCommandText), "aria-hidden": 'true', role: 'presentation' }, item.name));
|
||
|
|
}
|
||
|
|
})());
|
||
|
|
};
|
||
|
|
CommandBar.prototype._renderIcon = function (item) {
|
||
|
|
// Only present to allow continued use of item.icon which is deprecated.
|
||
|
|
var iconProps = item.iconProps ? item.iconProps : {
|
||
|
|
iconName: item.icon
|
||
|
|
};
|
||
|
|
// Use the default icon color for the known icon names
|
||
|
|
var iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
|
||
|
|
var iconClassName = Utilities_1.css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
|
||
|
|
return React.createElement(Icon_1.Icon, __assign({}, iconProps, { className: iconClassName }));
|
||
|
|
};
|
||
|
|
CommandBar.prototype._updateItemMeasurements = function () {
|
||
|
|
// the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5
|
||
|
|
if (this.refs[OVERFLOW_KEY] || (this.props.overflowItems && this.props.overflowItems.length)) {
|
||
|
|
this._overflowWidth = OVERFLOW_WIDTH;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._overflowWidth = 0;
|
||
|
|
}
|
||
|
|
if (!this._commandItemWidths) {
|
||
|
|
this._commandItemWidths = {};
|
||
|
|
}
|
||
|
|
for (var i = 0; i < this.props.items.length; i++) {
|
||
|
|
var item = this.props.items[i];
|
||
|
|
if (!this._commandItemWidths[item.key]) {
|
||
|
|
var el = this.refs[item.key];
|
||
|
|
if (el) {
|
||
|
|
this._commandItemWidths[item.key] = el.getBoundingClientRect().width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CommandBar.prototype._updateRenderedItems = function () {
|
||
|
|
var _a = this.props, items = _a.items, overflowItems = _a.overflowItems;
|
||
|
|
var commandSurface = this.refs.commandSurface;
|
||
|
|
var farCommandSurface = this.refs.farCommandSurface;
|
||
|
|
var commandBarRegion = this.refs.commandBarRegion;
|
||
|
|
var searchSurface = this.refs.searchSurface;
|
||
|
|
var renderedItems = [].concat(items);
|
||
|
|
var renderedOverflowItems = overflowItems;
|
||
|
|
var consumedWidth = 0;
|
||
|
|
var isOverflowVisible = overflowItems && overflowItems.length;
|
||
|
|
var style = window.getComputedStyle(commandSurface);
|
||
|
|
var availableWidth = commandBarRegion.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
|
||
|
|
if (searchSurface) {
|
||
|
|
availableWidth -= searchSurface.getBoundingClientRect().width;
|
||
|
|
}
|
||
|
|
if (farCommandSurface) {
|
||
|
|
availableWidth -= farCommandSurface.getBoundingClientRect().width;
|
||
|
|
}
|
||
|
|
if (isOverflowVisible) {
|
||
|
|
availableWidth -= this._overflowWidth;
|
||
|
|
}
|
||
|
|
for (var i = 0; i < renderedItems.length; i++) {
|
||
|
|
var item = renderedItems[i];
|
||
|
|
var itemWidth = this._commandItemWidths[item.key];
|
||
|
|
if ((consumedWidth + itemWidth) >= availableWidth) {
|
||
|
|
if (i > 0 && !isOverflowVisible && (availableWidth - consumedWidth) < OVERFLOW_WIDTH) {
|
||
|
|
i--;
|
||
|
|
}
|
||
|
|
renderedOverflowItems = renderedItems.splice(i).concat(overflowItems);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
consumedWidth += itemWidth;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var renderedContextualMenuProps = this._getContextualMenuPropsAfterUpdate(renderedItems.concat(this.state.renderedFarItems), renderedOverflowItems);
|
||
|
|
this.setState({
|
||
|
|
renderedItems: renderedItems,
|
||
|
|
renderedOverflowItems: renderedOverflowItems,
|
||
|
|
expandedMenuItemKey: renderedContextualMenuProps ? this.state.expandedMenuItemKey : null,
|
||
|
|
contextualMenuProps: renderedContextualMenuProps,
|
||
|
|
contextualMenuTarget: renderedContextualMenuProps ? this.state.contextualMenuTarget : null
|
||
|
|
});
|
||
|
|
};
|
||
|
|
CommandBar.prototype._onItemClick = function (ev, item) {
|
||
|
|
if (item.key === this.state.expandedMenuItemKey || !ContextualMenu_1.hasSubmenuItems(item)) {
|
||
|
|
this._onContextMenuDismiss();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setState({
|
||
|
|
expandedMenuId: ev.currentTarget.id,
|
||
|
|
expandedMenuItemKey: item.key,
|
||
|
|
contextualMenuProps: this._getContextualMenuPropsFromItem(item),
|
||
|
|
contextualMenuTarget: ev.currentTarget
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (item.onClick) {
|
||
|
|
item.onClick(ev, item);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CommandBar.prototype._onOverflowClick = function (ev) {
|
||
|
|
if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
|
||
|
|
this._onContextMenuDismiss();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setState({
|
||
|
|
expandedMenuId: ev.currentTarget.id,
|
||
|
|
expandedMenuItemKey: OVERFLOW_KEY,
|
||
|
|
contextualMenuProps: { items: this.state.renderedOverflowItems },
|
||
|
|
contextualMenuTarget: ev.currentTarget
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CommandBar.prototype._onContextMenuDismiss = function (ev) {
|
||
|
|
if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget)) {
|
||
|
|
var contextualMenuProps = this.state.contextualMenuProps;
|
||
|
|
if (contextualMenuProps && contextualMenuProps.onDismiss) {
|
||
|
|
this.state.contextualMenuProps.onDismiss(ev);
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
expandedMenuItemKey: null,
|
||
|
|
contextualMenuProps: null,
|
||
|
|
contextualMenuTarget: null
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
CommandBar.prototype._getStateFromProps = function (nextProps) {
|
||
|
|
return {
|
||
|
|
renderedItems: nextProps.items || [],
|
||
|
|
renderedOverflowItems: null,
|
||
|
|
contextualMenuProps: this._getContextualMenuPropsAfterUpdate(nextProps.items.concat(nextProps.farItems), nextProps.overflowItems),
|
||
|
|
renderedFarItems: nextProps.farItems || null
|
||
|
|
};
|
||
|
|
};
|
||
|
|
CommandBar.prototype._getContextualMenuPropsAfterUpdate = function (renderedItems, overflowItems) {
|
||
|
|
var _this = this;
|
||
|
|
if (this.state && this.state.expandedMenuItemKey) {
|
||
|
|
if (this.state.expandedMenuItemKey === OVERFLOW_KEY) {
|
||
|
|
// Keep the overflow menu open
|
||
|
|
return { items: overflowItems };
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Find the currently open key in the new props
|
||
|
|
var matchingItem = renderedItems.filter(function (item) { return item.key === _this.state.expandedMenuItemKey; });
|
||
|
|
if (matchingItem.length === 1) {
|
||
|
|
return this._getContextualMenuPropsFromItem(matchingItem[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
CommandBar.prototype._getContextualMenuPropsFromItem = function (item) {
|
||
|
|
return item.subMenuProps || (item.items && { items: item.items });
|
||
|
|
};
|
||
|
|
return CommandBar;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
CommandBar.defaultProps = {
|
||
|
|
items: [],
|
||
|
|
overflowItems: [],
|
||
|
|
farItems: []
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], CommandBar.prototype, "_onOverflowClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], CommandBar.prototype, "_onContextMenuDismiss", null);
|
||
|
|
exports.CommandBar = CommandBar;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 209 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_0456bec6',
|
||
|
|
primaryCommands: 'primaryCommands_0456bec6',
|
||
|
|
sideCommands: 'sideCommands_0456bec6',
|
||
|
|
item: 'item_0456bec6',
|
||
|
|
itemChevronDown: 'itemChevronDown_0456bec6',
|
||
|
|
itemCommandText: 'itemCommandText_0456bec6',
|
||
|
|
itemText: 'itemText_0456bec6',
|
||
|
|
itemLinkIsNoName: 'itemLinkIsNoName_0456bec6',
|
||
|
|
itemLink: 'itemLink_0456bec6',
|
||
|
|
itemLinkIsExpanded: 'itemLinkIsExpanded_0456bec6',
|
||
|
|
itemIcon: 'itemIcon_0456bec6',
|
||
|
|
itemOverflow: 'itemOverflow_0456bec6',
|
||
|
|
itemIconColor: 'itemIconColor_0456bec6',
|
||
|
|
search: 'search_0456bec6',
|
||
|
|
searchInput: 'searchInput_0456bec6',
|
||
|
|
searchIconSearchWrapper: 'searchIconSearchWrapper_0456bec6',
|
||
|
|
searchIconArrowWrapper: 'searchIconArrowWrapper_0456bec6',
|
||
|
|
searchIconClearWrapper: 'searchIconClearWrapper_0456bec6',
|
||
|
|
searchIconWrapper: 'searchIconWrapper_0456bec6',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_0456bec6{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";height:40px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.primaryCommands_0456bec6{position:absolute;overflow:hidden;display:inline;vertical-align:top;line-height:40px;max-width:100%;margin:0 20px}.sideCommands_0456bec6{position:absolute}[dir=ltr] .sideCommands_0456bec6{right:0}[dir=rtl] .sideCommands_0456bec6{left:0}html[dir=ltr] .sideCommands_0456bec6{text-align:right}html[dir=rtl] .sideCommands_0456bec6{text-align:left}html[dir=ltr] .sideCommands_0456bec6{padding-right:20px}html[dir=rtl] .sideCommands_0456bec6{padding-left:20px}.item_0456bec6{display:inline-block;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:40px;outline:transparent;vertical-align:top;margin:0 4px}.item_0456bec6:hover{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.itemChevronDown_0456bec6,.itemCommandText_0456bec6{display:inline-block;padding:0 4px;vertical-align:top}.itemText_0456bec6{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%}.itemText_0456bec6::-moz-focus-inner{border:0}.itemText_0456bec6{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemText_0456bec6:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemText_0456bec6.itemLinkIsNoName_0456bec6{padding:0 8px}.itemLink_0456bec6{font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";position:relative;background:0 0;border:none;line-height:40px;min-width:20px;text-align:center;padding:0 4px;display:block;height:100%;cursor:pointer}.itemLink_0456bec6::-moz-focus-inner{border:0}.itemLink_0456bec6{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemLink_0456bec6:focus:after{content:'';position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemLink_0456bec6.itemLinkIsNoName_0456bec6{padding:0 8px}@media screen and (-ms-high-contrast:active){.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::-moz-focus-inner,.itemLink_0456bec6:hover::-moz-focus-inner{border:0}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6,.itemLink_0456bec6:hover{outline:transparent;position:relative}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::after,.itemLink_0456bec6:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::-moz-focus-inner,.itemLink_0456bec6:hover::-moz-focus-inner{border:0}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6,.itemLink_0456bec6:hover{outline:transparent;position:relative}.itemLink_0456bec6.itemLinkIsExpanded_0456bec6::after,.itemLink_0456bec6:hover::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.itemLink_0456bec6:hover:not([disabled]){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.itemLink_0456bec6:hover:not([disabled]) .itemIcon_0456bec6{co
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 210 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(211));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 211 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(212));
|
||
|
|
__export(__webpack_require__(179));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 212 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Calendar_1 = __webpack_require__(171);
|
||
|
|
var Callout_1 = __webpack_require__(59);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var TextField_1 = __webpack_require__(197);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DateMath_1 = __webpack_require__(176);
|
||
|
|
var stylesImport = __webpack_require__(213);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DEFAULT_STRINGS = {
|
||
|
|
months: [
|
||
|
|
'January',
|
||
|
|
'February',
|
||
|
|
'March',
|
||
|
|
'April',
|
||
|
|
'May',
|
||
|
|
'June',
|
||
|
|
'July',
|
||
|
|
'August',
|
||
|
|
'September',
|
||
|
|
'October',
|
||
|
|
'November',
|
||
|
|
'December'
|
||
|
|
],
|
||
|
|
shortMonths: [
|
||
|
|
'Jan',
|
||
|
|
'Feb',
|
||
|
|
'Mar',
|
||
|
|
'Apr',
|
||
|
|
'May',
|
||
|
|
'Jun',
|
||
|
|
'Jul',
|
||
|
|
'Aug',
|
||
|
|
'Sep',
|
||
|
|
'Oct',
|
||
|
|
'Nov',
|
||
|
|
'Dec'
|
||
|
|
],
|
||
|
|
days: [
|
||
|
|
'Sunday',
|
||
|
|
'Monday',
|
||
|
|
'Tuesday',
|
||
|
|
'Wednesday',
|
||
|
|
'Thursday',
|
||
|
|
'Friday',
|
||
|
|
'Saturday'
|
||
|
|
],
|
||
|
|
shortDays: [
|
||
|
|
'S',
|
||
|
|
'M',
|
||
|
|
'T',
|
||
|
|
'W',
|
||
|
|
'T',
|
||
|
|
'F',
|
||
|
|
'S'
|
||
|
|
],
|
||
|
|
goToToday: 'Go to today',
|
||
|
|
prevMonthAriaLabel: 'Go to previous month',
|
||
|
|
nextMonthAriaLabel: 'Go to next month',
|
||
|
|
prevYearAriaLabel: 'Go to previous year',
|
||
|
|
nextYearAriaLabel: 'Go to next year'
|
||
|
|
};
|
||
|
|
var DatePicker = (function (_super) {
|
||
|
|
__extends(DatePicker, _super);
|
||
|
|
function DatePicker(props) {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
var formatDate = props.formatDate, value = props.value;
|
||
|
|
_this.state = {
|
||
|
|
selectedDate: value || new Date(),
|
||
|
|
formattedDate: (formatDate && value) ? formatDate(value) : '',
|
||
|
|
isDatePickerShown: false,
|
||
|
|
errorMessage: null
|
||
|
|
};
|
||
|
|
_this._preventFocusOpeningPicker = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DatePicker.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
var formatDate = nextProps.formatDate, isRequired = nextProps.isRequired, strings = nextProps.strings, value = nextProps.value;
|
||
|
|
var errorMessage = (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null;
|
||
|
|
// Set error message
|
||
|
|
this.setState({
|
||
|
|
errorMessage: errorMessage
|
||
|
|
});
|
||
|
|
// Issue# 1274: Check if the date value changed from old props value, i.e., if indeed a new date is being
|
||
|
|
// passed in or if the formatting function was modified. We only update the selected date if either of these
|
||
|
|
// had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this
|
||
|
|
// is the result of the onSelectDate callback, but this should be a rare scenario.
|
||
|
|
var oldValue = this.props.value;
|
||
|
|
if (!DateMath_1.compareDates(oldValue, value) || this.props.formatDate !== formatDate) {
|
||
|
|
this.setState({
|
||
|
|
selectedDate: value || new Date(),
|
||
|
|
formattedDate: (formatDate && value) ? formatDate(value) : '',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, firstDayOfWeek = _a.firstDayOfWeek, strings = _a.strings, label = _a.label, isRequired = _a.isRequired, disabled = _a.disabled, ariaLabel = _a.ariaLabel, pickerAriaLabel = _a.pickerAriaLabel, placeholder = _a.placeholder, allowTextInput = _a.allowTextInput, borderless = _a.borderless, className = _a.className;
|
||
|
|
var _b = this.state, isDatePickerShown = _b.isDatePickerShown, formattedDate = _b.formattedDate, selectedDate = _b.selectedDate, errorMessage = _b.errorMessage;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DatePicker', styles.root, className), ref: 'root' },
|
||
|
|
React.createElement("div", { ref: function (c) { return _this._datepicker = c; } },
|
||
|
|
React.createElement(TextField_1.TextField, { className: styles.textField, ariaLabel: ariaLabel, "aria-haspopup": 'true', "aria-expanded": isDatePickerShown, required: isRequired, disabled: disabled, onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChanged: this._onTextFieldChanged, errorMessage: errorMessage, label: label, placeholder: placeholder, borderless: borderless, iconProps: {
|
||
|
|
iconName: 'calendar',
|
||
|
|
className: Utilities_1.css(label ? 'ms-DatePicker-event--with-label' : 'ms-DatePicker-event--without-label', label ? styles.eventWithLabel : styles.eventWithoutLabel)
|
||
|
|
}, readOnly: !allowTextInput, value: formattedDate, ref: 'textField' })),
|
||
|
|
isDatePickerShown && (React.createElement(Callout_1.Callout, { role: 'dialog', ariaLabel: pickerAriaLabel, isBeakVisible: false, className: Utilities_1.css('ms-DatePicker-callout'), gapSpace: 0, doNotLayer: false, targetElement: this._datepicker, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned },
|
||
|
|
React.createElement(Calendar_1.Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, value: selectedDate, firstDayOfWeek: firstDayOfWeek, strings: strings, ref: this._resolveRef('_calendar') })))));
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onSelectDate = function (date) {
|
||
|
|
var _a = this.props, formatDate = _a.formatDate, onSelectDate = _a.onSelectDate;
|
||
|
|
this.setState({
|
||
|
|
selectedDate: date,
|
||
|
|
isDatePickerShown: false,
|
||
|
|
formattedDate: formatDate && date ? formatDate(date) : '',
|
||
|
|
});
|
||
|
|
if (onSelectDate) {
|
||
|
|
onSelectDate(date);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onCalloutPositioned = function () {
|
||
|
|
this._calendar.focus();
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onTextFieldFocus = function (ev) {
|
||
|
|
if (this.props.disableAutoFocus) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!this.props.allowTextInput) {
|
||
|
|
if (!this._preventFocusOpeningPicker) {
|
||
|
|
this._showDatePickerPopup();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._preventFocusOpeningPicker = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onTextFieldBlur = function (ev) {
|
||
|
|
this._validateTextInput();
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onTextFieldChanged = function (newValue) {
|
||
|
|
if (this.props.allowTextInput) {
|
||
|
|
if (this.state.isDatePickerShown) {
|
||
|
|
this._dismissDatePickerPopup();
|
||
|
|
}
|
||
|
|
var _a = this.props, isRequired = _a.isRequired, value = _a.value, strings = _a.strings;
|
||
|
|
this.setState({
|
||
|
|
errorMessage: (isRequired && !value) ? (strings.isRequiredErrorMessage || '*') : null,
|
||
|
|
formattedDate: newValue
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onTextFieldKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.enter:
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
if (!this.state.isDatePickerShown) {
|
||
|
|
this._showDatePickerPopup();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// When DatePicker allows input date string directly,
|
||
|
|
// it is expected to hit another enter to close the popup
|
||
|
|
if (this.props.allowTextInput) {
|
||
|
|
this._dismissDatePickerPopup();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
this._handleEscKey(ev);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._onTextFieldClick = function (ev) {
|
||
|
|
if (!this.state.isDatePickerShown) {
|
||
|
|
this._showDatePickerPopup();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.props.allowTextInput) {
|
||
|
|
this.setState({
|
||
|
|
isDatePickerShown: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._showDatePickerPopup = function () {
|
||
|
|
if (!this.state.isDatePickerShown) {
|
||
|
|
this._preventFocusOpeningPicker = true;
|
||
|
|
this._focusOnSelectedDateOnUpdate = true;
|
||
|
|
this.setState({
|
||
|
|
isDatePickerShown: true,
|
||
|
|
navigatedDate: this.state.selectedDate,
|
||
|
|
errorMessage: ''
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._dismissDatePickerPopup = function () {
|
||
|
|
if (this.state.isDatePickerShown) {
|
||
|
|
this.setState({
|
||
|
|
isDatePickerShown: false
|
||
|
|
});
|
||
|
|
this._validateTextInput();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Callback for closing the calendar callout
|
||
|
|
*/
|
||
|
|
DatePicker.prototype._calendarDismissed = function () {
|
||
|
|
this._preventFocusOpeningPicker = true;
|
||
|
|
this._dismissDatePickerPopup();
|
||
|
|
if (this.refs.textField) {
|
||
|
|
this.refs.textField.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DatePicker.prototype._handleEscKey = function (ev) {
|
||
|
|
this._calendarDismissed();
|
||
|
|
};
|
||
|
|
DatePicker.prototype._validateTextInput = function () {
|
||
|
|
var _a = this.props, isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, formatDate = _a.formatDate, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate;
|
||
|
|
var inputValue = this.state.formattedDate;
|
||
|
|
// Do validation only if DatePicker's popup is dismissed
|
||
|
|
if (this.state.isDatePickerShown) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// Check when DatePicker is a required field but has NO input value
|
||
|
|
if (isRequired && !inputValue) {
|
||
|
|
this.setState({
|
||
|
|
// Since fabic react doesn't have loc support yet
|
||
|
|
// use the symbol '*' to represent error message
|
||
|
|
errorMessage: strings.isRequiredErrorMessage || '*'
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (allowTextInput) {
|
||
|
|
var date = null;
|
||
|
|
if (inputValue) {
|
||
|
|
date = parseDateFromString(inputValue);
|
||
|
|
if (!date) {
|
||
|
|
this.setState({
|
||
|
|
errorMessage: strings.invalidInputErrorMessage || '*'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setState({
|
||
|
|
selectedDate: date,
|
||
|
|
errorMessage: ''
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// No input date string shouldn't be an error if field is not required
|
||
|
|
this.setState({
|
||
|
|
errorMessage: ''
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// Execute onSelectDate callback
|
||
|
|
if (onSelectDate) {
|
||
|
|
// If no input date string or input date string is invalid
|
||
|
|
// date variable will be null, callback should expect null value for this case
|
||
|
|
onSelectDate(date);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return DatePicker;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
DatePicker.defaultProps = {
|
||
|
|
allowTextInput: false,
|
||
|
|
formatDate: function (date) {
|
||
|
|
if (date) {
|
||
|
|
return date.toDateString();
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
},
|
||
|
|
parseDateFromString: function (dateStr) {
|
||
|
|
var date = Date.parse(dateStr);
|
||
|
|
if (date) {
|
||
|
|
return new Date(date);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
firstDayOfWeek: Calendar_1.DayOfWeek.Sunday,
|
||
|
|
isRequired: false,
|
||
|
|
isMonthPickerVisible: true,
|
||
|
|
strings: DEFAULT_STRINGS,
|
||
|
|
borderless: false,
|
||
|
|
pickerAriaLabel: 'Calender',
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onSelectDate", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onCalloutPositioned", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onTextFieldFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onTextFieldBlur", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onTextFieldChanged", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onTextFieldKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_onTextFieldClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_dismissDatePickerPopup", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_calendarDismissed", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_handleEscKey", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DatePicker.prototype, "_validateTextInput", null);
|
||
|
|
exports.DatePicker = DatePicker;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 213 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_13226a93',
|
||
|
|
textField: 'textField_13226a93',
|
||
|
|
eventWithLabel: 'eventWithLabel_13226a93',
|
||
|
|
eventWithoutLabel: 'eventWithoutLabel_13226a93',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_13226a93{box-sizing:border-box;box-shadow:none;margin:0;padding:0;margin-bottom:17px}.textField_13226a93{position:relative}.textField_13226a93 input::-ms-clear{display:none}.textField_13226a93 input[readonly]{cursor:pointer}.eventWithLabel_13226a93{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;bottom:5px}[dir=ltr] .eventWithLabel_13226a93{right:9px}[dir=rtl] .eventWithLabel_13226a93{left:9px}.eventWithoutLabel_13226a93{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px;line-height:20px;pointer-events:none;position:absolute;top:7px}[dir=ltr] .eventWithoutLabel_13226a93{right:9px}[dir=rtl] .eventWithoutLabel_13226a93{left:9px}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 214 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(215));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 215 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(216));
|
||
|
|
__export(__webpack_require__(221));
|
||
|
|
__export(__webpack_require__(222));
|
||
|
|
__export(__webpack_require__(231));
|
||
|
|
__export(__webpack_require__(232));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 216 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(217));
|
||
|
|
__export(__webpack_require__(218));
|
||
|
|
__export(__webpack_require__(219));
|
||
|
|
__export(__webpack_require__(220));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 217 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.SELECTION_CHANGE = 'change';
|
||
|
|
var SelectionMode;
|
||
|
|
(function (SelectionMode) {
|
||
|
|
SelectionMode[SelectionMode["none"] = 0] = "none";
|
||
|
|
SelectionMode[SelectionMode["single"] = 1] = "single";
|
||
|
|
SelectionMode[SelectionMode["multiple"] = 2] = "multiple";
|
||
|
|
})(SelectionMode = exports.SelectionMode || (exports.SelectionMode = {}));
|
||
|
|
var SelectionDirection;
|
||
|
|
(function (SelectionDirection) {
|
||
|
|
SelectionDirection[SelectionDirection["horizontal"] = 0] = "horizontal";
|
||
|
|
SelectionDirection[SelectionDirection["vertical"] = 1] = "vertical";
|
||
|
|
})(SelectionDirection = exports.SelectionDirection || (exports.SelectionDirection = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 218 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var interfaces_1 = __webpack_require__(217);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Selection = (function () {
|
||
|
|
function Selection(options) {
|
||
|
|
if (options === void 0) { options = {}; }
|
||
|
|
var onSelectionChanged = options.onSelectionChanged, getKey = options.getKey, _a = options.canSelectItem, canSelectItem = _a === void 0 ? function (item) { return true; } : _a;
|
||
|
|
this.getKey = getKey || (function (item, index) { return (item ? item.key : String(index)); });
|
||
|
|
this._changeEventSuppressionCount = 0;
|
||
|
|
this._exemptedCount = 0;
|
||
|
|
this._anchoredIndex = 0;
|
||
|
|
this._unselectableCount = 0;
|
||
|
|
this.setItems([], true);
|
||
|
|
this._onSelectionChanged = onSelectionChanged;
|
||
|
|
this.canSelectItem = canSelectItem;
|
||
|
|
}
|
||
|
|
Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {
|
||
|
|
this._changeEventSuppressionCount += isEnabled ? -1 : 1;
|
||
|
|
if (this._changeEventSuppressionCount === 0 && this._hasChanged) {
|
||
|
|
this._hasChanged = false;
|
||
|
|
if (!suppressChange) {
|
||
|
|
this._change();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Selection needs the items, call this method to set them. If the set
|
||
|
|
* of items is the same, this will re-evaluate selection and index maps.
|
||
|
|
* Otherwise, shouldClear should be set to true, so that selection is
|
||
|
|
* cleared.
|
||
|
|
*/
|
||
|
|
Selection.prototype.setItems = function (items, shouldClear) {
|
||
|
|
if (shouldClear === void 0) { shouldClear = true; }
|
||
|
|
var newKeyToIndexMap = {};
|
||
|
|
var newUnselectableIndices = {};
|
||
|
|
var hasSelectionChanged = false;
|
||
|
|
this.setChangeEvents(false);
|
||
|
|
// Reset the unselectable count.
|
||
|
|
this._unselectableCount = 0;
|
||
|
|
// Build lookup table for quick selection evaluation.
|
||
|
|
for (var i = 0; i < items.length; i++) {
|
||
|
|
var item = items[i];
|
||
|
|
if (item) {
|
||
|
|
newKeyToIndexMap[this.getKey(item, i)] = i;
|
||
|
|
}
|
||
|
|
newUnselectableIndices[i] = item && !this.canSelectItem(item);
|
||
|
|
if (newUnselectableIndices[i]) {
|
||
|
|
this._unselectableCount++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (shouldClear) {
|
||
|
|
this.setAllSelected(false);
|
||
|
|
}
|
||
|
|
// Check the exemption list for discrepencies.
|
||
|
|
var newExemptedIndicies = {};
|
||
|
|
for (var indexProperty in this._exemptedIndices) {
|
||
|
|
if (this._exemptedIndices.hasOwnProperty(indexProperty)) {
|
||
|
|
var index = Number(indexProperty);
|
||
|
|
var item = this._items[index];
|
||
|
|
var exemptKey = item ? this.getKey(item, Number(index)) : undefined;
|
||
|
|
var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;
|
||
|
|
if (newIndex === undefined) {
|
||
|
|
// We don't know the index of the item any more so it's either moved or removed.
|
||
|
|
// In this case we reset the entire selection.
|
||
|
|
this.setAllSelected(false);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// We know the new index of the item. update the existing exemption table.
|
||
|
|
newExemptedIndicies[newIndex] = true;
|
||
|
|
hasSelectionChanged = hasSelectionChanged || (newIndex !== index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._exemptedIndices = newExemptedIndicies;
|
||
|
|
this._keyToIndexMap = newKeyToIndexMap;
|
||
|
|
this._unselectableIndices = newUnselectableIndices;
|
||
|
|
this._items = items || [];
|
||
|
|
if (hasSelectionChanged) {
|
||
|
|
this._change();
|
||
|
|
}
|
||
|
|
this.setChangeEvents(true);
|
||
|
|
};
|
||
|
|
Selection.prototype.getItems = function () {
|
||
|
|
return this._items;
|
||
|
|
};
|
||
|
|
Selection.prototype.getSelection = function () {
|
||
|
|
if (!this._selectedItems) {
|
||
|
|
this._selectedItems = [];
|
||
|
|
for (var i = 0; i < this._items.length; i++) {
|
||
|
|
if (this.isIndexSelected(i)) {
|
||
|
|
this._selectedItems.push(this._items[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return this._selectedItems;
|
||
|
|
};
|
||
|
|
Selection.prototype.getSelectedCount = function () {
|
||
|
|
return this._isAllSelected ? (this._items.length - this._exemptedCount - this._unselectableCount) : (this._exemptedCount);
|
||
|
|
};
|
||
|
|
Selection.prototype.isRangeSelected = function (fromIndex, count) {
|
||
|
|
var endIndex = fromIndex + count;
|
||
|
|
for (var i = fromIndex; i < endIndex; i++) {
|
||
|
|
if (!this.isIndexSelected(i)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
Selection.prototype.isAllSelected = function () {
|
||
|
|
var selectableCount = this._items.length - this._unselectableCount;
|
||
|
|
return ((this.count > 0) &&
|
||
|
|
(this._isAllSelected && this._exemptedCount === 0) ||
|
||
|
|
(!this._isAllSelected && (this._exemptedCount === selectableCount) && selectableCount > 0));
|
||
|
|
};
|
||
|
|
Selection.prototype.isKeySelected = function (key) {
|
||
|
|
var index = this._keyToIndexMap[key];
|
||
|
|
return this.isIndexSelected(index);
|
||
|
|
};
|
||
|
|
Selection.prototype.isIndexSelected = function (index) {
|
||
|
|
return !!((this.count > 0) &&
|
||
|
|
(this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||
|
||
|
|
(!this._isAllSelected && this._exemptedIndices[index]));
|
||
|
|
};
|
||
|
|
Selection.prototype.setAllSelected = function (isAllSelected) {
|
||
|
|
var selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0;
|
||
|
|
if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {
|
||
|
|
this._exemptedIndices = {};
|
||
|
|
this._exemptedCount = 0;
|
||
|
|
this._isAllSelected = isAllSelected;
|
||
|
|
this._updateCount();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {
|
||
|
|
var index = this._keyToIndexMap[key];
|
||
|
|
if (index >= 0) {
|
||
|
|
this.setIndexSelected(index, isSelected, shouldAnchor);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {
|
||
|
|
// Clamp the index.
|
||
|
|
index = Math.min(Math.max(0, index), this._items.length - 1);
|
||
|
|
// No-op on out of bounds selections.
|
||
|
|
if (index < 0 || index >= this._items.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var isExempt = this._exemptedIndices[index];
|
||
|
|
var hasChanged = false;
|
||
|
|
var canSelect = !this._unselectableIndices[index];
|
||
|
|
if (canSelect) {
|
||
|
|
// Determine if we need to remove the exemption.
|
||
|
|
if (isExempt && ((isSelected && this._isAllSelected) ||
|
||
|
|
(!isSelected && !this._isAllSelected))) {
|
||
|
|
hasChanged = true;
|
||
|
|
delete this._exemptedIndices[index];
|
||
|
|
this._exemptedCount--;
|
||
|
|
}
|
||
|
|
// Determine if we need to add the exemption.
|
||
|
|
if (!isExempt && ((isSelected && !this._isAllSelected) ||
|
||
|
|
(!isSelected && this._isAllSelected))) {
|
||
|
|
hasChanged = true;
|
||
|
|
this._exemptedIndices[index] = true;
|
||
|
|
this._exemptedCount++;
|
||
|
|
}
|
||
|
|
if (shouldAnchor) {
|
||
|
|
this._anchoredIndex = index;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (hasChanged) {
|
||
|
|
this._updateCount();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Selection.prototype.selectToKey = function (key, clearSelection) {
|
||
|
|
this.selectToIndex(this._keyToIndexMap[key], clearSelection);
|
||
|
|
};
|
||
|
|
Selection.prototype.selectToIndex = function (index, clearSelection) {
|
||
|
|
var anchorIndex = this._anchoredIndex || 0;
|
||
|
|
var startIndex = Math.min(index, anchorIndex);
|
||
|
|
var endIndex = Math.max(index, anchorIndex);
|
||
|
|
this.setChangeEvents(false);
|
||
|
|
if (clearSelection) {
|
||
|
|
this.setAllSelected(false);
|
||
|
|
}
|
||
|
|
for (; startIndex <= endIndex; startIndex++) {
|
||
|
|
this.setIndexSelected(startIndex, true, false);
|
||
|
|
}
|
||
|
|
this.setChangeEvents(true);
|
||
|
|
};
|
||
|
|
Selection.prototype.toggleAllSelected = function () {
|
||
|
|
this.setAllSelected(!this.isAllSelected());
|
||
|
|
};
|
||
|
|
Selection.prototype.toggleKeySelected = function (key) {
|
||
|
|
this.setKeySelected(key, !this.isKeySelected(key), true);
|
||
|
|
};
|
||
|
|
Selection.prototype.toggleIndexSelected = function (index) {
|
||
|
|
this.setIndexSelected(index, !this.isIndexSelected(index), true);
|
||
|
|
};
|
||
|
|
Selection.prototype.toggleRangeSelected = function (fromIndex, count) {
|
||
|
|
var isRangeSelected = this.isRangeSelected(fromIndex, count);
|
||
|
|
var endIndex = fromIndex + count;
|
||
|
|
this.setChangeEvents(false);
|
||
|
|
for (var i = fromIndex; i < endIndex; i++) {
|
||
|
|
this.setIndexSelected(i, !isRangeSelected, false);
|
||
|
|
}
|
||
|
|
this.setChangeEvents(true);
|
||
|
|
};
|
||
|
|
Selection.prototype._updateCount = function () {
|
||
|
|
this.count = this.getSelectedCount();
|
||
|
|
this._change();
|
||
|
|
};
|
||
|
|
Selection.prototype._change = function () {
|
||
|
|
if (this._changeEventSuppressionCount === 0) {
|
||
|
|
this._selectedItems = null;
|
||
|
|
Utilities_1.EventGroup.raise(this, interfaces_1.SELECTION_CHANGE);
|
||
|
|
if (this._onSelectionChanged) {
|
||
|
|
this._onSelectionChanged();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._hasChanged = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Selection;
|
||
|
|
}());
|
||
|
|
exports.Selection = Selection;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 219 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var interfaces_1 = __webpack_require__(217);
|
||
|
|
var SelectionLayout = (function () {
|
||
|
|
function SelectionLayout(direction) {
|
||
|
|
this._direction = direction;
|
||
|
|
}
|
||
|
|
SelectionLayout.prototype.getItemIndexAbove = function (focusIndex, items) {
|
||
|
|
return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.max(0, focusIndex - 1) : focusIndex;
|
||
|
|
};
|
||
|
|
SelectionLayout.prototype.getItemIndexBelow = function (focusIndex, items) {
|
||
|
|
return (this._direction === interfaces_1.SelectionDirection.vertical) ? Math.min(items.length - 1, focusIndex + 1) : focusIndex;
|
||
|
|
};
|
||
|
|
SelectionLayout.prototype.getItemIndexLeft = function (focusIndex, items) {
|
||
|
|
return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.max(0, focusIndex - 1);
|
||
|
|
};
|
||
|
|
SelectionLayout.prototype.getItemIndexRight = function (focusIndex, items) {
|
||
|
|
return (this._direction === interfaces_1.SelectionDirection.vertical) ? focusIndex : Math.min(items.length - 1, focusIndex + 1);
|
||
|
|
};
|
||
|
|
return SelectionLayout;
|
||
|
|
}());
|
||
|
|
exports.SelectionLayout = SelectionLayout;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 220 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var SelectionLayout_1 = __webpack_require__(219);
|
||
|
|
var interfaces_1 = __webpack_require__(217);
|
||
|
|
// Selection definitions:
|
||
|
|
//
|
||
|
|
// Anchor index: the point from which a range selection starts.
|
||
|
|
// Focus index: the point from which layout movement originates from.
|
||
|
|
//
|
||
|
|
// These two can differ. Tests:
|
||
|
|
//
|
||
|
|
// If you start at index 5
|
||
|
|
// Shift click to index 10
|
||
|
|
// The focus is 10, the anchor is 5.
|
||
|
|
// If you shift click at index 0
|
||
|
|
// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.
|
||
|
|
// If you click index 8
|
||
|
|
// The anchor and focus are set to 8.
|
||
|
|
var SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';
|
||
|
|
var SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';
|
||
|
|
var SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';
|
||
|
|
var SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';
|
||
|
|
var SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';
|
||
|
|
var SelectionZone = (function (_super) {
|
||
|
|
__extends(SelectionZone, _super);
|
||
|
|
function SelectionZone() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
SelectionZone.prototype.componentDidMount = function () {
|
||
|
|
var win = Utilities_1.getWindow(this.refs.root);
|
||
|
|
var scrollElement = Utilities_1.findScrollableParent(this.refs.root);
|
||
|
|
// Track the latest modifier keys globally.
|
||
|
|
this._events.on(win, 'keydown keyup', this._updateModifiers);
|
||
|
|
this._events.on(scrollElement, 'click', this._tryClearOnEmptyClick);
|
||
|
|
};
|
||
|
|
SelectionZone.prototype.render = function () {
|
||
|
|
return (React.createElement("div", __assign({ className: 'ms-SelectionZone', ref: 'root', onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onClick: this._onClick, onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu }, {
|
||
|
|
onMouseDownCapture: this._onMouseDownCapture,
|
||
|
|
onFocusCapture: this._onFocus
|
||
|
|
}), this.props.children));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* In some cases, the consuming scenario requires to set focus on a row without having SelectionZone
|
||
|
|
* react to the event. Note that focus events in IE <= 11 will occur asynchronously after .focus() has
|
||
|
|
* been called on an element, so we need a flag to store the idea that we will bypass the "next"
|
||
|
|
* focus event that occurs. This method does that.
|
||
|
|
*/
|
||
|
|
SelectionZone.prototype.ignoreNextFocus = function () {
|
||
|
|
this._shouldHandleFocus = false;
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onMouseDownCapture = function (ev) {
|
||
|
|
if (document.activeElement !== ev.target && !Utilities_1.elementContains(document.activeElement, ev.target)) {
|
||
|
|
this.ignoreNextFocus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* When we focus an item, for single/multi select scenarios, we should try to select it immediately
|
||
|
|
* as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them
|
||
|
|
* specially.
|
||
|
|
*/
|
||
|
|
SelectionZone.prototype._onFocus = function (ev) {
|
||
|
|
var target = ev.target;
|
||
|
|
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
|
||
|
|
var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
|
||
|
|
if (this._shouldHandleFocus && selectionMode !== interfaces_1.SelectionMode.none) {
|
||
|
|
var isToggle = this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);
|
||
|
|
var itemRoot = this._findItemRoot(target);
|
||
|
|
if (!isToggle && itemRoot) {
|
||
|
|
var index = this._getItemIndex(itemRoot);
|
||
|
|
if (isToggleModifierPressed) {
|
||
|
|
// set anchor only.
|
||
|
|
selection.setIndexSelected(index, selection.isIndexSelected(index), true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._onItemSurfaceClick(ev, index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._shouldHandleFocus = false;
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onMouseDown = function (ev) {
|
||
|
|
this._updateModifiers(ev);
|
||
|
|
var target = ev.target;
|
||
|
|
var itemRoot = this._findItemRoot(target);
|
||
|
|
while (target !== this.refs.root) {
|
||
|
|
if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (itemRoot) {
|
||
|
|
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
|
||
|
|
this._onInvokeMouseDown(ev, this._getItemIndex(itemRoot));
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (target === itemRoot) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onClick = function (ev) {
|
||
|
|
this._updateModifiers(ev);
|
||
|
|
var target = ev.target;
|
||
|
|
var itemRoot = this._findItemRoot(target);
|
||
|
|
// No-op if selection is disabled
|
||
|
|
if (this._isSelectionDisabled(target)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
while (target !== this.refs.root) {
|
||
|
|
if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
|
||
|
|
this._onToggleAllClick(ev);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (itemRoot) {
|
||
|
|
var index = this._getItemIndex(itemRoot);
|
||
|
|
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
|
||
|
|
if (this._isShiftPressed) {
|
||
|
|
this._onItemSurfaceClick(ev, index);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._onToggleClick(ev, index);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
|
||
|
|
this._onInvokeClick(ev, index);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (target === itemRoot) {
|
||
|
|
this._onItemSurfaceClick(ev, index);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onContextMenu = function (ev) {
|
||
|
|
var target = ev.target;
|
||
|
|
var _a = this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;
|
||
|
|
if (onItemContextMenu) {
|
||
|
|
var itemRoot = this._findItemRoot(target);
|
||
|
|
if (itemRoot) {
|
||
|
|
var index = this._getItemIndex(itemRoot);
|
||
|
|
onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._isSelectionDisabled = function (target) {
|
||
|
|
while (target !== this.refs.root) {
|
||
|
|
if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* In multi selection, if you double click within an item's root (but not within the invoke element or input elements),
|
||
|
|
* we should execute the invoke handler.
|
||
|
|
*/
|
||
|
|
SelectionZone.prototype._onDoubleClick = function (ev) {
|
||
|
|
var target = ev.target;
|
||
|
|
if (this._isSelectionDisabled(target)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var _a = this.props, selectionMode = _a.selectionMode, onItemInvoked = _a.onItemInvoked;
|
||
|
|
var itemRoot = this._findItemRoot(target);
|
||
|
|
if (itemRoot && onItemInvoked && selectionMode !== interfaces_1.SelectionMode.none && !this._isInputElement(target)) {
|
||
|
|
var index = this._getItemIndex(itemRoot);
|
||
|
|
while (target !== this.refs.root) {
|
||
|
|
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||
|
||
|
|
this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if (target === itemRoot) {
|
||
|
|
this._onInvokeClick(ev, index);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onKeyDown = function (ev) {
|
||
|
|
this._updateModifiers(ev);
|
||
|
|
var target = ev.target;
|
||
|
|
if (this._isSelectionDisabled(target)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
|
||
|
|
var isSelectAllKey = ev.which === Utilities_1.KeyCodes.a && (this._isCtrlPressed || this._isMetaPressed);
|
||
|
|
var isClearSelectionKey = ev.which === Utilities_1.KeyCodes.escape;
|
||
|
|
// Ignore key downs from input elements.
|
||
|
|
if (this._isInputElement(target)) {
|
||
|
|
// A key was pressed while an item in this zone was focused.
|
||
|
|
this._shouldHandleFocus = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// If ctrl-a is pressed, select all (if all are not already selected.)
|
||
|
|
if (isSelectAllKey && selectionMode === interfaces_1.SelectionMode.multiple && !selection.isAllSelected()) {
|
||
|
|
selection.setAllSelected(true);
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// If escape is pressed, clear selection (if any are selected.)
|
||
|
|
if (isClearSelectionKey && selection.getSelectedCount() > 0) {
|
||
|
|
selection.setAllSelected(false);
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var itemRoot = this._findItemRoot(target);
|
||
|
|
// If a key was pressed within an item, we should treat "enters" as invokes and "space" as toggle
|
||
|
|
if (itemRoot) {
|
||
|
|
var index = this._getItemIndex(itemRoot);
|
||
|
|
while (target !== this.refs.root) {
|
||
|
|
if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
|
||
|
|
// For toggle elements, assuming they are rendered as buttons, they will generate a click event,
|
||
|
|
// so we can no-op for any keydowns in this case.
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else if ((ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) &&
|
||
|
|
(target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT')) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
else if (target === itemRoot) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.enter) {
|
||
|
|
this._onInvokeClick(ev, index);
|
||
|
|
ev.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else if (ev.which === Utilities_1.KeyCodes.space) {
|
||
|
|
this._onToggleClick(ev, index);
|
||
|
|
ev.preventDefault();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// A key was pressed while an item in this zone was focused.
|
||
|
|
this._shouldHandleFocus = true;
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onToggleAllClick = function (ev) {
|
||
|
|
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
|
||
|
|
if (selectionMode === interfaces_1.SelectionMode.multiple) {
|
||
|
|
selection.toggleAllSelected();
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onToggleClick = function (ev, index) {
|
||
|
|
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
|
||
|
|
if (selectionMode === interfaces_1.SelectionMode.multiple) {
|
||
|
|
selection.toggleIndexSelected(index);
|
||
|
|
}
|
||
|
|
else if (selectionMode === interfaces_1.SelectionMode.single) {
|
||
|
|
var isSelected = selection.isIndexSelected(index);
|
||
|
|
selection.setChangeEvents(false);
|
||
|
|
selection.setAllSelected(false);
|
||
|
|
selection.setIndexSelected(index, !isSelected, true);
|
||
|
|
selection.setChangeEvents(true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
// NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior
|
||
|
|
// for checkboxes if you use a checkbox for the toggle.
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onInvokeClick = function (ev, index) {
|
||
|
|
var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;
|
||
|
|
if (onItemInvoked) {
|
||
|
|
onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onItemSurfaceClick = function (ev, index) {
|
||
|
|
var _a = this.props, selection = _a.selection, selectionMode = _a.selectionMode;
|
||
|
|
var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
|
||
|
|
if (selectionMode === interfaces_1.SelectionMode.multiple) {
|
||
|
|
if (this._isShiftPressed) {
|
||
|
|
selection.selectToIndex(index, !isToggleModifierPressed);
|
||
|
|
}
|
||
|
|
else if (isToggleModifierPressed) {
|
||
|
|
selection.toggleIndexSelected(index);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._clearAndSelectIndex(index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (selectionMode === interfaces_1.SelectionMode.single) {
|
||
|
|
this._clearAndSelectIndex(index);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._onInvokeMouseDown = function (ev, index) {
|
||
|
|
var selection = this.props.selection;
|
||
|
|
// Only do work if item is not selected.
|
||
|
|
if (selection.isIndexSelected(index)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._clearAndSelectIndex(index);
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {
|
||
|
|
if (!this.props.selectionPreservedOnEmptyClick &&
|
||
|
|
this._isNonHandledClick(ev.target)) {
|
||
|
|
this.props.selection.setAllSelected(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._clearAndSelectIndex = function (index) {
|
||
|
|
var selection = this.props.selection;
|
||
|
|
var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
|
||
|
|
if (!isAlreadySingleSelected) {
|
||
|
|
selection.setChangeEvents(false);
|
||
|
|
selection.setAllSelected(false);
|
||
|
|
selection.setIndexSelected(index, true, true);
|
||
|
|
selection.setChangeEvents(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* We need to track the modifier key states so that when focus events occur, which do not contain
|
||
|
|
* modifier states in the Event object, we know how to behave.
|
||
|
|
*/
|
||
|
|
SelectionZone.prototype._updateModifiers = function (ev) {
|
||
|
|
this._isShiftPressed = ev.shiftKey;
|
||
|
|
this._isCtrlPressed = ev.ctrlKey;
|
||
|
|
this._isMetaPressed = ev.metaKey;
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._findItemRoot = function (target) {
|
||
|
|
var selection = this.props.selection;
|
||
|
|
while (target !== this.refs.root) {
|
||
|
|
var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);
|
||
|
|
var index = Number(indexValue);
|
||
|
|
if (indexValue !== null && index >= 0 && index < selection.getItems().length) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
if (target === this.refs.root) {
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
return target;
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._getItemIndex = function (itemRoot) {
|
||
|
|
return Number(itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME));
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._hasAttribute = function (element, attributeName) {
|
||
|
|
var isToggle = false;
|
||
|
|
while (!isToggle && element !== this.refs.root) {
|
||
|
|
isToggle = element.getAttribute(attributeName) === 'true';
|
||
|
|
element = Utilities_1.getParent(element);
|
||
|
|
}
|
||
|
|
return isToggle;
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._isInputElement = function (element) {
|
||
|
|
return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
|
||
|
|
};
|
||
|
|
SelectionZone.prototype._isNonHandledClick = function (element) {
|
||
|
|
var doc = Utilities_1.getDocument();
|
||
|
|
if (doc && element) {
|
||
|
|
while (element && element !== doc.documentElement) {
|
||
|
|
if (Utilities_1.isElementTabbable(element)) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
element = Utilities_1.getParent(element);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
return SelectionZone;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
SelectionZone.defaultProps = {
|
||
|
|
layout: new SelectionLayout_1.SelectionLayout(interfaces_1.SelectionDirection.vertical),
|
||
|
|
isMultiSelectEnabled: true,
|
||
|
|
isSelectedOnFocus: true,
|
||
|
|
selectionMode: interfaces_1.SelectionMode.multiple
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "ignoreNextFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onMouseDownCapture", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onMouseDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onContextMenu", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onDoubleClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SelectionZone.prototype, "_onKeyDown", null);
|
||
|
|
exports.SelectionZone = SelectionZone;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 221 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DetailsList_Props_1 = __webpack_require__(222);
|
||
|
|
var DetailsHeader_1 = __webpack_require__(223);
|
||
|
|
var DetailsRow_1 = __webpack_require__(231);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var GroupedList_1 = __webpack_require__(235);
|
||
|
|
var List_1 = __webpack_require__(248);
|
||
|
|
var withViewport_1 = __webpack_require__(252);
|
||
|
|
var index_1 = __webpack_require__(216);
|
||
|
|
var DragDropHelper_1 = __webpack_require__(254);
|
||
|
|
var stylesImport = __webpack_require__(255);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var MIN_COLUMN_WIDTH = 100; // this is the global min width
|
||
|
|
var CHECKBOX_WIDTH = 36;
|
||
|
|
var GROUP_EXPAND_WIDTH = 36;
|
||
|
|
var DEFAULT_INNER_PADDING = 16;
|
||
|
|
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
|
||
|
|
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
|
||
|
|
var DetailsList = (function (_super) {
|
||
|
|
__extends(DetailsList, _super);
|
||
|
|
function DetailsList(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._activeRows = {};
|
||
|
|
_this._columnOverrides = {};
|
||
|
|
_this._onColumnIsSizingChanged = _this._onColumnIsSizingChanged.bind(_this);
|
||
|
|
_this._onColumnResized = _this._onColumnResized.bind(_this);
|
||
|
|
_this._onColumnAutoResized = _this._onColumnAutoResized.bind(_this);
|
||
|
|
_this._onRowDidMount = _this._onRowDidMount.bind(_this);
|
||
|
|
_this._onRowWillUnmount = _this._onRowWillUnmount.bind(_this);
|
||
|
|
_this._onToggleCollapse = _this._onToggleCollapse.bind(_this);
|
||
|
|
_this._onActiveRowChanged = _this._onActiveRowChanged.bind(_this);
|
||
|
|
_this._onHeaderKeyDown = _this._onHeaderKeyDown.bind(_this);
|
||
|
|
_this._onContentKeyDown = _this._onContentKeyDown.bind(_this);
|
||
|
|
_this._onRenderCell = _this._onRenderCell.bind(_this);
|
||
|
|
_this._onGroupExpandStateChanged = _this._onGroupExpandStateChanged.bind(_this);
|
||
|
|
_this.state = {
|
||
|
|
lastWidth: 0,
|
||
|
|
adjustedColumns: _this._getAdjustedColumns(props),
|
||
|
|
layoutMode: props.layoutMode,
|
||
|
|
isSizing: false,
|
||
|
|
isDropping: false,
|
||
|
|
isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed,
|
||
|
|
isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed
|
||
|
|
};
|
||
|
|
_this._selection = props.selection || new index_1.Selection({ onSelectionChanged: null, getKey: props.getKey });
|
||
|
|
_this._selection.setItems(props.items, false);
|
||
|
|
_this._dragDropHelper = props.dragDropEvents ? new DragDropHelper_1.DragDropHelper({
|
||
|
|
selection: _this._selection,
|
||
|
|
minimumPixelsForDrag: props.minimumPixelsForDrag
|
||
|
|
}) : null;
|
||
|
|
_this._initialFocusedIndex = props.initialFocusedIndex;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DetailsList.prototype.componentWillUnmount = function () {
|
||
|
|
if (this._dragDropHelper) {
|
||
|
|
this._dragDropHelper.dispose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype.componentDidUpdate = function (prevProps, prevState) {
|
||
|
|
if (this._initialFocusedIndex !== undefined) {
|
||
|
|
var row = this._activeRows[this._initialFocusedIndex];
|
||
|
|
if (row) {
|
||
|
|
this._setFocusToRowIfPending(row);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.props.onDidUpdate) {
|
||
|
|
this.props.onDidUpdate(this);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
var _a = this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, selectionMode = _a.selectionMode, columns = _a.columns, viewport = _a.viewport;
|
||
|
|
var layoutMode = this.state.layoutMode;
|
||
|
|
var shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
|
||
|
|
var shouldForceUpdates = false;
|
||
|
|
if (newProps.layoutMode !== this.props.layoutMode) {
|
||
|
|
layoutMode = newProps.layoutMode;
|
||
|
|
this.setState({ layoutMode: layoutMode });
|
||
|
|
shouldForceUpdates = true;
|
||
|
|
}
|
||
|
|
if (shouldResetSelection) {
|
||
|
|
this._initialFocusedIndex = newProps.initialFocusedIndex;
|
||
|
|
}
|
||
|
|
if (newProps.items !== items) {
|
||
|
|
this._selection.setItems(newProps.items, shouldResetSelection);
|
||
|
|
}
|
||
|
|
if (newProps.checkboxVisibility !== checkboxVisibility ||
|
||
|
|
newProps.columns !== columns ||
|
||
|
|
newProps.viewport.width !== viewport.width) {
|
||
|
|
shouldForceUpdates = true;
|
||
|
|
}
|
||
|
|
this._adjustColumns(newProps, true, layoutMode);
|
||
|
|
if (newProps.selectionMode !== selectionMode) {
|
||
|
|
shouldForceUpdates = true;
|
||
|
|
}
|
||
|
|
if (shouldForceUpdates) {
|
||
|
|
this._forceListUpdates();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, ariaLabelForListHeader = _a.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, className = _a.className, checkboxVisibility = _a.checkboxVisibility, constrainMode = _a.constrainMode, dragDropEvents = _a.dragDropEvents, groups = _a.groups, groupProps = _a.groupProps, items = _a.items, isHeaderVisible = _a.isHeaderVisible, onItemInvoked = _a.onItemInvoked, onItemContextMenu = _a.onItemContextMenu, onColumnHeaderClick = _a.onColumnHeaderClick, onColumnHeaderContextMenu = _a.onColumnHeaderContextMenu, selectionMode = _a.selectionMode, selectionPreservedOnEmptyClick = _a.selectionPreservedOnEmptyClick, ariaLabel = _a.ariaLabel, ariaLabelForGrid = _a.ariaLabelForGrid, rowElementEventMap = _a.rowElementEventMap, _b = _a.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = _a.getKey;
|
||
|
|
var _c = this.state, adjustedColumns = _c.adjustedColumns, isCollapsed = _c.isCollapsed, layoutMode = _c.layoutMode, isSizing = _c.isSizing, isSomeGroupExpanded = _c.isSomeGroupExpanded;
|
||
|
|
var _d = this, selection = _d._selection, dragDropHelper = _d._dragDropHelper;
|
||
|
|
var groupNestingDepth = this._getGroupNestingDepth();
|
||
|
|
var additionalListProps = {
|
||
|
|
renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
|
||
|
|
renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND,
|
||
|
|
getKey: getKey
|
||
|
|
};
|
||
|
|
var selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none; // for SelectionMode.none
|
||
|
|
if (selectionMode === index_1.SelectionMode.single) {
|
||
|
|
selectAllVisibility = DetailsHeader_1.SelectAllVisibility.hidden;
|
||
|
|
}
|
||
|
|
if (selectionMode === index_1.SelectionMode.multiple) {
|
||
|
|
// if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups
|
||
|
|
var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;
|
||
|
|
if (isCollapsedGroupSelectVisible === undefined) {
|
||
|
|
isCollapsedGroupSelectVisible = true;
|
||
|
|
}
|
||
|
|
var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;
|
||
|
|
selectAllVisibility = isSelectAllVisible ? DetailsHeader_1.SelectAllVisibility.visible : DetailsHeader_1.SelectAllVisibility.hidden;
|
||
|
|
}
|
||
|
|
if (checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.hidden) {
|
||
|
|
selectAllVisibility = DetailsHeader_1.SelectAllVisibility.none;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
// If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
|
||
|
|
// with JAWS.
|
||
|
|
React.createElement("div", __assign({ ref: 'root', className: Utilities_1.css('ms-DetailsList', styles.root, className, (_e = {
|
||
|
|
'is-fixed': layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns
|
||
|
|
},
|
||
|
|
_e['is-horizontalConstrained ' + styles.rootIsHorizontalConstrained] = constrainMode === DetailsList_Props_1.ConstrainMode.horizontalConstrained,
|
||
|
|
_e)), "data-automationid": 'DetailsList', "data-is-scrollable": 'false', "aria-label": ariaLabel }, (shouldApplyApplicationRole ? { role: 'application' } : {})),
|
||
|
|
React.createElement("div", { role: 'grid', "aria-label": ariaLabelForGrid, "aria-rowcount": items ? items.length : 0, "aria-colcount": adjustedColumns ? adjustedColumns.length : 0 },
|
||
|
|
React.createElement("div", { onKeyDown: this._onHeaderKeyDown, role: 'presentation' }, isHeaderVisible && (React.createElement(DetailsHeader_1.DetailsHeader, { ref: 'header', selectionMode: selectionMode, layoutMode: layoutMode, selection: selection, columns: adjustedColumns, onColumnClick: onColumnHeaderClick, onColumnContextMenu: onColumnHeaderContextMenu, onColumnResized: this._onColumnResized, onColumnIsSizingChanged: this._onColumnIsSizingChanged, onColumnAutoResized: this._onColumnAutoResized, groupNestingDepth: groupNestingDepth, isAllCollapsed: isCollapsed, onToggleCollapseAll: this._onToggleCollapse, ariaLabel: ariaLabelForListHeader, ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox, selectAllVisibility: selectAllVisibility }))),
|
||
|
|
React.createElement("div", { ref: 'contentContainer', onKeyDown: this._onContentKeyDown, role: 'presentation' },
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', className: styles.focusZone, direction: FocusZone_1.FocusZoneDirection.vertical, isInnerZoneKeystroke: function (ev) { return (ev.which === Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right)); }, onActiveElementChanged: this._onActiveRowChanged },
|
||
|
|
React.createElement(index_1.SelectionZone, { ref: 'selectionZone', selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu }, groups ? (React.createElement(GroupedList_1.GroupedList, { groups: groups, groupProps: groupProps, items: items, onRenderCell: this._onRenderCell, selection: selection, selectionMode: selectionMode, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: this._onGroupExpandStateChanged, ref: 'groupedList' })) : (React.createElement(List_1.List, __assign({ role: null, items: items, onRenderCell: function (item, itemIndex) { return _this._onRenderCell(0, item, itemIndex); } }, additionalListProps, { ref: 'list' })))))))));
|
||
|
|
var _e;
|
||
|
|
};
|
||
|
|
DetailsList.prototype.forceUpdate = function () {
|
||
|
|
_super.prototype.forceUpdate.call(this);
|
||
|
|
this._forceListUpdates();
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onRenderRow = function (props, defaultRender) {
|
||
|
|
return React.createElement(DetailsRow_1.DetailsRow, __assign({}, props));
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onRenderCell = function (nestingDepth, item, index) {
|
||
|
|
var _a = this.props, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.rowElementEventMap, onRenderMissingItem = _a.onRenderMissingItem, onRenderItemColumn = _a.onRenderItemColumn, _b = _a.onRenderRow, onRenderRow = _b === void 0 ? this._onRenderRow : _b, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel;
|
||
|
|
var selection = this._selection;
|
||
|
|
var dragDropHelper = this._dragDropHelper;
|
||
|
|
var columns = this.state.adjustedColumns;
|
||
|
|
if (!item) {
|
||
|
|
if (onRenderMissingItem) {
|
||
|
|
onRenderMissingItem(index);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return onRenderRow({
|
||
|
|
item: item,
|
||
|
|
itemIndex: index,
|
||
|
|
columns: columns,
|
||
|
|
groupNestingDepth: nestingDepth,
|
||
|
|
selectionMode: selectionMode,
|
||
|
|
selection: selection,
|
||
|
|
onDidMount: this._onRowDidMount,
|
||
|
|
onWillUnmount: this._onRowWillUnmount,
|
||
|
|
onRenderItemColumn: onRenderItemColumn,
|
||
|
|
eventsToRegister: eventsToRegister,
|
||
|
|
dragDropEvents: dragDropEvents,
|
||
|
|
dragDropHelper: dragDropHelper,
|
||
|
|
viewport: viewport,
|
||
|
|
checkboxVisibility: checkboxVisibility,
|
||
|
|
getRowAriaLabel: getRowAriaLabel,
|
||
|
|
checkButtonAriaLabel: checkButtonAriaLabel
|
||
|
|
}, this._onRenderRow);
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onGroupExpandStateChanged = function (isSomeGroupExpanded) {
|
||
|
|
this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onColumnIsSizingChanged = function (column, isSizing) {
|
||
|
|
this.setState({ isSizing: isSizing });
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onHeaderKeyDown = function (ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.down) {
|
||
|
|
if (this.refs.focusZone && this.refs.focusZone.focus()) {
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onContentKeyDown = function (ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.up) {
|
||
|
|
if (this.refs.header && this.refs.header.focus()) {
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._getGroupNestingDepth = function () {
|
||
|
|
var groups = this.props.groups;
|
||
|
|
var level = 0;
|
||
|
|
var groupsInLevel = groups;
|
||
|
|
while (groupsInLevel && groupsInLevel.length > 0) {
|
||
|
|
level++;
|
||
|
|
groupsInLevel = groupsInLevel[0].children;
|
||
|
|
}
|
||
|
|
return level;
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onRowDidMount = function (row) {
|
||
|
|
var onRowDidMount = this.props.onRowDidMount;
|
||
|
|
var index = row.props.itemIndex;
|
||
|
|
this._activeRows[index] = row; // this is used for column auto resize
|
||
|
|
this._setFocusToRowIfPending(row);
|
||
|
|
if (onRowDidMount) {
|
||
|
|
onRowDidMount(row.props.item, index);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._setFocusToRowIfPending = function (row) {
|
||
|
|
var index = row.props.itemIndex;
|
||
|
|
if (this._initialFocusedIndex !== undefined && index === this._initialFocusedIndex) {
|
||
|
|
if (this.refs.selectionZone) {
|
||
|
|
this.refs.selectionZone.ignoreNextFocus();
|
||
|
|
}
|
||
|
|
this._async.setTimeout(function () { return row.focus(); }, 0);
|
||
|
|
delete this._initialFocusedIndex;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onRowWillUnmount = function (row) {
|
||
|
|
var onRowWillUnmount = this.props.onRowWillUnmount;
|
||
|
|
var index = row.props.itemIndex;
|
||
|
|
delete this._activeRows[index];
|
||
|
|
this._events.off(row.refs.root);
|
||
|
|
if (onRowWillUnmount) {
|
||
|
|
onRowWillUnmount(row.props.item, index);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onToggleCollapse = function (collapsed) {
|
||
|
|
this.setState({
|
||
|
|
isCollapsed: collapsed
|
||
|
|
});
|
||
|
|
if (this.refs.groupedList) {
|
||
|
|
this.refs.groupedList.toggleCollapseAll(collapsed);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._forceListUpdates = function () {
|
||
|
|
if (this.refs.groupedList) {
|
||
|
|
this.refs.groupedList.forceUpdate();
|
||
|
|
}
|
||
|
|
if (this.refs.list) {
|
||
|
|
this.refs.list.forceUpdate();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsList.prototype._adjustColumns = function (newProps, forceUpdate, layoutMode) {
|
||
|
|
var adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, layoutMode);
|
||
|
|
var viewportWidth = this.props.viewport.width;
|
||
|
|
if (adjustedColumns) {
|
||
|
|
this.setState({
|
||
|
|
adjustedColumns: adjustedColumns,
|
||
|
|
lastWidth: viewportWidth,
|
||
|
|
layoutMode: layoutMode
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** Returns adjusted columns, given the viewport size and layout mode. */
|
||
|
|
DetailsList.prototype._getAdjustedColumns = function (newProps, forceUpdate, layoutMode) {
|
||
|
|
var _this = this;
|
||
|
|
var newColumns = newProps.columns, newItems = newProps.items, viewportWidth = newProps.viewport.width, selectionMode = newProps.selectionMode;
|
||
|
|
if (layoutMode === undefined) {
|
||
|
|
layoutMode = newProps.layoutMode;
|
||
|
|
}
|
||
|
|
var columns = this.props ? this.props.columns : [];
|
||
|
|
var lastWidth = this.state ? this.state.lastWidth : -1;
|
||
|
|
var lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined;
|
||
|
|
if (viewportWidth !== undefined) {
|
||
|
|
if (!forceUpdate &&
|
||
|
|
lastWidth === viewportWidth &&
|
||
|
|
lastSelectionMode === selectionMode &&
|
||
|
|
(!columns || newColumns === columns)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
viewportWidth = this.props.viewport.width;
|
||
|
|
}
|
||
|
|
newColumns = newColumns || buildColumns(newItems, true);
|
||
|
|
var adjustedColumns;
|
||
|
|
if (layoutMode === DetailsList_Props_1.DetailsListLayoutMode.fixedColumns) {
|
||
|
|
adjustedColumns = this._getFixedColumns(newColumns);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);
|
||
|
|
}
|
||
|
|
// Preserve adjusted column calculated widths.
|
||
|
|
adjustedColumns.forEach(function (column) {
|
||
|
|
var overrides = _this._columnOverrides[column.key] = _this._columnOverrides[column.key] || {};
|
||
|
|
overrides.calculatedWidth = column.calculatedWidth;
|
||
|
|
});
|
||
|
|
return adjustedColumns;
|
||
|
|
};
|
||
|
|
/** Builds a set of columns based on the given columns mixed with the current overrides. */
|
||
|
|
DetailsList.prototype._getFixedColumns = function (newColumns) {
|
||
|
|
var _this = this;
|
||
|
|
return newColumns.map(function (column) {
|
||
|
|
var newColumn = Utilities_1.assign({}, column, _this._columnOverrides[column.key]);
|
||
|
|
if (!newColumn.calculatedWidth) {
|
||
|
|
newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;
|
||
|
|
}
|
||
|
|
return newColumn;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
/** Builds a set of columns to fix within the viewport width. */
|
||
|
|
DetailsList.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) {
|
||
|
|
var selectionMode = props.selectionMode, groups = props.groups;
|
||
|
|
var outerPadding = DEFAULT_INNER_PADDING;
|
||
|
|
var rowCheckWidth = (selectionMode !== index_1.SelectionMode.none) ? CHECKBOX_WIDTH : 0;
|
||
|
|
var groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
|
||
|
|
var totalWidth = 0; // offset because we have one less inner padding.
|
||
|
|
var availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
|
||
|
|
var adjustedColumns = newColumns.map(function (column, i) {
|
||
|
|
var newColumn = Utilities_1.assign({}, column, {
|
||
|
|
calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH
|
||
|
|
});
|
||
|
|
totalWidth += newColumn.calculatedWidth + (i > 0 ? DEFAULT_INNER_PADDING : 0);
|
||
|
|
return newColumn;
|
||
|
|
});
|
||
|
|
var lastIndex = adjustedColumns.length - 1;
|
||
|
|
// Remove collapsable columns.
|
||
|
|
while (lastIndex > 1 && totalWidth > availableWidth) {
|
||
|
|
var column = adjustedColumns[lastIndex];
|
||
|
|
if (column.isCollapsable) {
|
||
|
|
totalWidth -= column.calculatedWidth + DEFAULT_INNER_PADDING;
|
||
|
|
adjustedColumns.splice(lastIndex, 1);
|
||
|
|
}
|
||
|
|
lastIndex--;
|
||
|
|
}
|
||
|
|
// Then expand columns starting at the beginning, until we've filled the width.
|
||
|
|
for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {
|
||
|
|
var column = adjustedColumns[i];
|
||
|
|
var maxWidth = column.maxWidth;
|
||
|
|
var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;
|
||
|
|
var spaceLeft = availableWidth - totalWidth;
|
||
|
|
var increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;
|
||
|
|
// Add remaining space to the last column.
|
||
|
|
if (i === (adjustedColumns.length - 1)) {
|
||
|
|
increment = spaceLeft;
|
||
|
|
}
|
||
|
|
column.calculatedWidth += increment;
|
||
|
|
totalWidth += increment;
|
||
|
|
}
|
||
|
|
// Mark the last column as not resizable to avoid extra scrolling issues.
|
||
|
|
if (adjustedColumns.length) {
|
||
|
|
adjustedColumns[adjustedColumns.length - 1].isResizable = false;
|
||
|
|
}
|
||
|
|
return adjustedColumns;
|
||
|
|
};
|
||
|
|
DetailsList.prototype._onColumnResized = function (resizingColumn, newWidth) {
|
||
|
|
var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
|
||
|
|
if (this.props.onColumnResize) {
|
||
|
|
this.props.onColumnResize(resizingColumn, newCalculatedWidth);
|
||
|
|
}
|
||
|
|
this._columnOverrides[resizingColumn.key].calculatedWidth = newCalculatedWidth;
|
||
|
|
this._adjustColumns(this.props, true, DetailsList_Props_1.DetailsListLayoutMode.fixedColumns);
|
||
|
|
this._forceListUpdates();
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Callback function when double clicked on the details header column resizer
|
||
|
|
* which will measure the column cells of all the active rows and resize the
|
||
|
|
* column to the max cell width.
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {IColumn} column (double clicked column definition)
|
||
|
|
* @param {number} columnIndex (double clicked column index)
|
||
|
|
* @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
|
||
|
|
*/
|
||
|
|
DetailsList.prototype._onColumnAutoResized = function (column, columnIndex) {
|
||
|
|
var _this = this;
|
||
|
|
var max = 0;
|
||
|
|
var count = 0;
|
||
|
|
var totalCount = Object.keys(this._activeRows).length;
|
||
|
|
for (var key in this._activeRows) {
|
||
|
|
if (this._activeRows.hasOwnProperty(key)) {
|
||
|
|
var currentRow = this._activeRows[key];
|
||
|
|
currentRow.measureCell(columnIndex, function (width) {
|
||
|
|
max = Math.max(max, width);
|
||
|
|
count++;
|
||
|
|
if (count === totalCount) {
|
||
|
|
_this._onColumnResized(column, max);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Call back function when an element in FocusZone becomes active. It will transalate it into item
|
||
|
|
* and call onActiveItemChanged callback if specified.
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {el} row element that became active in Focus Zone
|
||
|
|
* @param {ev} focus event from Focus Zone
|
||
|
|
*/
|
||
|
|
DetailsList.prototype._onActiveRowChanged = function (el, ev) {
|
||
|
|
var _a = this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged;
|
||
|
|
if (!onActiveItemChanged || !el) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var index = Number(el.getAttribute('data-item-index'));
|
||
|
|
if (index >= 0) {
|
||
|
|
onActiveItemChanged(items[index], index, ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
;
|
||
|
|
return DetailsList;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
DetailsList.defaultProps = {
|
||
|
|
layoutMode: DetailsList_Props_1.DetailsListLayoutMode.justified,
|
||
|
|
selectionMode: index_1.SelectionMode.multiple,
|
||
|
|
constrainMode: DetailsList_Props_1.ConstrainMode.horizontalConstrained,
|
||
|
|
checkboxVisibility: DetailsList_Props_1.CheckboxVisibility.onHover,
|
||
|
|
isHeaderVisible: true
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DetailsList.prototype, "_onRenderRow", null);
|
||
|
|
DetailsList = __decorate([
|
||
|
|
withViewport_1.withViewport
|
||
|
|
], DetailsList);
|
||
|
|
exports.DetailsList = DetailsList;
|
||
|
|
function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline) {
|
||
|
|
var columns = [];
|
||
|
|
if (items && items.length) {
|
||
|
|
var firstItem = items[0];
|
||
|
|
var isFirstColumn = true;
|
||
|
|
for (var propName in firstItem) {
|
||
|
|
if (firstItem.hasOwnProperty(propName)) {
|
||
|
|
columns.push({
|
||
|
|
key: propName,
|
||
|
|
name: propName,
|
||
|
|
fieldName: propName,
|
||
|
|
minWidth: MIN_COLUMN_WIDTH,
|
||
|
|
maxWidth: 300,
|
||
|
|
isCollapsable: !!columns.length,
|
||
|
|
isMultiline: (isMultiline === undefined) ? false : isMultiline,
|
||
|
|
isSorted: sortedColumnKey === propName,
|
||
|
|
isSortedDescending: !!isSortedDescending,
|
||
|
|
isRowHeader: false,
|
||
|
|
columnActionsMode: DetailsList_Props_1.ColumnActionsMode.clickable,
|
||
|
|
isResizable: canResizeColumns,
|
||
|
|
onColumnClick: onColumnClick,
|
||
|
|
isGrouped: groupedColumnKey === propName
|
||
|
|
});
|
||
|
|
isFirstColumn = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return columns;
|
||
|
|
}
|
||
|
|
exports.buildColumns = buildColumns;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 222 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/**
|
||
|
|
* Enum to describe how a particular column header behaves.... This enum is used to
|
||
|
|
* to specify the property IColumn:columnActionsMode.
|
||
|
|
* If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable
|
||
|
|
*/
|
||
|
|
var ColumnActionsMode;
|
||
|
|
(function (ColumnActionsMode) {
|
||
|
|
/**
|
||
|
|
* Renders the column header as disabled.
|
||
|
|
*/
|
||
|
|
ColumnActionsMode[ColumnActionsMode["disabled"] = 0] = "disabled";
|
||
|
|
/**
|
||
|
|
* Renders the column header is clickable.
|
||
|
|
*/
|
||
|
|
ColumnActionsMode[ColumnActionsMode["clickable"] = 1] = "clickable";
|
||
|
|
/**
|
||
|
|
* Renders the column header ias clickable and displays the dropdown cheveron.
|
||
|
|
*/
|
||
|
|
ColumnActionsMode[ColumnActionsMode["hasDropdown"] = 2] = "hasDropdown";
|
||
|
|
})(ColumnActionsMode = exports.ColumnActionsMode || (exports.ColumnActionsMode = {}));
|
||
|
|
var ConstrainMode;
|
||
|
|
(function (ConstrainMode) {
|
||
|
|
/** If specified, lets the content grow which allows the page to manage scrolling. */
|
||
|
|
ConstrainMode[ConstrainMode["unconstrained"] = 0] = "unconstrained";
|
||
|
|
/**
|
||
|
|
* If specified, constrains the list to the given layout space.
|
||
|
|
*/
|
||
|
|
ConstrainMode[ConstrainMode["horizontalConstrained"] = 1] = "horizontalConstrained";
|
||
|
|
})(ConstrainMode = exports.ConstrainMode || (exports.ConstrainMode = {}));
|
||
|
|
var DetailsListLayoutMode;
|
||
|
|
(function (DetailsListLayoutMode) {
|
||
|
|
/**
|
||
|
|
* Lets the user resize columns and makes not attempt to fit them.
|
||
|
|
*/
|
||
|
|
DetailsListLayoutMode[DetailsListLayoutMode["fixedColumns"] = 0] = "fixedColumns";
|
||
|
|
/**
|
||
|
|
* Manages which columns are visible, tries to size them according to their min/max rules and drops
|
||
|
|
* off columns that can't fit and have isCollapsable set.
|
||
|
|
*/
|
||
|
|
DetailsListLayoutMode[DetailsListLayoutMode["justified"] = 1] = "justified";
|
||
|
|
})(DetailsListLayoutMode = exports.DetailsListLayoutMode || (exports.DetailsListLayoutMode = {}));
|
||
|
|
var CheckboxVisibility;
|
||
|
|
(function (CheckboxVisibility) {
|
||
|
|
/**
|
||
|
|
* Visible on hover.
|
||
|
|
*/
|
||
|
|
CheckboxVisibility[CheckboxVisibility["onHover"] = 0] = "onHover";
|
||
|
|
/**
|
||
|
|
* Visible always.
|
||
|
|
*/
|
||
|
|
CheckboxVisibility[CheckboxVisibility["always"] = 1] = "always";
|
||
|
|
/**
|
||
|
|
* Hide checkboxes.
|
||
|
|
*/
|
||
|
|
CheckboxVisibility[CheckboxVisibility["hidden"] = 2] = "hidden";
|
||
|
|
})(CheckboxVisibility = exports.CheckboxVisibility || (exports.CheckboxVisibility = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 223 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DetailsList_Props_1 = __webpack_require__(222);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var Check_1 = __webpack_require__(224);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Layer_1 = __webpack_require__(132);
|
||
|
|
var GroupSpacer_1 = __webpack_require__(228);
|
||
|
|
var interfaces_1 = __webpack_require__(217);
|
||
|
|
var stylesImport = __webpack_require__(230);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
|
||
|
|
var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
|
||
|
|
var INNER_PADDING = 16;
|
||
|
|
var SelectAllVisibility;
|
||
|
|
(function (SelectAllVisibility) {
|
||
|
|
SelectAllVisibility[SelectAllVisibility["none"] = 0] = "none";
|
||
|
|
SelectAllVisibility[SelectAllVisibility["hidden"] = 1] = "hidden";
|
||
|
|
SelectAllVisibility[SelectAllVisibility["visible"] = 2] = "visible";
|
||
|
|
})(SelectAllVisibility = exports.SelectAllVisibility || (exports.SelectAllVisibility = {}));
|
||
|
|
var DetailsHeader = (function (_super) {
|
||
|
|
__extends(DetailsHeader, _super);
|
||
|
|
function DetailsHeader(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
columnResizeDetails: null,
|
||
|
|
groupNestingDepth: _this.props.groupNestingDepth,
|
||
|
|
isAllCollapsed: _this.props.isAllCollapsed
|
||
|
|
};
|
||
|
|
_this._onToggleCollapseAll = _this._onToggleCollapseAll.bind(_this);
|
||
|
|
_this._onSelectAllClicked = _this._onSelectAllClicked.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DetailsHeader.prototype.componentDidMount = function () {
|
||
|
|
var selection = this.props.selection;
|
||
|
|
this._events.on(selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
|
||
|
|
// We need to use native on this to avoid MarqueeSelection from handling the event before us.
|
||
|
|
this._events.on(this.refs.root, 'mousedown', this._onRootMouseDown);
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
var groupNestingDepth = this.state.groupNestingDepth;
|
||
|
|
if (newProps.groupNestingDepth !== groupNestingDepth) {
|
||
|
|
this.setState({ groupNestingDepth: newProps.groupNestingDepth });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, columns = _a.columns, ariaLabel = _a.ariaLabel, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility;
|
||
|
|
var _b = this.state, isAllSelected = _b.isAllSelected, columnResizeDetails = _b.columnResizeDetails, isSizing = _b.isSizing, groupNestingDepth = _b.groupNestingDepth, isAllCollapsed = _b.isAllCollapsed;
|
||
|
|
return (React.createElement("div", { role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsHeader', styles.root, (_c = {},
|
||
|
|
_c['is-allSelected ' + styles.rootIsAllSelected] = isAllSelected,
|
||
|
|
_c['is-selectAllHidden ' + styles.rootIsSelectAllHidden] = selectAllVisibility === SelectAllVisibility.hidden,
|
||
|
|
_c['is-resizingColumn'] = !!columnResizeDetails && isSizing,
|
||
|
|
_c)), ref: 'root', onMouseMove: this._onRootMouseMove, "data-automationid": 'DetailsHeader' },
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { ref: 'focusZone', direction: FocusZone_1.FocusZoneDirection.horizontal },
|
||
|
|
(selectAllVisibility !== SelectAllVisibility.none) ? (React.createElement("div", { className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader' },
|
||
|
|
React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell is-check', styles.cell, styles.cellIsCheck), onClick: this._onSelectAllClicked, "aria-label": ariaLabelForSelectAllCheckbox, "aria-pressed": isAllSelected },
|
||
|
|
React.createElement(Check_1.Check, { checked: isAllSelected })))) : null,
|
||
|
|
groupNestingDepth > 0 ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell), onClick: this._onToggleCollapseAll },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-collapseButton', styles.collapseButton, isAllCollapsed && ('is-collapsed ' + styles.collapseButtonIsCollapsed)), iconName: 'ChevronDown' }))) : (null),
|
||
|
|
GroupSpacer_1.GroupSpacer({ count: groupNestingDepth - 1 }),
|
||
|
|
columns.map(function (column, columnIndex) {
|
||
|
|
return (React.createElement("div", { key: column.key, className: Utilities_1.css('ms-DetailsHeader-cellWrapper', styles.cellWrapper), role: 'columnheader', "aria-sort": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' },
|
||
|
|
React.createElement("button", { type: 'button', key: column.fieldName, disabled: column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.disabled, className: Utilities_1.css('ms-DetailsHeader-cell', styles.cell, column.headerClassName, (_a = {},
|
||
|
|
_a['is-actionable ' + styles.cellIsActionable] = column.columnActionsMode !== DetailsList_Props_1.ColumnActionsMode.disabled,
|
||
|
|
_a['is-empty ' + styles.cellIsEmpty] = !column.name,
|
||
|
|
_a['is-icon-visible'] = column.isSorted || column.isGrouped || column.isFiltered,
|
||
|
|
_a)), style: { width: column.calculatedWidth + INNER_PADDING }, onClick: _this._onColumnClick.bind(_this, column), onContextMenu: _this._onColumnContextMenu.bind(_this, column), "aria-haspopup": column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown, "aria-label": column.ariaLabel || column.name, "data-automationid": 'ColumnsHeaderColumn', "data-item-key": column.key },
|
||
|
|
column.isFiltered && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'Filter' })),
|
||
|
|
column.isSorted && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),
|
||
|
|
column.isGrouped && (React.createElement(Icon_1.Icon, { className: styles.nearIcon, iconName: 'GroupedDescending' })),
|
||
|
|
column.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(styles.nearIcon, column.iconClassName), iconName: column.iconName })),
|
||
|
|
column.name,
|
||
|
|
column.columnActionsMode === DetailsList_Props_1.ColumnActionsMode.hasDropdown && (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-DetailsHeader-filterChevron', styles.filterChevron), iconName: 'ChevronDown' }))),
|
||
|
|
(column.isResizable) && (React.createElement("div", { "data-sizer-index": columnIndex, className: Utilities_1.css('ms-DetailsHeader-cell is-sizer', styles.cell, styles.cellIsSizer, (_b = {},
|
||
|
|
_b['is-resizing ' + styles.cellIsResizing] = isSizing && columnResizeDetails.columnIndex === columnIndex,
|
||
|
|
_b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) }))));
|
||
|
|
var _a, _b;
|
||
|
|
})),
|
||
|
|
isSizing && (React.createElement(Layer_1.Layer, null,
|
||
|
|
React.createElement("div", { className: Utilities_1.css(isSizing && styles.sizingOverlay), onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
/** Set focus to the active thing in the focus area. */
|
||
|
|
DetailsHeader.prototype.focus = function () {
|
||
|
|
return this.refs.focusZone.focus();
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* double click on the column sizer will auto ajust column width
|
||
|
|
* to fit the longest content among current rendered rows.
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {number} columnIndex (index of the column user double clicked)
|
||
|
|
* @param {React.MouseEvent} ev (mouse double click event)
|
||
|
|
*/
|
||
|
|
DetailsHeader.prototype._onSizerDoubleClick = function (columnIndex, ev) {
|
||
|
|
var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, columns = _a.columns;
|
||
|
|
if (onColumnAutoResized) {
|
||
|
|
onColumnAutoResized(columns[columnIndex], columnIndex);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Called when the select all toggle is clicked.
|
||
|
|
*/
|
||
|
|
DetailsHeader.prototype._onSelectAllClicked = function () {
|
||
|
|
var selection = this.props.selection;
|
||
|
|
selection.toggleAllSelected();
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype._onRootMouseDown = function (ev) {
|
||
|
|
var columnIndexAttr = ev.target.getAttribute('data-sizer-index');
|
||
|
|
var columnIndex = Number(columnIndexAttr);
|
||
|
|
var columns = this.props.columns;
|
||
|
|
if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
|
||
|
|
// Ignore anything except the primary button.
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
columnResizeDetails: {
|
||
|
|
columnIndex: columnIndex,
|
||
|
|
columnMinWidth: columns[columnIndex].calculatedWidth,
|
||
|
|
originX: ev.clientX
|
||
|
|
}
|
||
|
|
});
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype._onRootMouseMove = function (ev) {
|
||
|
|
var _a = this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;
|
||
|
|
if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
|
||
|
|
this.setState({ isSizing: true });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* mouse move event handler in the header
|
||
|
|
* it will set isSizing state to true when user clicked on the sizer and move the mouse.
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {React.MouseEvent} ev (mouse move event)
|
||
|
|
*/
|
||
|
|
DetailsHeader.prototype._onSizerMouseMove = function (ev) {
|
||
|
|
var
|
||
|
|
// use buttons property here since ev.button in some edge case is not upding well during the move.
|
||
|
|
// but firefox doesn't support it, so we set the default value when it is not defined.
|
||
|
|
buttons = ev.buttons;
|
||
|
|
var _a = this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, columns = _a.columns;
|
||
|
|
var columnResizeDetails = this.state.columnResizeDetails;
|
||
|
|
if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
|
||
|
|
// cancel mouse down event and return early when the primary button is not pressed
|
||
|
|
this._onSizerMouseUp(ev);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (ev.clientX !== columnResizeDetails.originX) {
|
||
|
|
if (onColumnIsSizingChanged) {
|
||
|
|
onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (onColumnResized) {
|
||
|
|
var movement = ev.clientX - columnResizeDetails.originX;
|
||
|
|
if (Utilities_1.getRTL()) {
|
||
|
|
movement = -movement;
|
||
|
|
}
|
||
|
|
onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* mouse up event handler in the header
|
||
|
|
* clear the resize related state.
|
||
|
|
* This is to ensure we can catch double click event
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {React.MouseEvent} ev (mouse up event)
|
||
|
|
*/
|
||
|
|
DetailsHeader.prototype._onSizerMouseUp = function (ev) {
|
||
|
|
var _a = this.props, columns = _a.columns, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;
|
||
|
|
var columnResizeDetails = this.state.columnResizeDetails;
|
||
|
|
this.setState({
|
||
|
|
columnResizeDetails: null,
|
||
|
|
isSizing: false
|
||
|
|
});
|
||
|
|
if (onColumnIsSizingChanged) {
|
||
|
|
onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype._onSelectionChanged = function () {
|
||
|
|
var isAllSelected = this.props.selection.isAllSelected();
|
||
|
|
if (this.state.isAllSelected !== isAllSelected) {
|
||
|
|
this.setState({
|
||
|
|
isAllSelected: isAllSelected
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype._onColumnClick = function (column, ev) {
|
||
|
|
var onColumnClick = this.props.onColumnClick;
|
||
|
|
if (column.onColumnClick) {
|
||
|
|
column.onColumnClick(ev, column);
|
||
|
|
}
|
||
|
|
if (onColumnClick) {
|
||
|
|
onColumnClick(ev, column);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype._onColumnContextMenu = function (column, ev) {
|
||
|
|
var onColumnContextMenu = this.props.onColumnContextMenu;
|
||
|
|
if (column.onContextMenu) {
|
||
|
|
column.onColumnContextMenu(column, ev);
|
||
|
|
}
|
||
|
|
if (onColumnContextMenu) {
|
||
|
|
onColumnContextMenu(column, ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsHeader.prototype._onToggleCollapseAll = function () {
|
||
|
|
var onToggleCollapseAll = this.props.onToggleCollapseAll;
|
||
|
|
var newCollapsed = !this.state.isAllCollapsed;
|
||
|
|
this.setState({
|
||
|
|
isAllCollapsed: newCollapsed
|
||
|
|
});
|
||
|
|
if (onToggleCollapseAll) {
|
||
|
|
onToggleCollapseAll(newCollapsed);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return DetailsHeader;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
DetailsHeader.defaultProps = {
|
||
|
|
isSelectAllVisible: SelectAllVisibility.visible
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DetailsHeader.prototype, "_onSelectAllClicked", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DetailsHeader.prototype, "_onRootMouseDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DetailsHeader.prototype, "_onRootMouseMove", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DetailsHeader.prototype, "_onSizerMouseMove", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DetailsHeader.prototype, "_onSizerMouseUp", null);
|
||
|
|
exports.DetailsHeader = DetailsHeader;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 224 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(225));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 225 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(226));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 226 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(227);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Check = (function (_super) {
|
||
|
|
__extends(Check, _super);
|
||
|
|
function Check() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Check.prototype.shouldComponentUpdate = function (newProps) {
|
||
|
|
return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked;
|
||
|
|
};
|
||
|
|
Check.prototype.render = function () {
|
||
|
|
var _a = this.props, isChecked = _a.isChecked, checked = _a.checked;
|
||
|
|
isChecked = isChecked || checked;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Check', styles.root, isChecked && ('is-checked ' + styles.rootIsChecked)) },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Check-background', styles.background), iconName: 'fullCircleMask' }),
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Check-circle', styles.circle), iconName: 'circleRing' }),
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Check-check', styles.check), iconName: 'checkMark' })));
|
||
|
|
};
|
||
|
|
return Check;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Check.defaultProps = {
|
||
|
|
isChecked: false
|
||
|
|
};
|
||
|
|
exports.Check = Check;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 227 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_62ed7d7f',
|
||
|
|
rootIsChecked: 'rootIsChecked_62ed7d7f',
|
||
|
|
background: 'background_62ed7d7f',
|
||
|
|
circle: 'circle_62ed7d7f',
|
||
|
|
check: 'check_62ed7d7f',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_62ed7d7f{line-height:1;width:24px;height:24px;vertical-align:top;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rootIsChecked_62ed7d7f,.root_62ed7d7f:focus,.root_62ed7d7f:hover{opacity:1}.background_62ed7d7f,.check_62ed7d7f,.circle_62ed7d7f{position:absolute;height:24px;width:24px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:24px}.background_62ed7d7f{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.rootIsChecked_62ed7d7f .background_62ed7d7f{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.circle_62ed7d7f{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsChecked_62ed7d7f .circle_62ed7d7f{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.check_62ed7d7f{width:auto;height:auto;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";font-size:12px}.rootIsChecked_62ed7d7f .check_62ed7d7f{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:900}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 228 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(229);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var SPACER_WIDTH = 36;
|
||
|
|
exports.GroupSpacer = function (props) {
|
||
|
|
return props.count > 0 && (React.createElement("span", { className: Utilities_1.css('ms-GroupSpacer', styles.root), style: { width: props.count * SPACER_WIDTH } }));
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 229 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_e4cefdbe',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_e4cefdbe{display:inline-block}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 230 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_67d3f40a',
|
||
|
|
rootIsSelectAllHidden: 'rootIsSelectAllHidden_67d3f40a',
|
||
|
|
cell: 'cell_67d3f40a',
|
||
|
|
cellIsCheck: 'cellIsCheck_67d3f40a',
|
||
|
|
rootIsAllSelected: 'rootIsAllSelected_67d3f40a',
|
||
|
|
cellWrapper: 'cellWrapper_67d3f40a',
|
||
|
|
cellIsActionable: 'cellIsActionable_67d3f40a',
|
||
|
|
cellIsSizer: 'cellIsSizer_67d3f40a',
|
||
|
|
cellIsEmpty: 'cellIsEmpty_67d3f40a',
|
||
|
|
cellIsResizing: 'cellIsResizing_67d3f40a',
|
||
|
|
collapseButton: 'collapseButton_67d3f40a',
|
||
|
|
collapseButtonIsCollapsed: 'collapseButtonIsCollapsed_67d3f40a',
|
||
|
|
nearIcon: 'nearIcon_67d3f40a',
|
||
|
|
filterChevron: 'filterChevron_67d3f40a',
|
||
|
|
sizingOverlay: 'sizingOverlay_67d3f40a',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_67d3f40a{display:inline-block;min-width:100%;vertical-align:top;height:36px;line-height:36px;white-space:nowrap;padding-bottom:1px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_67d3f40a.rootIsSelectAllHidden_67d3f40a .cell_67d3f40a.cellIsCheck_67d3f40a{visibility:hidden}.cell_67d3f40a.cellIsCheck_67d3f40a .ms-Check-circle{opacity:0}.cell_67d3f40a.cellIsCheck_67d3f40a:focus .ms-Check-circle,.cell_67d3f40a.cellIsCheck_67d3f40a:hover .ms-Check-circle,.root_67d3f40a.rootIsAllSelected_67d3f40a .ms-Check-circle{opacity:1}.cellWrapper_67d3f40a{display:inline-block;position:relative}.cell_67d3f40a{font-size:12px;font-weight:400;background:0 0;color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";font-weight:400;position:relative;display:inline-block;box-sizing:border-box;padding:0 8px;border:none;line-height:inherit;margin:0;height:36px;vertical-align:top;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cell_67d3f40a::-moz-focus-inner{border:0}.cell_67d3f40a{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .cell_67d3f40a:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .cell_67d3f40a{text-align:left}html[dir=rtl] .cell_67d3f40a{text-align:right}html[dir=ltr] .cell_67d3f40a{text-align:left}html[dir=rtl] .cell_67d3f40a{text-align:right}.cell_67d3f40a.cellIsCheck_67d3f40a{position:relative;padding:6px;margin:0}.cell_67d3f40a.cellIsActionable_67d3f40a{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.cell_67d3f40a.cellIsActionable_67d3f40a:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.cell_67d3f40a.cellIsActionable_67d3f40a:active{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.cell_67d3f40a.cellIsSizer_67d3f40a{position:absolute;width:16px;cursor:ew-resize;bottom:0;top:0;height:inherit;background:0 0}html[dir=ltr] .cell_67d3f40a.cellIsSizer_67d3f40a{margin-left:-10px}html[dir=rtl] .cell_67d3f40a.cellIsSizer_67d3f40a{margin-right:-10px}.cell_67d3f40a.cellIsEmpty_67d3f40a{text-overflow:clip}.cell_67d3f40a.cellIsSizer_67d3f40a:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";opacity:0}.cell_67d3f40a.cellIsSizer_67d3f40a.cellIsResizing_67d3f40a:after,.cell_67d3f40a.cellIsSizer_67d3f40a:hover:after{opacity:1;transition:opacity .3s linear}.collapseButton_67d3f40a{text-align:center;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear;width:20px;outline:0}.collapseButton_67d3f40a.collapseButtonIsCollapsed_67d3f40a{-webkit-transform:rotate(0);transform:rotate(0)}.cell_67d3f40a .nearIcon_67d3f40a{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";opacity:1}html[dir=ltr] .cell_67d3f40a .nearIcon_67d3f40a{padding-right:4px}html[dir=rtl] .cell_67d3f40a .nearIcon_67d3f40a{padding-left:4px}.cell_67d3f40a .filterChevron_67d3f40a{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";vertical-align:middle}[dir=ltr] .cell_67d3f40a .filterChevron_67d3f40a{padding-left:4px}[dir=rtl] .cell_67d3f40a .filterChevron_67d3f40a{padding-right:4px}.sizingOverlay_67d3f40a{position:absolute;left:0;top:0;right:0;bottom:0;cursor:ew-resize;background:rgba(255,255,255,0)}html[dir=ltr] .cell_67d3f40a .collapseButton_67d3f40a{padding-right:0}html[d
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 231 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DetailsList_Props_1 = __webpack_require__(222);
|
||
|
|
var DetailsRowCheck_1 = __webpack_require__(232);
|
||
|
|
var GroupSpacer_1 = __webpack_require__(228);
|
||
|
|
var DetailsRowFields_1 = __webpack_require__(234);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var interfaces_1 = __webpack_require__(217);
|
||
|
|
var stylesImport = __webpack_require__(233);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
|
||
|
|
var DetailsRow = (function (_super) {
|
||
|
|
__extends(DetailsRow, _super);
|
||
|
|
function DetailsRow(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
selectionState: _this._getSelectionState(props),
|
||
|
|
columnMeasureInfo: null,
|
||
|
|
isDropping: false,
|
||
|
|
groupNestingDepth: props.groupNestingDepth
|
||
|
|
};
|
||
|
|
_this._hasSetFocus = false;
|
||
|
|
_this._droppingClassNames = '';
|
||
|
|
_this._updateDroppingState = _this._updateDroppingState.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DetailsRow.prototype.componentDidMount = function () {
|
||
|
|
var dragDropHelper = this.props.dragDropHelper;
|
||
|
|
if (dragDropHelper) {
|
||
|
|
this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions());
|
||
|
|
}
|
||
|
|
this._events.on(this.props.selection, interfaces_1.SELECTION_CHANGE, this._onSelectionChanged);
|
||
|
|
if (this.props.onDidMount && this.props.item) {
|
||
|
|
// If the item appears later, we should wait for it before calling this method.
|
||
|
|
this._hasMounted = true;
|
||
|
|
this.props.onDidMount(this);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsRow.prototype.componentDidUpdate = function (previousProps) {
|
||
|
|
var state = this.state;
|
||
|
|
var _a = this.props, item = _a.item, onDidMount = _a.onDidMount;
|
||
|
|
var columnMeasureInfo = state.columnMeasureInfo;
|
||
|
|
if (this.props.itemIndex !== previousProps.itemIndex ||
|
||
|
|
this.props.item !== previousProps.item ||
|
||
|
|
this.props.dragDropHelper !== previousProps.dragDropHelper) {
|
||
|
|
if (this._dragDropSubscription) {
|
||
|
|
this._dragDropSubscription.dispose();
|
||
|
|
delete this._dragDropSubscription;
|
||
|
|
}
|
||
|
|
if (this.props.dragDropHelper) {
|
||
|
|
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getRowDragDropOptions());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (columnMeasureInfo && columnMeasureInfo.index >= 0) {
|
||
|
|
var newWidth = this.refs.cellMeasurer.getBoundingClientRect().width;
|
||
|
|
columnMeasureInfo.onMeasureDone(newWidth);
|
||
|
|
this.setState({
|
||
|
|
columnMeasureInfo: null
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (item && onDidMount && !this._hasMounted) {
|
||
|
|
this._hasMounted = true;
|
||
|
|
onDidMount(this);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsRow.prototype.componentWillUnmount = function () {
|
||
|
|
var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount;
|
||
|
|
// Only call the onWillUnmount callback if we have an item.
|
||
|
|
if (onWillUnmount && item) {
|
||
|
|
onWillUnmount(this);
|
||
|
|
}
|
||
|
|
if (this._dragDropSubscription) {
|
||
|
|
this._dragDropSubscription.dispose();
|
||
|
|
delete this._dragDropSubscription;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsRow.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
this.setState({
|
||
|
|
selectionState: this._getSelectionState(newProps),
|
||
|
|
groupNestingDepth: newProps.groupNestingDepth
|
||
|
|
});
|
||
|
|
};
|
||
|
|
DetailsRow.prototype.render = function () {
|
||
|
|
var _a = this.props, columns = _a.columns, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, _b = _a.onRenderCheck, onRenderCheck = _b === void 0 ? this._onRenderCheck : _b, onRenderItemColumn = _a.onRenderItemColumn, selectionMode = _a.selectionMode, viewport = _a.viewport, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, checkButtonAriaLabel = _a.checkButtonAriaLabel, selection = _a.selection;
|
||
|
|
var _c = this.state, _d = _c.selectionState, isSelected = _d.isSelected, anySelected = _d.anySelected, columnMeasureInfo = _c.columnMeasureInfo, isDropping = _c.isDropping, groupNestingDepth = _c.groupNestingDepth;
|
||
|
|
var isDraggable = Boolean(dragDropEvents && dragDropEvents.canDrag && dragDropEvents.canDrag(item));
|
||
|
|
var droppingClassName = isDropping ? (this._droppingClassNames ? this._droppingClassNames : DEFAULT_DROPPING_CSS_CLASS) : '';
|
||
|
|
var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : null;
|
||
|
|
var canSelect = selection.canSelectItem(item);
|
||
|
|
var isContentUnselectable = selectionMode === interfaces_1.SelectionMode.multiple;
|
||
|
|
return (React.createElement("div", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { ref: 'root', role: 'row', "aria-label": ariaLabel, className: Utilities_1.css('ms-DetailsRow', Styling_1.AnimationClassNames.fadeIn400, styles.root, droppingClassName, (_e = {},
|
||
|
|
_e['is-contentUnselectable ' + styles.rootIsContentUnselectable] = isContentUnselectable,
|
||
|
|
_e['is-selected ' + styles.rootIsSelected] = isSelected,
|
||
|
|
_e['is-check-visible ' + styles.rootIsCheckVisible] = checkboxVisibility === DetailsList_Props_1.CheckboxVisibility.always,
|
||
|
|
_e)), "data-is-focusable": true, "data-selection-index": itemIndex, "data-item-index": itemIndex, "aria-rowindex": itemIndex, "data-is-draggable": isDraggable, draggable: isDraggable, "data-automationid": 'DetailsRow', style: { minWidth: viewport ? viewport.width : 0 }, "aria-selected": isSelected }),
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
|
||
|
|
(selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_Props_1.CheckboxVisibility.hidden) && (React.createElement("span", { role: 'gridcell' }, onRenderCheck({
|
||
|
|
isSelected: isSelected,
|
||
|
|
anySelected: anySelected,
|
||
|
|
ariaLabel: checkButtonAriaLabel,
|
||
|
|
canSelect: canSelect
|
||
|
|
}))),
|
||
|
|
GroupSpacer_1.GroupSpacer({ count: groupNestingDepth }),
|
||
|
|
item && (React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: columns, item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn })),
|
||
|
|
columnMeasureInfo && (React.createElement("span", { className: Utilities_1.css('ms-DetailsRow-cellMeasurer ms-DetailsRow-cell', styles.cellMeasurer, styles.cell), ref: 'cellMeasurer' },
|
||
|
|
React.createElement(DetailsRowFields_1.DetailsRowFields, { columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, onRenderItemColumn: onRenderItemColumn }))))));
|
||
|
|
var _e;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* measure cell at index. and call the call back with the measured cell width when finish measure
|
||
|
|
*
|
||
|
|
* @param {number} index (the cell index)
|
||
|
|
* @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
|
||
|
|
*/
|
||
|
|
DetailsRow.prototype.measureCell = function (index, onMeasureDone) {
|
||
|
|
var column = Utilities_1.assign({}, this.props.columns[index]);
|
||
|
|
column.minWidth = 0;
|
||
|
|
column.maxWidth = 999999;
|
||
|
|
delete column.calculatedWidth;
|
||
|
|
this.setState({
|
||
|
|
columnMeasureInfo: {
|
||
|
|
index: index,
|
||
|
|
column: column,
|
||
|
|
onMeasureDone: onMeasureDone
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
DetailsRow.prototype.focus = function () {
|
||
|
|
if (this.refs && this.refs.root) {
|
||
|
|
this.refs.root.tabIndex = 0;
|
||
|
|
this.refs.root.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsRow.prototype._onRenderCheck = function (props) {
|
||
|
|
return React.createElement(DetailsRowCheck_1.DetailsRowCheck, __assign({}, props));
|
||
|
|
};
|
||
|
|
DetailsRow.prototype._getSelectionState = function (props) {
|
||
|
|
var itemIndex = props.itemIndex, selection = props.selection;
|
||
|
|
return {
|
||
|
|
isSelected: selection.isIndexSelected(itemIndex),
|
||
|
|
anySelected: selection.getSelectedCount() > 0
|
||
|
|
};
|
||
|
|
};
|
||
|
|
DetailsRow.prototype._onSelectionChanged = function () {
|
||
|
|
var selectionState = this._getSelectionState(this.props);
|
||
|
|
if (!Utilities_1.shallowCompare(selectionState, this.state.selectionState)) {
|
||
|
|
this.setState({
|
||
|
|
selectionState: selectionState
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DetailsRow.prototype._getRowDragDropOptions = function () {
|
||
|
|
var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
|
||
|
|
var options = {
|
||
|
|
eventMap: eventsToRegister,
|
||
|
|
selectionIndex: itemIndex,
|
||
|
|
context: { data: item, index: itemIndex },
|
||
|
|
canDrag: dragDropEvents.canDrag,
|
||
|
|
canDrop: dragDropEvents.canDrop,
|
||
|
|
onDragStart: dragDropEvents.onDragStart,
|
||
|
|
updateDropState: this._updateDroppingState,
|
||
|
|
onDrop: dragDropEvents.onDrop,
|
||
|
|
onDragEnd: dragDropEvents.onDragEnd,
|
||
|
|
};
|
||
|
|
return options;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* update isDropping state based on the input value, which is used to change style during drag and drop
|
||
|
|
*
|
||
|
|
* when change to true, that means drag enter. we will add default dropping class name
|
||
|
|
* or the custom dropping class name (return result from onDragEnter) to the root elemet.
|
||
|
|
*
|
||
|
|
* when change to false, that means drag leave. we will remove the dropping class name from root element.
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {boolean} newValue (new isDropping state value)
|
||
|
|
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
|
||
|
|
*/
|
||
|
|
DetailsRow.prototype._updateDroppingState = function (newValue, event) {
|
||
|
|
var _a = this.state, selectionState = _a.selectionState, isDropping = _a.isDropping;
|
||
|
|
var _b = this.props, dragDropEvents = _b.dragDropEvents, item = _b.item;
|
||
|
|
if (!newValue) {
|
||
|
|
if (dragDropEvents.onDragLeave) {
|
||
|
|
dragDropEvents.onDragLeave(item, event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (dragDropEvents.onDragEnter) {
|
||
|
|
this._droppingClassNames = dragDropEvents.onDragEnter(item, event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (isDropping !== newValue) {
|
||
|
|
this.setState({ selectionState: selectionState, isDropping: newValue });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return DetailsRow;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DetailsRow = DetailsRow;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 232 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Check_1 = __webpack_require__(224);
|
||
|
|
var stylesImport = __webpack_require__(233);
|
||
|
|
var styles = stylesImport;
|
||
|
|
exports.DetailsRowCheck = function (props) {
|
||
|
|
var selected = props.isSelected || props.selected;
|
||
|
|
return (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-DetailsRow-check', styles.check, (_a = {},
|
||
|
|
_a[styles.checkDisabled] = !props.canSelect,
|
||
|
|
_a['ms-DetailsRow-check--isDisabled'] = !props.canSelect,
|
||
|
|
_a)), role: 'button', "aria-pressed": selected, "data-selection-toggle": true, "data-automationid": 'DetailsRowCheck', "aria-label": props.ariaLabel },
|
||
|
|
React.createElement(Check_1.Check, { checked: selected })));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 233 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_4b15dcc8',
|
||
|
|
rootIsSelected: 'rootIsSelected_4b15dcc8',
|
||
|
|
rootIsContentUnselectable: 'rootIsContentUnselectable_4b15dcc8',
|
||
|
|
cell: 'cell_4b15dcc8',
|
||
|
|
isMultiline: 'isMultiline_4b15dcc8',
|
||
|
|
fields: 'fields_4b15dcc8',
|
||
|
|
check: 'check_4b15dcc8',
|
||
|
|
checkDisabled: 'checkDisabled_4b15dcc8',
|
||
|
|
rootIsCheckVisible: 'rootIsCheckVisible_4b15dcc8',
|
||
|
|
cellMeasurer: 'cellMeasurer_4b15dcc8',
|
||
|
|
checkSpacer: 'checkSpacer_4b15dcc8',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_4b15dcc8{display:inline-block;min-width:100%;min-height:36px;margin:1px 0;vertical-align:top;white-space:nowrap;padding:0;box-sizing:border-box;background:0 0;border:none;vertical-align:top;line-height:16px}.root_4b15dcc8::-moz-focus-inner{border:0}.root_4b15dcc8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_4b15dcc8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}html[dir=ltr] .root_4b15dcc8{text-align:left}html[dir=rtl] .root_4b15dcc8{text-align:right}.root_4b15dcc8:hover{background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsSelected_4b15dcc8{background:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.rootIsSelected_4b15dcc8:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.rootIsContentUnselectable_4b15dcc8{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.cell_4b15dcc8{display:inline-block;position:relative;box-sizing:border-box;padding:10px 0;margin:0 8px;min-height:36px;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell_4b15dcc8>button{max-width:100%}.isMultiline_4b15dcc8{white-space:normal;word-break:break-word;text-overflow:clip}.fields_4b15dcc8{display:inline-block}.check_4b15dcc8{display:inline-block;cursor:default;padding:6px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;opacity:0}.check_4b15dcc8::-moz-focus-inner{border:0}.check_4b15dcc8{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_4b15dcc8:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.checkDisabled_4b15dcc8{visibility:hidden}.rootIsCheckVisible_4b15dcc8 .check_4b15dcc8,.rootIsSelected_4b15dcc8 .check_4b15dcc8,.root_4b15dcc8:hover .check_4b15dcc8{opacity:1}.cellMeasurer_4b15dcc8 .cell_4b15dcc8{overflow:visible;white-space:nowrap}.checkSpacer_4b15dcc8{display:inline-block;height:20px;width:20px}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 234 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(233);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DetailsRowFields = (function (_super) {
|
||
|
|
__extends(DetailsRowFields, _super);
|
||
|
|
function DetailsRowFields(props) {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
_this.state = _this._getState(props);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DetailsRowFields.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
this.setState(this._getState(newProps));
|
||
|
|
};
|
||
|
|
DetailsRowFields.prototype.render = function () {
|
||
|
|
var columns = this.props.columns;
|
||
|
|
var cellContent = this.state.cellContent;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DetailsRow-fields', styles.fields), "data-automationid": 'DetailsRowFields' }, columns.map(function (column, columnIndex) {
|
||
|
|
return (React.createElement("div", { key: columnIndex, role: column.isRowHeader ? 'rowheader' : 'gridcell', "aria-colindex": columnIndex, className: Utilities_1.css('ms-DetailsRow-cell', styles.cell, column.className, (_a = {
|
||
|
|
'is-multiline': column.isMultiline
|
||
|
|
},
|
||
|
|
_a[styles.isMultiline] = column.isMultiline,
|
||
|
|
_a)), style: { width: column.calculatedWidth }, "data-automationid": 'DetailsRowCell', "data-automation-key": column.key }, cellContent[columnIndex]));
|
||
|
|
var _a;
|
||
|
|
})));
|
||
|
|
};
|
||
|
|
DetailsRowFields.prototype._getState = function (props) {
|
||
|
|
var _this = this;
|
||
|
|
var item = props.item, itemIndex = props.itemIndex, onRenderItemColumn = props.onRenderItemColumn;
|
||
|
|
return {
|
||
|
|
cellContent: props.columns.map(function (column) {
|
||
|
|
var cellContent;
|
||
|
|
try {
|
||
|
|
var render = column.onRender || onRenderItemColumn;
|
||
|
|
cellContent = render ? render(item, itemIndex, column) : _this._getCellText(item, column);
|
||
|
|
}
|
||
|
|
catch (e) { }
|
||
|
|
return cellContent;
|
||
|
|
})
|
||
|
|
};
|
||
|
|
};
|
||
|
|
DetailsRowFields.prototype._getCellText = function (item, column) {
|
||
|
|
var value = (item && column && column.fieldName) ? item[column.fieldName] : '';
|
||
|
|
if (value === null || value === undefined) {
|
||
|
|
value = '';
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
};
|
||
|
|
return DetailsRowFields;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DetailsRowFields = DetailsRowFields;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 235 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(236));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 236 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(237));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 237 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var GroupedListSection_1 = __webpack_require__(238);
|
||
|
|
var List_1 = __webpack_require__(248);
|
||
|
|
var index_1 = __webpack_require__(216);
|
||
|
|
var stylesImport = __webpack_require__(251);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var GroupedList = (function (_super) {
|
||
|
|
__extends(GroupedList, _super);
|
||
|
|
function GroupedList(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._isSomeGroupExpanded = _this._computeIsSomeGroupExpanded(props.groups);
|
||
|
|
_this.state = {
|
||
|
|
lastWidth: 0,
|
||
|
|
groups: props.groups
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
GroupedList.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
var _a = this.props, groups = _a.groups, selectionMode = _a.selectionMode;
|
||
|
|
var shouldForceUpdates = false;
|
||
|
|
if (newProps.groups !== groups) {
|
||
|
|
this.setState({ groups: newProps.groups });
|
||
|
|
shouldForceUpdates = true;
|
||
|
|
}
|
||
|
|
if (newProps.selectionMode !== selectionMode) {
|
||
|
|
shouldForceUpdates = true;
|
||
|
|
}
|
||
|
|
if (shouldForceUpdates) {
|
||
|
|
this._forceListUpdates();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedList.prototype.render = function () {
|
||
|
|
var className = this.props.className;
|
||
|
|
var groups = this.state.groups;
|
||
|
|
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-GroupedList', styles.root, className), "data-automationid": 'GroupedList', "data-is-scrollable": 'false', role: 'grid' }, !groups ?
|
||
|
|
this._renderGroup(null, 0) : (React.createElement(List_1.List, { ref: 'list', items: groups, onRenderCell: this._renderGroup, getItemCountForPage: function () { return 1; } }))));
|
||
|
|
};
|
||
|
|
GroupedList.prototype.forceUpdate = function () {
|
||
|
|
_super.prototype.forceUpdate.call(this);
|
||
|
|
this._forceListUpdates();
|
||
|
|
};
|
||
|
|
GroupedList.prototype.toggleCollapseAll = function (allCollapsed) {
|
||
|
|
var groups = this.state.groups;
|
||
|
|
var groupProps = this.props.groupProps;
|
||
|
|
var onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
|
||
|
|
if (groups) {
|
||
|
|
if (onToggleCollapseAll) {
|
||
|
|
onToggleCollapseAll(allCollapsed);
|
||
|
|
}
|
||
|
|
for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) {
|
||
|
|
groups[groupIndex].isCollapsed = allCollapsed;
|
||
|
|
}
|
||
|
|
this._updateIsSomeGroupExpanded();
|
||
|
|
this.forceUpdate();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedList.prototype._renderGroup = function (group, groupIndex) {
|
||
|
|
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, groupProps = _a.groupProps, items = _a.items, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selectionMode = _a.selectionMode, selection = _a.selection, viewport = _a.viewport;
|
||
|
|
// override group header/footer props as needed
|
||
|
|
var dividerProps = {
|
||
|
|
onToggleSelectGroup: this._onToggleSelectGroup,
|
||
|
|
onToggleCollapse: this._onToggleCollapse,
|
||
|
|
onToggleSummarize: this._onToggleSummarize
|
||
|
|
};
|
||
|
|
var headerProps = Utilities_1.assign({}, groupProps.headerProps, dividerProps);
|
||
|
|
var footerProps = Utilities_1.assign({}, groupProps.footerProps, dividerProps);
|
||
|
|
var groupNestingDepth = this._getGroupNestingDepth();
|
||
|
|
return (!group || group.count > 0) ? (React.createElement(GroupedListSection_1.GroupedListSection, { ref: 'group_' + groupIndex, key: this._getGroupKey(group, groupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: groupProps && groupProps.getGroupItemLimit, group: group, groupIndex: groupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, listProps: listProps, items: items, onRenderCell: onRenderCell, onRenderGroupHeader: groupProps.onRenderHeader, onRenderGroupFooter: groupProps.onRenderFooter, selectionMode: selectionMode, selection: selection, viewport: viewport })) : null;
|
||
|
|
};
|
||
|
|
GroupedList.prototype._getGroupKey = function (group, index) {
|
||
|
|
return 'group-' + ((group && group.key) ? group.key : String(index));
|
||
|
|
};
|
||
|
|
GroupedList.prototype._getGroupNestingDepth = function () {
|
||
|
|
var groups = this.state.groups;
|
||
|
|
var level = 0;
|
||
|
|
var groupsInLevel = groups;
|
||
|
|
while (groupsInLevel && groupsInLevel.length > 0) {
|
||
|
|
level++;
|
||
|
|
groupsInLevel = groupsInLevel[0].children;
|
||
|
|
}
|
||
|
|
return level;
|
||
|
|
};
|
||
|
|
GroupedList.prototype._onToggleCollapse = function (group) {
|
||
|
|
var groupProps = this.props.groupProps;
|
||
|
|
var onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
|
||
|
|
if (group) {
|
||
|
|
if (onToggleCollapse) {
|
||
|
|
onToggleCollapse(group);
|
||
|
|
}
|
||
|
|
group.isCollapsed = !group.isCollapsed;
|
||
|
|
this._updateIsSomeGroupExpanded();
|
||
|
|
this.forceUpdate();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedList.prototype._onToggleSelectGroup = function (group) {
|
||
|
|
if (group) {
|
||
|
|
this.props.selection.toggleRangeSelected(group.startIndex, group.count);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedList.prototype._forceListUpdates = function (groups) {
|
||
|
|
groups = groups || this.state.groups;
|
||
|
|
var groupCount = groups ? groups.length : 1;
|
||
|
|
if (this.refs.list) {
|
||
|
|
this.refs.list.forceUpdate();
|
||
|
|
for (var i = 0; i < groupCount; i++) {
|
||
|
|
var group = this.refs.list.refs['group_' + String(i)];
|
||
|
|
if (group) {
|
||
|
|
group.forceListUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var group = this.refs['group_' + String(0)];
|
||
|
|
if (group) {
|
||
|
|
group.forceListUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedList.prototype._onToggleSummarize = function (group) {
|
||
|
|
var groupProps = this.props.groupProps;
|
||
|
|
var onToggleSummarize = groupProps && groupProps.footerProps && groupProps.footerProps.onToggleSummarize;
|
||
|
|
if (onToggleSummarize) {
|
||
|
|
onToggleSummarize(group);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (group) {
|
||
|
|
group.isShowingAll = !group.isShowingAll;
|
||
|
|
}
|
||
|
|
this.forceUpdate();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedList.prototype._computeIsSomeGroupExpanded = function (groups) {
|
||
|
|
var _this = this;
|
||
|
|
return groups && groups.some(function (group) { return group.children ? _this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed; });
|
||
|
|
};
|
||
|
|
GroupedList.prototype._updateIsSomeGroupExpanded = function () {
|
||
|
|
var groups = this.state.groups;
|
||
|
|
var onGroupExpandStateChanged = this.props.onGroupExpandStateChanged;
|
||
|
|
var newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);
|
||
|
|
if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) {
|
||
|
|
if (onGroupExpandStateChanged) {
|
||
|
|
onGroupExpandStateChanged(newIsSomeGroupExpanded);
|
||
|
|
}
|
||
|
|
this._isSomeGroupExpanded = newIsSomeGroupExpanded;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return GroupedList;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
GroupedList.defaultProps = {
|
||
|
|
selectionMode: index_1.SelectionMode.multiple,
|
||
|
|
isHeaderVisible: true,
|
||
|
|
groupProps: {}
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedList.prototype, "_renderGroup", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedList.prototype, "_onToggleCollapse", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedList.prototype, "_onToggleSelectGroup", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedList.prototype, "_onToggleSummarize", null);
|
||
|
|
exports.GroupedList = GroupedList;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 238 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var index_1 = __webpack_require__(216);
|
||
|
|
var GroupFooter_1 = __webpack_require__(239);
|
||
|
|
var GroupHeader_1 = __webpack_require__(241);
|
||
|
|
var List_1 = __webpack_require__(248);
|
||
|
|
var Utilities_2 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(251);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
|
||
|
|
var GroupedListSection = (function (_super) {
|
||
|
|
__extends(GroupedListSection, _super);
|
||
|
|
function GroupedListSection(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
var selection = props.selection, group = props.group;
|
||
|
|
_this._subGroups = {};
|
||
|
|
_this.state = {
|
||
|
|
isDropping: false,
|
||
|
|
isSelected: (selection && group) ? selection.isRangeSelected(group.startIndex, group.count) : false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
GroupedListSection.prototype.componentDidMount = function () {
|
||
|
|
var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection;
|
||
|
|
if (dragDropHelper) {
|
||
|
|
this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
|
||
|
|
}
|
||
|
|
if (selection) {
|
||
|
|
this._events.on(selection, index_1.SELECTION_CHANGE, this._onSelectionChange);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype.componentWillUnmount = function () {
|
||
|
|
if (this._dragDropSubscription) {
|
||
|
|
this._dragDropSubscription.dispose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype.componentDidUpdate = function (previousProps) {
|
||
|
|
if (this.props.group !== previousProps.group ||
|
||
|
|
this.props.groupIndex !== previousProps.groupIndex ||
|
||
|
|
this.props.dragDropHelper !== previousProps.dragDropHelper) {
|
||
|
|
if (this._dragDropSubscription) {
|
||
|
|
this._dragDropSubscription.dispose();
|
||
|
|
delete this._dragDropSubscription;
|
||
|
|
}
|
||
|
|
if (this.props.dragDropHelper) {
|
||
|
|
this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype.render = function () {
|
||
|
|
var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupFooter, onRenderGroupFooter = _c === void 0 ? this._onRenderGroupFooter : _c;
|
||
|
|
var isSelected = this.state.isSelected;
|
||
|
|
var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
|
||
|
|
var isFooterVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll &&
|
||
|
|
(group.count > renderCount || group.hasMoreData);
|
||
|
|
var hasNestedGroups = group && group.children && group.children.length > 0;
|
||
|
|
var dividerProps = {
|
||
|
|
group: group,
|
||
|
|
groupIndex: groupIndex,
|
||
|
|
groupLevel: group ? group.level : 0,
|
||
|
|
isSelected: isSelected,
|
||
|
|
viewport: viewport,
|
||
|
|
selectionMode: selectionMode
|
||
|
|
};
|
||
|
|
var groupHeaderProps = Utilities_2.assign({}, headerProps, dividerProps);
|
||
|
|
var groupFooterProps = Utilities_2.assign({}, footerProps, dividerProps);
|
||
|
|
return (React.createElement("div", { ref: 'root', className: Utilities_2.css('ms-GroupedList-group', styles.group, this._getDroppingClassName()) },
|
||
|
|
onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader),
|
||
|
|
group && group.isCollapsed ?
|
||
|
|
null :
|
||
|
|
(hasNestedGroups ?
|
||
|
|
(React.createElement(List_1.List, { ref: 'list', items: group.children, onRenderCell: this._renderSubGroup, getItemCountForPage: function () { return 1; } })) :
|
||
|
|
this._onRenderGroup(renderCount)),
|
||
|
|
isFooterVisible && onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter)));
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype.forceUpdate = function () {
|
||
|
|
_super.prototype.forceUpdate.call(this);
|
||
|
|
this.forceListUpdate();
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype.forceListUpdate = function () {
|
||
|
|
var group = this.props.group;
|
||
|
|
if (this.refs.list) {
|
||
|
|
this.refs.list.forceUpdate();
|
||
|
|
if (group && group.children && group.children.length > 0) {
|
||
|
|
var subGroupCount = group.children.length;
|
||
|
|
for (var i = 0; i < subGroupCount; i++) {
|
||
|
|
var subGroup = this.refs.list.refs['subGroup_' + String(i)];
|
||
|
|
if (subGroup) {
|
||
|
|
subGroup.forceListUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var subGroup = this.refs['subGroup_' + String(0)];
|
||
|
|
if (subGroup) {
|
||
|
|
subGroup.forceListUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype._onRenderGroupHeader = function (props) {
|
||
|
|
return React.createElement(GroupHeader_1.GroupHeader, __assign({}, props));
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype._onRenderGroupFooter = function (props) {
|
||
|
|
return React.createElement(GroupFooter_1.GroupFooter, __assign({}, props));
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype._onSelectionChange = function () {
|
||
|
|
var _a = this.props, group = _a.group, selection = _a.selection;
|
||
|
|
var isSelected = selection.isRangeSelected(group.startIndex, group.count);
|
||
|
|
if (isSelected !== this.state.isSelected) {
|
||
|
|
this.setState({ isSelected: isSelected });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype._onRenderGroup = function (renderCount) {
|
||
|
|
var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth;
|
||
|
|
var count = group ? group.count : items.length;
|
||
|
|
var startIndex = group ? group.startIndex : 0;
|
||
|
|
return (React.createElement(List_1.List, __assign({ items: items, onRenderCell: function (item, itemIndex) { return onRenderCell(groupNestingDepth, item, itemIndex); }, ref: 'list', renderCount: Math.min(count, renderCount), startIndex: startIndex }, listProps)));
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype._renderSubGroup = function (subGroup, subGroupIndex) {
|
||
|
|
var _a = this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, items = _a.items, headerProps = _a.headerProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupFooter = _a.onRenderGroupFooter;
|
||
|
|
return (!subGroup || subGroup.count > 0) ? (React.createElement(GroupedListSection, { ref: 'subGroup_' + subGroupIndex, key: this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: groupNestingDepth, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupFooter: onRenderGroupFooter })) : null;
|
||
|
|
};
|
||
|
|
GroupedListSection.prototype._getGroupKey = function (group, index) {
|
||
|
|
return 'group-' + ((group && group.key) ? group.key : String(group.level) + String(index));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* collect all the data we need to enable drag/drop for a group
|
||
|
|
*/
|
||
|
|
GroupedListSection.prototype._getGroupDragDropOptions = function () {
|
||
|
|
var _a = this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;
|
||
|
|
var options = {
|
||
|
|
eventMap: eventsToRegister,
|
||
|
|
selectionIndex: -1,
|
||
|
|
context: { data: group, index: groupIndex, isGroup: true },
|
||
|
|
canDrag: function () { return false; },
|
||
|
|
canDrop: dragDropEvents.canDrop,
|
||
|
|
onDragStart: null,
|
||
|
|
updateDropState: this._updateDroppingState
|
||
|
|
};
|
||
|
|
return options;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* update groupIsDropping state based on the input value, which is used to change style during drag and drop
|
||
|
|
*
|
||
|
|
* @private
|
||
|
|
* @param {boolean} newValue (new isDropping state value)
|
||
|
|
* @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
|
||
|
|
*/
|
||
|
|
GroupedListSection.prototype._updateDroppingState = function (newIsDropping, event) {
|
||
|
|
var isDropping = this.state.isDropping;
|
||
|
|
var dragDropEvents = this.props.dragDropEvents;
|
||
|
|
if (!isDropping) {
|
||
|
|
if (dragDropEvents.onDragLeave) {
|
||
|
|
dragDropEvents.onDragLeave(event, null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (dragDropEvents.onDragEnter) {
|
||
|
|
dragDropEvents.onDragEnter(event, null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (isDropping !== newIsDropping) {
|
||
|
|
this.setState({ isDropping: newIsDropping });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* get the correct css class to reflect the dropping state for a given group
|
||
|
|
*
|
||
|
|
* If the group is the current drop target, return the default dropping class name
|
||
|
|
* Otherwise, return '';
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
GroupedListSection.prototype._getDroppingClassName = function () {
|
||
|
|
var isDropping = this.state.isDropping;
|
||
|
|
var group = this.props.group;
|
||
|
|
isDropping = !!(group && isDropping);
|
||
|
|
return Utilities_2.css(isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && styles.groupIsDropping);
|
||
|
|
};
|
||
|
|
return GroupedListSection;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedListSection.prototype, "_onRenderGroupHeader", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedListSection.prototype, "_onRenderGroupFooter", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedListSection.prototype, "_renderSubGroup", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedListSection.prototype, "_getGroupDragDropOptions", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupedListSection.prototype, "_updateDroppingState", null);
|
||
|
|
exports.GroupedListSection = GroupedListSection;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 239 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Link_1 = __webpack_require__(150);
|
||
|
|
var GroupSpacer_1 = __webpack_require__(228);
|
||
|
|
var stylesImport = __webpack_require__(240);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var GroupFooter = (function (_super) {
|
||
|
|
__extends(GroupFooter, _super);
|
||
|
|
function GroupFooter() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
GroupFooter.prototype.render = function () {
|
||
|
|
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, showAllLinkText = _a.showAllLinkText;
|
||
|
|
return group && (React.createElement("div", { className: Utilities_1.css('ms-groupFooter', styles.root) },
|
||
|
|
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
|
||
|
|
React.createElement(Link_1.Link, { onClick: this._onSummarizeClick }, showAllLinkText)));
|
||
|
|
};
|
||
|
|
GroupFooter.prototype._onSummarizeClick = function (ev) {
|
||
|
|
this.props.onToggleSummarize(this.props.group);
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
return GroupFooter;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupFooter.prototype, "_onSummarizeClick", null);
|
||
|
|
exports.GroupFooter = GroupFooter;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 240 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_22983be9',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_22983be9{position:relative;padding:10px 84px;cursor:pointer}.root_22983be9 .ms-Link{font-size:12px}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 241 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var index_1 = __webpack_require__(216);
|
||
|
|
var Check_1 = __webpack_require__(224);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var GroupSpacer_1 = __webpack_require__(228);
|
||
|
|
var Spinner_1 = __webpack_require__(242);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var stylesImport = __webpack_require__(247);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var GroupHeader = (function (_super) {
|
||
|
|
__extends(GroupHeader, _super);
|
||
|
|
function GroupHeader(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isCollapsed: _this.props.group && _this.props.group.isCollapsed,
|
||
|
|
isLoadingVisible: false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
GroupHeader.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.group) {
|
||
|
|
var newCollapsed = newProps.group.isCollapsed;
|
||
|
|
var isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
|
||
|
|
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
|
||
|
|
this.setState({
|
||
|
|
isCollapsed: newCollapsed,
|
||
|
|
isLoadingVisible: newLoadingVisible
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
GroupHeader.prototype.render = function () {
|
||
|
|
var _a = this.props, group = _a.group, groupLevel = _a.groupLevel, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, isSelected = _a.isSelected, selected = _a.selected, isCollapsedGroupSelectVisible = _a.isCollapsedGroupSelectVisible;
|
||
|
|
var _b = this.state, isCollapsed = _b.isCollapsed, isLoadingVisible = _b.isLoadingVisible;
|
||
|
|
if (isCollapsedGroupSelectVisible === undefined) {
|
||
|
|
isCollapsedGroupSelectVisible = true;
|
||
|
|
}
|
||
|
|
var canSelectGroup = selectionMode === index_1.SelectionMode.multiple;
|
||
|
|
var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
|
||
|
|
var currentlySelected = isSelected || selected;
|
||
|
|
return group && (React.createElement("div", { className: Utilities_1.css('ms-GroupHeader', styles.root, (_c = {},
|
||
|
|
_c['is-selected ' + styles.rootIsSelected] = currentlySelected,
|
||
|
|
_c)), style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, "aria-label": group.ariaLabel || group.name, "data-is-focusable": true },
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
|
||
|
|
isSelectionCheckVisible ? (React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-check', styles.check), "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick },
|
||
|
|
React.createElement(Check_1.Check, { checked: currentlySelected }))) : (selectionMode !== index_1.SelectionMode.none ? GroupSpacer_1.GroupSpacer({ count: 1 }) : null),
|
||
|
|
GroupSpacer_1.GroupSpacer({ count: groupLevel }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-dropIcon', styles.dropIcon) },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'Tag' })),
|
||
|
|
React.createElement("button", { type: 'button', className: Utilities_1.css('ms-GroupHeader-expand', styles.expand), onClick: this._onToggleCollapse },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css(isCollapsed && ('is-collapsed ' + styles.expandIsCollapsed)), iconName: 'ChevronDown' })),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-title', styles.title) },
|
||
|
|
React.createElement("span", null, group.name),
|
||
|
|
React.createElement("span", null,
|
||
|
|
"(",
|
||
|
|
group.count,
|
||
|
|
group.hasMoreData && '+',
|
||
|
|
")")),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-GroupHeader-loading', styles.loading, isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)) },
|
||
|
|
React.createElement(Spinner_1.Spinner, { label: loadingText })))));
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
GroupHeader.prototype._onToggleCollapse = function (ev) {
|
||
|
|
var _a = this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;
|
||
|
|
var isCollapsed = this.state.isCollapsed;
|
||
|
|
var newCollapsed = !isCollapsed;
|
||
|
|
var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);
|
||
|
|
this.setState({
|
||
|
|
isCollapsed: newCollapsed,
|
||
|
|
isLoadingVisible: newLoadingVisible
|
||
|
|
});
|
||
|
|
if (onToggleCollapse) {
|
||
|
|
onToggleCollapse(group);
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
GroupHeader.prototype._onToggleSelectGroupClick = function (ev) {
|
||
|
|
var _a = this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;
|
||
|
|
if (onToggleSelectGroup) {
|
||
|
|
onToggleSelectGroup(group);
|
||
|
|
}
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
GroupHeader.prototype._onHeaderClick = function () {
|
||
|
|
var _a = this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;
|
||
|
|
if (onGroupHeaderClick) {
|
||
|
|
onGroupHeaderClick(group);
|
||
|
|
}
|
||
|
|
else if (onToggleSelectGroup) {
|
||
|
|
onToggleSelectGroup(group);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return GroupHeader;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupHeader.prototype, "_onToggleCollapse", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupHeader.prototype, "_onToggleSelectGroupClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], GroupHeader.prototype, "_onHeaderClick", null);
|
||
|
|
exports.GroupHeader = GroupHeader;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 242 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(243));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 243 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(244));
|
||
|
|
__export(__webpack_require__(245));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 244 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Spinner_Props_1 = __webpack_require__(245);
|
||
|
|
var stylesImport = __webpack_require__(246);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Spinner = (function (_super) {
|
||
|
|
__extends(Spinner, _super);
|
||
|
|
function Spinner() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Spinner.prototype.render = function () {
|
||
|
|
var _a = this.props, type = _a.type, size = _a.size, label = _a.label, className = _a.className, ariaLive = _a.ariaLive, ariaLabel = _a.ariaLabel; // TODO remove deprecated type property at >= 2.0.0
|
||
|
|
var statusMessage = ariaLabel || label;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Spinner', styles.root, className) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Spinner-circle', styles.circle, (_b = {},
|
||
|
|
_b['ms-Spinner--xSmall ' + styles.circleIsXSmall] = size === Spinner_Props_1.SpinnerSize.xSmall,
|
||
|
|
_b['ms-Spinner--small ' + styles.circleIsSmall] = size === Spinner_Props_1.SpinnerSize.small,
|
||
|
|
_b['ms-Spinner--medium ' + styles.circleIsMedium] = size === Spinner_Props_1.SpinnerSize.medium,
|
||
|
|
_b['ms-Spinner--large ' + styles.circleIsLarge] = size === Spinner_Props_1.SpinnerSize.large,
|
||
|
|
_b['ms-Spinner--normal ' + styles.circleIsTypeMedium] = type === Spinner_Props_1.SpinnerType.normal,
|
||
|
|
_b['ms-Spinner--large ' + styles.circleIsTypeLarge] = type === Spinner_Props_1.SpinnerType.large // TODO remove deprecated value at >= 2.0.0
|
||
|
|
,
|
||
|
|
_b)) }),
|
||
|
|
label && React.createElement("div", { className: Utilities_1.css('ms-Spinner-label', styles.label) }, label),
|
||
|
|
statusMessage &&
|
||
|
|
React.createElement("div", { role: 'status', "aria-live": this.props.ariaLive },
|
||
|
|
React.createElement(Utilities_1.DelayedRender, null,
|
||
|
|
React.createElement("div", { className: styles.screenReaderOnly }, statusMessage)))));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
return Spinner;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Spinner.defaultProps = {
|
||
|
|
size: Spinner_Props_1.SpinnerSize.medium,
|
||
|
|
ariaLive: 'polite'
|
||
|
|
};
|
||
|
|
exports.Spinner = Spinner;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 245 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var SpinnerSize;
|
||
|
|
(function (SpinnerSize) {
|
||
|
|
/**
|
||
|
|
* 12px Spinner diameter
|
||
|
|
*/
|
||
|
|
SpinnerSize[SpinnerSize["xSmall"] = 0] = "xSmall";
|
||
|
|
/**
|
||
|
|
* 16px Spinner diameter
|
||
|
|
*/
|
||
|
|
SpinnerSize[SpinnerSize["small"] = 1] = "small";
|
||
|
|
/**
|
||
|
|
* 20px Spinner diameter
|
||
|
|
*/
|
||
|
|
SpinnerSize[SpinnerSize["medium"] = 2] = "medium";
|
||
|
|
/**
|
||
|
|
* 28px Spinner diameter
|
||
|
|
*/
|
||
|
|
SpinnerSize[SpinnerSize["large"] = 3] = "large";
|
||
|
|
})(SpinnerSize = exports.SpinnerSize || (exports.SpinnerSize = {}));
|
||
|
|
/**
|
||
|
|
* Deprecated at v2.0.0, use 'SpinnerSize' instead.
|
||
|
|
* @deprecated
|
||
|
|
*/
|
||
|
|
var SpinnerType;
|
||
|
|
(function (SpinnerType) {
|
||
|
|
/**
|
||
|
|
* Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.medium instead.
|
||
|
|
*/
|
||
|
|
SpinnerType[SpinnerType["normal"] = 0] = "normal";
|
||
|
|
/**
|
||
|
|
* Deprecated and will be removed at >= 2.0.0. Use SpinnerSize.large instead.
|
||
|
|
*/
|
||
|
|
SpinnerType[SpinnerType["large"] = 1] = "large";
|
||
|
|
})(SpinnerType = exports.SpinnerType || (exports.SpinnerType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 246 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_43227b55',
|
||
|
|
circle: 'circle_43227b55',
|
||
|
|
spinAnimation: 'spinAnimation_43227b55',
|
||
|
|
circleIsXSmall: 'circleIsXSmall_43227b55',
|
||
|
|
circleIsSmall: 'circleIsSmall_43227b55',
|
||
|
|
circleIsTypeMedium: 'circleIsTypeMedium_43227b55',
|
||
|
|
circleIsMedium: 'circleIsMedium_43227b55',
|
||
|
|
circleIsTypeLarge: 'circleIsTypeLarge_43227b55',
|
||
|
|
circleIsLarge: 'circleIsLarge_43227b55',
|
||
|
|
label: 'label_43227b55',
|
||
|
|
screenReaderOnly: 'screenReaderOnly_43227b55',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": "@-webkit-keyframes spinAnimation_43227b55{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinAnimation_43227b55{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.root_43227b55>.circle_43227b55{margin:auto;box-sizing:border-box;border-radius:50%;width:100%;height:100%;border:1.5px solid " }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": ";border-top-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";-webkit-animation:spinAnimation_43227b55 1.3s infinite cubic-bezier(.53,.21,.29,.67);animation:spinAnimation_43227b55 1.3s infinite cubic-bezier(.53,.21,.29,.67)}.root_43227b55>.circle_43227b55.circleIsXSmall_43227b55{width:12px;height:12px}.root_43227b55>.circle_43227b55.circleIsSmall_43227b55{width:16px;height:16px}.root_43227b55>.circle_43227b55.circleIsMedium_43227b55,.root_43227b55>.circle_43227b55.circleIsTypeMedium_43227b55{width:20px;height:20px}.root_43227b55>.circle_43227b55.circleIsLarge_43227b55,.root_43227b55>.circle_43227b55.circleIsTypeLarge_43227b55{width:28px;height:28px}.root_43227b55 .label_43227b55{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";margin-top:10px;text-align:center}.root_43227b55 .screenReaderOnly_43227b55{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media screen and (-ms-high-contrast:active){.root_43227b55>.circle_43227b55{border-top-style:none}}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 247 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_c6cb32ae',
|
||
|
|
rootIsSelected: 'rootIsSelected_c6cb32ae',
|
||
|
|
check: 'check_c6cb32ae',
|
||
|
|
expand: 'expand_c6cb32ae',
|
||
|
|
title: 'title_c6cb32ae',
|
||
|
|
expandIsCollapsed: 'expandIsCollapsed_c6cb32ae',
|
||
|
|
loading: 'loading_c6cb32ae',
|
||
|
|
loadingIsVisible: 'loadingIsVisible_c6cb32ae',
|
||
|
|
dropIcon: 'dropIcon_c6cb32ae',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_c6cb32ae{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_c6cb32ae::-moz-focus-inner{border:0}.root_c6cb32ae{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_c6cb32ae:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.root_c6cb32ae:hover{background:" }, { "theme": "themeLighterAlt", "defaultValue": "#eff6fc" }, { "rawString": "}.root_c6cb32ae.rootIsSelected_c6cb32ae{background:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_c6cb32ae.rootIsSelected_c6cb32ae:hover{background:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.check_c6cb32ae,.expand_c6cb32ae{display:inline-block;cursor:default;padding:6px;-webkit-transform:translateY(50%);transform:translateY(50%);margin-top:-12px;box-sizing:border-box;vertical-align:top;background:0 0;border:none;font-size:12px;top:4px}.check_c6cb32ae::-moz-focus-inner,.expand_c6cb32ae::-moz-focus-inner{border:0}.check_c6cb32ae,.expand_c6cb32ae{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .check_c6cb32ae:focus:after,.ms-Fabric.is-focusVisible .expand_c6cb32ae:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.check_c6cb32ae{opacity:0;margin-top:-10px}.check_c6cb32ae:focus{opacity:1}.root_c6cb32ae.rootIsSelected_c6cb32ae .check_c6cb32ae,.root_c6cb32ae:hover .check_c6cb32ae{opacity:1}.title_c6cb32ae{font-size:21px;font-weight:100;padding:14px 6px;display:inline-block;cursor:pointer;outline:0}.expand_c6cb32ae{width:36px;height:40px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.expand_c6cb32ae .ms-Icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}.expand_c6cb32ae .ms-Icon.expandIsCollapsed_c6cb32ae{-webkit-transform:rotate(0);transform:rotate(0)}.loading_c6cb32ae{display:inline-block;visibility:hidden;opacity:0;padding:0 16px;vertical-align:middle;transition:visibility 367ms,opacity 367ms}.loading_c6cb32ae.loadingIsVisible_c6cb32ae{visibility:visible;opacity:1}.dropIcon_c6cb32ae{display:inline-block;position:relative;top:-16px;font-size:20px;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";transition:opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1);transition:transform 267ms cubic-bezier(.6,-.28,.735,.045),opacity 467ms cubic-bezier(.39,.575,.565,1),-webkit-transform 267ms cubic-bezier(.6,-.28,.735,.045);opacity:0;-webkit-transform:rotate(.2deg) scale(.65);transform:rotate(.2deg) scale(.65);-webkit-transform-origin:10px 10px;transform-origin:10px 10px}[dir=ltr] .dropIcon_c6cb32ae{left:-26px}[dir=rtl] .dropIcon_c6cb32ae{right:-26px}.dropIcon_c6cb32ae .ms-Icon--Tag{position:absolute}.ms-GroupedList-group.is-dropping>.root_c6cb32ae .dropIcon_c6cb32ae{transition:opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1);transition:transform 467ms cubic-bezier(.075,.82,.165,1),opacity 167ms cubic-bezier(.39,.575,.565,1),-webkit-transform 467ms cubic-bezier(.075,.82,.165,1);transition-delay:367ms;opacity:1;-webkit-transform:rotate(.2deg) scale(1);transform:rotate(.2deg) scale(1)}.ms-GroupedList-group.is-dropping .check_c6cb32ae{opacity:0}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 248 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(249));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 249 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(250));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 250 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var RESIZE_DELAY = 16;
|
||
|
|
var MIN_SCROLL_UPDATE_DELAY = 100;
|
||
|
|
var MAX_SCROLL_UPDATE_DELAY = 500;
|
||
|
|
var IDLE_DEBOUNCE_DELAY = 200;
|
||
|
|
var DEFAULT_ITEMS_PER_PAGE = 10;
|
||
|
|
var DEFAULT_PAGE_HEIGHT = 30;
|
||
|
|
var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
|
||
|
|
var DEFAULT_RENDERED_WINDOWS_AHEAD = 2;
|
||
|
|
var EMPTY_RECT = {
|
||
|
|
top: -1,
|
||
|
|
bottom: -1,
|
||
|
|
left: -1,
|
||
|
|
right: -1,
|
||
|
|
width: 0,
|
||
|
|
height: 0
|
||
|
|
};
|
||
|
|
// Naming expensive measures so that they're named in profiles.
|
||
|
|
var _measurePageRect = function (element) { return element.getBoundingClientRect(); };
|
||
|
|
var _measureSurfaceRect = _measurePageRect;
|
||
|
|
var _measureScrollRect = _measurePageRect;
|
||
|
|
/**
|
||
|
|
* The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback if
|
||
|
|
* provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if provided by
|
||
|
|
* the caller, or by cached measurements if available, or by a running average, or a default fallback.
|
||
|
|
*
|
||
|
|
* The algorithm for rendering pages works like this:
|
||
|
|
*
|
||
|
|
* 1. Predict visible pages based on "current measure data" (page heights, surface position, visible window)
|
||
|
|
* 2. If changes are necessary, apply changes (add/remove pages)
|
||
|
|
* 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect
|
||
|
|
* 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously
|
||
|
|
*
|
||
|
|
* Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that
|
||
|
|
* we can avoid re-measuring during operations that should not alter heights, like scrolling.
|
||
|
|
*
|
||
|
|
* However, certain operations can make measure data stale. For example, resizing the list, or passing in new props,
|
||
|
|
* or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion
|
||
|
|
* number, which we associate with cached measurements and use to determine if a remeasure should occur.
|
||
|
|
*/
|
||
|
|
var List = (function (_super) {
|
||
|
|
__extends(List, _super);
|
||
|
|
function List(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
pages: []
|
||
|
|
};
|
||
|
|
_this._estimatedPageHeight = 0;
|
||
|
|
_this._totalEstimates = 0;
|
||
|
|
_this._requiredWindowsAhead = 0;
|
||
|
|
_this._requiredWindowsBehind = 0;
|
||
|
|
// Track the measure version for everything.
|
||
|
|
_this._measureVersion = 0;
|
||
|
|
// Ensure that scrolls are lazy updated.
|
||
|
|
_this._onAsyncScroll = _this._async.debounce(_this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {
|
||
|
|
leading: false,
|
||
|
|
maxWait: MAX_SCROLL_UPDATE_DELAY
|
||
|
|
});
|
||
|
|
_this._onAsyncIdle = _this._async.debounce(_this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {
|
||
|
|
leading: false
|
||
|
|
});
|
||
|
|
_this._onAsyncResize = _this._async.debounce(_this._onAsyncResize, RESIZE_DELAY, {
|
||
|
|
leading: false
|
||
|
|
});
|
||
|
|
_this._cachedPageHeights = {};
|
||
|
|
_this._estimatedPageHeight = 0;
|
||
|
|
_this._focusedIndex = -1;
|
||
|
|
_this._scrollingToIndex = -1;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback
|
||
|
|
* to measure the height of an individual item is specified, will only scroll to bring the specific item into view.
|
||
|
|
*
|
||
|
|
* Note: with items of variable height and no passed in `getPageHeight` method, the list might jump after scrolling
|
||
|
|
* when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.
|
||
|
|
*
|
||
|
|
* @param index Index of item to scroll to
|
||
|
|
* @param measureItem Optional callback to measure the height of an individual item
|
||
|
|
*/
|
||
|
|
List.prototype.scrollToIndex = function (index, measureItem) {
|
||
|
|
var startIndex = this.props.startIndex;
|
||
|
|
var renderCount = this._getRenderCount();
|
||
|
|
var endIndex = startIndex + renderCount;
|
||
|
|
var scrollTop = 0;
|
||
|
|
var itemsPerPage = 1;
|
||
|
|
for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {
|
||
|
|
itemsPerPage = this._getItemCountForPage(itemIndex, this._allowedRect);
|
||
|
|
var requestedIndexIsInPage = itemIndex <= index && (itemIndex + itemsPerPage) > index;
|
||
|
|
if (requestedIndexIsInPage) {
|
||
|
|
// We have found the page. If the user provided a way to measure an individual item, we will try to scroll in just
|
||
|
|
// the given item, otherwise we'll only bring the page into view
|
||
|
|
if (measureItem) {
|
||
|
|
// Adjust for actual item position within page
|
||
|
|
var itemPositionWithinPage = index - itemIndex;
|
||
|
|
for (var itemIndexInPage = 0; itemIndexInPage < itemPositionWithinPage; ++itemIndexInPage) {
|
||
|
|
scrollTop += measureItem(itemIndex + itemIndexInPage);
|
||
|
|
}
|
||
|
|
var scrollBottom = scrollTop + measureItem(index);
|
||
|
|
var scrollRect = _measureScrollRect(this._scrollElement);
|
||
|
|
var scrollWindow = {
|
||
|
|
top: this._scrollElement.scrollTop,
|
||
|
|
bottom: this._scrollElement.scrollTop + scrollRect.height
|
||
|
|
};
|
||
|
|
var itemIsFullyVisible = scrollTop >= scrollWindow.top && scrollBottom <= scrollWindow.bottom;
|
||
|
|
if (itemIsFullyVisible) {
|
||
|
|
// Item is already visible, do nothing.
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var itemIsPartiallyAbove = scrollTop < scrollWindow.top;
|
||
|
|
var itemIsPartiallyBelow = scrollBottom > scrollWindow.bottom;
|
||
|
|
if (itemIsPartiallyAbove) {
|
||
|
|
// We will just scroll to 'scrollTop'
|
||
|
|
// ______
|
||
|
|
// |Item | - scrollTop
|
||
|
|
// | ____|_
|
||
|
|
// |_|____| | - scrollWindow.top
|
||
|
|
// | |
|
||
|
|
// |______|
|
||
|
|
}
|
||
|
|
else if (itemIsPartiallyBelow) {
|
||
|
|
// Adjust scrollTop position to just bring in the element
|
||
|
|
// ______ - scrollTop
|
||
|
|
// | |
|
||
|
|
// | ____|_ - scrollWindow.bottom
|
||
|
|
// |_|____| |
|
||
|
|
// | Item |
|
||
|
|
// |______| - scrollBottom
|
||
|
|
scrollTop = this._scrollElement.scrollTop + (scrollBottom - scrollWindow.bottom);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._scrollElement.scrollTop = scrollTop;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
scrollTop += this._getPageHeight(itemIndex, itemsPerPage, this._surfaceRect);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
List.prototype.componentDidMount = function () {
|
||
|
|
this._updatePages();
|
||
|
|
this._measureVersion++;
|
||
|
|
this._scrollElement = Utilities_1.findScrollableParent(this.refs.root);
|
||
|
|
this._events.on(window, 'resize', this._onAsyncResize);
|
||
|
|
this._events.on(this.refs.root, 'focus', this._onFocus, true);
|
||
|
|
if (this._scrollElement) {
|
||
|
|
this._events.on(this._scrollElement, 'scroll', this._onScroll);
|
||
|
|
this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
List.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.items !== this.props.items ||
|
||
|
|
newProps.renderCount !== this.props.renderCount ||
|
||
|
|
newProps.startIndex !== this.props.startIndex) {
|
||
|
|
this._measureVersion++;
|
||
|
|
this._updatePages(newProps);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
List.prototype.shouldComponentUpdate = function (newProps, newState) {
|
||
|
|
var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
|
||
|
|
var oldPages = this.state.pages;
|
||
|
|
var newPages = newState.pages, measureVersion = newState.measureVersion;
|
||
|
|
var shouldComponentUpdate = false;
|
||
|
|
if (this._measureVersion === measureVersion &&
|
||
|
|
newProps.renderedWindowsAhead === renderedWindowsAhead,
|
||
|
|
newProps.renderedWindowsBehind === renderedWindowsBehind,
|
||
|
|
newProps.items === this.props.items &&
|
||
|
|
oldPages.length === newPages.length) {
|
||
|
|
for (var i = 0; i < oldPages.length; i++) {
|
||
|
|
var oldPage = oldPages[i];
|
||
|
|
var newPage = newPages[i];
|
||
|
|
if ((oldPage.key !== newPage.key ||
|
||
|
|
oldPage.itemCount !== newPage.itemCount)) {
|
||
|
|
shouldComponentUpdate = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
shouldComponentUpdate = true;
|
||
|
|
}
|
||
|
|
return shouldComponentUpdate;
|
||
|
|
};
|
||
|
|
List.prototype.forceUpdate = function () {
|
||
|
|
// Ensure that when the list is force updated we update the pages first before render.
|
||
|
|
this._updateRenderRects(this.props, true);
|
||
|
|
this._updatePages();
|
||
|
|
this._measureVersion++;
|
||
|
|
_super.prototype.forceUpdate.call(this);
|
||
|
|
};
|
||
|
|
List.prototype.render = function () {
|
||
|
|
var _a = this.props, className = _a.className, role = _a.role;
|
||
|
|
var pages = this.state.pages;
|
||
|
|
var pageElements = [];
|
||
|
|
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
|
||
|
|
// assign list if no role
|
||
|
|
role = (role === undefined) ? 'list' : role;
|
||
|
|
for (var i = 0; i < pages.length; i++) {
|
||
|
|
pageElements.push(this._renderPage(pages[i]));
|
||
|
|
}
|
||
|
|
return (React.createElement("div", __assign({ ref: 'root' }, divProps, { role: role, className: Utilities_1.css('ms-List', className) }),
|
||
|
|
React.createElement("div", { ref: 'surface', className: 'ms-List-surface' }, pageElements)));
|
||
|
|
};
|
||
|
|
List.prototype._renderPage = function (page) {
|
||
|
|
var _a = this.props, onRenderCell = _a.onRenderCell, role = _a.role;
|
||
|
|
var cells = [];
|
||
|
|
var pageStyle = this._getPageStyle(page);
|
||
|
|
// only assign list item role if no role is assigned
|
||
|
|
role = (role === undefined) ? 'listitem' : null;
|
||
|
|
for (var i = 0; page.items && i < page.items.length; i++) {
|
||
|
|
var item = page.items[i];
|
||
|
|
var index = page.startIndex + i;
|
||
|
|
var itemKey = this.props.getKey
|
||
|
|
? this.props.getKey(item, index)
|
||
|
|
: item && item.key;
|
||
|
|
if (itemKey === null || itemKey === undefined) {
|
||
|
|
itemKey = index;
|
||
|
|
}
|
||
|
|
cells.push(React.createElement("div", { role: role, className: 'ms-List-cell', key: itemKey, "data-list-index": i + page.startIndex, "data-automationid": 'ListCell' }, onRenderCell(item, page.startIndex + i)));
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { className: 'ms-List-page', key: page.key, ref: page.key, style: pageStyle }, cells));
|
||
|
|
};
|
||
|
|
/** Generate the style object for the page. */
|
||
|
|
List.prototype._getPageStyle = function (page) {
|
||
|
|
var style;
|
||
|
|
var getPageStyle = this.props.getPageStyle;
|
||
|
|
if (getPageStyle) {
|
||
|
|
style = getPageStyle(page);
|
||
|
|
}
|
||
|
|
if (!page.items) {
|
||
|
|
style = style || {};
|
||
|
|
style.height = page.height;
|
||
|
|
}
|
||
|
|
return style;
|
||
|
|
};
|
||
|
|
/** Track the last item index focused so that we ensure we keep it rendered. */
|
||
|
|
List.prototype._onFocus = function (ev) {
|
||
|
|
var target = ev.target;
|
||
|
|
while (target !== this.refs.surface) {
|
||
|
|
var indexString = target.getAttribute('data-list-index');
|
||
|
|
if (indexString) {
|
||
|
|
this._focusedIndex = Number(indexString);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
target = Utilities_1.getParent(target);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed,
|
||
|
|
* we will call onAsyncIdle which will reset it back to it's correct value.
|
||
|
|
*/
|
||
|
|
List.prototype._onScroll = function () {
|
||
|
|
this._requiredWindowsAhead = 0;
|
||
|
|
this._requiredWindowsBehind = 0;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Debounced method to asynchronously update the visible region on a scroll event.
|
||
|
|
*/
|
||
|
|
List.prototype._onAsyncScroll = function () {
|
||
|
|
this._updateRenderRects();
|
||
|
|
// Only update pages when the visible rect falls outside of the materialized rect.
|
||
|
|
if (!this._materializedRect || !_isContainedWithin(this._requiredRect, this._materializedRect)) {
|
||
|
|
this._updatePages();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// console.log('requiredRect contained in materialized', this._requiredRect, this._materializedRect);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* This is an async debounced method that will try and increment the windows we render. If we can increment
|
||
|
|
* either, we increase the amount we render and re-evaluate.
|
||
|
|
*/
|
||
|
|
List.prototype._onAsyncIdle = function () {
|
||
|
|
var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
|
||
|
|
var _b = this, requiredWindowsAhead = _b._requiredWindowsAhead, requiredWindowsBehind = _b._requiredWindowsBehind;
|
||
|
|
var windowsAhead = Math.min(renderedWindowsAhead, requiredWindowsAhead + 1);
|
||
|
|
var windowsBehind = Math.min(renderedWindowsBehind, requiredWindowsBehind + 1);
|
||
|
|
if (windowsAhead !== requiredWindowsAhead || windowsBehind !== requiredWindowsBehind) {
|
||
|
|
// console.log('idling', windowsBehind, windowsAhead);
|
||
|
|
this._requiredWindowsAhead = windowsAhead;
|
||
|
|
this._requiredWindowsBehind = windowsBehind;
|
||
|
|
this._updateRenderRects();
|
||
|
|
this._updatePages();
|
||
|
|
}
|
||
|
|
if (renderedWindowsAhead > windowsAhead || renderedWindowsBehind > windowsBehind) {
|
||
|
|
// Async increment on next tick.
|
||
|
|
this._onAsyncIdle();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
List.prototype._onAsyncResize = function () {
|
||
|
|
this.forceUpdate();
|
||
|
|
};
|
||
|
|
List.prototype._updatePages = function (props) {
|
||
|
|
var _this = this;
|
||
|
|
var _a = (props || this.props), items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;
|
||
|
|
renderCount = this._getRenderCount(props);
|
||
|
|
// console.log('updating pages');
|
||
|
|
if (!this._requiredRect) {
|
||
|
|
this._updateRenderRects(props);
|
||
|
|
}
|
||
|
|
var newListState = this._buildPages(items, startIndex, renderCount);
|
||
|
|
var oldListPages = this.state.pages;
|
||
|
|
this.setState(newListState, function () {
|
||
|
|
// If measured version is invalid since we've updated the DOM
|
||
|
|
var heightsChanged = _this._updatePageMeasurements(oldListPages, newListState.pages);
|
||
|
|
// On first render, we should re-measure so that we don't get a visual glitch.
|
||
|
|
if (heightsChanged) {
|
||
|
|
_this._materializedRect = null;
|
||
|
|
if (!_this._hasCompletedFirstRender) {
|
||
|
|
_this._hasCompletedFirstRender = true;
|
||
|
|
_this._updatePages();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_this._onAsyncScroll();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Enqueue an idle bump.
|
||
|
|
_this._onAsyncIdle();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
List.prototype._updatePageMeasurements = function (oldPages, newPages) {
|
||
|
|
var renderedIndexes = {};
|
||
|
|
var heightChanged = false;
|
||
|
|
var renderCount = this._getRenderCount();
|
||
|
|
for (var i = 0; i < oldPages.length; i++) {
|
||
|
|
var page = oldPages[i];
|
||
|
|
if (page.items) {
|
||
|
|
renderedIndexes[page.startIndex] = page;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var i = 0; i < newPages.length; i++) {
|
||
|
|
var page = newPages[i];
|
||
|
|
if (page.items) {
|
||
|
|
heightChanged = this._measurePage(page) || heightChanged;
|
||
|
|
if (!renderedIndexes[page.startIndex]) {
|
||
|
|
this._onPageAdded(page);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
delete renderedIndexes[page.startIndex];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var index in renderedIndexes) {
|
||
|
|
if (renderedIndexes.hasOwnProperty(index)) {
|
||
|
|
this._onPageRemoved(renderedIndexes[index]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return heightChanged;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Given a page, measure its dimensions, update cache.
|
||
|
|
* @returns True if the height has changed.
|
||
|
|
*/
|
||
|
|
List.prototype._measurePage = function (page) {
|
||
|
|
var hasChangedHeight = false;
|
||
|
|
var pageElement = this.refs[page.key];
|
||
|
|
var cachedHeight = this._cachedPageHeights[page.startIndex];
|
||
|
|
// console.log(' * measure attempt', page.startIndex, cachedHeight);
|
||
|
|
if (pageElement && (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) {
|
||
|
|
var newClientRect = {
|
||
|
|
width: pageElement.clientWidth,
|
||
|
|
height: pageElement.clientHeight
|
||
|
|
};
|
||
|
|
if (newClientRect.height || newClientRect.width) {
|
||
|
|
hasChangedHeight = page.height !== newClientRect.height;
|
||
|
|
// console.warn(' *** expensive page measure', page.startIndex, page.height, newClientRect.height);
|
||
|
|
page.height = newClientRect.height;
|
||
|
|
this._cachedPageHeights[page.startIndex] = {
|
||
|
|
height: newClientRect.height,
|
||
|
|
measureVersion: this._measureVersion
|
||
|
|
};
|
||
|
|
this._estimatedPageHeight = Math.round(((this._estimatedPageHeight * this._totalEstimates) + newClientRect.height) /
|
||
|
|
(this._totalEstimates + 1));
|
||
|
|
this._totalEstimates++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return hasChangedHeight;
|
||
|
|
};
|
||
|
|
/** Called when a page has been added to the DOM. */
|
||
|
|
List.prototype._onPageAdded = function (page) {
|
||
|
|
var onPageAdded = this.props.onPageAdded;
|
||
|
|
// console.log('page added', page.startIndex, this.state.pages.map(page=>page.key).join(', '));
|
||
|
|
if (onPageAdded) {
|
||
|
|
onPageAdded(page);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** Called when a page has been removed from the DOM. */
|
||
|
|
List.prototype._onPageRemoved = function (page) {
|
||
|
|
var onPageRemoved = this.props.onPageRemoved;
|
||
|
|
// console.log(' --- page removed', page.startIndex, this.state.pages.map(page=>page.key).join(', '));
|
||
|
|
if (onPageRemoved) {
|
||
|
|
onPageRemoved(page);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/** Build up the pages that should be rendered. */
|
||
|
|
List.prototype._buildPages = function (items, startIndex, renderCount) {
|
||
|
|
var materializedRect = Utilities_1.assign({}, EMPTY_RECT);
|
||
|
|
var itemsPerPage = 1;
|
||
|
|
var pages = [];
|
||
|
|
var pageTop = 0;
|
||
|
|
var currentSpacer = null;
|
||
|
|
var focusedIndex = this._focusedIndex;
|
||
|
|
var endIndex = startIndex + renderCount;
|
||
|
|
// First render is very important to track; when we render cells, we have no idea of estimated page height.
|
||
|
|
// So we should default to rendering only the first page so that we can get information.
|
||
|
|
// However if the user provides a measure function, let's just assume they know the right heights.
|
||
|
|
var isFirstRender = this._estimatedPageHeight === 0 && !this.props.getPageHeight;
|
||
|
|
var _loop_1 = function (itemIndex) {
|
||
|
|
itemsPerPage = this_1._getItemCountForPage(itemIndex, this_1._allowedRect);
|
||
|
|
var pageHeight = this_1._getPageHeight(itemIndex, itemsPerPage, this_1._surfaceRect);
|
||
|
|
var pageBottom = pageTop + pageHeight - 1;
|
||
|
|
var isPageRendered = Utilities_1.findIndex(this_1.state.pages, function (page) { return page.items && page.startIndex === itemIndex; }) > -1;
|
||
|
|
var isPageInAllowedRange = pageBottom >= this_1._allowedRect.top && pageTop <= this_1._allowedRect.bottom;
|
||
|
|
var isPageInRequiredRange = pageBottom >= this_1._requiredRect.top && pageTop <= this_1._requiredRect.bottom;
|
||
|
|
var isPageVisible = !isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered));
|
||
|
|
var isPageFocused = focusedIndex >= itemIndex && focusedIndex < (itemIndex + itemsPerPage);
|
||
|
|
var isFirstPage = itemIndex === startIndex;
|
||
|
|
// console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' + isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange);
|
||
|
|
// Only render whats visible, focused, or first page.
|
||
|
|
if (isPageVisible || isPageFocused || isFirstPage) {
|
||
|
|
if (currentSpacer) {
|
||
|
|
pages.push(currentSpacer);
|
||
|
|
currentSpacer = null;
|
||
|
|
}
|
||
|
|
var itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);
|
||
|
|
var newPage = this_1._createPage(null, items.slice(itemIndex, itemIndex + itemsInPage), itemIndex);
|
||
|
|
newPage.top = pageTop;
|
||
|
|
newPage.height = pageHeight;
|
||
|
|
pages.push(newPage);
|
||
|
|
if (isPageInRequiredRange) {
|
||
|
|
_mergeRect(materializedRect, {
|
||
|
|
top: pageTop,
|
||
|
|
bottom: pageBottom,
|
||
|
|
height: pageHeight,
|
||
|
|
left: this_1._allowedRect.left,
|
||
|
|
right: this_1._allowedRect.right,
|
||
|
|
width: this_1._allowedRect.width
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (!currentSpacer) {
|
||
|
|
currentSpacer = this_1._createPage('spacer-' + itemIndex, null, itemIndex, 0);
|
||
|
|
}
|
||
|
|
currentSpacer.height = (currentSpacer.height || 0) + (pageBottom - pageTop) + 1;
|
||
|
|
currentSpacer.itemCount += itemsPerPage;
|
||
|
|
}
|
||
|
|
pageTop += (pageBottom - pageTop + 1);
|
||
|
|
if (isFirstRender) {
|
||
|
|
return "break";
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var this_1 = this;
|
||
|
|
for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {
|
||
|
|
var state_1 = _loop_1(itemIndex);
|
||
|
|
if (state_1 === "break")
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (currentSpacer) {
|
||
|
|
currentSpacer.key = 'spacer-end';
|
||
|
|
pages.push(currentSpacer);
|
||
|
|
}
|
||
|
|
this._materializedRect = materializedRect;
|
||
|
|
// console.log('materialized: ', materializedRect);
|
||
|
|
return {
|
||
|
|
pages: pages,
|
||
|
|
measureVersion: this._measureVersion
|
||
|
|
};
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Get the pixel height of a give page. Will use the props getPageHeight first, and if not provided, fallback to
|
||
|
|
* cached height, or estimated page height, or default page height.
|
||
|
|
*/
|
||
|
|
List.prototype._getPageHeight = function (itemIndex, itemsPerPage, visibleRect) {
|
||
|
|
if (this.props.getPageHeight) {
|
||
|
|
return this.props.getPageHeight(itemIndex, visibleRect);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var cachedHeight = (this._cachedPageHeights[itemIndex]);
|
||
|
|
return cachedHeight ? cachedHeight.height : (this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
List.prototype._getItemCountForPage = function (itemIndex, visibileRect) {
|
||
|
|
var itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE;
|
||
|
|
return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE;
|
||
|
|
};
|
||
|
|
List.prototype._createPage = function (pageKey, items, startIndex, count, style) {
|
||
|
|
pageKey = pageKey || ('page-' + startIndex);
|
||
|
|
// Fill undefined cells because array.map will ignore undefined cells.
|
||
|
|
if (items) {
|
||
|
|
for (var i = 0; i < items.length; i++) {
|
||
|
|
items[i] = items[i] || null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
key: pageKey,
|
||
|
|
startIndex: startIndex === undefined ? -1 : startIndex,
|
||
|
|
itemCount: (count === undefined) ? (items ? items.length : 0) : count,
|
||
|
|
items: items,
|
||
|
|
style: style || {},
|
||
|
|
top: 0,
|
||
|
|
height: 0
|
||
|
|
};
|
||
|
|
};
|
||
|
|
List.prototype._getRenderCount = function (props) {
|
||
|
|
var _a = props || this.props, items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;
|
||
|
|
return (renderCount === undefined ? (items ? items.length - startIndex : 0) : renderCount);
|
||
|
|
};
|
||
|
|
/** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */
|
||
|
|
List.prototype._updateRenderRects = function (props, forceUpdate) {
|
||
|
|
var _a = (props || this.props), renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;
|
||
|
|
var pages = this.state.pages;
|
||
|
|
var renderCount = this._getRenderCount(props);
|
||
|
|
var surfaceRect = this._surfaceRect;
|
||
|
|
var scrollHeight = this._scrollElement && this._scrollElement.scrollHeight;
|
||
|
|
var scrollTop = this._scrollElement ? this._scrollElement.scrollTop : 0;
|
||
|
|
// WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window.
|
||
|
|
// This needs to be called to recalculate when new pages should be loaded.
|
||
|
|
// We check to see how far we've scrolled and if it's further than a third of a page we run it again.
|
||
|
|
if (forceUpdate ||
|
||
|
|
!pages ||
|
||
|
|
!this._surfaceRect ||
|
||
|
|
!scrollHeight ||
|
||
|
|
scrollHeight !== this._scrollHeight ||
|
||
|
|
Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3) {
|
||
|
|
surfaceRect = this._surfaceRect = _measureSurfaceRect(this.refs.surface);
|
||
|
|
this._scrollTop = scrollTop;
|
||
|
|
}
|
||
|
|
// If the scroll height has changed, something in the container likely resized and
|
||
|
|
// we should redo the page heights incase their content resized.
|
||
|
|
if (forceUpdate ||
|
||
|
|
!scrollHeight ||
|
||
|
|
scrollHeight !== this._scrollHeight) {
|
||
|
|
this._measureVersion++;
|
||
|
|
}
|
||
|
|
this._scrollHeight = scrollHeight;
|
||
|
|
// If the surface is above the container top or below the container bottom, or if this is not the first
|
||
|
|
// render return empty rect.
|
||
|
|
// The first time the list gets rendered we need to calculate the rectangle. The width of the list is
|
||
|
|
// used to calculate the width of the list items.
|
||
|
|
var visibleTop = Math.max(0, -surfaceRect.top);
|
||
|
|
var visibleRect = {
|
||
|
|
top: visibleTop,
|
||
|
|
left: surfaceRect.left,
|
||
|
|
bottom: visibleTop + window.innerHeight,
|
||
|
|
right: surfaceRect.right,
|
||
|
|
width: surfaceRect.width,
|
||
|
|
height: window.innerHeight
|
||
|
|
};
|
||
|
|
// The required/allowed rects are adjusted versions of the visible rect.
|
||
|
|
this._requiredRect = _expandRect(visibleRect, this._requiredWindowsBehind, this._requiredWindowsAhead);
|
||
|
|
this._allowedRect = _expandRect(visibleRect, renderedWindowsBehind, renderedWindowsAhead);
|
||
|
|
};
|
||
|
|
return List;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
List.defaultProps = {
|
||
|
|
startIndex: 0,
|
||
|
|
onRenderCell: function (item, index, containsFocus) { return (React.createElement("div", null, (item && item.name) || '')); },
|
||
|
|
renderedWindowsAhead: DEFAULT_RENDERED_WINDOWS_AHEAD,
|
||
|
|
renderedWindowsBehind: DEFAULT_RENDERED_WINDOWS_BEHIND
|
||
|
|
};
|
||
|
|
exports.List = List;
|
||
|
|
function _expandRect(rect, pagesBefore, pagesAfter) {
|
||
|
|
var top = rect.top - (pagesBefore * rect.height);
|
||
|
|
var height = rect.height + ((pagesBefore + pagesAfter) * rect.height);
|
||
|
|
return {
|
||
|
|
top: top,
|
||
|
|
bottom: top + height,
|
||
|
|
height: height,
|
||
|
|
left: rect.left,
|
||
|
|
right: rect.right,
|
||
|
|
width: rect.width
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _isContainedWithin(innerRect, outerRect) {
|
||
|
|
return (innerRect.top >= outerRect.top &&
|
||
|
|
innerRect.left >= outerRect.left &&
|
||
|
|
innerRect.bottom <= outerRect.bottom &&
|
||
|
|
innerRect.right <= outerRect.right);
|
||
|
|
}
|
||
|
|
function _mergeRect(targetRect, newRect) {
|
||
|
|
targetRect.top = (newRect.top < targetRect.top || targetRect.top === -1) ? newRect.top : targetRect.top;
|
||
|
|
targetRect.left = (newRect.left < targetRect.left || targetRect.left === -1) ? newRect.left : targetRect.left;
|
||
|
|
targetRect.bottom = (newRect.bottom > targetRect.bottom || targetRect.bottom === -1) ? newRect.bottom : targetRect.bottom;
|
||
|
|
targetRect.right = (newRect.right > targetRect.right || targetRect.right === -1) ? newRect.right : targetRect.right;
|
||
|
|
targetRect.width = targetRect.right - targetRect.left + 1;
|
||
|
|
targetRect.height = targetRect.bottom - targetRect.top + 1;
|
||
|
|
return targetRect;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 251 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_347f6a65',
|
||
|
|
group: 'group_347f6a65',
|
||
|
|
groupIsDropping: 'groupIsDropping_347f6a65',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_347f6a65{position:relative;font-size:12px}.root_347f6a65 BUTTON{background-color:transparent}.group_347f6a65{transition:background-color 267ms cubic-bezier(.445,.05,.55,.95)}.groupIsDropping_347f6a65{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_347f6a65 .ms-List-cell{min-height:38px}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 252 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var BaseDecorator_1 = __webpack_require__(253);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var RESIZE_DELAY = 500;
|
||
|
|
var MAX_RESIZE_ATTEMPTS = 3;
|
||
|
|
function withViewport(ComposedComponent) {
|
||
|
|
return (function (_super) {
|
||
|
|
__extends(WithViewportComponent, _super);
|
||
|
|
function WithViewportComponent() {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
/* Note: using lambda here because decorators don't seem to work in decorators. */
|
||
|
|
_this._updateViewport = function (withForceUpdate) {
|
||
|
|
var viewport = _this.state.viewport;
|
||
|
|
var viewportElement = _this.refs.root;
|
||
|
|
var scrollElement = Utilities_1.findScrollableParent(viewportElement);
|
||
|
|
var scrollRect = Utilities_1.getRect(scrollElement);
|
||
|
|
var clientRect = Utilities_1.getRect(viewportElement);
|
||
|
|
var updateComponent = function () {
|
||
|
|
if (withForceUpdate && _this._composedComponentInstance) {
|
||
|
|
_this._composedComponentInstance.forceUpdate();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var isSizeChanged = (clientRect.width !== viewport.width ||
|
||
|
|
scrollRect.height !== viewport.height);
|
||
|
|
if (isSizeChanged && _this._resizeAttempts < MAX_RESIZE_ATTEMPTS) {
|
||
|
|
_this._resizeAttempts++;
|
||
|
|
_this.setState({
|
||
|
|
viewport: {
|
||
|
|
width: clientRect.width,
|
||
|
|
height: scrollRect.height
|
||
|
|
}
|
||
|
|
}, function () { _this._updateViewport(withForceUpdate); });
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_this._resizeAttempts = 0;
|
||
|
|
updateComponent();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
_this._resizeAttempts = 0;
|
||
|
|
_this.state = {
|
||
|
|
viewport: {
|
||
|
|
width: 0,
|
||
|
|
height: 0
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
WithViewportComponent.prototype.componentDidMount = function () {
|
||
|
|
this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
|
||
|
|
leading: false
|
||
|
|
});
|
||
|
|
this._events.on(window, 'resize', this._onAsyncResize);
|
||
|
|
this._updateViewport();
|
||
|
|
};
|
||
|
|
WithViewportComponent.prototype.componentWillUnmount = function () {
|
||
|
|
this._events.dispose();
|
||
|
|
};
|
||
|
|
WithViewportComponent.prototype.render = function () {
|
||
|
|
var viewport = this.state.viewport;
|
||
|
|
var isViewportVisible = viewport.width > 0 && viewport.height > 0;
|
||
|
|
return (React.createElement("div", { className: 'ms-Viewport', ref: 'root', style: { minWidth: 1, minHeight: 1 } }, isViewportVisible && (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, viewport: viewport }, this.props)))));
|
||
|
|
};
|
||
|
|
WithViewportComponent.prototype.forceUpdate = function () {
|
||
|
|
this._updateViewport(true);
|
||
|
|
};
|
||
|
|
WithViewportComponent.prototype._onAsyncResize = function () {
|
||
|
|
this._updateViewport();
|
||
|
|
};
|
||
|
|
return WithViewportComponent;
|
||
|
|
}(BaseDecorator_1.BaseDecorator));
|
||
|
|
}
|
||
|
|
exports.withViewport = withViewport;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 253 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var BaseDecorator = (function (_super) {
|
||
|
|
__extends(BaseDecorator, _super);
|
||
|
|
function BaseDecorator() {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
_this._shouldUpdateComponentRef = false;
|
||
|
|
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Updates the ref to the component composed by the decorator, which will also take care of hoisting
|
||
|
|
* (and unhoisting as appropriate) methods from said component.
|
||
|
|
*
|
||
|
|
* Pass this method as the argument to the 'ref' property of the composed component.
|
||
|
|
*/
|
||
|
|
BaseDecorator.prototype._updateComposedComponentRef = function (composedComponentInstance) {
|
||
|
|
this._composedComponentInstance = composedComponentInstance;
|
||
|
|
if (composedComponentInstance) {
|
||
|
|
this._hoisted = Utilities_1.hoistMethods(this, composedComponentInstance);
|
||
|
|
}
|
||
|
|
else if (this._hoisted) {
|
||
|
|
Utilities_1.unhoistMethods(this, this._hoisted);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return BaseDecorator;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.BaseDecorator = BaseDecorator;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 254 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var ReactDOM = __webpack_require__(3);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var DISTANCE_FOR_DRAG_SQUARED = 25; // the minimum mouse move distance to treat it as drag event
|
||
|
|
var MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
|
||
|
|
var MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
|
||
|
|
var DragDropHelper = (function () {
|
||
|
|
function DragDropHelper(params) {
|
||
|
|
this._selection = params.selection;
|
||
|
|
this._dragEnterCounts = {};
|
||
|
|
this._activeTargets = {};
|
||
|
|
this._lastId = 0;
|
||
|
|
this._distanceSquaredForDrag = typeof params.minimumPixelsForDrag === 'number' ?
|
||
|
|
params.minimumPixelsForDrag * params.minimumPixelsForDrag : DISTANCE_FOR_DRAG_SQUARED;
|
||
|
|
this._events = new Utilities_1.EventGroup(this);
|
||
|
|
// clear drag data when mouse up, use capture event to ensure it will be run
|
||
|
|
this._events.on(document.body, 'mouseup', this._onMouseUp.bind(this), true);
|
||
|
|
this._events.on(document, 'mouseup', this._onDocumentMouseUp.bind(this), true);
|
||
|
|
}
|
||
|
|
DragDropHelper.prototype.dispose = function () {
|
||
|
|
this._events.dispose();
|
||
|
|
};
|
||
|
|
DragDropHelper.prototype.subscribe = function (root, events, dragDropOptions) {
|
||
|
|
var _this = this;
|
||
|
|
var _a = dragDropOptions.key, key = _a === void 0 ? "" + ++this._lastId : _a;
|
||
|
|
var handlers = [];
|
||
|
|
var onDragLeave;
|
||
|
|
var onDragEnter;
|
||
|
|
var onDragEnd;
|
||
|
|
var onDrop;
|
||
|
|
var onDragOver;
|
||
|
|
var onMouseDown;
|
||
|
|
var isDraggable;
|
||
|
|
var isDroppable;
|
||
|
|
var activeTarget;
|
||
|
|
if (dragDropOptions && root) {
|
||
|
|
var eventMap = dragDropOptions.eventMap, context_1 = dragDropOptions.context, updateDropState_1 = dragDropOptions.updateDropState;
|
||
|
|
var dragDropTarget = {
|
||
|
|
root: root,
|
||
|
|
options: dragDropOptions,
|
||
|
|
key: key
|
||
|
|
};
|
||
|
|
isDraggable = this._isDraggable(dragDropTarget);
|
||
|
|
isDroppable = this._isDroppable(dragDropTarget);
|
||
|
|
if (isDraggable || isDroppable) {
|
||
|
|
if (eventMap) {
|
||
|
|
for (var _i = 0, eventMap_1 = eventMap; _i < eventMap_1.length; _i++) {
|
||
|
|
var event_1 = eventMap_1[_i];
|
||
|
|
var handler = {
|
||
|
|
callback: event_1.callback.bind(null, context_1),
|
||
|
|
eventName: event_1.eventName
|
||
|
|
};
|
||
|
|
handlers.push(handler);
|
||
|
|
this._events.on(root, handler.eventName, handler.callback);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (isDroppable) {
|
||
|
|
// If the target is droppable, wire up global event listeners to track drop-related events.
|
||
|
|
onDragLeave = function (event) {
|
||
|
|
if (!event.isHandled) {
|
||
|
|
event.isHandled = true;
|
||
|
|
_this._dragEnterCounts[key]--;
|
||
|
|
if (_this._dragEnterCounts[key] === 0) {
|
||
|
|
updateDropState_1(false /* isDropping */, event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
onDragEnter = function (event) {
|
||
|
|
event.preventDefault(); // needed for IE
|
||
|
|
if (!event.isHandled) {
|
||
|
|
event.isHandled = true;
|
||
|
|
_this._dragEnterCounts[key]++;
|
||
|
|
if (_this._dragEnterCounts[key] === 1) {
|
||
|
|
updateDropState_1(true /* isDropping */, event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
onDragEnd = function (event) {
|
||
|
|
_this._dragEnterCounts[key] = 0;
|
||
|
|
updateDropState_1(false /* isDropping */, event);
|
||
|
|
};
|
||
|
|
onDrop = function (event) {
|
||
|
|
_this._dragEnterCounts[key] = 0;
|
||
|
|
updateDropState_1(false /* isDropping */, event);
|
||
|
|
if (dragDropOptions.onDrop) {
|
||
|
|
dragDropOptions.onDrop(dragDropOptions.context.data, event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
onDragOver = function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
};
|
||
|
|
this._dragEnterCounts[key] = 0;
|
||
|
|
// dragenter and dragleave will be fired when hover to the child element
|
||
|
|
// but we only want to change state when enter or leave the current element
|
||
|
|
// use the count to ensure it.
|
||
|
|
events.on(root, 'dragenter', onDragEnter);
|
||
|
|
events.on(root, 'dragleave', onDragLeave);
|
||
|
|
events.on(root, 'dragend', onDragEnd);
|
||
|
|
events.on(root, 'drop', onDrop);
|
||
|
|
events.on(root, 'dragover', onDragOver);
|
||
|
|
}
|
||
|
|
if (isDraggable) {
|
||
|
|
// If the target is draggable, wire up local event listeners for mouse events.
|
||
|
|
onMouseDown = this._onMouseDown.bind(this, dragDropTarget);
|
||
|
|
onDragEnd = this._onDragEnd.bind(this, dragDropTarget);
|
||
|
|
events.on(root, 'mousedown', onMouseDown);
|
||
|
|
events.on(root, 'dragend', onDragEnd);
|
||
|
|
}
|
||
|
|
activeTarget = {
|
||
|
|
target: dragDropTarget,
|
||
|
|
dispose: function () {
|
||
|
|
if (_this._activeTargets[key] === activeTarget) {
|
||
|
|
delete _this._activeTargets[key];
|
||
|
|
}
|
||
|
|
if (root) {
|
||
|
|
for (var _i = 0, handlers_1 = handlers; _i < handlers_1.length; _i++) {
|
||
|
|
var handler = handlers_1[_i];
|
||
|
|
_this._events.off(root, handler.eventName, handler.callback);
|
||
|
|
}
|
||
|
|
if (isDroppable) {
|
||
|
|
events.off(root, 'dragenter', onDragEnter);
|
||
|
|
events.off(root, 'dragleave', onDragLeave);
|
||
|
|
events.off(root, 'dragend', onDragEnd);
|
||
|
|
events.off(root, 'dragover', onDragOver);
|
||
|
|
events.off(root, 'drop', onDrop);
|
||
|
|
}
|
||
|
|
if (isDraggable) {
|
||
|
|
events.off(root, 'mousedown', onMouseDown);
|
||
|
|
events.off(root, 'dragend', onDragEnd);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
this._activeTargets[key] = activeTarget;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
key: key,
|
||
|
|
dispose: function () {
|
||
|
|
if (activeTarget) {
|
||
|
|
activeTarget.dispose();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|
||
|
|
DragDropHelper.prototype.unsubscribe = function (root, key) {
|
||
|
|
var activeTarget = this._activeTargets[key];
|
||
|
|
if (activeTarget) {
|
||
|
|
activeTarget.dispose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DragDropHelper.prototype._onDragEnd = function (target, event) {
|
||
|
|
var options = target.options;
|
||
|
|
if (options.onDragEnd) {
|
||
|
|
options.onDragEnd(options.context.data, event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* clear drag data when mouse up on body
|
||
|
|
*/
|
||
|
|
DragDropHelper.prototype._onMouseUp = function (event) {
|
||
|
|
this._isDragging = false;
|
||
|
|
if (this._dragData) {
|
||
|
|
for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {
|
||
|
|
var key = _a[_i];
|
||
|
|
var activeTarget = this._activeTargets[key];
|
||
|
|
if (activeTarget.target.root) {
|
||
|
|
this._events.off(activeTarget.target.root, 'mousemove');
|
||
|
|
this._events.off(activeTarget.target.root, 'mouseleave');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this._dragData.dropTarget) {
|
||
|
|
// raise dragleave event to let dropTarget know it need to remove dropping style
|
||
|
|
Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');
|
||
|
|
Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'drop');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this._dragData = null;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* clear drag data when mouse up outside of the document
|
||
|
|
*/
|
||
|
|
DragDropHelper.prototype._onDocumentMouseUp = function (event) {
|
||
|
|
if (event.target === document.documentElement) {
|
||
|
|
this._onMouseUp(event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* when mouse move over a new drop target while dragging some items,
|
||
|
|
* fire dragleave on the old target and fire dragenter to the new target
|
||
|
|
* The target will handle style change on dragenter and dragleave events.
|
||
|
|
*/
|
||
|
|
DragDropHelper.prototype._onMouseMove = function (target, event) {
|
||
|
|
var
|
||
|
|
// use buttons property here since ev.button in some edge case is not updating well during the move.
|
||
|
|
// but firefox doesn't support it, so we set the default value when it is not defined.
|
||
|
|
_a = event.buttons,
|
||
|
|
// use buttons property here since ev.button in some edge case is not updating well during the move.
|
||
|
|
// but firefox doesn't support it, so we set the default value when it is not defined.
|
||
|
|
buttons = _a === void 0 ? MOUSEMOVE_PRIMARY_BUTTON : _a;
|
||
|
|
if (this._dragData && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
|
||
|
|
// cancel mouse down event and return early when the primary button is not pressed
|
||
|
|
this._onMouseUp(event);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var root = target.root, options = target.options, key = target.key;
|
||
|
|
if (this._isDragging) {
|
||
|
|
if (this._isDroppable(target)) {
|
||
|
|
// we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into
|
||
|
|
// the inner target (folder), we first set dropTarget to the inner element. But the same event is bubbled to the
|
||
|
|
// outer target too, and we need to prevent the outer one from taking over.
|
||
|
|
// So, check if the last dropTarget is not a child of the current.
|
||
|
|
if (this._dragData.dropTarget &&
|
||
|
|
this._dragData.dropTarget.key !== key &&
|
||
|
|
!this._isChild(root, this._dragData.dropTarget.root)) {
|
||
|
|
Utilities_1.EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');
|
||
|
|
this._dragData.dropTarget = null;
|
||
|
|
}
|
||
|
|
if (!this._dragData.dropTarget) {
|
||
|
|
Utilities_1.EventGroup.raise(root, 'dragenter');
|
||
|
|
this._dragData.dropTarget = target;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (this._dragData) {
|
||
|
|
if (this._isDraggable(target)) {
|
||
|
|
var xDiff = this._dragData.clientX - event.clientX;
|
||
|
|
var yDiff = this._dragData.clientY - event.clientY;
|
||
|
|
if (xDiff * xDiff + yDiff * yDiff >= this._distanceSquaredForDrag) {
|
||
|
|
if (this._dragData.dragTarget) {
|
||
|
|
this._isDragging = true;
|
||
|
|
if (options.onDragStart) {
|
||
|
|
options.onDragStart(options.context.data, options.context.index, this._selection.getSelection(), event);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* when mouse leave a target while dragging some items, fire dragleave to the target
|
||
|
|
*/
|
||
|
|
DragDropHelper.prototype._onMouseLeave = function (target, event) {
|
||
|
|
if (this._isDragging) {
|
||
|
|
if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) {
|
||
|
|
Utilities_1.EventGroup.raise(target.root, 'dragleave');
|
||
|
|
this._dragData.dropTarget = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* when mouse down on a draggable item, we start to track dragdata.
|
||
|
|
*/
|
||
|
|
DragDropHelper.prototype._onMouseDown = function (target, event) {
|
||
|
|
if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) {
|
||
|
|
// Ignore anything except the primary button.
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this._isDraggable(target)) {
|
||
|
|
this._dragData = {
|
||
|
|
clientX: event.clientX,
|
||
|
|
clientY: event.clientY,
|
||
|
|
eventTarget: event.target,
|
||
|
|
dragTarget: target
|
||
|
|
};
|
||
|
|
for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {
|
||
|
|
var key = _a[_i];
|
||
|
|
var activeTarget = this._activeTargets[key];
|
||
|
|
if (activeTarget.target.root) {
|
||
|
|
this._events.on(activeTarget.target.root, 'mousemove', this._onMouseMove.bind(this, activeTarget.target));
|
||
|
|
this._events.on(activeTarget.target.root, 'mouseleave', this._onMouseLeave.bind(this, activeTarget.target));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._dragData = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* determine whether the child target is a descendant of the parent
|
||
|
|
*/
|
||
|
|
DragDropHelper.prototype._isChild = function (parent, child) {
|
||
|
|
var parentElement = ReactDOM.findDOMNode(parent);
|
||
|
|
var childElement = ReactDOM.findDOMNode(child);
|
||
|
|
while (childElement && childElement.parentElement) {
|
||
|
|
if (childElement.parentElement === parentElement) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
childElement = childElement.parentElement;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
DragDropHelper.prototype._isDraggable = function (target) {
|
||
|
|
var options = target.options;
|
||
|
|
return options.canDrag && options.canDrag(options.context.data);
|
||
|
|
};
|
||
|
|
DragDropHelper.prototype._isDroppable = function (target) {
|
||
|
|
// TODO: take the drag item into consideration to prevent dragging an item into the same group
|
||
|
|
var options = target.options;
|
||
|
|
var dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : null;
|
||
|
|
return options.canDrop && options.canDrop(options.context, dragContext);
|
||
|
|
};
|
||
|
|
return DragDropHelper;
|
||
|
|
}());
|
||
|
|
exports.DragDropHelper = DragDropHelper;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 255 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_a107e0e9',
|
||
|
|
focusZone: 'focusZone_a107e0e9',
|
||
|
|
rootIsHorizontalConstrained: 'rootIsHorizontalConstrained_a107e0e9',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_a107e0e9{position:relative;font-size:12px;background:0 0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.focusZone_a107e0e9{display:inline-block;vertical-align:top;min-width:100%;min-height:1px}.rootIsHorizontalConstrained_a107e0e9{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.root_a107e0e9 .ms-List-cell{min-height:38px;word-break:break-word}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 256 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(257));
|
||
|
|
var index_1 = __webpack_require__(257);
|
||
|
|
exports.default = index_1.Dialog;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 257 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(258));
|
||
|
|
__export(__webpack_require__(272));
|
||
|
|
__export(__webpack_require__(273));
|
||
|
|
__export(__webpack_require__(259));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 258 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Dialog_Props_1 = __webpack_require__(259);
|
||
|
|
var Modal_1 = __webpack_require__(260);
|
||
|
|
var withResponsiveMode_1 = __webpack_require__(269);
|
||
|
|
var stylesImport = __webpack_require__(271);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DialogContent_1 = __webpack_require__(272);
|
||
|
|
var Dialog = (function (_super) {
|
||
|
|
__extends(Dialog, _super);
|
||
|
|
function Dialog(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
id: Utilities_1.getId('Dialog'),
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Dialog.prototype.render = function () {
|
||
|
|
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, isOpen = _a.isOpen, onDismiss = _a.onDismiss, onDismissed = _a.onDismissed, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted, responsiveMode = _a.responsiveMode, subText = _a.subText, title = _a.title, type = _a.type, contentClassName = _a.contentClassName, topButtonsProps = _a.topButtonsProps;
|
||
|
|
var id = this.state.id;
|
||
|
|
var dialogClassName = Utilities_1.css(this.props.className, (_b = {},
|
||
|
|
_b['ms-Dialog--lgHeader ' + styles.isLargeHeader] = type === Dialog_Props_1.DialogType.largeHeader,
|
||
|
|
_b['ms-Dialog--close ' + styles.isClose] = type === Dialog_Props_1.DialogType.close,
|
||
|
|
_b));
|
||
|
|
var containerClassName = Utilities_1.css(this.props.containerClassName, styles.main);
|
||
|
|
return (React.createElement(Modal_1.Modal, { className: dialogClassName, containerClassName: containerClassName, elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isBlocking: isBlocking, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, isDarkOverlay: isDarkOverlay, isOpen: isOpen, onDismiss: onDismiss, onDismissed: onDismissed, onLayerDidMount: onLayerDidMount, responsiveMode: responsiveMode, subtitleAriaId: subText && id + '-subText', titleAriaId: title && id + '-title' },
|
||
|
|
React.createElement(DialogContent_1.DialogContent, { onDismiss: onDismiss, showCloseButton: !isBlocking && type !== Dialog_Props_1.DialogType.largeHeader, title: title, subText: subText, className: contentClassName, topButtonsProps: topButtonsProps }, this.props.children)));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
return Dialog;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Dialog.defaultProps = {
|
||
|
|
isOpen: false,
|
||
|
|
type: Dialog_Props_1.DialogType.normal,
|
||
|
|
isDarkOverlay: true,
|
||
|
|
isBlocking: false,
|
||
|
|
className: '',
|
||
|
|
containerClassName: '',
|
||
|
|
contentClassName: '',
|
||
|
|
topButtonsProps: []
|
||
|
|
};
|
||
|
|
Dialog = __decorate([
|
||
|
|
withResponsiveMode_1.withResponsiveMode
|
||
|
|
], Dialog);
|
||
|
|
exports.Dialog = Dialog;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 259 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DialogType;
|
||
|
|
(function (DialogType) {
|
||
|
|
/** Standard dialog */
|
||
|
|
DialogType[DialogType["normal"] = 0] = "normal";
|
||
|
|
/** Dialog with large header banner */
|
||
|
|
DialogType[DialogType["largeHeader"] = 1] = "largeHeader";
|
||
|
|
/** Dialog with an 'x' close button in the upper-right corner */
|
||
|
|
DialogType[DialogType["close"] = 2] = "close";
|
||
|
|
})(DialogType = exports.DialogType || (exports.DialogType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 260 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(261));
|
||
|
|
var index_1 = __webpack_require__(261);
|
||
|
|
exports.default = index_1.Modal;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 261 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(262));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 262 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var index_1 = __webpack_require__(263);
|
||
|
|
var Overlay_1 = __webpack_require__(265);
|
||
|
|
var Layer_1 = __webpack_require__(132);
|
||
|
|
var index_2 = __webpack_require__(65);
|
||
|
|
var withResponsiveMode_1 = __webpack_require__(269);
|
||
|
|
var stylesImport = __webpack_require__(270);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Modal = (function (_super) {
|
||
|
|
__extends(Modal, _super);
|
||
|
|
function Modal(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
id: Utilities_1.getId('Modal'),
|
||
|
|
isOpen: props.isOpen,
|
||
|
|
isVisible: props.isOpen,
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Modal.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
clearTimeout(this._onModalCloseTimer);
|
||
|
|
// Opening the dialog
|
||
|
|
if (newProps.isOpen) {
|
||
|
|
if (!this.state.isOpen) {
|
||
|
|
// First Open
|
||
|
|
this.setState({
|
||
|
|
isOpen: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// Reopen during closing
|
||
|
|
this.setState({
|
||
|
|
isVisible: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Closing the dialog
|
||
|
|
if (!newProps.isOpen && this.state.isOpen) {
|
||
|
|
this._onModalCloseTimer = this._async.setTimeout(this._onModalClose, parseFloat(styles.duration) * 1000);
|
||
|
|
this.setState({
|
||
|
|
isVisible: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Modal.prototype.componentDidUpdate = function (prevProps, prevState) {
|
||
|
|
if (!prevProps.isOpen && !prevState.isVisible) {
|
||
|
|
this.setState({
|
||
|
|
isVisible: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Modal.prototype.render = function () {
|
||
|
|
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId;
|
||
|
|
var _b = this.state, id = _b.id, isOpen = _b.isOpen, isVisible = _b.isVisible;
|
||
|
|
var modalClassName = Utilities_1.css('ms-Dialog', styles.root, this.props.className, (_c = {},
|
||
|
|
_c['is-open'] = isOpen,
|
||
|
|
_c[styles.rootIsVisible] = isVisible,
|
||
|
|
_c));
|
||
|
|
if (!isOpen) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
// @temp tuatology - Will adjust this to be a panel at certain breakpoints
|
||
|
|
if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
|
||
|
|
return (React.createElement(Layer_1.Layer, { onLayerDidMount: onLayerDidMount },
|
||
|
|
React.createElement(index_2.Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss },
|
||
|
|
React.createElement("div", { className: modalClassName },
|
||
|
|
React.createElement(Overlay_1.Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? null : onDismiss }),
|
||
|
|
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Dialog-main', styles.main, this.props.containerClassName), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children)))));
|
||
|
|
}
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
// Watch for completed animations and set the state
|
||
|
|
Modal.prototype._onModalClose = function () {
|
||
|
|
this.setState({
|
||
|
|
isOpen: false
|
||
|
|
});
|
||
|
|
// Call the onDismiss callback
|
||
|
|
if (this.props.onDismissed) {
|
||
|
|
this.props.onDismissed();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Modal;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Modal.defaultProps = {
|
||
|
|
isOpen: false,
|
||
|
|
isDarkOverlay: true,
|
||
|
|
isBlocking: false,
|
||
|
|
className: '',
|
||
|
|
containerClassName: '',
|
||
|
|
};
|
||
|
|
Modal = __decorate([
|
||
|
|
withResponsiveMode_1.withResponsiveMode
|
||
|
|
], Modal);
|
||
|
|
exports.Modal = Modal;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 263 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(264));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 264 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusTrapZone = (function (_super) {
|
||
|
|
__extends(FocusTrapZone, _super);
|
||
|
|
function FocusTrapZone() {
|
||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
_this._isInFocusStack = false;
|
||
|
|
_this._isInClickStack = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
FocusTrapZone.prototype.componentWillMount = function () {
|
||
|
|
var _a = this.props, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c;
|
||
|
|
if (forceFocusInsideTrap) {
|
||
|
|
this._isInFocusStack = true;
|
||
|
|
FocusTrapZone._focusStack.push(this);
|
||
|
|
}
|
||
|
|
if (!isClickableOutsideFocusTrap) {
|
||
|
|
this._isInClickStack = true;
|
||
|
|
FocusTrapZone._clickStack.push(this);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusTrapZone.prototype.componentDidMount = function () {
|
||
|
|
var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, _b = _a.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _b === void 0 ? false : _b, _c = _a.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c;
|
||
|
|
this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement;
|
||
|
|
if (!Utilities_1.elementContains(this.refs.root, this._previouslyFocusedElement)) {
|
||
|
|
this.focus();
|
||
|
|
}
|
||
|
|
if (forceFocusInsideTrap) {
|
||
|
|
this._events.on(window, 'focus', this._forceFocusInTrap, true);
|
||
|
|
}
|
||
|
|
if (!isClickableOutsideFocusTrap) {
|
||
|
|
this._events.on(window, 'click', this._forceClickInTrap, true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusTrapZone.prototype.componentWillUnmount = function () {
|
||
|
|
var _this = this;
|
||
|
|
var ignoreExternalFocusing = this.props.ignoreExternalFocusing;
|
||
|
|
this._events.dispose();
|
||
|
|
if (this._isInFocusStack || this._isInClickStack) {
|
||
|
|
var filter = function (value) {
|
||
|
|
return _this !== value;
|
||
|
|
};
|
||
|
|
if (this._isInFocusStack) {
|
||
|
|
FocusTrapZone._focusStack = FocusTrapZone._focusStack.filter(filter);
|
||
|
|
}
|
||
|
|
if (this._isInClickStack) {
|
||
|
|
FocusTrapZone._clickStack = FocusTrapZone._clickStack.filter(filter);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!ignoreExternalFocusing && this._previouslyFocusedElement && typeof this._previouslyFocusedElement.focus === 'function') {
|
||
|
|
this._previouslyFocusedElement.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusTrapZone.prototype.render = function () {
|
||
|
|
var _a = this.props, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy;
|
||
|
|
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
|
||
|
|
return (React.createElement("div", __assign({}, divProps, { className: className, ref: 'root', "aria-labelledby": ariaLabelledBy, onKeyDown: this._onKeyboardHandler }), this.props.children));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Need to expose this method in case of popups since focus needs to be set when popup is opened
|
||
|
|
*/
|
||
|
|
FocusTrapZone.prototype.focus = function () {
|
||
|
|
var firstFocusableSelector = this.props.firstFocusableSelector;
|
||
|
|
var _firstFocusableChild;
|
||
|
|
var root = this.refs.root;
|
||
|
|
if (firstFocusableSelector) {
|
||
|
|
_firstFocusableChild = root.querySelector('.' + firstFocusableSelector);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_firstFocusableChild = Utilities_1.getNextElement(root, root.firstChild, true, false, false, true);
|
||
|
|
}
|
||
|
|
if (_firstFocusableChild) {
|
||
|
|
_firstFocusableChild.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusTrapZone.prototype._onKeyboardHandler = function (ev) {
|
||
|
|
if (ev.which !== Utilities_1.KeyCodes.tab) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var root = this.refs.root;
|
||
|
|
var _firstFocusableChild = Utilities_1.getFirstFocusable(root, root.firstChild, true);
|
||
|
|
var _lastFocusableChild = Utilities_1.getLastFocusable(root, root.lastChild, true);
|
||
|
|
if (ev.shiftKey && _firstFocusableChild === ev.target) {
|
||
|
|
_lastFocusableChild.focus();
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
else if (!ev.shiftKey && _lastFocusableChild === ev.target) {
|
||
|
|
_firstFocusableChild.focus();
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusTrapZone.prototype._forceFocusInTrap = function (ev) {
|
||
|
|
if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
|
||
|
|
var focusedElement = document.activeElement;
|
||
|
|
if (!Utilities_1.elementContains(this.refs.root, focusedElement)) {
|
||
|
|
this.focus();
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
FocusTrapZone.prototype._forceClickInTrap = function (ev) {
|
||
|
|
if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) {
|
||
|
|
var clickedElement = ev.target;
|
||
|
|
if (clickedElement && !Utilities_1.elementContains(this.refs.root, clickedElement)) {
|
||
|
|
this.focus();
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return FocusTrapZone;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
FocusTrapZone._focusStack = [];
|
||
|
|
FocusTrapZone._clickStack = [];
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], FocusTrapZone.prototype, "_onKeyboardHandler", null);
|
||
|
|
exports.FocusTrapZone = FocusTrapZone;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 265 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(266));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 266 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(267));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 267 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(268);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Overlay = (function (_super) {
|
||
|
|
__extends(Overlay, _super);
|
||
|
|
function Overlay() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Overlay.prototype.componentDidMount = function () {
|
||
|
|
Utilities_1.disableBodyScroll();
|
||
|
|
};
|
||
|
|
Overlay.prototype.componentWillUnmount = function () {
|
||
|
|
Utilities_1.enableBodyScroll();
|
||
|
|
};
|
||
|
|
Overlay.prototype.render = function () {
|
||
|
|
var _a = this.props, isDarkThemed = _a.isDarkThemed, className = _a.className;
|
||
|
|
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
|
||
|
|
var modifiedClassName = Utilities_1.css('ms-Overlay', styles.root, className, (_b = {},
|
||
|
|
_b['ms-Overlay--dark ' + styles.rootIsDark] = isDarkThemed,
|
||
|
|
_b));
|
||
|
|
return (React.createElement("div", __assign({}, divProps, { className: modifiedClassName })));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
return Overlay;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.Overlay = Overlay;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 268 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_96cb34c6',
|
||
|
|
rootIsNone: 'rootIsNone_96cb34c6',
|
||
|
|
rootIsDark: 'rootIsDark_96cb34c6',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_96cb34c6{background-color:" }, { "theme": "whiteTranslucent40", "defaultValue": "rgba(255,255,255,.4)" }, { "rawString": ";position:absolute;bottom:0;left:0;right:0;top:0}.root_96cb34c6.rootIsNone_96cb34c6{visibility:hidden}.root_96cb34c6.rootIsDark_96cb34c6{background-color:" }, { "theme": "blackTranslucent40", "defaultValue": "rgba(0,0,0,.4)" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 269 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var BaseDecorator_1 = __webpack_require__(253);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var ResponsiveMode;
|
||
|
|
(function (ResponsiveMode) {
|
||
|
|
ResponsiveMode[ResponsiveMode["small"] = 0] = "small";
|
||
|
|
ResponsiveMode[ResponsiveMode["medium"] = 1] = "medium";
|
||
|
|
ResponsiveMode[ResponsiveMode["large"] = 2] = "large";
|
||
|
|
ResponsiveMode[ResponsiveMode["xLarge"] = 3] = "xLarge";
|
||
|
|
ResponsiveMode[ResponsiveMode["xxLarge"] = 4] = "xxLarge";
|
||
|
|
ResponsiveMode[ResponsiveMode["xxxLarge"] = 5] = "xxxLarge";
|
||
|
|
})(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {}));
|
||
|
|
var RESPONSIVE_MAX_CONSTRAINT = [
|
||
|
|
479,
|
||
|
|
639,
|
||
|
|
1023,
|
||
|
|
1365,
|
||
|
|
1919,
|
||
|
|
99999999
|
||
|
|
];
|
||
|
|
var _defaultMode;
|
||
|
|
/**
|
||
|
|
* Allows a server rendered scenario to provide a default responsive mode.
|
||
|
|
*/
|
||
|
|
function setResponsiveMode(responsiveMode) {
|
||
|
|
_defaultMode = responsiveMode;
|
||
|
|
}
|
||
|
|
exports.setResponsiveMode = setResponsiveMode;
|
||
|
|
function withResponsiveMode(ComposedComponent) {
|
||
|
|
return (function (_super) {
|
||
|
|
__extends(WithResponsiveMode, _super);
|
||
|
|
function WithResponsiveMode() {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
_this._updateComposedComponentRef = _this._updateComposedComponentRef.bind(_this);
|
||
|
|
_this.state = {
|
||
|
|
responsiveMode: _this._getResponsiveMode()
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
WithResponsiveMode.prototype.componentDidMount = function () {
|
||
|
|
var _this = this;
|
||
|
|
this._events.on(window, 'resize', function () {
|
||
|
|
var responsiveMode = _this._getResponsiveMode();
|
||
|
|
if (responsiveMode !== _this.state.responsiveMode) {
|
||
|
|
_this.setState({
|
||
|
|
responsiveMode: responsiveMode
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
WithResponsiveMode.prototype.componentWillUnmount = function () {
|
||
|
|
this._events.dispose();
|
||
|
|
};
|
||
|
|
WithResponsiveMode.prototype.render = function () {
|
||
|
|
var responsiveMode = this.state.responsiveMode;
|
||
|
|
return (React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, responsiveMode: responsiveMode }, this.props)));
|
||
|
|
};
|
||
|
|
WithResponsiveMode.prototype._getResponsiveMode = function () {
|
||
|
|
var responsiveMode = ResponsiveMode.small;
|
||
|
|
var win = Utilities_1.getWindow();
|
||
|
|
if (typeof win !== 'undefined') {
|
||
|
|
while (win.innerWidth > RESPONSIVE_MAX_CONSTRAINT[responsiveMode]) {
|
||
|
|
responsiveMode++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (_defaultMode !== undefined) {
|
||
|
|
responsiveMode = _defaultMode;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
throw new Error('Content was rendered in a server environment without providing a default responsive mode. ' +
|
||
|
|
'Call setResponsiveMode to define what the responsive mode is.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return responsiveMode;
|
||
|
|
};
|
||
|
|
return WithResponsiveMode;
|
||
|
|
}(BaseDecorator_1.BaseDecorator));
|
||
|
|
}
|
||
|
|
exports.withResponsiveMode = withResponsiveMode;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 270 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
duration: '0.267s',
|
||
|
|
root: 'root_a3f85f57',
|
||
|
|
rootIsVisible: 'rootIsVisible_a3f85f57',
|
||
|
|
main: 'main_a3f85f57',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_a3f85f57{background-color:transparent;position:fixed;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 267ms}.root_a3f85f57 .ms-Button.ms-Button--compound{display:block}[dir=ltr] .root_a3f85f57 .ms-Button.ms-Button--compound{margin-left:0}[dir=rtl] .root_a3f85f57 .ms-Button.ms-Button--compound{margin-right:0}@media screen and (-ms-high-contrast:active){.root_a3f85f57 .ms-Overlay{opacity:0}}.rootIsVisible_a3f85f57{opacity:1;pointer-events:auto}.main_a3f85f57{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";box-sizing:border-box;position:relative;outline:3px solid transparent;max-height:100%;overflow-y:auto}[dir=ltr] .main_a3f85f57{text-align:left}[dir=rtl] .main_a3f85f57{text-align:right}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 271 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
isOpen: 'isOpen_4755d2e8',
|
||
|
|
main: 'main_4755d2e8',
|
||
|
|
button: 'button_4755d2e8',
|
||
|
|
isClose: 'isClose_4755d2e8',
|
||
|
|
inner: 'inner_4755d2e8',
|
||
|
|
header: 'header_4755d2e8',
|
||
|
|
title: 'title_4755d2e8',
|
||
|
|
topButton: 'topButton_4755d2e8',
|
||
|
|
content: 'content_4755d2e8',
|
||
|
|
subText: 'subText_4755d2e8',
|
||
|
|
actions: 'actions_4755d2e8',
|
||
|
|
actionsRight: 'actionsRight_4755d2e8',
|
||
|
|
action: 'action_4755d2e8',
|
||
|
|
isLargeHeader: 'isLargeHeader_4755d2e8',
|
||
|
|
isMultiline: 'isMultiline_4755d2e8',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".isOpen_4755d2e8{display:-webkit-box;display:-ms-flexbox;display:flex}.main_4755d2e8{width:288px}.button_4755d2e8.isClose_4755d2e8{display:none}.button_4755d2e8.isClose_4755d2e8 .ms-Icon.ms-Icon--Cancel{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:16px}.inner_4755d2e8{padding:0 28px 20px}.header_4755d2e8{position:relative;width:100%;box-sizing:border-box}.title_4755d2e8{margin:0;font-size:21px;font-weight:100;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";padding:20px 36px 20px 28px}[dir=rtl] .title_4755d2e8{padding:20px 28px 20px 36px}.topButton_4755d2e8{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;position:absolute;top:0;padding:12px 12px 0 0}[dir=ltr] .topButton_4755d2e8{right:0}[dir=rtl] .topButton_4755d2e8{left:0}[dir=rtl] .topButton_4755d2e8{padding:12px 0 0 12px}.topButton_4755d2e8>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.content_4755d2e8{position:relative;width:100%}.content_4755d2e8 .ms-Button.ms-Button--compound{margin-bottom:20px}.content_4755d2e8 .ms-Button.ms-Button--compound:last-child{margin-bottom:0}.subText_4755d2e8{margin:0 0 20px 0;padding-top:8px;font-size:12px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-weight:300;line-height:1.5}.actions_4755d2e8{position:relative;width:100%;min-height:24px;line-height:24px;margin:20px 0 0;font-size:0}.actions_4755d2e8 .ms-Button{line-height:normal}.actionsRight_4755d2e8{font-size:0}[dir=ltr] .actionsRight_4755d2e8{text-align:right}[dir=rtl] .actionsRight_4755d2e8{text-align:left}[dir=ltr] .actionsRight_4755d2e8{margin-right:-4px}[dir=rtl] .actionsRight_4755d2e8{margin-left:-4px}.actionsRight_4755d2e8 .action_4755d2e8{margin:0 4px}.isClose_4755d2e8:not(.isLargeHeader_4755d2e8) .button_4755d2e8.isClose_4755d2e8{display:block}.isMultiline_4755d2e8 .title_4755d2e8{font-size:28px}.isMultiline_4755d2e8 .inner_4755d2e8{padding:0 20px 20px}.isLargeHeader_4755d2e8 .header_4755d2e8{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.isLargeHeader_4755d2e8 .title_4755d2e8{font-size:28px;font-weight:100;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:26px 28px 28px;margin-bottom:8px}.isLargeHeader_4755d2e8 .subText_4755d2e8{font-size:14px}@media (min-width:480px){.main_4755d2e8{width:auto;min-width:288px;max-width:340px}}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 272 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var DialogFooter_1 = __webpack_require__(273);
|
||
|
|
var withResponsiveMode_1 = __webpack_require__(269);
|
||
|
|
var stylesImport = __webpack_require__(271);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DialogContent = (function (_super) {
|
||
|
|
__extends(DialogContent, _super);
|
||
|
|
function DialogContent(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
id: Utilities_1.getId('Dialog'),
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DialogContent.prototype.render = function () {
|
||
|
|
var _a = this.props, showCloseButton = _a.showCloseButton, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subText = _a.subText, title = _a.title;
|
||
|
|
var id = this.state.id;
|
||
|
|
var groupings = this._groupChildren();
|
||
|
|
var subTextContent;
|
||
|
|
if (subText) {
|
||
|
|
subTextContent = React.createElement("p", { className: Utilities_1.css('ms-Dialog-subText', styles.subText), id: id + '-subText' }, subText);
|
||
|
|
}
|
||
|
|
return (React.createElement("div", null,
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Dialog-header', styles.header) },
|
||
|
|
React.createElement("p", { className: Utilities_1.css('ms-Dialog-title', styles.title), id: id + '-title', role: 'heading' }, title),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Dialog-topButton', styles.topButton) },
|
||
|
|
this.props.topButtonsProps.map(function (props) { return (React.createElement(Button_1.IconButton, __assign({}, props))); }),
|
||
|
|
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Dialog-button ms-Dialog-button--close', styles.button, (_b = {}, _b[styles.isClose] = !showCloseButton, _b)), iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }))),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Dialog-inner', styles.inner) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Dialog-content', styles.content, this.props.className) },
|
||
|
|
subTextContent,
|
||
|
|
groupings.contents),
|
||
|
|
groupings.footers)));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
// @TODO - typing the footers as an array of DialogFooter is difficult because
|
||
|
|
// casing "child as DialogFooter" causes a problem because
|
||
|
|
// "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
|
||
|
|
DialogContent.prototype._groupChildren = function () {
|
||
|
|
var groupings = {
|
||
|
|
footers: [],
|
||
|
|
contents: []
|
||
|
|
};
|
||
|
|
React.Children.map(this.props.children, function (child) {
|
||
|
|
if (typeof child === 'object' && child !== null && child.type === DialogFooter_1.DialogFooter) {
|
||
|
|
groupings.footers.push(child);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
groupings.contents.push(child);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return groupings;
|
||
|
|
};
|
||
|
|
return DialogContent;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
DialogContent.defaultProps = {
|
||
|
|
showCloseButton: false,
|
||
|
|
className: '',
|
||
|
|
topButtonsProps: []
|
||
|
|
};
|
||
|
|
DialogContent = __decorate([
|
||
|
|
withResponsiveMode_1.withResponsiveMode
|
||
|
|
], DialogContent);
|
||
|
|
exports.DialogContent = DialogContent;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 273 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(271);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DialogFooter = (function (_super) {
|
||
|
|
__extends(DialogFooter, _super);
|
||
|
|
function DialogFooter() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
DialogFooter.prototype.render = function () {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Dialog-actions', styles.actions) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Dialog-actionsRight', styles.actionsRight) }, this._renderChildrenAsActions())));
|
||
|
|
};
|
||
|
|
DialogFooter.prototype._renderChildrenAsActions = function () {
|
||
|
|
return React.Children.map(this.props.children, function (child) {
|
||
|
|
return React.createElement("span", { className: Utilities_1.css('ms-Dialog-action', styles.action) }, child);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return DialogFooter;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DialogFooter = DialogFooter;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 274 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(275));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 275 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(276));
|
||
|
|
__export(__webpack_require__(277));
|
||
|
|
__export(__webpack_require__(279));
|
||
|
|
__export(__webpack_require__(280));
|
||
|
|
__export(__webpack_require__(287));
|
||
|
|
__export(__webpack_require__(288));
|
||
|
|
__export(__webpack_require__(289));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 276 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var DocumentCard_Props_1 = __webpack_require__(277);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(278);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DocumentCard = (function (_super) {
|
||
|
|
__extends(DocumentCard, _super);
|
||
|
|
function DocumentCard() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
DocumentCard.prototype.render = function () {
|
||
|
|
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, className = _a.className, type = _a.type, accentColor = _a.accentColor;
|
||
|
|
var actionable = (onClick || onClickHref) ? true : false;
|
||
|
|
// Override the border color if an accent color was provided (compact card only)
|
||
|
|
var style;
|
||
|
|
if (type === DocumentCard_Props_1.DocumentCardType.compact && accentColor) {
|
||
|
|
style = {
|
||
|
|
borderBottomColor: accentColor
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// if this element is actionable it should have an aria role
|
||
|
|
var role = actionable ? (onClick ? 'button' : 'link') : null;
|
||
|
|
var tabIndex = actionable ? 0 : null;
|
||
|
|
return (React.createElement("div", { tabIndex: tabIndex, role: role, className: Utilities_1.css('ms-DocumentCard', styles.root, (_b = {},
|
||
|
|
_b['ms-DocumentCard--actionable ' + styles.rootIsActionable] = actionable,
|
||
|
|
_b['ms-DocumentCard--compact ' + styles.rootIsCompact] = type === DocumentCard_Props_1.DocumentCardType.compact ? true : false,
|
||
|
|
_b), className), onKeyDown: actionable ? this._onKeyDown : null, onClick: actionable ? this._onClick : null, style: style }, children));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
DocumentCard.prototype._onClick = function (ev) {
|
||
|
|
this._onAction(ev);
|
||
|
|
};
|
||
|
|
DocumentCard.prototype._onKeyDown = function (ev) {
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.enter || ev.which === Utilities_1.KeyCodes.space) {
|
||
|
|
this._onAction(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DocumentCard.prototype._onAction = function (ev) {
|
||
|
|
var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref;
|
||
|
|
if (onClick) {
|
||
|
|
onClick(ev);
|
||
|
|
}
|
||
|
|
else if (!onClick && onClickHref) {
|
||
|
|
// If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref
|
||
|
|
window.location.href = onClickHref;
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return DocumentCard;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
DocumentCard.defaultProps = {
|
||
|
|
type: DocumentCard_Props_1.DocumentCardType.normal
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DocumentCard.prototype, "_onClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DocumentCard.prototype, "_onKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DocumentCard.prototype, "_onAction", null);
|
||
|
|
exports.DocumentCard = DocumentCard;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 277 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DocumentCardType;
|
||
|
|
(function (DocumentCardType) {
|
||
|
|
/**
|
||
|
|
* Standard DocumentCard.
|
||
|
|
*/
|
||
|
|
DocumentCardType[DocumentCardType["normal"] = 0] = "normal";
|
||
|
|
/**
|
||
|
|
* Compact layout. Displays the preview beside the details, rather than above.
|
||
|
|
*/
|
||
|
|
DocumentCardType[DocumentCardType["compact"] = 1] = "compact";
|
||
|
|
})(DocumentCardType = exports.DocumentCardType || (exports.DocumentCardType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 278 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_4e9b7730',
|
||
|
|
rootIsActionable: 'rootIsActionable_4e9b7730',
|
||
|
|
location: 'location_4e9b7730',
|
||
|
|
title: 'title_4e9b7730',
|
||
|
|
rootIsCompact: 'rootIsCompact_4e9b7730',
|
||
|
|
preview: 'preview_4e9b7730',
|
||
|
|
icon: 'icon_4e9b7730',
|
||
|
|
activity: 'activity_4e9b7730',
|
||
|
|
actions: 'actions_4e9b7730',
|
||
|
|
action: 'action_4e9b7730',
|
||
|
|
views: 'views_4e9b7730',
|
||
|
|
activityIsMultiplePeople: 'activityIsMultiplePeople_4e9b7730',
|
||
|
|
avatar: 'avatar_4e9b7730',
|
||
|
|
activityDetails: 'activityDetails_4e9b7730',
|
||
|
|
avatars: 'avatars_4e9b7730',
|
||
|
|
name: 'name_4e9b7730',
|
||
|
|
activityActivity: 'activityActivity_4e9b7730',
|
||
|
|
previewIsFileList: 'previewIsFileList_4e9b7730',
|
||
|
|
fileList: 'fileList_4e9b7730',
|
||
|
|
fileListIcon: 'fileListIcon_4e9b7730',
|
||
|
|
fileListMore: 'fileListMore_4e9b7730',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_4e9b7730{-webkit-font-smoothing:antialiased;background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";box-sizing:border-box;max-width:320px;min-width:206px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.rootIsActionable_4e9b7730:hover{cursor:pointer;border-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsActionable_4e9b7730:hover:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";pointer-events:none}.location_4e9b7730+.title_4e9b7730{padding-top:4px}.rootIsCompact_4e9b7730{border-bottom:2px solid " }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;max-width:480px;height:109px}.rootIsCompact_4e9b7730 .ms-DocumentCard-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rootIsCompact_4e9b7730 .preview_4e9b7730{border-bottom:none;max-height:106px;max-width:144px}.rootIsCompact_4e9b7730 .preview_4e9b7730 .icon_4e9b7730 .ms-Image-image{max-height:32px;max-width:32px}html[dir=ltr] .rootIsCompact_4e9b7730 .preview_4e9b7730{border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=rtl] .rootIsCompact_4e9b7730 .preview_4e9b7730{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.rootIsCompact_4e9b7730 .title_4e9b7730{padding:12px 16px 8px 16px;font-size:15px;font-weight:400;line-height:16px}.rootIsCompact_4e9b7730 .activity_4e9b7730{padding-bottom:12px}.actions_4e9b7730{height:34px;padding:4px 12px;position:relative}.action_4e9b7730{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";cursor:pointer}html[dir=ltr] .action_4e9b7730{float:left}html[dir=rtl] .action_4e9b7730{float:right}[dir=ltr] .action_4e9b7730{margin-right:4px}[dir=rtl] .action_4e9b7730{margin-left:4px}.action_4e9b7730 .ms-Button{font-size:16px;height:34px;width:34px}.action_4e9b7730 .ms-Button:hover .ms-Button-icon{color:#1174c3;cursor:pointer}.views_4e9b7730{line-height:34px}html[dir=ltr] .views_4e9b7730{text-align:right}html[dir=rtl] .views_4e9b7730{text-align:left}.views_4e9b7730 .ms-Icon{font-size:16px;vertical-align:top}[dir=ltr] .views_4e9b7730 .ms-Icon{margin-right:4px}[dir=rtl] .views_4e9b7730 .ms-Icon{margin-left:4px}.activity_4e9b7730{padding:8px 16px;position:relative}html[dir=ltr] .activityIsMultiplePeople_4e9b7730 .avatar_4e9b7730:nth-of-type(2){margin-left:-16px}html[dir=rtl] .activityIsMultiplePeople_4e9b7730 .avatar_4e9b7730:nth-of-type(2){margin-right:-16px}[dir=ltr] .activityIsMultiplePeople_4e9b7730 .activityDetails_4e9b7730{left:72px}[dir=rtl] .activityIsMultiplePeople_4e9b7730 .activityDetails_4e9b7730{right:72px}.avatars_4e9b7730{height:32px}html[dir=ltr] .avatars_4e9b7730{margin-left:-2px}html[dir=rtl] .avatars_4e9b7730{margin-right:-2px}.avatar_4e9b7730{display:inline-block;vertical-align:top;position:relative;text-align:center;width:32px;height:32px}.avatar_4e9b7730:after{content:'';position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:2px solid #fafafa;border-radius:50%}.activityDetails_4e9b7730{height:32px;position:absolute;top:8px;width:calc(100% - 72px)}[dir=ltr] .activityDetails_4e9b7730{left:56px}[dir=rtl] .activityDetails_4e9b7730{right:56px}.activityActivity_4e9b7730,.name_4e9b7730{display:block;font-size:12px;font-weight:400;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";line-height:15px;height:15px;overflow:hidden;text-overflow:ellipsis;whit
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 279 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var stylesImport = __webpack_require__(278);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DocumentCardActions = (function (_super) {
|
||
|
|
__extends(DocumentCardActions, _super);
|
||
|
|
function DocumentCardActions() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
DocumentCardActions.prototype.render = function () {
|
||
|
|
var _a = this.props, actions = _a.actions, views = _a.views;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions', styles.actions) },
|
||
|
|
actions && actions.map(function (action, index) {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-action', styles.action), key: index },
|
||
|
|
React.createElement(Button_1.IconButton, __assign({}, action))));
|
||
|
|
}),
|
||
|
|
views > 0 && (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActions-views', styles.views) },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'view' }),
|
||
|
|
views))));
|
||
|
|
};
|
||
|
|
return DocumentCardActions;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DocumentCardActions = DocumentCardActions;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 280 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Persona_1 = __webpack_require__(281);
|
||
|
|
var stylesImport = __webpack_require__(278);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DocumentCardActivity = (function (_super) {
|
||
|
|
__extends(DocumentCardActivity, _super);
|
||
|
|
function DocumentCardActivity() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
DocumentCardActivity.prototype.render = function () {
|
||
|
|
var _a = this.props, activity = _a.activity, people = _a.people;
|
||
|
|
return (people && people.length > 0 &&
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity', styles.activity, (_b = {},
|
||
|
|
_b['ms-DocumentCardActivity--multiplePeople ' + styles.activityIsMultiplePeople] = people.length > 1,
|
||
|
|
_b)) },
|
||
|
|
this._renderAvatars(people),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-details', styles.activityDetails) },
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-name', styles.name) }, this._getNameString(people)),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardActivity-activity', styles.activityActivity) }, activity))));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
DocumentCardActivity.prototype._renderAvatars = function (people) {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatars', styles.avatars) },
|
||
|
|
people.length > 1 ? this._renderAvatar(people[1]) : null,
|
||
|
|
this._renderAvatar(people[0])));
|
||
|
|
};
|
||
|
|
DocumentCardActivity.prototype._renderAvatar = function (person) {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardActivity-avatar', styles.avatar) },
|
||
|
|
React.createElement(Persona_1.Persona, { imageInitials: person.initials, primaryText: person.name, hidePersonaDetails: true, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, role: 'persentation', size: Persona_1.PersonaSize.extraSmall })));
|
||
|
|
};
|
||
|
|
DocumentCardActivity.prototype._getNameString = function (people) {
|
||
|
|
var nameString = people[0].name;
|
||
|
|
if (people.length >= 2) {
|
||
|
|
nameString += ' +' + (people.length - 1);
|
||
|
|
}
|
||
|
|
return nameString;
|
||
|
|
};
|
||
|
|
return DocumentCardActivity;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DocumentCardActivity = DocumentCardActivity;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 281 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(282));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 282 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(283));
|
||
|
|
__export(__webpack_require__(284));
|
||
|
|
__export(__webpack_require__(285));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 283 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Image_1 = __webpack_require__(187);
|
||
|
|
var Persona_Props_1 = __webpack_require__(284);
|
||
|
|
var PersonaConsts_1 = __webpack_require__(285);
|
||
|
|
var stylesImport = __webpack_require__(286);
|
||
|
|
var styles = stylesImport;
|
||
|
|
// The RGB color swatches
|
||
|
|
var COLOR_SWATCHES_LOOKUP = [
|
||
|
|
Persona_Props_1.PersonaInitialsColor.lightGreen,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.lightBlue,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.lightPink,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.green,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.darkGreen,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.pink,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.magenta,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.purple,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.black,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.teal,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.blue,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.darkBlue,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.orange,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.darkRed,
|
||
|
|
Persona_Props_1.PersonaInitialsColor.red
|
||
|
|
];
|
||
|
|
var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;
|
||
|
|
var Persona = (function (_super) {
|
||
|
|
__extends(Persona, _super);
|
||
|
|
function Persona(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isImageLoaded: false,
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Persona.prototype.render = function () {
|
||
|
|
var _a = this.props, className = _a.className, size = _a.size, imageUrl = _a.imageUrl, initialsColor = _a.initialsColor, presence = _a.presence, primaryText = _a.primaryText, secondaryText = _a.secondaryText, tertiaryText = _a.tertiaryText, optionalText = _a.optionalText, hidePersonaDetails = _a.hidePersonaDetails, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, onRenderPrimaryText = _a.onRenderPrimaryText, onRenderSecondaryText = _a.onRenderSecondaryText, onRenderTertiaryText = _a.onRenderTertiaryText, onRenderOptionalText = _a.onRenderOptionalText, imageShouldStartVisible = _a.imageShouldStartVisible;
|
||
|
|
initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText);
|
||
|
|
var presenceElement = null;
|
||
|
|
if (presence !== Persona_Props_1.PersonaPresence.none) {
|
||
|
|
var userPresence = Persona_Props_1.PersonaPresence[presence], statusIcon = null;
|
||
|
|
switch (userPresence) {
|
||
|
|
case 'online':
|
||
|
|
userPresence = 'SkypeCheck';
|
||
|
|
break;
|
||
|
|
case 'away':
|
||
|
|
userPresence = 'SkypeClock';
|
||
|
|
break;
|
||
|
|
case 'dnd':
|
||
|
|
userPresence = 'SkypeMinus';
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
userPresence = '';
|
||
|
|
}
|
||
|
|
if (userPresence) {
|
||
|
|
statusIcon = (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Persona-presenceIcon', styles.presenceIcon), iconName: userPresence }));
|
||
|
|
}
|
||
|
|
presenceElement = React.createElement("div", { className: Utilities_1.css('ms-Persona-presence', styles.presence) }, statusIcon);
|
||
|
|
}
|
||
|
|
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
|
||
|
|
var personaDetails = React.createElement("div", { className: Utilities_1.css('ms-Persona-details', styles.details) },
|
||
|
|
this._renderElement(this.props.primaryText, Utilities_1.css('ms-Persona-primaryText', styles.primaryText), onRenderPrimaryText),
|
||
|
|
this._renderElement(this.props.secondaryText, Utilities_1.css('ms-Persona-secondaryText', styles.secondaryText), onRenderSecondaryText),
|
||
|
|
this._renderElement(this.props.tertiaryText, Utilities_1.css('ms-Persona-tertiaryText', styles.tertiaryText), onRenderTertiaryText),
|
||
|
|
this._renderElement(this.props.optionalText, Utilities_1.css('ms-Persona-optionalText', styles.optionalText), onRenderOptionalText),
|
||
|
|
this.props.children);
|
||
|
|
return (React.createElement("div", __assign({}, divProps, { className: Utilities_1.css('ms-Persona', styles.root, className, PersonaConsts_1.PERSONA_SIZE[size], PersonaConsts_1.PERSONA_PRESENCE[presence], this.props.showSecondaryText ? styles.showSecondaryText : '') }),
|
||
|
|
size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea) },
|
||
|
|
!this.state.isImageLoaded &&
|
||
|
|
(React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]), "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
|
||
|
|
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }))),
|
||
|
|
presenceElement,
|
||
|
|
(!hidePersonaDetails || (size === Persona_Props_1.PersonaSize.tiny)) && personaDetails));
|
||
|
|
};
|
||
|
|
Persona.prototype._renderElement = function (text, className, render) {
|
||
|
|
return (React.createElement("div", { className: className }, render ? render(this.props) : text));
|
||
|
|
};
|
||
|
|
Persona.prototype._onRenderInitials = function (props) {
|
||
|
|
var imageInitials = props.imageInitials, primaryText = props.primaryText;
|
||
|
|
var isRTL = Utilities_1.getRTL();
|
||
|
|
imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL);
|
||
|
|
return (React.createElement("span", null, imageInitials));
|
||
|
|
};
|
||
|
|
Persona.prototype._getColorFromName = function (displayName) {
|
||
|
|
var color = Persona_Props_1.PersonaInitialsColor.blue;
|
||
|
|
if (!displayName) {
|
||
|
|
return color;
|
||
|
|
}
|
||
|
|
var hashCode = 0;
|
||
|
|
for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {
|
||
|
|
var ch = displayName.charCodeAt(iLen);
|
||
|
|
var shift = iLen % 8;
|
||
|
|
// tslint:disable-next-line:no-bitwise
|
||
|
|
hashCode ^= (ch << shift) + (ch >> (8 - shift));
|
||
|
|
}
|
||
|
|
color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];
|
||
|
|
return color;
|
||
|
|
};
|
||
|
|
Persona.prototype._onPhotoLoadingStateChange = function (loadState) {
|
||
|
|
this.setState({
|
||
|
|
isImageLoaded: loadState === Image_1.ImageLoadState.loaded
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return Persona;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Persona.defaultProps = {
|
||
|
|
primaryText: '',
|
||
|
|
size: Persona_Props_1.PersonaSize.regular,
|
||
|
|
presence: Persona_Props_1.PersonaPresence.none
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Persona.prototype, "_renderElement", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Persona.prototype, "_onRenderInitials", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Persona.prototype, "_onPhotoLoadingStateChange", null);
|
||
|
|
exports.Persona = Persona;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 284 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var PersonaSize;
|
||
|
|
(function (PersonaSize) {
|
||
|
|
PersonaSize[PersonaSize["tiny"] = 0] = "tiny";
|
||
|
|
PersonaSize[PersonaSize["extraExtraSmall"] = 1] = "extraExtraSmall";
|
||
|
|
PersonaSize[PersonaSize["extraSmall"] = 2] = "extraSmall";
|
||
|
|
PersonaSize[PersonaSize["small"] = 3] = "small";
|
||
|
|
PersonaSize[PersonaSize["regular"] = 4] = "regular";
|
||
|
|
PersonaSize[PersonaSize["large"] = 5] = "large";
|
||
|
|
PersonaSize[PersonaSize["extraLarge"] = 6] = "extraLarge";
|
||
|
|
PersonaSize[PersonaSize["size28"] = 7] = "size28";
|
||
|
|
})(PersonaSize = exports.PersonaSize || (exports.PersonaSize = {}));
|
||
|
|
var PersonaPresence;
|
||
|
|
(function (PersonaPresence) {
|
||
|
|
PersonaPresence[PersonaPresence["none"] = 0] = "none";
|
||
|
|
PersonaPresence[PersonaPresence["offline"] = 1] = "offline";
|
||
|
|
PersonaPresence[PersonaPresence["online"] = 2] = "online";
|
||
|
|
PersonaPresence[PersonaPresence["away"] = 3] = "away";
|
||
|
|
PersonaPresence[PersonaPresence["dnd"] = 4] = "dnd";
|
||
|
|
PersonaPresence[PersonaPresence["blocked"] = 5] = "blocked";
|
||
|
|
PersonaPresence[PersonaPresence["busy"] = 6] = "busy";
|
||
|
|
})(PersonaPresence = exports.PersonaPresence || (exports.PersonaPresence = {}));
|
||
|
|
var PersonaInitialsColor;
|
||
|
|
(function (PersonaInitialsColor) {
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["lightBlue"] = 0] = "lightBlue";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["blue"] = 1] = "blue";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["darkBlue"] = 2] = "darkBlue";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["teal"] = 3] = "teal";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["lightGreen"] = 4] = "lightGreen";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["green"] = 5] = "green";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["darkGreen"] = 6] = "darkGreen";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["lightPink"] = 7] = "lightPink";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["pink"] = 8] = "pink";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["magenta"] = 9] = "magenta";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["purple"] = 10] = "purple";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["black"] = 11] = "black";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["orange"] = 12] = "orange";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["red"] = 13] = "red";
|
||
|
|
PersonaInitialsColor[PersonaInitialsColor["darkRed"] = 14] = "darkRed";
|
||
|
|
})(PersonaInitialsColor = exports.PersonaInitialsColor || (exports.PersonaInitialsColor = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 285 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Persona_Props_1 = __webpack_require__(284);
|
||
|
|
var stylesImport = __webpack_require__(286);
|
||
|
|
var styles = stylesImport;
|
||
|
|
exports.PERSONA_SIZE = (_a = {},
|
||
|
|
_a[Persona_Props_1.PersonaSize.tiny] = 'ms-Persona--tiny ' + styles.rootIsTiny,
|
||
|
|
_a[Persona_Props_1.PersonaSize.extraExtraSmall] = 'ms-Persona--xxs ' + styles.rootIsExtraExtraSmall,
|
||
|
|
_a[Persona_Props_1.PersonaSize.extraSmall] = 'ms-Persona--xs ' + styles.rootIsExtraSmall,
|
||
|
|
_a[Persona_Props_1.PersonaSize.small] = 'ms-Persona--sm ' + styles.rootIsSmall,
|
||
|
|
_a[Persona_Props_1.PersonaSize.regular] = '',
|
||
|
|
_a[Persona_Props_1.PersonaSize.large] = 'ms-Persona--lg ' + styles.rootIsLarge,
|
||
|
|
_a[Persona_Props_1.PersonaSize.extraLarge] = 'ms-Persona--xl ' + styles.rootIsExtraLarge,
|
||
|
|
_a[Persona_Props_1.PersonaSize.size28] = 'ms-Persona--28 ' + styles.rootIs28,
|
||
|
|
_a);
|
||
|
|
exports.PERSONA_PRESENCE = (_b = {},
|
||
|
|
_b[Persona_Props_1.PersonaPresence.offline] = 'ms-Persona--offline ' + styles.rootIsOffline,
|
||
|
|
_b[Persona_Props_1.PersonaPresence.online] = 'ms-Persona--online ',
|
||
|
|
_b[Persona_Props_1.PersonaPresence.away] = 'ms-Persona--away ' + styles.rootIsAway,
|
||
|
|
_b[Persona_Props_1.PersonaPresence.dnd] = 'ms-Persona--dnd ' + styles.rootIsDoNotDisturb,
|
||
|
|
_b[Persona_Props_1.PersonaPresence.blocked] = 'ms-Persona--blocked ' + styles.rootIsBlocked,
|
||
|
|
_b[Persona_Props_1.PersonaPresence.busy] = 'ms-Persona--busy ' + styles.rootIsBusy,
|
||
|
|
_b);
|
||
|
|
exports.PERSONA_INITIALS_COLOR = (_c = {},
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.lightBlue] = 'ms-Persona-initials--lightBlue ' + styles.initialsIsLightBlue,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.blue] = 'ms-Persona-initials--blue ' + styles.initialsIsBlue,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.darkBlue] = 'ms-Persona-initials--darkBlue ' + styles.initialsIsDarkBlue,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.teal] = 'ms-Persona-initials--teal ' + styles.initialsIsTeal,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.lightGreen] = 'ms-Persona-initials--lightGreen ' + styles.initialsIsLightGreen,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.green] = 'ms-Persona-initials--green ' + styles.initialsIsGreen,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.darkGreen] = 'ms-Persona-initials--darkGreen ' + styles.initialsIsDarkGreen,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.lightPink] = 'ms-Persona-initials--lightPink ' + styles.initialsIsLightPink,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.pink] = 'ms-Persona-initials--pink ' + styles.initialsIsPink,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.magenta] = 'ms-Persona-initials--magenta ' + styles.initialsIsMagenta,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.purple] = 'ms-Persona-initials--purple ' + styles.initialsIsPurple,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.black] = 'ms-Persona-initials--black ' + styles.initialsIsBlack,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.orange] = 'ms-Persona-initials--orange ' + styles.initialsIsGreen,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.red] = 'ms-Persona-initials--red ' + styles.initialsIsRed,
|
||
|
|
_c[Persona_Props_1.PersonaInitialsColor.darkRed] = 'ms-Persona-initials--darkRed ' + styles.initialsIsDarkRed,
|
||
|
|
_c);
|
||
|
|
var _a, _b, _c;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 286 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_559e9a38',
|
||
|
|
contextualHost: 'contextualHost_559e9a38',
|
||
|
|
primaryText: 'primaryText_559e9a38',
|
||
|
|
imageArea: 'imageArea_559e9a38',
|
||
|
|
image: 'image_559e9a38',
|
||
|
|
placeholder: 'placeholder_559e9a38',
|
||
|
|
initials: 'initials_559e9a38',
|
||
|
|
initialsIsLightBlue: 'initialsIsLightBlue_559e9a38',
|
||
|
|
initialsIsBlue: 'initialsIsBlue_559e9a38',
|
||
|
|
initialsIsDarkBlue: 'initialsIsDarkBlue_559e9a38',
|
||
|
|
initialsIsTeal: 'initialsIsTeal_559e9a38',
|
||
|
|
initialsIsLightGreen: 'initialsIsLightGreen_559e9a38',
|
||
|
|
initialsIsGreen: 'initialsIsGreen_559e9a38',
|
||
|
|
initialsIsDarkGreen: 'initialsIsDarkGreen_559e9a38',
|
||
|
|
initialsIsLightPink: 'initialsIsLightPink_559e9a38',
|
||
|
|
initialsIsPink: 'initialsIsPink_559e9a38',
|
||
|
|
initialsIsMagenta: 'initialsIsMagenta_559e9a38',
|
||
|
|
initialsIsPurple: 'initialsIsPurple_559e9a38',
|
||
|
|
initialsIsBlack: 'initialsIsBlack_559e9a38',
|
||
|
|
initialsIsOrange: 'initialsIsOrange_559e9a38',
|
||
|
|
initialsIsRed: 'initialsIsRed_559e9a38',
|
||
|
|
initialsIsDarkRed: 'initialsIsDarkRed_559e9a38',
|
||
|
|
presence: 'presence_559e9a38',
|
||
|
|
presenceIcon: 'presenceIcon_559e9a38',
|
||
|
|
details: 'details_559e9a38',
|
||
|
|
secondaryText: 'secondaryText_559e9a38',
|
||
|
|
tertiaryText: 'tertiaryText_559e9a38',
|
||
|
|
optionalText: 'optionalText_559e9a38',
|
||
|
|
textContent: 'textContent_559e9a38',
|
||
|
|
rootIsTiny: 'rootIsTiny_559e9a38',
|
||
|
|
rootIsReadonly: 'rootIsReadonly_559e9a38',
|
||
|
|
rootIsExtraExtraSmall: 'rootIsExtraExtraSmall_559e9a38',
|
||
|
|
showSecondaryText: 'showSecondaryText_559e9a38',
|
||
|
|
rootIs28: 'rootIs28_559e9a38',
|
||
|
|
rootIsExtraSmall: 'rootIsExtraSmall_559e9a38',
|
||
|
|
rootIsSmall: 'rootIsSmall_559e9a38',
|
||
|
|
rootIsLarge: 'rootIsLarge_559e9a38',
|
||
|
|
rootIsExtraLarge: 'rootIsExtraLarge_559e9a38',
|
||
|
|
rootIsDarkText: 'rootIsDarkText_559e9a38',
|
||
|
|
rootIsSelectable: 'rootIsSelectable_559e9a38',
|
||
|
|
rootExtraLarge: 'rootExtraLarge_559e9a38',
|
||
|
|
rootIsAvailable: 'rootIsAvailable_559e9a38',
|
||
|
|
rootIsAway: 'rootIsAway_559e9a38',
|
||
|
|
rootIsBlocked: 'rootIsBlocked_559e9a38',
|
||
|
|
rootIsBusy: 'rootIsBusy_559e9a38',
|
||
|
|
rootIsDoNotDisturb: 'rootIsDoNotDisturb_559e9a38',
|
||
|
|
rootIsOffline: 'rootIsOffline_559e9a38',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_559e9a38{box-sizing:border-box;box-shadow:none;margin:0;padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;font-weight:400;line-height:1;position:relative;height:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.root_559e9a38 .contextualHost_559e9a38{display:none}.root_559e9a38:hover .primaryText_559e9a38{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.imageArea_559e9a38{position:relative;overflow:hidden;text-align:center;-webkit-box-flex:0;-ms-flex:0 0 48px;flex:0 0 48px;height:48px;width:48px;border-radius:50%}@media screen and (-ms-high-contrast:active){.imageArea_559e9a38{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.imageArea_559e9a38{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.imageArea_559e9a38 .image_559e9a38{border:0}.placeholder_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;right:0;left:0;font-size:47px;top:9px;z-index:5}.initials_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:17px;font-weight:100;line-height:46px;height:48px}.initials_559e9a38.initialsIsLightBlue_559e9a38{background-color:#6ba5e7}.initials_559e9a38.initialsIsBlue_559e9a38{background-color:#2d89ef}.initials_559e9a38.initialsIsDarkBlue_559e9a38{background-color:#2b5797}.initials_559e9a38.initialsIsTeal_559e9a38{background-color:#00aba9}.initials_559e9a38.initialsIsLightGreen_559e9a38{background-color:#99b433}.initials_559e9a38.initialsIsGreen_559e9a38{background-color:#00a300}.initials_559e9a38.initialsIsDarkGreen_559e9a38{background-color:#1e7145}.initials_559e9a38.initialsIsLightPink_559e9a38{background-color:#e773bd}.initials_559e9a38.initialsIsPink_559e9a38{background-color:#ff0097}.initials_559e9a38.initialsIsMagenta_559e9a38{background-color:#7e3878}.initials_559e9a38.initialsIsPurple_559e9a38{background-color:#603cba}.initials_559e9a38.initialsIsBlack_559e9a38{background-color:#1d1d1d}.initials_559e9a38.initialsIsOrange_559e9a38{background-color:#da532c}.initials_559e9a38.initialsIsRed_559e9a38{background-color:#e11}.initials_559e9a38.initialsIsDarkRed_559e9a38{background-color:#b91d47}.image_559e9a38{position:absolute;top:0;width:100%;height:100%;border-radius:50%;-webkit-perspective:1px;perspective:1px}[dir=ltr] .image_559e9a38{margin-right:10px}[dir=rtl] .image_559e9a38{margin-left:10px}[dir=ltr] .image_559e9a38{left:0}[dir=rtl] .image_559e9a38{right:0}.image_559e9a38[src=\"\"]{display:none}.presence_559e9a38{background-color:#7fba00;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;bottom:-1px;border:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";text-align:center;box-sizing:content-box;-ms-high-contrast-adjust:none}[dir=ltr] .presence_559e9a38{left:34px}[dir=rtl] .presence_559e9a38{right:34px}@media screen and (-ms-high-contrast:active){.presence_559e9a38{border-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.presence_559e9a38{border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.presence_559e9a38 .presenceIcon_559e9a38{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:8px;line-height:12px;vertical-align:top}@media screen and (-ms-high-contrast:active){.presence_559e9a38 .presenceIcon_559e9a38{color:" }, { "theme": "black",
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 287 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(278);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var DocumentCardLocation = (function (_super) {
|
||
|
|
__extends(DocumentCardLocation, _super);
|
||
|
|
function DocumentCardLocation() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
DocumentCardLocation.prototype.render = function () {
|
||
|
|
var _a = this.props, location = _a.location, locationHref = _a.locationHref, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
|
||
|
|
return (React.createElement("a", { className: Utilities_1.css('ms-DocumentCardLocation', styles.location), href: locationHref, onClick: onClick, "aria-label": ariaLabel }, location));
|
||
|
|
};
|
||
|
|
return DocumentCardLocation;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.DocumentCardLocation = DocumentCardLocation;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 288 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Image_1 = __webpack_require__(187);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(278);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var LIST_ITEM_COUNT = 3;
|
||
|
|
var DocumentCardPreview = (function (_super) {
|
||
|
|
__extends(DocumentCardPreview, _super);
|
||
|
|
function DocumentCardPreview() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
DocumentCardPreview.prototype.render = function () {
|
||
|
|
var previewImages = this.props.previewImages;
|
||
|
|
var style, preview;
|
||
|
|
var isFileList = false;
|
||
|
|
if (previewImages.length > 1) {
|
||
|
|
// Render a list of files
|
||
|
|
preview = this._renderPreviewList(previewImages);
|
||
|
|
isFileList = true;
|
||
|
|
}
|
||
|
|
else if (previewImages.length === 1) {
|
||
|
|
// Render a single preview
|
||
|
|
preview = this._renderPreviewImage(previewImages[0]);
|
||
|
|
// Override the border color if an accent color was provided
|
||
|
|
if (previewImages[0].accentColor) {
|
||
|
|
style = {
|
||
|
|
borderBottomColor: previewImages[0].accentColor
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardPreview', styles.preview, isFileList && ('is-fileList ' + styles.previewIsFileList)), style: style }, preview));
|
||
|
|
};
|
||
|
|
DocumentCardPreview.prototype._renderPreviewImage = function (previewImage) {
|
||
|
|
var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit;
|
||
|
|
var image = (React.createElement(Image_1.Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: 'presentation', alt: '' }));
|
||
|
|
var icon;
|
||
|
|
if (previewImage.iconSrc) {
|
||
|
|
icon = React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-icon', styles.icon), src: previewImage.iconSrc, role: 'presentation', alt: '' });
|
||
|
|
}
|
||
|
|
return (React.createElement("div", null,
|
||
|
|
image,
|
||
|
|
icon));
|
||
|
|
};
|
||
|
|
DocumentCardPreview.prototype._renderPreviewList = function (previewImages) {
|
||
|
|
var getOverflowDocumentCountText = this.props.getOverflowDocumentCountText;
|
||
|
|
// Determine how many documents we won't be showing
|
||
|
|
var overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
|
||
|
|
// Determine the overflow text that will be rendered after the preview list.
|
||
|
|
var overflowText = overflowDocumentCount ?
|
||
|
|
(getOverflowDocumentCountText ?
|
||
|
|
getOverflowDocumentCountText(overflowDocumentCount) :
|
||
|
|
'+' + overflowDocumentCount) : null;
|
||
|
|
// Create list items for the documents to be shown
|
||
|
|
var fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map(function (file, fileIndex) { return (React.createElement("li", { key: fileIndex },
|
||
|
|
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon), src: file.iconSrc, role: 'presentation', alt: '', width: '16px', height: '16px' }),
|
||
|
|
React.createElement("a", { href: file.url }, file.name))); });
|
||
|
|
return (React.createElement("div", null,
|
||
|
|
React.createElement("ul", { className: Utilities_1.css('ms-DocumentCardPreview-fileList', styles.fileList) }, fileListItems),
|
||
|
|
overflowText &&
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-DocumentCardPreview-fileListMore', styles.fileListMore) }, overflowText)));
|
||
|
|
};
|
||
|
|
return DocumentCardPreview;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DocumentCardPreview.prototype, "_renderPreviewList", null);
|
||
|
|
exports.DocumentCardPreview = DocumentCardPreview;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 289 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(278);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var TRUNCATION_SEPARATOR = '…';
|
||
|
|
var TRUNCATION_MINIMUM_LENGTH = 40; // This is the length we know can fit into the min width of DocumentCard.
|
||
|
|
var TRUNCATION_MAXIMUM_LENGTH = 90 - TRUNCATION_SEPARATOR.length;
|
||
|
|
var TRUNCATION_FIRST_PIECE_LONGER_BY = 10;
|
||
|
|
var TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;
|
||
|
|
var DocumentCardTitle = (function (_super) {
|
||
|
|
__extends(DocumentCardTitle, _super);
|
||
|
|
function DocumentCardTitle(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
truncatedTitleFirstPiece: '',
|
||
|
|
truncatedTitleSecondPiece: ''
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
DocumentCardTitle.prototype.componentDidMount = function () {
|
||
|
|
var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate;
|
||
|
|
if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) {
|
||
|
|
if (this._doesTitleOverflow()) {
|
||
|
|
this._startTruncation(this.props);
|
||
|
|
}
|
||
|
|
this._events.on(window, 'resize', this._updateTruncation);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
this._events.off(window, 'resize');
|
||
|
|
this._isTruncated = false;
|
||
|
|
if (newProps.shouldTruncate && newProps.title && newProps.title.length > TRUNCATION_MINIMUM_LENGTH) {
|
||
|
|
this._startTruncation(newProps);
|
||
|
|
this._events.on(window, 'resize', this._updateTruncation);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype.componentDidUpdate = function () {
|
||
|
|
// If we're truncating, make sure the title fits
|
||
|
|
if (this.props.shouldTruncate) {
|
||
|
|
this._shrinkTitle();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype.render = function () {
|
||
|
|
var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate;
|
||
|
|
var _b = this.state, truncatedTitleFirstPiece = _b.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _b.truncatedTitleSecondPiece;
|
||
|
|
var documentCardTitle;
|
||
|
|
if (shouldTruncate && this._isTruncated) {
|
||
|
|
documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title },
|
||
|
|
truncatedTitleFirstPiece,
|
||
|
|
"\u2026",
|
||
|
|
truncatedTitleSecondPiece));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
documentCardTitle = (React.createElement("div", { className: Utilities_1.css('ms-DocumentCardTitle', styles.title), ref: this._resolveRef('_titleElement'), title: title }, title));
|
||
|
|
}
|
||
|
|
return documentCardTitle;
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype._startTruncation = function (props) {
|
||
|
|
var originalTitle = props.title;
|
||
|
|
this._isTruncated = false;
|
||
|
|
// If the title is really short, there's no need to truncate it
|
||
|
|
if (originalTitle && originalTitle.length >= TRUNCATION_MINIMUM_LENGTH) {
|
||
|
|
// Break the text into two pieces for assembly later
|
||
|
|
if (originalTitle.length > TRUNCATION_MAXIMUM_LENGTH) {
|
||
|
|
// The text is really long, so we can take a chunk out of the middle so the two pieces combine for the maximum length
|
||
|
|
this._isTruncated = true;
|
||
|
|
this.setState({
|
||
|
|
truncatedTitleFirstPiece: originalTitle.slice(0, TRUNCATION_MAXIMUM_LENGTH / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
|
||
|
|
truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (TRUNCATION_MAXIMUM_LENGTH / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// The text is not so long, so we'll just break it into two pieces
|
||
|
|
this.setState({
|
||
|
|
truncatedTitleFirstPiece: originalTitle.slice(0, Math.ceil(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY),
|
||
|
|
truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - Math.floor(originalTitle.length / 2) + TRUNCATION_FIRST_PIECE_LONGER_BY)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Save the width we just started truncation at, so that later we will only update truncation if necessary
|
||
|
|
this._truncatedTitleAtWidth = this._titleElement.clientWidth;
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype._shrinkTitle = function () {
|
||
|
|
if (this._doesTitleOverflow()) {
|
||
|
|
var _a = this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece;
|
||
|
|
this._isTruncated = true;
|
||
|
|
if (!truncatedTitleFirstPiece && !truncatedTitleSecondPiece) {
|
||
|
|
this._startTruncation(this.props);
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),
|
||
|
|
truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype._doesTitleOverflow = function () {
|
||
|
|
var titleElement = this._titleElement;
|
||
|
|
return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth;
|
||
|
|
};
|
||
|
|
DocumentCardTitle.prototype._updateTruncation = function () {
|
||
|
|
// Only update truncation if the title's size has changed since the last time we truncated
|
||
|
|
if (this._titleElement.clientWidth !== this._truncatedTitleAtWidth) {
|
||
|
|
// Throttle truncation so that it doesn't happen during a window resize
|
||
|
|
clearTimeout(this._scrollTimerId);
|
||
|
|
this._scrollTimerId = this._async.setTimeout(this._startTruncation.bind(this, this.props), 250);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return DocumentCardTitle;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], DocumentCardTitle.prototype, "_startTruncation", null);
|
||
|
|
exports.DocumentCardTitle = DocumentCardTitle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 290 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(291));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 291 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(292));
|
||
|
|
__export(__webpack_require__(293));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 292 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Dropdown_Props_1 = __webpack_require__(293);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var Callout_1 = __webpack_require__(59);
|
||
|
|
var Label_1 = __webpack_require__(189);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Panel_1 = __webpack_require__(294);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var withResponsiveMode_1 = __webpack_require__(269);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(299);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Dropdown = Dropdown_1 = (function (_super) {
|
||
|
|
__extends(Dropdown, _super);
|
||
|
|
function Dropdown(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({
|
||
|
|
'isDisabled': 'disabled'
|
||
|
|
});
|
||
|
|
_this._warnMutuallyExclusive({
|
||
|
|
'defaultSelectedKey': 'selectedKey'
|
||
|
|
});
|
||
|
|
_this._id = props.id || Utilities_1.getId('Dropdown');
|
||
|
|
var selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
|
||
|
|
_this.state = {
|
||
|
|
isOpen: false,
|
||
|
|
selectedIndex: _this._getSelectedIndex(props.options, selectedKey)
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Dropdown.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
// In controlled component usage where selectedKey is provided, update the selectedIndex
|
||
|
|
// state if the key or options change.
|
||
|
|
if (newProps.selectedKey !== undefined &&
|
||
|
|
(newProps.selectedKey !== this.props.selectedKey || newProps.options !== this.props.options)) {
|
||
|
|
this.setState({
|
||
|
|
selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Dropdown.prototype.componentDidUpdate = function (prevProps, prevState) {
|
||
|
|
if (prevState.isOpen === true && this.state.isOpen === false) {
|
||
|
|
this._dropDown.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// Primary Render
|
||
|
|
Dropdown.prototype.render = function () {
|
||
|
|
var id = this._id;
|
||
|
|
var _a = this.props, className = _a.className, label = _a.label, options = _a.options, disabled = _a.disabled, isDisabled = _a.isDisabled, ariaLabel = _a.ariaLabel, required = _a.required, errorMessage = _a.errorMessage, _b = _a.onRenderTitle, onRenderTitle = _b === void 0 ? this._onRenderTitle : _b, _c = _a.onRenderContainer, onRenderContainer = _c === void 0 ? this._onRenderContainer : _c;
|
||
|
|
var _d = this.state, isOpen = _d.isOpen, selectedIndex = _d.selectedIndex;
|
||
|
|
var selectedOption = options[selectedIndex];
|
||
|
|
// Remove this deprecation workaround at 1.0.0
|
||
|
|
if (isDisabled !== undefined) {
|
||
|
|
disabled = isDisabled;
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { ref: 'root', className: Utilities_1.css('ms-Dropdown-container') },
|
||
|
|
label && (React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Dropdown-label'), id: id + '-label', ref: this._resolveRef('_dropdownLabel'), required: required }, label)),
|
||
|
|
React.createElement("div", { "data-is-focusable": !disabled, ref: this._resolveRef('_dropDown'), id: id, className: Utilities_1.css('ms-Dropdown', styles.root, className, (_e = {
|
||
|
|
'is-open': isOpen
|
||
|
|
},
|
||
|
|
_e['is-disabled ' + styles.rootIsDisabled] = disabled,
|
||
|
|
_e['is-required '] = required,
|
||
|
|
_e)), tabIndex: disabled ? -1 : 0, onKeyDown: this._onDropdownKeyDown, onKeyUp: this._onDropdownKeyUp, onClick: this._onDropdownClick, "aria-expanded": isOpen ? 'true' : 'false', role: 'combobox', "aria-readonly": true, "aria-live": disabled || isOpen ? 'off' : 'assertive', "aria-label": ariaLabel || label, "aria-describedby": id + '-option', "aria-activedescendant": isOpen && selectedIndex >= 0 ? (this._id + '-list' + selectedIndex) : null, "aria-disabled": disabled, "aria-owns": id + '-list' },
|
||
|
|
React.createElement("span", { id: id + '-option', className: Utilities_1.css('ms-Dropdown-title', styles.title, !selectedOption && styles.titleIsPlaceHolder, (errorMessage && errorMessage.length > 0 ? styles.titleIsError : null)), key: selectedIndex, "aria-atomic": true }, // If option is selected render title, otherwise render the placeholder text
|
||
|
|
selectedOption ? (onRenderTitle(selectedOption, this._onRenderTitle)) :
|
||
|
|
this._onRenderPlaceHolder(this.props)),
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Dropdown-caretDown', styles.caretDown), iconName: 'chevronDown' })),
|
||
|
|
isOpen && (onRenderContainer(this.props, this._onRenderContainer)),
|
||
|
|
errorMessage &&
|
||
|
|
React.createElement("div", { className: Utilities_1.css(styles.errorMessage) }, errorMessage)));
|
||
|
|
var _e;
|
||
|
|
};
|
||
|
|
Dropdown.prototype.focus = function () {
|
||
|
|
if (this._dropDown && this._dropDown.tabIndex !== -1) {
|
||
|
|
this._dropDown.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Dropdown.prototype.setSelectedIndex = function (index) {
|
||
|
|
var _a = this.props, onChanged = _a.onChanged, options = _a.options;
|
||
|
|
var selectedIndex = this.state.selectedIndex;
|
||
|
|
index = Math.max(0, Math.min(options.length - 1, index));
|
||
|
|
if (index !== selectedIndex) {
|
||
|
|
// Set the selected option.
|
||
|
|
this.setState({
|
||
|
|
selectedIndex: index
|
||
|
|
});
|
||
|
|
if (onChanged) {
|
||
|
|
onChanged(options[index], index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// Render text in dropdown input
|
||
|
|
Dropdown.prototype._onRenderTitle = function (item) {
|
||
|
|
return React.createElement("span", null, item.text);
|
||
|
|
};
|
||
|
|
// Render placeHolder text in dropdown input
|
||
|
|
Dropdown.prototype._onRenderPlaceHolder = function (props) {
|
||
|
|
if (!props.placeHolder) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return React.createElement("span", null, props.placeHolder);
|
||
|
|
};
|
||
|
|
// Render Callout or Panel container and pass in list
|
||
|
|
Dropdown.prototype._onRenderContainer = function (props) {
|
||
|
|
var _a = this.props, _b = _a.onRenderList, onRenderList = _b === void 0 ? this._onRenderList : _b, responsiveMode = _a.responsiveMode, calloutProps = _a.calloutProps;
|
||
|
|
var isSmall = responsiveMode <= withResponsiveMode_1.ResponsiveMode.medium;
|
||
|
|
return (isSmall ?
|
||
|
|
React.createElement(Panel_1.Panel, { className: Utilities_1.css('ms-Dropdown-panel', styles.panel), isOpen: true, isLightDismiss: true, onDismissed: this._onDismiss, hasCloseButton: false }, onRenderList(props, this._onRenderList))
|
||
|
|
:
|
||
|
|
React.createElement(Callout_1.Callout, __assign({ isBeakVisible: false, gapSpace: 0, doNotLayer: false, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, calloutProps, { className: Utilities_1.css('ms-Dropdown-callout', styles.callout, calloutProps ? calloutProps.className : undefined), targetElement: this._dropDown, onDismiss: this._onDismiss, onPositioned: this._onPositioned }),
|
||
|
|
React.createElement("div", { style: { width: this._dropDown.clientWidth - 2 } }, onRenderList(props, this._onRenderList))));
|
||
|
|
};
|
||
|
|
// Render List of items
|
||
|
|
Dropdown.prototype._onRenderList = function (props) {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props.onRenderItem, onRenderItem = _a === void 0 ? this._onRenderItem : _a;
|
||
|
|
var id = this._id;
|
||
|
|
var selectedIndex = this.state.selectedIndex;
|
||
|
|
return (React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('_focusZone'), direction: FocusZone_1.FocusZoneDirection.vertical, defaultActiveElement: '#' + id + '-list' + selectedIndex, id: id + '-list', className: Utilities_1.css('ms-Dropdown-items', styles.items), "aria-labelledby": id + '-label', onKeyDown: this._onZoneKeyDown, role: 'listbox' }, this.props.options.map(function (item, index) { return onRenderItem(__assign({}, item, { index: index }), _this._onRenderItem); })));
|
||
|
|
};
|
||
|
|
// Render items
|
||
|
|
Dropdown.prototype._onRenderItem = function (item) {
|
||
|
|
switch (item.itemType) {
|
||
|
|
case Dropdown_Props_1.DropdownMenuItemType.Divider:
|
||
|
|
return this._renderSeparator(item);
|
||
|
|
case Dropdown_Props_1.DropdownMenuItemType.Header:
|
||
|
|
return this._renderHeader(item);
|
||
|
|
default:
|
||
|
|
return this._renderOption(item);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// Render separator
|
||
|
|
Dropdown.prototype._renderSeparator = function (item) {
|
||
|
|
var index = item.index, key = item.key;
|
||
|
|
if (index > 0) {
|
||
|
|
return React.createElement("div", { role: 'separator', key: key, className: Utilities_1.css('ms-Dropdown-divider', styles.divider) });
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
Dropdown.prototype._renderHeader = function (item) {
|
||
|
|
var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Dropdown-header', styles.header) }, onRenderOption(item, this._onRenderOption)));
|
||
|
|
};
|
||
|
|
// Render menu item
|
||
|
|
Dropdown.prototype._renderOption = function (item) {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;
|
||
|
|
var id = this._id;
|
||
|
|
return (React.createElement(Button_1.CommandButton, { id: id + '-list' + item.index, ref: Dropdown_1.Option + item.index, key: item.key, "data-index": item.index, "data-is-focusable": true, className: Utilities_1.css('ms-Dropdown-item', styles.item, (_b = {},
|
||
|
|
_b['is-selected ' + styles.itemIsSelected] = this.state.selectedIndex === item.index,
|
||
|
|
_b['is-disabled ' + styles.itemIsDisabled] = this.props.disabled === true,
|
||
|
|
_b)), onClick: function () { return _this._onItemClick(item.index); }, role: 'option', "aria-selected": this.state.selectedIndex === item.index ? 'true' : 'false', ariaLabel: item.text, title: item.text },
|
||
|
|
" ",
|
||
|
|
onRenderOption(item, this._onRenderOption)));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
// Render content of item (i.e. text/icon inside of button)
|
||
|
|
Dropdown.prototype._onRenderOption = function (item) {
|
||
|
|
return React.createElement("span", { className: Utilities_1.css('ms-Dropdown-optionText', styles.optionText) }, item.text);
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onPositioned = function () {
|
||
|
|
this._focusZone.focus();
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onItemClick = function (index) {
|
||
|
|
this.setSelectedIndex(index);
|
||
|
|
this.setState({
|
||
|
|
isOpen: false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onDismiss = function () {
|
||
|
|
this.setState({ isOpen: false });
|
||
|
|
this._dropDown.focus();
|
||
|
|
};
|
||
|
|
Dropdown.prototype._getSelectedIndex = function (options, selectedKey) {
|
||
|
|
return Utilities_1.findIndex(options, (function (option) { return (option.isSelected || option.selected || (selectedKey != null) && option.key === selectedKey); }));
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onDropdownKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.enter:
|
||
|
|
this.setState({
|
||
|
|
isOpen: !this.state.isOpen
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
if (!this.state.isOpen) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
isOpen: false
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.up:
|
||
|
|
this.setSelectedIndex(this.state.selectedIndex - 1);
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.down:
|
||
|
|
if (ev.altKey || ev.metaKey) {
|
||
|
|
this.setState({ isOpen: true });
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setSelectedIndex(this.state.selectedIndex + 1);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.home:
|
||
|
|
this.setSelectedIndex(0);
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.end:
|
||
|
|
this.setSelectedIndex(this.props.options.length - 1);
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.space:
|
||
|
|
// event handled in _onDropdownKeyUp
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onDropdownKeyUp = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.space:
|
||
|
|
this.setState({
|
||
|
|
isOpen: !this.state.isOpen
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onZoneKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.up:
|
||
|
|
if (ev.altKey || ev.metaKey) {
|
||
|
|
this.setState({ isOpen: false });
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
this.setState({ isOpen: false });
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.tab:
|
||
|
|
this.setState({ isOpen: false });
|
||
|
|
return;
|
||
|
|
default:
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
};
|
||
|
|
Dropdown.prototype._onDropdownClick = function () {
|
||
|
|
var _a = this.props, disabled = _a.disabled, isDisabled = _a.isDisabled;
|
||
|
|
var isOpen = this.state.isOpen;
|
||
|
|
// Remove this deprecation workaround at 1.0.0
|
||
|
|
if (isDisabled !== undefined) {
|
||
|
|
disabled = isDisabled;
|
||
|
|
}
|
||
|
|
if (!disabled) {
|
||
|
|
this.setState({
|
||
|
|
isOpen: !isOpen
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Dropdown;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Dropdown.defaultProps = {
|
||
|
|
options: []
|
||
|
|
};
|
||
|
|
Dropdown.Option = 'option';
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onRenderTitle", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onRenderPlaceHolder", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onRenderContainer", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onRenderList", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onRenderItem", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_renderOption", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onRenderOption", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onPositioned", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onDismiss", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onDropdownKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onDropdownKeyUp", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onZoneKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Dropdown.prototype, "_onDropdownClick", null);
|
||
|
|
Dropdown = Dropdown_1 = __decorate([
|
||
|
|
withResponsiveMode_1.withResponsiveMode
|
||
|
|
], Dropdown);
|
||
|
|
exports.Dropdown = Dropdown;
|
||
|
|
var Dropdown_1;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 293 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var DropdownMenuItemType;
|
||
|
|
(function (DropdownMenuItemType) {
|
||
|
|
DropdownMenuItemType[DropdownMenuItemType["Normal"] = 0] = "Normal";
|
||
|
|
DropdownMenuItemType[DropdownMenuItemType["Divider"] = 1] = "Divider";
|
||
|
|
DropdownMenuItemType[DropdownMenuItemType["Header"] = 2] = "Header";
|
||
|
|
})(DropdownMenuItemType = exports.DropdownMenuItemType || (exports.DropdownMenuItemType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 294 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(295));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 295 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(296));
|
||
|
|
__export(__webpack_require__(297));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 296 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var index_1 = __webpack_require__(263);
|
||
|
|
var Panel_Props_1 = __webpack_require__(297);
|
||
|
|
var Layer_1 = __webpack_require__(134);
|
||
|
|
var Overlay_1 = __webpack_require__(265);
|
||
|
|
var Popup_1 = __webpack_require__(64);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var stylesImport = __webpack_require__(298);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Panel = (function (_super) {
|
||
|
|
__extends(Panel, _super);
|
||
|
|
function Panel(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isFooterSticky: false,
|
||
|
|
isOpen: false,
|
||
|
|
isAnimating: false,
|
||
|
|
id: Utilities_1.getId('Panel')
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Panel.prototype.componentDidMount = function () {
|
||
|
|
this._events.on(window, 'resize', this._updateFooterPosition);
|
||
|
|
if (this.props.isOpen) {
|
||
|
|
this.open();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Panel.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.isOpen !== this.state.isOpen) {
|
||
|
|
if (newProps.isOpen) {
|
||
|
|
this.open();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.dismiss();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Panel.prototype.render = function () {
|
||
|
|
var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onRenderNavigation, onRenderNavigation = _c === void 0 ? this._onRenderNavigation : _c, _d = _a.onRenderHeader, onRenderHeader = _d === void 0 ? this._onRenderHeader : _d, _e = _a.onRenderBody, onRenderBody = _e === void 0 ? this._onRenderBody : _e, _f = _a.onRenderFooter, onRenderFooter = _f === void 0 ? this._onRenderFooter : _f;
|
||
|
|
var _g = this.state, isOpen = _g.isOpen, isAnimating = _g.isAnimating, id = _g.id, isFooterSticky = _g.isFooterSticky;
|
||
|
|
var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false;
|
||
|
|
var isRTL = Utilities_1.getRTL();
|
||
|
|
var isOnRightSide = isRTL ? isLeft : !isLeft;
|
||
|
|
var headerTextId = id + '-headerText';
|
||
|
|
var customWidthStyles = (type === Panel_Props_1.PanelType.custom) ? { width: customWidth } : {};
|
||
|
|
if (!isOpen && !isAnimating) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var overlay;
|
||
|
|
if (isBlocking) {
|
||
|
|
overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200, !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null }));
|
||
|
|
}
|
||
|
|
return (React.createElement(Layer_1.Layer, __assign({}, layerProps),
|
||
|
|
React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.dismiss },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Panel', styles.root, className,
|
||
|
|
// because the RTL animations are not being used, we need to set a class
|
||
|
|
isOpen && ('is-open ' + styles.rootIsOpen), type === Panel_Props_1.PanelType.smallFluid && ('ms-Panel--smFluid ' + styles.rootIsSmallFluid), type === Panel_Props_1.PanelType.smallFixedNear && ('ms-Panel--smLeft ' + styles.rootIsSmallLeft), type === Panel_Props_1.PanelType.smallFixedFar && ('ms-Panel--sm ' + styles.rootIsSmall), type === Panel_Props_1.PanelType.medium && ('ms-Panel--md ' + styles.rootIsMedium), type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed && ('ms-Panel--lg ' + styles.rootIsLarge), type === Panel_Props_1.PanelType.largeFixed && ('ms-Panel--fixed ' + styles.rootIsFixed), type === Panel_Props_1.PanelType.extraLarge && ('ms-Panel--xl ' + styles.rootIsXLarge), type === Panel_Props_1.PanelType.custom && ('ms-Panel--custom ' + styles.rootIsCustom), hasCloseButton && ('ms-Panel--hasCloseButton ' + styles.rootHasCloseButton)) },
|
||
|
|
overlay,
|
||
|
|
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) },
|
||
|
|
onRenderHeader(this.props, this._onRenderHeader),
|
||
|
|
onRenderBody(this.props, this._onRenderBody),
|
||
|
|
onRenderFooter(this.props, this._onRenderFooter)))))));
|
||
|
|
};
|
||
|
|
Panel.prototype.open = function () {
|
||
|
|
var _this = this;
|
||
|
|
if (!this.state.isOpen) {
|
||
|
|
this.setState({
|
||
|
|
isOpen: true,
|
||
|
|
isAnimating: true
|
||
|
|
}, function () {
|
||
|
|
_this._async.setTimeout(_this._onTransitionComplete, 200);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Panel.prototype.dismiss = function () {
|
||
|
|
var _this = this;
|
||
|
|
if (this.state.isOpen) {
|
||
|
|
this.setState({
|
||
|
|
isOpen: false,
|
||
|
|
isAnimating: true
|
||
|
|
}, function () {
|
||
|
|
_this._async.setTimeout(_this._onTransitionComplete, 200);
|
||
|
|
});
|
||
|
|
if (this.props.onDismiss) {
|
||
|
|
this.props.onDismiss();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Panel.prototype._onRenderNavigation = function (props) {
|
||
|
|
var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
|
||
|
|
return (hasCloseButton &&
|
||
|
|
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton), onClick: this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } }));
|
||
|
|
};
|
||
|
|
Panel.prototype._onRenderHeader = function (props) {
|
||
|
|
var headerText = props.headerText, headerTextId = props.headerTextId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
|
||
|
|
return (headerText &&
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) },
|
||
|
|
React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: headerTextId, role: 'heading' }, headerText)));
|
||
|
|
};
|
||
|
|
Panel.prototype._onRenderBody = function (props) {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Panel-content', styles.content), ref: this._resolveRef('_content') }, props.children));
|
||
|
|
};
|
||
|
|
Panel.prototype._onRenderFooter = function (props) {
|
||
|
|
var isFooterSticky = this.state.isFooterSticky;
|
||
|
|
var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
|
||
|
|
return (onRenderFooterContent != null &&
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
|
||
|
|
};
|
||
|
|
Panel.prototype._updateFooterPosition = function () {
|
||
|
|
var _content = this._content;
|
||
|
|
if (_content) {
|
||
|
|
var height = _content.clientHeight;
|
||
|
|
var innerHeight_1 = _content.scrollHeight;
|
||
|
|
this.setState({
|
||
|
|
isFooterSticky: height < innerHeight_1 ? true : false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Panel.prototype._onPanelClick = function () {
|
||
|
|
this.dismiss();
|
||
|
|
};
|
||
|
|
Panel.prototype._onTransitionComplete = function () {
|
||
|
|
this.setState({
|
||
|
|
isAnimating: false
|
||
|
|
});
|
||
|
|
if (!this.state.isOpen && this.props.onDismissed) {
|
||
|
|
this.props.onDismissed();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Panel;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Panel.defaultProps = {
|
||
|
|
isOpen: false,
|
||
|
|
isBlocking: true,
|
||
|
|
hasCloseButton: true,
|
||
|
|
type: Panel_Props_1.PanelType.smallFixedFar,
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "dismiss", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "_onRenderNavigation", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "_onRenderHeader", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "_onRenderBody", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "_onRenderFooter", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "_onPanelClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Panel.prototype, "_onTransitionComplete", null);
|
||
|
|
exports.Panel = Panel;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 297 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var PanelType;
|
||
|
|
(function (PanelType) {
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fluid width.
|
||
|
|
* Only used on Small screen breakpoints.
|
||
|
|
* Small: 320-479px width (full screen), 16px Left/Right padding
|
||
|
|
* Medium: <unused>
|
||
|
|
* Large: <unused>
|
||
|
|
* XLarge: <unused>
|
||
|
|
* XXLarge: <unused>
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["smallFluid"] = 0] = "smallFluid";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'small' mode, anchored to the far side (right in LTR mode), and has a fixed width.
|
||
|
|
* Small: 272px width, 16px Left/Right padding
|
||
|
|
* Medium: 340px width, 16px Left/Right padding
|
||
|
|
* Large: 340px width, 32px Left/Right padding
|
||
|
|
* XLarge: 340px width, 32px Left/Right padding
|
||
|
|
* XXLarge: 340px width, 40px Left/Right padding
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["smallFixedFar"] = 1] = "smallFixedFar";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'small' mode, anchored to the near side (left in LTR mode), and has a fixed width.
|
||
|
|
* Small: 272px width, 16px Left/Right padding
|
||
|
|
* Medium: 272px width, 16px Left/Right padding
|
||
|
|
* Large: 272px width, 32px Left/Right padding
|
||
|
|
* XLarge: 272px width, 32px Left/Right padding
|
||
|
|
* XXLarge: 272px width, 32px Left/Right padding
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["smallFixedNear"] = 2] = "smallFixedNear";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'medium' mode, anchored to the far side (right in LTR mode).
|
||
|
|
* Small: <adapts to smallFluid>
|
||
|
|
* Medium: <adapts to smallFixedFar>
|
||
|
|
* Large: 48px fixed left margin, 32px Left/Right padding
|
||
|
|
* XLarge: 644px width, 32px Left/Right padding
|
||
|
|
* XXLarge: 643px width, 40px Left/Right padding
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["medium"] = 3] = "medium";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fluid at XXX-Large breakpoint.
|
||
|
|
* Small: <adapts to smallFluid>
|
||
|
|
* Medium: <adapts to smallFixedFar>
|
||
|
|
* Large: <adapts to medium>
|
||
|
|
* XLarge: 48px fixed left margin, 32px Left/Right padding
|
||
|
|
* XXLarge: 48px fixed left margin, 32px Left/Right padding
|
||
|
|
* XXXLarge: 48px fixed left margin, (no redlines for padding, assuming previous breakpoint)
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["large"] = 4] = "large";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'large' mode, anchored to the far side (right in LTR mode), and is fixed at XXX-Large breakpoint.
|
||
|
|
* Small: <adapts to smallFluid>
|
||
|
|
* Medium: <adapts to smallFixedFar>
|
||
|
|
* Large: <adapts to medium>
|
||
|
|
* XLarge: 48px fixed left margin, 32px Left/Right padding
|
||
|
|
* XXLarge: 48px fixed left margin, 32px Left/Right padding
|
||
|
|
* XXXLarge: 940px width, (no redlines for padding, assuming previous breakpoint)
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["largeFixed"] = 5] = "largeFixed";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'extra large' mode, anchored to the far side (right in LTR mode).
|
||
|
|
* Small: <adapts to smallFluid>
|
||
|
|
* Medium: <adapts to smallFixedFar>
|
||
|
|
* Large: <adapts to medium>
|
||
|
|
* XLarge: <adapts to large>
|
||
|
|
* XXLarge: 176px fixed left margin, 40px Left/Right padding
|
||
|
|
* XXXLarge: 176px fixed left margin, 40px Left/Right padding
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["extraLarge"] = 6] = "extraLarge";
|
||
|
|
/**
|
||
|
|
* Renders the panel in 'custom' mode using customWidth, anchored to the far side (right in LTR mode).
|
||
|
|
* Small: <adapts to smallFluid>
|
||
|
|
* Medium: <adapts to smallFixedFar>
|
||
|
|
* Large: 48px fixed left margin, 32px Left/Right padding
|
||
|
|
* XLarge: 644px width, 32px Left/Right padding
|
||
|
|
* XXLarge: 643px width, 40px Left/Right padding
|
||
|
|
*/
|
||
|
|
PanelType[PanelType["custom"] = 7] = "custom";
|
||
|
|
})(PanelType = exports.PanelType || (exports.PanelType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 298 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_6639629e',
|
||
|
|
overlay: 'overlay_6639629e',
|
||
|
|
main: 'main_6639629e',
|
||
|
|
rootIsSmall: 'rootIsSmall_6639629e',
|
||
|
|
rootIsSmallLeft: 'rootIsSmallLeft_6639629e',
|
||
|
|
rootIsSmallFluid: 'rootIsSmallFluid_6639629e',
|
||
|
|
rootIsMedium: 'rootIsMedium_6639629e',
|
||
|
|
rootIsLarge: 'rootIsLarge_6639629e',
|
||
|
|
rootIsXLarge: 'rootIsXLarge_6639629e',
|
||
|
|
rootIsCustom: 'rootIsCustom_6639629e',
|
||
|
|
rootIsFixed: 'rootIsFixed_6639629e',
|
||
|
|
rootIsOpen: 'rootIsOpen_6639629e',
|
||
|
|
closeButton: 'closeButton_6639629e',
|
||
|
|
contentInner: 'contentInner_6639629e',
|
||
|
|
rootHasCloseButton: 'rootHasCloseButton_6639629e',
|
||
|
|
header: 'header_6639629e',
|
||
|
|
content: 'content_6639629e',
|
||
|
|
footerInner: 'footerInner_6639629e',
|
||
|
|
footer: 'footer_6639629e',
|
||
|
|
footerIsSticky: 'footerIsSticky_6639629e',
|
||
|
|
headerText: 'headerText_6639629e',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_6639629e{pointer-events:none;position:absolute;top:0;left:0;right:0;bottom:0}.root_6639629e .overlay_6639629e{pointer-events:none;opacity:1;cursor:pointer;transition:opacity 367ms cubic-bezier(.1,.9,.2,1)}.main_6639629e{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";position:absolute;width:100%;bottom:0;top:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}[dir=ltr] .main_6639629e{right:0}[dir=rtl] .main_6639629e{left:0}@media (min-width:480px){.main_6639629e{border-left:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";border-right:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";pointer-events:auto;width:340px;box-shadow:-30px 0 30px -30px rgba(0,0,0,.2)}[dir=ltr] .main_6639629e{left:auto}[dir=rtl] .main_6639629e{right:auto}}.root_6639629e.rootIsSmall_6639629e .main_6639629e{width:272px}@media (min-width:480px){.root_6639629e.rootIsSmall_6639629e .main_6639629e{width:340px}}.root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{width:272px;box-shadow:30px 0 30px -30px rgba(0,0,0,.2)}[dir=ltr] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{right:auto}[dir=rtl] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{left:auto}[dir=ltr] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{left:0}[dir=rtl] .root_6639629e.rootIsSmallLeft_6639629e .main_6639629e{right:0}.root_6639629e.rootIsSmallFluid_6639629e .main_6639629e{width:100%}@media (min-width:640px){.root_6639629e.rootIsCustom_6639629e .main_6639629e,.root_6639629e.rootIsLarge_6639629e .main_6639629e,.root_6639629e.rootIsMedium_6639629e .main_6639629e,.root_6639629e.rootIsXLarge_6639629e .main_6639629e{width:auto}[dir=ltr] .root_6639629e.rootIsCustom_6639629e .main_6639629e,[dir=ltr] .root_6639629e.rootIsLarge_6639629e .main_6639629e,[dir=ltr] .root_6639629e.rootIsMedium_6639629e .main_6639629e,[dir=ltr] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{left:48px}[dir=rtl] .root_6639629e.rootIsCustom_6639629e .main_6639629e,[dir=rtl] .root_6639629e.rootIsLarge_6639629e .main_6639629e,[dir=rtl] .root_6639629e.rootIsMedium_6639629e .main_6639629e,[dir=rtl] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{right:48px}}@media (min-width:1024px){.root_6639629e.rootIsMedium_6639629e .main_6639629e{width:643px}[dir=ltr] .root_6639629e.rootIsMedium_6639629e .main_6639629e{left:auto}[dir=rtl] .root_6639629e.rootIsMedium_6639629e .main_6639629e{right:auto}}@media (min-width:1366px){[dir=ltr] .root_6639629e.rootIsLarge_6639629e .main_6639629e{left:428px}[dir=rtl] .root_6639629e.rootIsLarge_6639629e .main_6639629e{right:428px}}@media (min-width:1366px){.root_6639629e.rootIsLarge_6639629e.rootIsFixed_6639629e .main_6639629e{width:940px}[dir=ltr] .root_6639629e.rootIsLarge_6639629e.rootIsFixed_6639629e .main_6639629e{left:auto}[dir=rtl] .root_6639629e.rootIsLarge_6639629e.rootIsFixed_6639629e .main_6639629e{right:auto}}@media (min-width:1366px){[dir=ltr] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{left:176px}[dir=rtl] .root_6639629e.rootIsXLarge_6639629e .main_6639629e{right:176px}}@media (min-width:1024px){[dir=ltr] .root_6639629e.rootIsCustom_6639629e .main_6639629e{left:auto}[dir=rtl] .root_6639629e.rootIsCustom_6639629e .main_6639629e{right:auto}}.root_6639629e.rootIsOpen_6639629e .main_6639629e{pointer-events:auto}.root_6639629e.rootIsOpen_6639629e .overlay_6639629e{cursor:pointer;pointer-events:auto}@media screen and (-ms-high-contrast:active){.root_6639629e.rootIsOpen_6639629e .overlay_6639629e{opacity:0}}.closeButton_6639629e{background:0 0;border:0;cursor:pointer;position:absolute;top:0;height:44px;width:44px;line-height:44px;padding:0;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:20px}[dir=ltr] .closeButton_6639629e{right:4px}[dir=rtl] .closeButton_6639629e{left:4px}.closeButton_6639629e:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.contentInner_6639629e{posit
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 299 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_56083fec',
|
||
|
|
title: 'title_56083fec',
|
||
|
|
caretDown: 'caretDown_56083fec',
|
||
|
|
titleIsPlaceHolder: 'titleIsPlaceHolder_56083fec',
|
||
|
|
rootIsDisabled: 'rootIsDisabled_56083fec',
|
||
|
|
titleIsError: 'titleIsError_56083fec',
|
||
|
|
panel: 'panel_56083fec',
|
||
|
|
callout: 'callout_56083fec',
|
||
|
|
errorMessage: 'errorMessage_56083fec',
|
||
|
|
items: 'items_56083fec',
|
||
|
|
item: 'item_56083fec',
|
||
|
|
itemIsDisabled: 'itemIsDisabled_56083fec',
|
||
|
|
itemIsSelected: 'itemIsSelected_56083fec',
|
||
|
|
header: 'header_56083fec',
|
||
|
|
divider: 'divider_56083fec',
|
||
|
|
optionText: 'optionText_56083fec',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_56083fec{box-sizing:border-box;box-shadow:none;margin:0;padding:0;font-size:14px;font-weight:400;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";margin-bottom:10px;position:relative;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.root_56083fec:active .caretDown_56083fec,.root_56083fec:active .title_56083fec,.root_56083fec:focus .caretDown_56083fec,.root_56083fec:focus .title_56083fec,.root_56083fec:hover .caretDown_56083fec,.root_56083fec:hover .title_56083fec{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec:active .caretDown_56083fec,.root_56083fec:active .title_56083fec,.root_56083fec:focus .caretDown_56083fec,.root_56083fec:focus .title_56083fec,.root_56083fec:hover .caretDown_56083fec,.root_56083fec:hover .title_56083fec{color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec:active .caretDown_56083fec,.root_56083fec:active .title_56083fec,.root_56083fec:focus .caretDown_56083fec,.root_56083fec:focus .title_56083fec,.root_56083fec:hover .caretDown_56083fec,.root_56083fec:hover .title_56083fec{color:#37006e}}.root_56083fec:active .titleIsPlaceHolder_56083fec,.root_56083fec:focus .titleIsPlaceHolder_56083fec,.root_56083fec:hover .titleIsPlaceHolder_56083fec{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.root_56083fec:active .title_56083fec,.root_56083fec:hover .title_56083fec{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec:active .title_56083fec,.root_56083fec:hover .title_56083fec{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec:active .title_56083fec,.root_56083fec:hover .title_56083fec{border-color:#37006e}}.root_56083fec:focus .title_56083fec{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec:focus .title_56083fec{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec:focus .title_56083fec{border-color:#37006e}}.root_56083fec .ms-Label{display:inline-block;margin-bottom:8px}.root_56083fec.rootIsDisabled_56083fec .title_56083fec{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";cursor:default}@media screen and (-ms-high-contrast:active){.root_56083fec.rootIsDisabled_56083fec .title_56083fec{border-color:#0f0;color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec.rootIsDisabled_56083fec .title_56083fec{border-color:#600000;color:#600000}}.root_56083fec.rootIsDisabled_56083fec .title_56083fec.titleIsError_56083fec{border-color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_56083fec.rootIsDisabled_56083fec .caretDown_56083fec{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_56083fec.rootIsDisabled_56083fec .caretDown_56083fec{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.root_56083fec.rootIsDisabled_56083fec .caretDown_56083fec{color:#600000}}.caretDown_56083fec{color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": ";font-size:12px;position:absolute;top:1px;pointer-events:none;height:32px;line-height:30px}[dir=ltr] .caretDown_56083fec{right:12px}[dir=rtl] .caretDown_56083fec{left:12px}.title_56083fec{box-sizing:border-box;box-shadow:none;margin:0;padding:0;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border:1px solid " }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";cursor
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 300 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(301));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 301 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(302));
|
||
|
|
__export(__webpack_require__(303));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 302 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var OverflowButtonType;
|
||
|
|
(function (OverflowButtonType) {
|
||
|
|
/** No overflow */
|
||
|
|
OverflowButtonType[OverflowButtonType["none"] = 0] = "none";
|
||
|
|
/** +1 overflow icon */
|
||
|
|
OverflowButtonType[OverflowButtonType["descriptive"] = 1] = "descriptive";
|
||
|
|
/** More overflow icon */
|
||
|
|
OverflowButtonType[OverflowButtonType["more"] = 2] = "more";
|
||
|
|
/** Chevron overflow icon */
|
||
|
|
OverflowButtonType[OverflowButtonType["downArrow"] = 3] = "downArrow";
|
||
|
|
})(OverflowButtonType = exports.OverflowButtonType || (exports.OverflowButtonType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 303 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Facepile_Props_1 = __webpack_require__(302);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Persona_1 = __webpack_require__(281);
|
||
|
|
var stylesImport = __webpack_require__(304);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Facepile = (function (_super) {
|
||
|
|
__extends(Facepile, _super);
|
||
|
|
function Facepile(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._ariaDescriptionId = Utilities_1.getId();
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Facepile.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, chevronButtonProps = _a.chevronButtonProps, maxDisplayablePersonas = _a.maxDisplayablePersonas, overflowButtonProps = _a.overflowButtonProps, overflowButtonType = _a.overflowButtonType, ariaDescription = _a.ariaDescription, className = _a.className, personas = _a.personas, showAddButton = _a.showAddButton;
|
||
|
|
var numPersonasToShow = Math.min(personas.length, maxDisplayablePersonas);
|
||
|
|
// Added for deprecating chevronButtonProps. Can remove after v1.0
|
||
|
|
if (chevronButtonProps && !overflowButtonProps) {
|
||
|
|
overflowButtonProps = chevronButtonProps;
|
||
|
|
overflowButtonType = Facepile_Props_1.OverflowButtonType.downArrow;
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Facepile', styles.root, className) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Facepile-itemContainer', styles.itemContainer) },
|
||
|
|
showAddButton ? this._getAddNewElement() : null,
|
||
|
|
this.onRenderAriaDescription(),
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { ariaDescribedBy: this._ariaDescriptionId, role: 'listbox', className: Utilities_1.css('ms-Facepile-members', styles.members), direction: FocusZone_1.FocusZoneDirection.horizontal }, personas.slice(0, numPersonasToShow).map(function (persona, index) {
|
||
|
|
var personaControl = _this._getPersonaControl(persona);
|
||
|
|
return persona.onClick ?
|
||
|
|
_this._getElementWithOnClickEvent(personaControl, persona, index) :
|
||
|
|
_this._getElementWithoutOnClickEvent(personaControl, persona, index);
|
||
|
|
})),
|
||
|
|
overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null)));
|
||
|
|
};
|
||
|
|
Facepile.prototype.onRenderAriaDescription = function () {
|
||
|
|
var ariaDescription = this.props.ariaDescription;
|
||
|
|
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
|
||
|
|
// otherwise it will be assigned to descriptionSpan.
|
||
|
|
return ariaDescription && (React.createElement("span", { className: styles.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription));
|
||
|
|
};
|
||
|
|
Facepile.prototype._getPersonaControl = function (persona) {
|
||
|
|
var _a = this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
|
||
|
|
return React.createElement(Persona_1.Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, primaryText: persona.personaName, size: personaSize, hidePersonaDetails: true }, (getPersonaProps ? getPersonaProps(persona) : null)));
|
||
|
|
};
|
||
|
|
Facepile.prototype._getElementWithOnClickEvent = function (personaControl, persona, index) {
|
||
|
|
return React.createElement(Button_1.BaseButton, __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.buttonProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onClick: this._onPersonaClick.bind(this, persona), onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl);
|
||
|
|
};
|
||
|
|
Facepile.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, index) {
|
||
|
|
return React.createElement("div", __assign({}, Utilities_1.getNativeProps(persona, Utilities_1.divProperties), { key: (!!persona.imageUrl ? 'i' : '') + index, "data-is-focusable": true, role: 'option', className: Utilities_1.css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton), title: persona.personaName, onMouseMove: this._onPersonaMouseMove.bind(this, persona), onMouseOut: this._onPersonaMouseOut.bind(this, persona) }), personaControl);
|
||
|
|
};
|
||
|
|
Facepile.prototype._getOverflowElement = function (numPersonasToShow) {
|
||
|
|
switch (this.props.overflowButtonType) {
|
||
|
|
case Facepile_Props_1.OverflowButtonType.descriptive:
|
||
|
|
return this._getDescriptiveOverflowElement(numPersonasToShow);
|
||
|
|
case Facepile_Props_1.OverflowButtonType.downArrow:
|
||
|
|
return this._getIconElement('ChevronDown');
|
||
|
|
case Facepile_Props_1.OverflowButtonType.more:
|
||
|
|
return this._getIconElement('More');
|
||
|
|
default:
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Facepile.prototype._getDescriptiveOverflowElement = function (numPersonasToShow) {
|
||
|
|
var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personas = _a.personas, personaSize = _a.personaSize;
|
||
|
|
var numPersonasNotPictured = personas.length - numPersonasToShow;
|
||
|
|
if (!overflowButtonProps || numPersonasNotPictured < 1) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var personaNames = personas.slice(numPersonasToShow).map(function (p) { return p.personaName; }).join(', ');
|
||
|
|
return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { ariaDescription: personaNames, className: Utilities_1.css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }),
|
||
|
|
React.createElement(Persona_1.Persona, { title: personaNames, size: personaSize, hidePersonaDetails: true, onRenderInitials: function () {
|
||
|
|
return (React.createElement("span", null, '+' + numPersonasNotPictured));
|
||
|
|
} }));
|
||
|
|
};
|
||
|
|
Facepile.prototype._getIconElement = function (icon) {
|
||
|
|
var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;
|
||
|
|
return React.createElement(Button_1.BaseButton, __assign({}, overflowButtonProps, { className: Utilities_1.css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }),
|
||
|
|
React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement(Icon_1.Icon, { iconName: icon })); } }));
|
||
|
|
};
|
||
|
|
Facepile.prototype._getAddNewElement = function () {
|
||
|
|
var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;
|
||
|
|
return React.createElement(Button_1.BaseButton, __assign({}, addButtonProps, { className: Utilities_1.css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }),
|
||
|
|
React.createElement(Persona_1.Persona, { size: personaSize, hidePersonaDetails: true, onRenderInitials: function () { return (React.createElement(Icon_1.Icon, { iconName: 'addFriend' })); } }));
|
||
|
|
};
|
||
|
|
Facepile.prototype._onPersonaClick = function (persona, ev) {
|
||
|
|
persona.onClick(ev, persona);
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
Facepile.prototype._onPersonaMouseMove = function (persona, ev) {
|
||
|
|
if (!!persona.onMouseMove) {
|
||
|
|
persona.onMouseMove(ev, persona);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Facepile.prototype._onPersonaMouseOut = function (persona, ev) {
|
||
|
|
if (!!persona.onMouseOut) {
|
||
|
|
persona.onMouseOut(ev, persona);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Facepile;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Facepile.defaultProps = {
|
||
|
|
maxDisplayablePersonas: 5,
|
||
|
|
personas: [],
|
||
|
|
personaSize: Persona_1.PersonaSize.extraSmall
|
||
|
|
};
|
||
|
|
exports.Facepile = Facepile;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 304 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_ec63745c',
|
||
|
|
clear: 'clear_ec63745c',
|
||
|
|
itemContainer: 'itemContainer_ec63745c',
|
||
|
|
members: 'members_ec63745c',
|
||
|
|
itemButton: 'itemButton_ec63745c',
|
||
|
|
addButton: 'addButton_ec63745c',
|
||
|
|
overflowButton: 'overflowButton_ec63745c',
|
||
|
|
descriptiveOverflowButton: 'descriptiveOverflowButton_ec63745c',
|
||
|
|
screenReaderOnly: 'screenReaderOnly_ec63745c',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_ec63745c{width:auto}.clear_ec63745c{clear:both}.itemContainer_ec63745c{display:-webkit-box;display:-ms-flexbox;display:flex}.members_ec63745c{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;margin:-2px}.members_ec63745c>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin:2px}.itemButton_ec63745c{text-align:center;padding:0;border-radius:50%;vertical-align:top}.itemButton_ec63745c::-moz-focus-inner{border:0}.itemButton_ec63745c{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .itemButton_ec63745c:focus:after{content:'';position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.itemButton_ec63745c .ms-Persona-details{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}button.itemButton_ec63745c{display:inline;background:0 0;padding:0;cursor:pointer;border:none}button.itemButton_ec63745c::-moz-focus-inner{padding:0;border:0}button.addButton_ec63745c{font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}html[dir=ltr] button.addButton_ec63745c{margin-right:4px}html[dir=rtl] button.addButton_ec63745c{margin-left:4px}button.addButton_ec63745c:focus,button.addButton_ec63745c:hover{background-color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}button.addButton_ec63745c:active{background-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}button.addButton_ec63745c:disabled{background-color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}button.overflowButton_ec63745c{font-size:14px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.overflowButton_ec63745c{margin-left:4px}html[dir=rtl] button.overflowButton_ec63745c{margin-right:4px}button.descriptiveOverflowButton_ec63745c{font-size:12px;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}html[dir=ltr] button.descriptiveOverflowButton_ec63745c{margin-left:4px}html[dir=rtl] button.descriptiveOverflowButton_ec63745c{margin-right:4px}.screenReaderOnly_ec63745c{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 305 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(263));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 306 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(307));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 307 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(308));
|
||
|
|
__export(__webpack_require__(309));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 308 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var MessageBar_Props_1 = __webpack_require__(309);
|
||
|
|
var stylesImport = __webpack_require__(310);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var MessageBar = (function (_super) {
|
||
|
|
__extends(MessageBar, _super);
|
||
|
|
function MessageBar(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.ICON_MAP = (_a = {},
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.info] = 'Info',
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.warning] = 'Info',
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.error] = 'ErrorBadge',
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.blocked] = 'Blocked',
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.remove] = 'Blocked',
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.severeWarning] = 'Warning',
|
||
|
|
_a[MessageBar_Props_1.MessageBarType.success] = 'Completed',
|
||
|
|
_a);
|
||
|
|
_this.state = {
|
||
|
|
labelId: Utilities_1.getId('MessageBar'),
|
||
|
|
showContent: false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
var _a;
|
||
|
|
}
|
||
|
|
MessageBar.prototype.render = function () {
|
||
|
|
var isMultiline = this.props.isMultiline;
|
||
|
|
return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
|
||
|
|
};
|
||
|
|
MessageBar.prototype._getActionsDiv = function () {
|
||
|
|
if (this.props.actions) {
|
||
|
|
return React.createElement("div", { className: this.props.isMultiline ?
|
||
|
|
('ms-MessageBar-actions ' + styles.actions) :
|
||
|
|
('ms-MessageBar-actionsOneline ' + styles.actionsOneline) }, this.props.actions);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
MessageBar.prototype._getClassName = function () {
|
||
|
|
return Utilities_1.css(this.props.className, 'ms-MessageBar', styles.root, (_a = {},
|
||
|
|
_a['ms-MessageBar ' + styles.root] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.info,
|
||
|
|
_a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.error,
|
||
|
|
_a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) ||
|
||
|
|
(this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove),
|
||
|
|
_a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning,
|
||
|
|
_a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.success,
|
||
|
|
_a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning,
|
||
|
|
_a));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
MessageBar.prototype._getDismissDiv = function () {
|
||
|
|
if (this.props.onDismiss != null) {
|
||
|
|
return (React.createElement(Button_1.IconButton, { disabled: false, className: Utilities_1.css('ms-MessageBar-dismissal', styles.dismissal), onClick: this.props.onDismiss, iconProps: { iconName: 'Cancel' }, ariaLabel: this.props.dismissButtonAriaLabel }));
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
MessageBar.prototype._getIconSpan = function () {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-icon', styles.icon) },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: this.ICON_MAP[this.props.messageBarType] })));
|
||
|
|
};
|
||
|
|
MessageBar.prototype._getInnerTextClassName = function () {
|
||
|
|
return this.props.onDismiss || this.props.actions ?
|
||
|
|
'ms-MessageBar-innerTextPadding ' + styles.innerTextPadding : 'ms-MessageBar-innerText ' + styles.innerText;
|
||
|
|
};
|
||
|
|
MessageBar.prototype._renderMultiLine = function () {
|
||
|
|
return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-multiline ' + styles.multiline, role: 'status', "aria-live": this._getAnnouncementPriority() },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) },
|
||
|
|
this._getIconSpan(),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) },
|
||
|
|
this._renderInnerText(),
|
||
|
|
this._getActionsDiv(),
|
||
|
|
this._getDismissDiv()))));
|
||
|
|
};
|
||
|
|
MessageBar.prototype._renderSingleLine = function () {
|
||
|
|
return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-singleline ' + styles.singleline },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', styles.content) },
|
||
|
|
this._getIconSpan(),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', styles.actionables) }, this._renderInnerText()),
|
||
|
|
this._getActionsDiv(),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissalOneline', styles.dismissalOneline) }, this._getDismissDiv()))));
|
||
|
|
};
|
||
|
|
MessageBar.prototype._renderInnerText = function () {
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', styles.text), id: this.state.labelId },
|
||
|
|
React.createElement("span", { className: this._getInnerTextClassName(), role: 'status', "aria-live": this._getAnnouncementPriority() },
|
||
|
|
React.createElement(Utilities_1.DelayedRender, null,
|
||
|
|
React.createElement("span", null, this.props.children)))));
|
||
|
|
};
|
||
|
|
MessageBar.prototype._getAnnouncementPriority = function () {
|
||
|
|
switch (this.props.messageBarType) {
|
||
|
|
case MessageBar_Props_1.MessageBarType.blocked:
|
||
|
|
case MessageBar_Props_1.MessageBarType.error:
|
||
|
|
case MessageBar_Props_1.MessageBarType.severeWarning:
|
||
|
|
return 'assertive';
|
||
|
|
}
|
||
|
|
return 'polite';
|
||
|
|
};
|
||
|
|
return MessageBar;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
MessageBar.defaultProps = {
|
||
|
|
messageBarType: MessageBar_Props_1.MessageBarType.info,
|
||
|
|
onDismiss: null,
|
||
|
|
isMultiline: true,
|
||
|
|
};
|
||
|
|
exports.MessageBar = MessageBar;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 309 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var MessageBarType;
|
||
|
|
(function (MessageBarType) {
|
||
|
|
/** Info styled MessageBar */
|
||
|
|
MessageBarType[MessageBarType["info"] = 0] = "info";
|
||
|
|
/** Error styled MessageBar */
|
||
|
|
MessageBarType[MessageBarType["error"] = 1] = "error";
|
||
|
|
/** Blocked styled MessageBar */
|
||
|
|
MessageBarType[MessageBarType["blocked"] = 2] = "blocked";
|
||
|
|
/** SevereWarning styled MessageBar */
|
||
|
|
MessageBarType[MessageBarType["severeWarning"] = 3] = "severeWarning";
|
||
|
|
/** Success styled MessageBar */
|
||
|
|
MessageBarType[MessageBarType["success"] = 4] = "success";
|
||
|
|
/** Warning styled MessageBar */
|
||
|
|
MessageBarType[MessageBarType["warning"] = 5] = "warning";
|
||
|
|
/**
|
||
|
|
* Deprecated at v0.48.0, to be removed at >= v1.0.0. Use 'blocked' instead.
|
||
|
|
* @deprecated
|
||
|
|
*/
|
||
|
|
MessageBarType[MessageBarType["remove"] = 90000] = "remove";
|
||
|
|
})(MessageBarType = exports.MessageBarType || (exports.MessageBarType = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 310 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_56c7fc1c',
|
||
|
|
icon: 'icon_56c7fc1c',
|
||
|
|
text: 'text_56c7fc1c',
|
||
|
|
rootIsWarning: 'rootIsWarning_56c7fc1c',
|
||
|
|
rootIsSevereWarning: 'rootIsSevereWarning_56c7fc1c',
|
||
|
|
rootIsError: 'rootIsError_56c7fc1c',
|
||
|
|
rootIsBlocked: 'rootIsBlocked_56c7fc1c',
|
||
|
|
rootIsSuccess: 'rootIsSuccess_56c7fc1c',
|
||
|
|
content: 'content_56c7fc1c',
|
||
|
|
actionables: 'actionables_56c7fc1c',
|
||
|
|
dismissal: 'dismissal_56c7fc1c',
|
||
|
|
actions: 'actions_56c7fc1c',
|
||
|
|
actionsOneline: 'actionsOneline_56c7fc1c',
|
||
|
|
dismissalOneline: 'dismissalOneline_56c7fc1c',
|
||
|
|
innerTextPadding: 'innerTextPadding_56c7fc1c',
|
||
|
|
innerText: 'innerText_56c7fc1c',
|
||
|
|
multiline: 'multiline_56c7fc1c',
|
||
|
|
singleline: 'singleline_56c7fc1c',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_56c7fc1c{background-color:" }, { "theme": "infoBackground", "defaultValue": "#f4f4f4" }, { "rawString": ";color:" }, { "theme": "infoText", "defaultValue": "#333333" }, { "rawString": ";width:100%;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.root_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "info", "defaultValue": "#767676" }, { "rawString": "}html[dir=ltr] .root_56c7fc1c .icon_56c7fc1c{padding-right:8px}html[dir=rtl] .root_56c7fc1c .icon_56c7fc1c{padding-left:8px}.root_56c7fc1c .ms-Link{font-size:12px;color:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}html[dir=ltr] .root_56c7fc1c .ms-Button{margin-left:6px}html[dir=rtl] .root_56c7fc1c .ms-Button{margin-right:6px}.icon_56c7fc1c,.text_56c7fc1c{display:table-cell;vertical-align:top}.icon_56c7fc1c{font-size:16px;min-width:16px;min-height:16px;display:-webkit-box;display:-ms-flexbox;display:flex}.text_56c7fc1c{font-size:12px;font-weight:400;min-width:0;display:-webkit-box;display:-ms-flexbox;display:flex}.root_56c7fc1c.rootIsWarning_56c7fc1c{background-color:" }, { "theme": "warningBackground", "defaultValue": "#fff4ce" }, { "rawString": ";color:" }, { "theme": "warningText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsSevereWarning_56c7fc1c{background-color:" }, { "theme": "severeWarningBackground", "defaultValue": "#fed9cc" }, { "rawString": ";color:" }, { "theme": "severeWarningText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsSevereWarning_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "severeWarning", "defaultValue": "#d83b01" }, { "rawString": "}.root_56c7fc1c.rootIsError_56c7fc1c{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsError_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_56c7fc1c.rootIsBlocked_56c7fc1c{background-color:" }, { "theme": "errorBackground", "defaultValue": "#fde7e9" }, { "rawString": ";color:" }, { "theme": "errorText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsBlocked_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "error", "defaultValue": "#a80000" }, { "rawString": "}.root_56c7fc1c.rootIsSuccess_56c7fc1c{background-color:" }, { "theme": "successBackground", "defaultValue": "#dff6dd" }, { "rawString": ";color:" }, { "theme": "successText", "defaultValue": "#333333" }, { "rawString": "}.root_56c7fc1c.rootIsSuccess_56c7fc1c .icon_56c7fc1c{color:" }, { "theme": "green", "defaultValue": "#107c10" }, { "rawString": "}.content_56c7fc1c{padding:16px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;box-sizing:border-box}.content_56c7fc1c:before{pointer-events:none;position:absolute;right:0;bottom:0;left:0;top:0;margin:0}@media screen and (-ms-high-contrast:active){.content_56c7fc1c:before{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";content:' '}}@media screen and (-ms-high-contrast:black-on-white){.content_56c7fc1c:before{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";content:' '}}.actionables_56c7fc1c{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;min-width:0}.actionables_56c7fc1c>.dismissal_56c7fc1c{right:0;top:0;position:absolute!important}.actionsOneline_56c7fc1c,.actions_56c7fc1c{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.actionsOneline_56c7fc1c{position:relative}.dismissal_56c7fc1c{min-width:0}.dismissal_56c7fc1c::-moz-focus-inner{border:0}.dismissal_56c7fc1c{outline:transparent;
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 311 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(312));
|
||
|
|
__export(__webpack_require__(216));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 312 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(313);
|
||
|
|
var styles = stylesImport;
|
||
|
|
// We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start
|
||
|
|
// the drag even if they just click an item without moving.
|
||
|
|
var MIN_DRAG_DISTANCE = 5;
|
||
|
|
/**
|
||
|
|
* MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.
|
||
|
|
* Elements which have data-selectable-index attributes are queried and measured once to determine if they
|
||
|
|
* fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization
|
||
|
|
* so if the items change sizes while dragging, that could cause incorrect results.
|
||
|
|
*/
|
||
|
|
var MarqueeSelection = (function (_super) {
|
||
|
|
__extends(MarqueeSelection, _super);
|
||
|
|
function MarqueeSelection(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
dragRect: undefined
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
MarqueeSelection.prototype.componentDidMount = function () {
|
||
|
|
this._scrollableParent = Utilities_1.findScrollableParent(this.refs.root);
|
||
|
|
this._scrollableSurface = this._scrollableParent === window ? document.body : this._scrollableParent;
|
||
|
|
// When scroll events come from window, we need to read scrollTop values from the body.
|
||
|
|
this._events.on(this.props.isDraggingConstrainedToRoot ? this.refs.root : this._scrollableSurface, 'mousedown', this._onMouseDown);
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype.componentWillUnmount = function () {
|
||
|
|
if (this._autoScroll) {
|
||
|
|
this._autoScroll.dispose();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype.render = function () {
|
||
|
|
var _a = this.props, rootProps = _a.rootProps, children = _a.children;
|
||
|
|
var dragRect = this.state.dragRect;
|
||
|
|
return (React.createElement("div", __assign({}, rootProps, { className: Utilities_1.css('ms-MarqueeSelection', styles.root, rootProps.className), ref: 'root' }),
|
||
|
|
children,
|
||
|
|
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-dragMask', styles.dragMask) })),
|
||
|
|
dragRect && (React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-box', styles.box), style: dragRect },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-MarqueeSelection-boxFill', styles.boxFill) })))));
|
||
|
|
};
|
||
|
|
/** Determine if the mouse event occured on a scrollbar of the target element. */
|
||
|
|
MarqueeSelection.prototype._isMouseEventOnScrollbar = function (ev) {
|
||
|
|
var targetElement = ev.target;
|
||
|
|
var targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
|
||
|
|
if (targetScrollbarWidth) {
|
||
|
|
var targetRect = targetElement.getBoundingClientRect();
|
||
|
|
// Check vertical scroll
|
||
|
|
if (Utilities_1.getRTL()) {
|
||
|
|
if (ev.clientX < (targetRect.left + targetScrollbarWidth)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (ev.clientX > (targetRect.left + targetElement.clientWidth)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Check horizontal scroll
|
||
|
|
if (ev.clientY > (targetRect.top + targetElement.clientHeight)) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype._onMouseDown = function (ev) {
|
||
|
|
var _a = this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection;
|
||
|
|
// Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
|
||
|
|
if (this._isMouseEventOnScrollbar(ev)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (isEnabled && !this._isDragStartInSelection(ev) && (!onShouldStartSelection || onShouldStartSelection(ev))) {
|
||
|
|
if (this._scrollableSurface && ev.button === 0) {
|
||
|
|
this._selectedIndicies = {};
|
||
|
|
this._events.on(window, 'mousemove', this._onMouseMove);
|
||
|
|
this._events.on(this._scrollableParent, 'scroll', this._onMouseMove);
|
||
|
|
this._events.on(window, 'click', this._onMouseUp, true);
|
||
|
|
this._autoScroll = new Utilities_1.AutoScroll(this.refs.root);
|
||
|
|
this._scrollTop = this._scrollableSurface.scrollTop;
|
||
|
|
this._rootRect = this.refs.root.getBoundingClientRect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype._getRootRect = function () {
|
||
|
|
return {
|
||
|
|
left: this._rootRect.left,
|
||
|
|
top: this._rootRect.top + (this._scrollTop - this._scrollableSurface.scrollTop),
|
||
|
|
width: this._rootRect.width,
|
||
|
|
height: this._rootRect.height
|
||
|
|
};
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype._onMouseMove = function (ev) {
|
||
|
|
if (ev.clientX !== undefined) {
|
||
|
|
this._lastMouseEvent = ev;
|
||
|
|
}
|
||
|
|
var rootRect = this._getRootRect();
|
||
|
|
var currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top };
|
||
|
|
if (!this._dragOrigin) {
|
||
|
|
this._dragOrigin = currentPoint;
|
||
|
|
}
|
||
|
|
if (ev.buttons !== undefined && ev.buttons === 0) {
|
||
|
|
this._onMouseUp(ev);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.state.dragRect || Utilities_1.getDistanceBetweenPoints(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) {
|
||
|
|
// We need to constrain the current point to the rootRect boundaries.
|
||
|
|
var constrainedPoint = this.props.isDraggingConstrainedToRoot ? {
|
||
|
|
x: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)),
|
||
|
|
y: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top))
|
||
|
|
} : {
|
||
|
|
x: this._lastMouseEvent.clientX - rootRect.left,
|
||
|
|
y: this._lastMouseEvent.clientY - rootRect.top
|
||
|
|
};
|
||
|
|
var dragRect = {
|
||
|
|
left: Math.min(this._dragOrigin.x, constrainedPoint.x),
|
||
|
|
top: Math.min(this._dragOrigin.y, constrainedPoint.y),
|
||
|
|
width: Math.abs(constrainedPoint.x - this._dragOrigin.x),
|
||
|
|
height: Math.abs(constrainedPoint.y - this._dragOrigin.y)
|
||
|
|
};
|
||
|
|
this.setState({ dragRect: dragRect });
|
||
|
|
this._evaluateSelection(dragRect);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype._onMouseUp = function (ev) {
|
||
|
|
this._events.off(window);
|
||
|
|
this._events.off(this._scrollableParent, 'scroll');
|
||
|
|
this._autoScroll.dispose();
|
||
|
|
this._autoScroll = this._dragOrigin = this._lastMouseEvent = this._selectedIndicies = this._itemRectCache = undefined;
|
||
|
|
if (this.state.dragRect) {
|
||
|
|
this.setState({
|
||
|
|
dragRect: undefined
|
||
|
|
});
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype._isPointInRectangle = function (rectangle, point) {
|
||
|
|
return rectangle.top < point.y &&
|
||
|
|
rectangle.bottom > point.y &&
|
||
|
|
rectangle.left < point.x &&
|
||
|
|
rectangle.right > point.x;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* We do not want to start the marquee if we're trying to marquee
|
||
|
|
* from within an existing marquee selection.
|
||
|
|
*/
|
||
|
|
MarqueeSelection.prototype._isDragStartInSelection = function (ev) {
|
||
|
|
var selection = this.props.selection;
|
||
|
|
if (selection && selection.getSelectedCount() === 0) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
|
||
|
|
for (var i = 0; i < allElements.length; i++) {
|
||
|
|
var element = allElements[i];
|
||
|
|
var index = Number(element.getAttribute('data-selection-index'));
|
||
|
|
if (selection.isIndexSelected(index)) {
|
||
|
|
var itemRect = element.getBoundingClientRect();
|
||
|
|
if (this._isPointInRectangle(itemRect, { x: ev.x, y: ev.y })) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
MarqueeSelection.prototype._evaluateSelection = function (dragRect) {
|
||
|
|
// Break early if we don't need to evaluate.
|
||
|
|
if (!dragRect) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var selection = this.props.selection;
|
||
|
|
var rootRect = this._getRootRect();
|
||
|
|
var allElements = this.refs.root.querySelectorAll('[data-selection-index]');
|
||
|
|
if (!this._itemRectCache) {
|
||
|
|
this._itemRectCache = {};
|
||
|
|
}
|
||
|
|
// Stop change events, clear selection to re-populate.
|
||
|
|
selection.setChangeEvents(false);
|
||
|
|
selection.setAllSelected(false);
|
||
|
|
for (var i = 0; i < allElements.length; i++) {
|
||
|
|
var element = allElements[i];
|
||
|
|
var index = element.getAttribute('data-selection-index');
|
||
|
|
// Pull the memoized rectangle for the item, or the get the rect and memoize.
|
||
|
|
var itemRect = this._itemRectCache[index];
|
||
|
|
if (!itemRect) {
|
||
|
|
itemRect = element.getBoundingClientRect();
|
||
|
|
// Normalize the item rect to the dragRect coordinates.
|
||
|
|
itemRect = {
|
||
|
|
left: itemRect.left - rootRect.left,
|
||
|
|
top: itemRect.top - rootRect.top,
|
||
|
|
width: itemRect.width,
|
||
|
|
height: itemRect.height,
|
||
|
|
right: (itemRect.left - rootRect.left) + itemRect.width,
|
||
|
|
bottom: (itemRect.top - rootRect.top) + itemRect.height
|
||
|
|
};
|
||
|
|
if (itemRect.width > 0 && itemRect.height > 0) {
|
||
|
|
this._itemRectCache[index] = itemRect;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (itemRect.top < (dragRect.top + dragRect.height) &&
|
||
|
|
itemRect.bottom > dragRect.top &&
|
||
|
|
itemRect.left < (dragRect.left + dragRect.width) &&
|
||
|
|
itemRect.right > dragRect.left) {
|
||
|
|
this._selectedIndicies[index] = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
delete this._selectedIndicies[index];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (var index in this._selectedIndicies) {
|
||
|
|
if (this._selectedIndicies.hasOwnProperty(index)) {
|
||
|
|
selection.setIndexSelected(Number(index), true, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
selection.setChangeEvents(true);
|
||
|
|
};
|
||
|
|
return MarqueeSelection;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
MarqueeSelection.defaultProps = {
|
||
|
|
rootTagName: 'div',
|
||
|
|
rootProps: {},
|
||
|
|
isEnabled: true
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], MarqueeSelection.prototype, "_onMouseDown", null);
|
||
|
|
exports.MarqueeSelection = MarqueeSelection;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 313 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_65d2317c',
|
||
|
|
dragMask: 'dragMask_65d2317c',
|
||
|
|
box: 'box_65d2317c',
|
||
|
|
boxFill: 'boxFill_65d2317c',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_65d2317c{position:relative;cursor:default}.dragMask_65d2317c{position:absolute;background:rgba(255,0,0,0);left:0;top:0;right:0;bottom:0}.box_65d2317c{position:absolute;box-sizing:border-box;border:1px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";pointer-events:none}.boxFill_65d2317c{position:absolute;box-sizing:border-box;background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";opacity:.1;left:0;top:0;right:0;bottom:0}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 314 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(315));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 315 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(316));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 316 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(317);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
// The number pixels per indentation level for Nav links.
|
||
|
|
var _indentationSize = 14;
|
||
|
|
// Tne number of pixels of left margin when there is expand/collaps button
|
||
|
|
var _indentWithExpandButton = 28;
|
||
|
|
// Tne number of pixels of left margin when there is expand/collaps button
|
||
|
|
var _indentNoExpandButton = 20;
|
||
|
|
// global var used in _isLinkSelectedKey
|
||
|
|
var _urlResolver;
|
||
|
|
var Nav = (function (_super) {
|
||
|
|
__extends(Nav, _super);
|
||
|
|
function Nav(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isGroupCollapsed: {},
|
||
|
|
isLinkExpandStateChanged: false,
|
||
|
|
selectedKey: props.initialSelectedKey || props.selectedKey,
|
||
|
|
};
|
||
|
|
_this._hasExpandButton = false;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Nav.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, groups = _a.groups, className = _a.className, isOnTop = _a.isOnTop;
|
||
|
|
if (!groups) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
// when this.props.groups[x].name is specified or Any of the link has child link, chevorn Expand/collaps button is shown,
|
||
|
|
// different padding is needed. _hasExpandButton marks this condition.
|
||
|
|
this._hasExpandButton = groups.some(function (group, groupIndex) {
|
||
|
|
return !!group && !!group.name || group.links && group.links.some(function (link, linkIndex) {
|
||
|
|
return !!link && !!link.links && link.links.length > 0;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
var groupElements = groups.map(function (group, groupIndex) { return _this._renderGroup(group, groupIndex); });
|
||
|
|
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.vertical },
|
||
|
|
React.createElement("nav", { role: 'navigation', className: Utilities_1.css('ms-Nav', styles.root, className, isOnTop && Utilities_1.css('is-onTop', styles.rootIsOnTop, Styling_1.AnimationClassNames.slideRightIn40)) }, groupElements)));
|
||
|
|
};
|
||
|
|
Object.defineProperty(Nav.prototype, "selectedKey", {
|
||
|
|
get: function () {
|
||
|
|
return this.state.selectedKey;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Nav.prototype._renderAnchorLink = function (link, linkIndex, nestingLevel) {
|
||
|
|
// Determine the appropriate padding to add before this link.
|
||
|
|
// In RTL, the "before" padding will go on the right instead of the left.
|
||
|
|
var isRtl = Utilities_1.getRTL();
|
||
|
|
var paddingBefore = (_indentationSize * nestingLevel +
|
||
|
|
(this._hasExpandButton ? _indentWithExpandButton : _indentNoExpandButton)).toString(10) + 'px';
|
||
|
|
return (React.createElement("a", { className: Utilities_1.css('ms-Nav-link', styles.link), style: (_a = {}, _a[isRtl ? 'paddingRight' : 'paddingLeft'] = paddingBefore, _a), href: link.url || 'javascript:', onClick: this._onNavAnchorLinkClicked.bind(this, link), "aria-label": link.ariaLabel, title: link.title || link.name, target: link.target },
|
||
|
|
link.iconClassName && (React.createElement(Icon_1.Icon, { className: Utilities_1.css(link.iconClassName, styles.iconLink), iconName: 'iconLink' })),
|
||
|
|
this.props.onRenderLink(link)));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Nav.prototype._renderButtonLink = function (link, linkIndex) {
|
||
|
|
return (React.createElement(Button_1.CommandButton, { className: Utilities_1.css('ms-Nav-link ms-Nav-linkButton', styles.link, (_a = {
|
||
|
|
'isOnExpanded': this._hasExpandButton
|
||
|
|
},
|
||
|
|
_a[styles.linkIsOnExpanded] = this._hasExpandButton,
|
||
|
|
_a)), href: link.url, iconProps: { iconName: link.icon }, description: link.title || link.name, onClick: this._onNavButtonLinkClicked.bind(this, link) }, link.name));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Nav.prototype._renderCompositeLink = function (link, linkIndex, nestingLevel) {
|
||
|
|
var isLinkSelected = this._isLinkSelected(link);
|
||
|
|
return (React.createElement("div", { key: link.key || linkIndex, className: Utilities_1.css('ms-Nav-compositeLink', styles.compositeLink, (_a = {
|
||
|
|
' is-expanded': link.isExpanded,
|
||
|
|
'is-selected': isLinkSelected
|
||
|
|
},
|
||
|
|
_a[styles.compositeLinkIsExpanded] = link.isExpanded,
|
||
|
|
_a[styles.compositeLinkIsSelected] = isLinkSelected,
|
||
|
|
_a)) },
|
||
|
|
(nestingLevel === 0 && link.links && link.links.length > 0 ?
|
||
|
|
React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--link', styles.chevronButton, styles.chevronButtonLink), onClick: this._onLinkExpandClicked.bind(this, link), "aria-label": this.props.expandButtonAriaLabel, "aria-expanded": link.isExpanded ? 'true' : 'false' },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Nav-chevron', styles.chevronIcon, link.isExpanded), iconName: 'chevronDown' })) : null),
|
||
|
|
!!link.onClick ? this._renderButtonLink(link, linkIndex) : this._renderAnchorLink(link, linkIndex, nestingLevel)));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Nav.prototype._renderLink = function (link, linkIndex, nestingLevel) {
|
||
|
|
return (React.createElement("li", { key: link.key || linkIndex, role: 'listitem', className: Utilities_1.css(styles.navItem) },
|
||
|
|
this._renderCompositeLink(link, linkIndex, nestingLevel),
|
||
|
|
(link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null)));
|
||
|
|
};
|
||
|
|
Nav.prototype._renderLinks = function (links, nestingLevel) {
|
||
|
|
var _this = this;
|
||
|
|
if (!links || !links.length) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var linkElements = links.map(function (link, linkIndex) { return _this._renderLink(link, linkIndex, nestingLevel); });
|
||
|
|
return (React.createElement("ul", { role: 'list', "aria-label": this.props.ariaLabel, className: Utilities_1.css(styles.navItems) }, linkElements));
|
||
|
|
};
|
||
|
|
Nav.prototype._renderGroup = function (group, groupIndex) {
|
||
|
|
var isGroupExpanded = !this.state.isGroupCollapsed[group.name];
|
||
|
|
return (React.createElement("div", { key: groupIndex, className: Utilities_1.css('ms-Nav-group', styles.group, (_a = {
|
||
|
|
'is-expanded': isGroupExpanded
|
||
|
|
},
|
||
|
|
_a[styles.groupIsExpanded] = isGroupExpanded,
|
||
|
|
_a)) },
|
||
|
|
(group.name ?
|
||
|
|
React.createElement("button", { className: Utilities_1.css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize), onClick: this._onGroupHeaderClicked.bind(this, group.name) },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Nav-chevron', styles.chevronIcon, isGroupExpanded && styles.chevronIsExpanded), iconName: 'chevronDown' }),
|
||
|
|
group.name) : null),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Nav-groupContent', Styling_1.AnimationClassNames.slideDownIn20, styles.groupContent) }, this._renderLinks(group.links, 0 /* nestingLevel */))));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Nav.prototype._onGroupHeaderClicked = function (groupKey, ev) {
|
||
|
|
var isGroupCollapsed = this.state.isGroupCollapsed;
|
||
|
|
isGroupCollapsed[groupKey] = !isGroupCollapsed[groupKey];
|
||
|
|
this.setState({ isGroupCollapsed: isGroupCollapsed });
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
Nav.prototype._onLinkExpandClicked = function (link, ev) {
|
||
|
|
link.isExpanded = !link.isExpanded;
|
||
|
|
this.setState({ isLinkExpandStateChanged: true });
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
Nav.prototype._onNavAnchorLinkClicked = function (link, ev) {
|
||
|
|
if (this.props.onLinkClick) {
|
||
|
|
this.props.onLinkClick(ev, link);
|
||
|
|
}
|
||
|
|
this.setState({ selectedKey: link.key });
|
||
|
|
};
|
||
|
|
Nav.prototype._onNavButtonLinkClicked = function (link, ev) {
|
||
|
|
if (link.onClick) {
|
||
|
|
link.onClick(ev, link);
|
||
|
|
}
|
||
|
|
this.setState({ selectedKey: link.key });
|
||
|
|
};
|
||
|
|
Nav.prototype._isLinkSelected = function (link) {
|
||
|
|
// if caller passes in selectedKey, use it as first choice or
|
||
|
|
// if current state.selectedKey (from addressbar) is match to the link
|
||
|
|
if (this.props.selectedKey !== undefined) {
|
||
|
|
return link.key === this.props.selectedKey;
|
||
|
|
}
|
||
|
|
else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
// resolve is not supported for ssr
|
||
|
|
if (typeof (window) === 'undefined') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (!link.url) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
_urlResolver = _urlResolver || document.createElement('a');
|
||
|
|
_urlResolver.href = link.url || '';
|
||
|
|
var target = _urlResolver.href;
|
||
|
|
if (location.href === target) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if (location.protocol + '//' + location.host + location.pathname === target) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if (location.hash) {
|
||
|
|
// Match the hash to the url.
|
||
|
|
if (location.hash === link.url) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
// Match a rebased url. (e.g. #foo becomes http://hostname/foo)
|
||
|
|
_urlResolver.href = location.hash.substring(1);
|
||
|
|
return _urlResolver.href === target;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
return Nav;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Nav.defaultProps = {
|
||
|
|
groups: null,
|
||
|
|
onRenderLink: function (link) { return (React.createElement("span", { className: Utilities_1.css('ms-Nav-linkText', styles.linkText) }, link.name)); }
|
||
|
|
};
|
||
|
|
exports.Nav = Nav;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 317 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_0f532585',
|
||
|
|
rootIsOnTop: 'rootIsOnTop_0f532585',
|
||
|
|
navItems: 'navItems_0f532585',
|
||
|
|
navItem: 'navItem_0f532585',
|
||
|
|
groupContent: 'groupContent_0f532585',
|
||
|
|
group: 'group_0f532585',
|
||
|
|
groupIsExpanded: 'groupIsExpanded_0f532585',
|
||
|
|
icon: 'icon_0f532585',
|
||
|
|
iconLink: 'iconLink_0f532585',
|
||
|
|
chevronButton: 'chevronButton_0f532585',
|
||
|
|
chevronButtonIsGroup: 'chevronButtonIsGroup_0f532585',
|
||
|
|
chevronIcon: 'chevronIcon_0f532585',
|
||
|
|
chevronIsExpanded: 'chevronIsExpanded_0f532585',
|
||
|
|
linkText: 'linkText_0f532585',
|
||
|
|
compositeLink: 'compositeLink_0f532585',
|
||
|
|
chevronButtonLink: 'chevronButtonLink_0f532585',
|
||
|
|
compositeLinkIsExpanded: 'compositeLinkIsExpanded_0f532585',
|
||
|
|
compositeLinkIsSelected: 'compositeLinkIsSelected_0f532585',
|
||
|
|
link: 'link_0f532585',
|
||
|
|
groupHeaderFontSize: 'groupHeaderFontSize_0f532585',
|
||
|
|
chevronButtonGroup: 'chevronButtonGroup_0f532585',
|
||
|
|
linkIsOnExpanded: 'linkIsOnExpanded_0f532585',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_0f532585{overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rootIsOnTop_0f532585{position:absolute}.navItems_0f532585{list-style-type:none}.navItems_0f532585,.navItems_0f532585>.navItem_0f532585{padding:0}.groupContent_0f532585{display:none;margin-bottom:40px}.group_0f532585.groupIsExpanded_0f532585 .groupContent_0f532585{display:block}.icon_0f532585{padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}[dir=ltr] .iconLink_0f532585{margin-right:4px}[dir=rtl] .iconLink_0f532585{margin-left:4px}.chevronButton_0f532585{display:block;font-weight:400;font-size:12px;line-height:36px;margin:5px 0;padding:0 20px 0 28px;background:0 0;border:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}html[dir=ltr] .chevronButton_0f532585{text-align:left}html[dir=rtl] .chevronButton_0f532585{text-align:right}html[dir=rtl] .chevronButton_0f532585{padding:0 28px 0 20px}.chevronButton_0f532585:visited{color:inherit}.chevronButton_0f532585:hover{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": "}.chevronButton_0f532585.chevronButtonIsGroup_0f532585{width:100%;height:36px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.chevronIcon_0f532585{position:absolute;height:36px;line-height:36px;font-size:12px;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear,-webkit-transform .1s linear}[dir=ltr] .chevronIcon_0f532585{left:8px}[dir=rtl] .chevronIcon_0f532585{right:8px}.chevronIsExpanded_0f532585{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.linkText_0f532585{vertical-align:middle}.compositeLink_0f532585{display:block;position:relative;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585{display:block;width:26px;height:34px;position:absolute;top:1px;z-index:1;padding:0;margin:0}[dir=ltr] .compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585{left:1px}[dir=rtl] .compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585{right:1px}.compositeLink_0f532585 .chevronButton_0f532585.chevronButtonLink_0f532585 .chevronIcon_0f532585{top:0}.compositeLink_0f532585 a{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_0f532585:hover .chevronButton_0f532585,.compositeLink_0f532585:hover a{background:" }, { "theme": "neutralLighterAlt", "defaultValue": "#f8f8f8" }, { "rawString": ";color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.compositeLink_0f532585.compositeLinkIsExpanded_0f532585 .chevronIcon_0f532585{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585,.compositeLink_0f532585.compositeLinkIsSelected_0f532585 a{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.compositeLink_0f532585.compositeLinkIsSelected_0f532585 .chevronButton_0f532585:after,.compositeLink_0f532585.compositeLinkIsSelected_0f532585 a:after{content:'';position:absolute;top:0;bottom:0}html[dir=ltr] .compositeLink_0f532585.compositeLinkIsSelec
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 318 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(319));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 319 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(320));
|
||
|
|
__export(__webpack_require__(322));
|
||
|
|
__export(__webpack_require__(323));
|
||
|
|
__export(__webpack_require__(324));
|
||
|
|
__export(__webpack_require__(326));
|
||
|
|
__export(__webpack_require__(331));
|
||
|
|
__export(__webpack_require__(332));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 320 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Spinner_1 = __webpack_require__(242);
|
||
|
|
var stylesImport = __webpack_require__(321);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var SuggestionsItem = (function (_super) {
|
||
|
|
__extends(SuggestionsItem, _super);
|
||
|
|
function SuggestionsItem() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
SuggestionsItem.prototype.render = function () {
|
||
|
|
var _a = this.props, suggestionModel = _a.suggestionModel, RenderSuggestion = _a.RenderSuggestion, onClick = _a.onClick, className = _a.className, onRemoveItem = _a.onRemoveItem, showRemoveButton = _a.showRemoveButton, id = _a.id;
|
||
|
|
var itemProps = Utilities_1.assign({}, suggestionModel.item, { onRemoveItem: onRemoveItem });
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-item', styles.suggestionsItem, (_b = {},
|
||
|
|
_b['is-suggested ' + styles.suggestionsItemIsSuggested] = suggestionModel.selected,
|
||
|
|
_b), className) },
|
||
|
|
React.createElement(Button_1.CommandButton, { onClick: onClick, className: Utilities_1.css('ms-Suggestions-itemButton', styles.itemButton) }, RenderSuggestion(suggestionModel.item, this.props)),
|
||
|
|
this.props.showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel' }, title: 'Remove', ariaLabel: 'Remove', onClick: onRemoveItem, className: Utilities_1.css('ms-Suggestions-closeButton', styles.closeButton) })) : (null)));
|
||
|
|
var _b;
|
||
|
|
};
|
||
|
|
return SuggestionsItem;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.SuggestionsItem = SuggestionsItem;
|
||
|
|
var Suggestions = (function (_super) {
|
||
|
|
__extends(Suggestions, _super);
|
||
|
|
function Suggestions(suggestionsProps) {
|
||
|
|
var _this = _super.call(this, suggestionsProps) || this;
|
||
|
|
_this.SuggestionsItemOfProperType = SuggestionsItem;
|
||
|
|
_this._getMoreResults = _this._getMoreResults.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Suggestions.prototype.componentDidUpdate = function () {
|
||
|
|
this.scrollSelected();
|
||
|
|
};
|
||
|
|
Suggestions.prototype.render = function () {
|
||
|
|
var _a = this.props, suggestionsHeaderText = _a.suggestionsHeaderText, mostRecentlyUsedHeaderText = _a.mostRecentlyUsedHeaderText, searchForMoreText = _a.searchForMoreText, className = _a.className, moreSuggestionsAvailable = _a.moreSuggestionsAvailable, noResultsFoundText = _a.noResultsFoundText, suggestions = _a.suggestions, isLoading = _a.isLoading, isSearching = _a.isSearching, loadingText = _a.loadingText, onRenderNoResultFound = _a.onRenderNoResultFound, searchingText = _a.searchingText, isMostRecentlyUsedVisible = _a.isMostRecentlyUsedVisible, resultsMaximumNumber = _a.resultsMaximumNumber, resultsFooterFull = _a.resultsFooterFull, resultsFooter = _a.resultsFooter, isResultsFooterVisible = _a.isResultsFooterVisible, showRemoveButtons = _a.showRemoveButtons;
|
||
|
|
var noResults = function () {
|
||
|
|
return noResultsFoundText ?
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, noResultsFoundText) : null;
|
||
|
|
};
|
||
|
|
var headerText = isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText ? mostRecentlyUsedHeaderText : null;
|
||
|
|
var footerTitle = (suggestions.length >= resultsMaximumNumber) ? resultsFooterFull : resultsFooter;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions', className ? className : '', styles.root) },
|
||
|
|
headerText ?
|
||
|
|
(React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, headerText)) : (null),
|
||
|
|
isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })),
|
||
|
|
(!suggestions || !suggestions.length) && !isLoading ?
|
||
|
|
(onRenderNoResultFound ? onRenderNoResultFound(null, noResults) : noResults()) :
|
||
|
|
this._renderSuggestions(),
|
||
|
|
searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._resolveRef('_searchForMoreButton'), className: Utilities_1.css('ms-SearchMore-button', styles.searchMoreButton), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults.bind(this) }, searchForMoreText)),
|
||
|
|
isSearching ?
|
||
|
|
(React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: searchingText })) : (null),
|
||
|
|
!moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ?
|
||
|
|
(React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, footerTitle(this.props))) : (null)));
|
||
|
|
};
|
||
|
|
Suggestions.prototype.focusSearchForMoreButton = function () {
|
||
|
|
if (this._searchForMoreButton) {
|
||
|
|
this._searchForMoreButton.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// TODO get the element to scroll into view properly regardless of direction.
|
||
|
|
Suggestions.prototype.scrollSelected = function () {
|
||
|
|
if (this._selectedElement) {
|
||
|
|
this._selectedElement.scrollIntoView(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Suggestions.prototype._renderSuggestions = function () {
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, suggestions = _a.suggestions, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons;
|
||
|
|
var TypedSuggestionsItem = this.SuggestionsItemOfProperType;
|
||
|
|
if (resultsMaximumNumber) {
|
||
|
|
suggestions = suggestions.slice(0, resultsMaximumNumber);
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-container', styles.suggestionsContainer), id: 'suggestion-list', role: 'menu' }, suggestions.map(function (suggestion, index) {
|
||
|
|
return React.createElement("div", { ref: _this._resolveRef(suggestion.selected ? '_selectedElement' : ''), key: index, id: 'sug-' + index, role: 'menuitem' },
|
||
|
|
React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: function (ev) { _this.props.onSuggestionClick(ev, suggestion.item, index); }, className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: function (ev) {
|
||
|
|
_this.props.onSuggestionRemove(ev, suggestion.item, index);
|
||
|
|
ev.stopPropagation();
|
||
|
|
} }));
|
||
|
|
})));
|
||
|
|
};
|
||
|
|
Suggestions.prototype._getMoreResults = function () {
|
||
|
|
if (this.props.onGetMoreResults) {
|
||
|
|
this.props.onGetMoreResults();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Suggestions;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.Suggestions = Suggestions;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 321 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_bc3cce41',
|
||
|
|
suggestionsItem: 'suggestionsItem_bc3cce41',
|
||
|
|
suggestionsItemIsSuggested: 'suggestionsItemIsSuggested_bc3cce41',
|
||
|
|
closeButton: 'closeButton_bc3cce41',
|
||
|
|
searchMoreButton: 'searchMoreButton_bc3cce41',
|
||
|
|
suggestionsTitle: 'suggestionsTitle_bc3cce41',
|
||
|
|
suggestionsContainer: 'suggestionsContainer_bc3cce41',
|
||
|
|
suggestionsNone: 'suggestionsNone_bc3cce41',
|
||
|
|
suggestionsSpinner: 'suggestionsSpinner_bc3cce41',
|
||
|
|
itemButton: 'itemButton_bc3cce41',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_bc3cce41{min-width:260px}.suggestionsItem_bc3cce41{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;box-sizing:border-box;width:100%;position:relative}.suggestionsItem_bc3cce41:hover{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsItem_bc3cce41.suggestionsItemIsSuggested_bc3cce41{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsItem_bc3cce41.suggestionsItemIsSuggested_bc3cce41:hover{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.suggestionsItem_bc3cce41.suggestionsItemIsSuggested_bc3cce41 .closeButton_bc3cce41:hover{background:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": ";color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.searchMoreButton_bc3cce41{background:0 0;border:0;cursor:pointer;margin:0;position:relative;border-top:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";height:40px;width:100%}[dir=ltr] .searchMoreButton_bc3cce41{padding-left:8px}[dir=rtl] .searchMoreButton_bc3cce41{padding-right:8px}[dir=ltr] .searchMoreButton_bc3cce41{text-align:left}[dir=rtl] .searchMoreButton_bc3cce41{text-align:right}.searchMoreButton_bc3cce41:hover{background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";cursor:pointer}.searchMoreButton_bc3cce41:active,.searchMoreButton_bc3cce41:focus{background-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.searchMoreButton_bc3cce41 .ms-Button-icon{font-size:16px;width:25px}.searchMoreButton_bc3cce41 .ms-Button-label{margin:0 4px 0 9px}html[dir=rtl] .searchMoreButton_bc3cce41 .ms-Button-label{margin:0 9px 0 4px}.suggestionsTitle_bc3cce41{padding:0 12px;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";font-size:12px;text-transform:uppercase;line-height:40px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsContainer_bc3cce41{overflow-y:auto;overflow-x:hidden;max-height:300px;border-bottom:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.suggestionsNone_bc3cce41{text-align:center;color:" }, { "theme": "info", "defaultValue": "#767676" }, { "rawString": ";font-size:12px;line-height:30px}.suggestionsSpinner_bc3cce41{margin:5px 0;white-space:nowrap;line-height:20px}html[dir=ltr] .suggestionsSpinner_bc3cce41{padding-left:14px}html[dir=rtl] .suggestionsSpinner_bc3cce41{padding-right:14px}html[dir=ltr] .suggestionsSpinner_bc3cce41{text-align:left}html[dir=rtl] .suggestionsSpinner_bc3cce41{text-align:right}.suggestionsSpinner_bc3cce41 .ms-Spinner-circle{display:inline-block;vertical-align:middle}.suggestionsSpinner_bc3cce41 .ms-Spinner-label{display:inline-block;margin:0 10px 0 16px;vertical-align:middle}html[dir=rtl] .suggestionsSpinner_bc3cce41 .ms-Spinner-label{margin:0 16px 0 10px}.itemButton_bc3cce41{height:100%;width:100%;padding:7px 12px}.closeButton_bc3cce41{padding:0 4px;height:auto;width:32px}.closeButton_bc3cce41:hover{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 322 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var SuggestionsController = (function () {
|
||
|
|
function SuggestionsController() {
|
||
|
|
this.suggestions = [];
|
||
|
|
this.currentIndex = -1;
|
||
|
|
}
|
||
|
|
SuggestionsController.prototype.updateSuggestions = function (newSuggestions, selectedIndex) {
|
||
|
|
if (newSuggestions && newSuggestions.length > 0) {
|
||
|
|
this.suggestions = this._convertSuggestionsToSuggestionItems(newSuggestions);
|
||
|
|
this.currentIndex = 0;
|
||
|
|
if (selectedIndex !== undefined) {
|
||
|
|
this.suggestions[selectedIndex].selected = true;
|
||
|
|
this.currentSuggestion = this.suggestions[selectedIndex];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.suggestions = [];
|
||
|
|
this.currentIndex = -1;
|
||
|
|
this.currentSuggestion = undefined;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Increments the suggestion index and gets the next suggestion in the list.
|
||
|
|
*/
|
||
|
|
SuggestionsController.prototype.nextSuggestion = function () {
|
||
|
|
if (this.suggestions && this.suggestions.length) {
|
||
|
|
if (this.currentIndex < (this.suggestions.length - 1)) {
|
||
|
|
this._setSelectedSuggestion(this.currentIndex + 1);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if (this.currentIndex === (this.suggestions.length - 1)) {
|
||
|
|
this._setSelectedSuggestion(0);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Decrements the suggestion index and gets the previous suggestion in the list.
|
||
|
|
*/
|
||
|
|
SuggestionsController.prototype.previousSuggestion = function () {
|
||
|
|
if (this.suggestions && this.suggestions.length) {
|
||
|
|
if (this.currentIndex > 0) {
|
||
|
|
this._setSelectedSuggestion(this.currentIndex - 1);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
else if (this.currentIndex === 0) {
|
||
|
|
this._setSelectedSuggestion(this.suggestions.length - 1);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype.getSuggestions = function () {
|
||
|
|
return this.suggestions;
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype.getCurrentItem = function () {
|
||
|
|
return this.currentSuggestion;
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype.getSuggestionAtIndex = function (index) {
|
||
|
|
return this.suggestions[index];
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype.hasSelectedSuggestion = function () {
|
||
|
|
return this.currentSuggestion ? true : false;
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype.removeSuggestion = function (index) {
|
||
|
|
this.suggestions.splice(index, 1);
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype._convertSuggestionsToSuggestionItems = function (suggestions) {
|
||
|
|
var converted = [];
|
||
|
|
suggestions.forEach(function (suggestion) { return converted.push({ item: suggestion, selected: false }); });
|
||
|
|
return converted;
|
||
|
|
};
|
||
|
|
SuggestionsController.prototype._setSelectedSuggestion = function (index) {
|
||
|
|
if (index > this.suggestions.length - 1 || index < 0) {
|
||
|
|
this.currentIndex = 0;
|
||
|
|
this.currentSuggestion.selected = false;
|
||
|
|
this.currentSuggestion = this.suggestions[0];
|
||
|
|
this.currentSuggestion.selected = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.currentIndex > -1) {
|
||
|
|
this.suggestions[this.currentIndex].selected = false;
|
||
|
|
}
|
||
|
|
this.suggestions[index].selected = true;
|
||
|
|
this.currentIndex = index;
|
||
|
|
this.currentSuggestion = this.suggestions[index];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return SuggestionsController;
|
||
|
|
}());
|
||
|
|
exports.SuggestionsController = SuggestionsController;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 323 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var SELECTION_FORWARD = 'forward';
|
||
|
|
var SELECTION_BACKWARD = 'backward';
|
||
|
|
var BaseAutoFill = (function (_super) {
|
||
|
|
__extends(BaseAutoFill, _super);
|
||
|
|
function BaseAutoFill(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._autoFillEnabled = true;
|
||
|
|
_this._value = '';
|
||
|
|
_this.state = {
|
||
|
|
displayValue: ''
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Object.defineProperty(BaseAutoFill.prototype, "cursorLocation", {
|
||
|
|
get: function () {
|
||
|
|
if (this._inputElement) {
|
||
|
|
var inputElement = this._inputElement;
|
||
|
|
if (inputElement.selectionDirection !== SELECTION_FORWARD) {
|
||
|
|
return inputElement.selectionEnd;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return inputElement.selectionStart;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return -1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseAutoFill.prototype, "isValueSelected", {
|
||
|
|
get: function () {
|
||
|
|
return this.inputElement.selectionStart !== this.inputElement.selectionEnd;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseAutoFill.prototype, "value", {
|
||
|
|
get: function () {
|
||
|
|
return this._value;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseAutoFill.prototype, "selectionStart", {
|
||
|
|
get: function () {
|
||
|
|
return this._inputElement ? this._inputElement.selectionStart : -1;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseAutoFill.prototype, "selectionEnd", {
|
||
|
|
get: function () {
|
||
|
|
return this._inputElement ? this._inputElement.selectionEnd : -1;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Object.defineProperty(BaseAutoFill.prototype, "inputElement", {
|
||
|
|
get: function () {
|
||
|
|
return this._inputElement;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
BaseAutoFill.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
if (this._autoFillEnabled && this._doesTextStartWith(nextProps.suggestedDisplayValue, this._value)) {
|
||
|
|
this.setState({ displayValue: nextProps.suggestedDisplayValue });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype.componentDidUpdate = function () {
|
||
|
|
var value = this._value;
|
||
|
|
var suggestedDisplayValue = this.props.suggestedDisplayValue;
|
||
|
|
var differenceIndex = 0;
|
||
|
|
if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) {
|
||
|
|
while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) {
|
||
|
|
differenceIndex++;
|
||
|
|
}
|
||
|
|
if (differenceIndex > 0) {
|
||
|
|
this._inputElement.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype.render = function () {
|
||
|
|
var displayValue = this.state.displayValue;
|
||
|
|
var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties);
|
||
|
|
return React.createElement("input", __assign({}, nativeProps, { ref: this._resolveRef('_inputElement'), value: displayValue, autoCapitalize: 'off', autoComplete: 'off', onChange: this._onChange, onKeyDown: this._onKeyDown, onClick: this._onClick }));
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype.focus = function () {
|
||
|
|
this._inputElement.focus();
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype.clear = function () {
|
||
|
|
this._autoFillEnabled = true;
|
||
|
|
this._updateValue('');
|
||
|
|
this._inputElement.setSelectionRange(0, 0);
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype._onClick = function () {
|
||
|
|
if (this._value && this._value !== '' && this._autoFillEnabled) {
|
||
|
|
this._autoFillEnabled = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype._onKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.backspace:
|
||
|
|
this._autoFillEnabled = false;
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.left:
|
||
|
|
if (this._autoFillEnabled) {
|
||
|
|
this._autoFillEnabled = false;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.right:
|
||
|
|
if (this._autoFillEnabled) {
|
||
|
|
this._autoFillEnabled = false;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
if (!this._autoFillEnabled) {
|
||
|
|
if (this.props.enableAutoFillOnKeyPress.indexOf(ev.which) !== -1) {
|
||
|
|
this._autoFillEnabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype._onChange = function (ev) {
|
||
|
|
var value = ev.target.value;
|
||
|
|
if (value && ev.target.selectionStart === value.length && !this._autoFillEnabled && value.length > this._value.length) {
|
||
|
|
this._autoFillEnabled = true;
|
||
|
|
}
|
||
|
|
this._updateValue(value);
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype._notifyInputChange = function (newValue) {
|
||
|
|
if (this.props.onInputValueChange) {
|
||
|
|
this.props.onInputValueChange(newValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype._updateValue = function (newValue) {
|
||
|
|
var _this = this;
|
||
|
|
this._value = newValue;
|
||
|
|
var displayValue = newValue;
|
||
|
|
if (this.props.suggestedDisplayValue &&
|
||
|
|
this._doesTextStartWith(this.props.suggestedDisplayValue, displayValue)
|
||
|
|
&& this._autoFillEnabled) {
|
||
|
|
displayValue = this.props.suggestedDisplayValue;
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
displayValue: newValue
|
||
|
|
}, function () { return _this._notifyInputChange(newValue); });
|
||
|
|
};
|
||
|
|
BaseAutoFill.prototype._doesTextStartWith = function (text, startWith) {
|
||
|
|
if (!text || !startWith) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;
|
||
|
|
};
|
||
|
|
return BaseAutoFill;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
BaseAutoFill.defaultProps = {
|
||
|
|
enableAutoFillOnKeyPress: [Utilities_1.KeyCodes.down, Utilities_1.KeyCodes.up]
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseAutoFill.prototype, "_onClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseAutoFill.prototype, "_onKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BaseAutoFill.prototype, "_onChange", null);
|
||
|
|
exports.BaseAutoFill = BaseAutoFill;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 324 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var Callout_1 = __webpack_require__(59);
|
||
|
|
var index_1 = __webpack_require__(216);
|
||
|
|
var Suggestions_1 = __webpack_require__(320);
|
||
|
|
var SuggestionsController_1 = __webpack_require__(322);
|
||
|
|
var BaseAutoFill_1 = __webpack_require__(323);
|
||
|
|
var stylesImport = __webpack_require__(325);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var BasePicker = (function (_super) {
|
||
|
|
__extends(BasePicker, _super);
|
||
|
|
function BasePicker(basePickerProps) {
|
||
|
|
var _this = _super.call(this, basePickerProps) || this;
|
||
|
|
_this.SuggestionOfProperType = Suggestions_1.Suggestions;
|
||
|
|
var items = basePickerProps.defaultSelectedItems || [];
|
||
|
|
_this.suggestionStore = new SuggestionsController_1.SuggestionsController();
|
||
|
|
_this.selection = new index_1.Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
|
||
|
|
_this.selection.setItems(items);
|
||
|
|
_this.state = {
|
||
|
|
items: items,
|
||
|
|
suggestedDisplayValue: '',
|
||
|
|
isMostRecentlyUsedVisible: false,
|
||
|
|
moreSuggestionsAvailable: false,
|
||
|
|
isSearching: false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Object.defineProperty(BasePicker.prototype, "items", {
|
||
|
|
get: function () {
|
||
|
|
return this.state.items;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
BasePicker.prototype.componentWillUpdate = function (newProps, newState) {
|
||
|
|
if (newState.items && newState.items !== this.state.items) {
|
||
|
|
this.selection.setItems(newState.items);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.componentDidMount = function () {
|
||
|
|
this.selection.setItems(this.state.items);
|
||
|
|
};
|
||
|
|
BasePicker.prototype.focus = function () {
|
||
|
|
this.focusZone.focus();
|
||
|
|
};
|
||
|
|
BasePicker.prototype.dismissSuggestions = function () {
|
||
|
|
this.setState({ suggestionsVisible: false });
|
||
|
|
};
|
||
|
|
BasePicker.prototype.completeSuggestion = function () {
|
||
|
|
if (this.suggestionStore.hasSelectedSuggestion()) {
|
||
|
|
this.addItem(this.suggestionStore.currentSuggestion.item);
|
||
|
|
this.updateValue('');
|
||
|
|
this.input.clear();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.render = function () {
|
||
|
|
var suggestedDisplayValue = this.state.suggestedDisplayValue;
|
||
|
|
var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled;
|
||
|
|
return (React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), direction: FocusZone_1.FocusZoneDirection.horizontal },
|
||
|
|
React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
|
||
|
|
this.renderItems(),
|
||
|
|
React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))),
|
||
|
|
this.renderSuggestions()));
|
||
|
|
};
|
||
|
|
BasePicker.prototype.renderSuggestions = function () {
|
||
|
|
var TypedSuggestion = this.SuggestionOfProperType;
|
||
|
|
return this.state.suggestionsVisible ? (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 0, targetElement: this.input.inputElement, onDismiss: this.dismissSuggestions, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge },
|
||
|
|
React.createElement(TypedSuggestion, __assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), ref: this._resolveRef('suggestionElement'), onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading, isSearching: this.state.isSearching, isMostRecentlyUsedVisible: this.state.isMostRecentlyUsedVisible, isResultsFooterVisible: this.state.isResultsFooterVisible }, this.props.pickerSuggestionsProps)))) : (null);
|
||
|
|
};
|
||
|
|
BasePicker.prototype.renderItems = function () {
|
||
|
|
var _this = this;
|
||
|
|
var onRenderItem = this.props.onRenderItem;
|
||
|
|
var items = this.state.items;
|
||
|
|
return items.map(function (item, index) { return onRenderItem({
|
||
|
|
item: item,
|
||
|
|
index: index,
|
||
|
|
key: index + _this._getTextFromItem(item),
|
||
|
|
selected: _this.selection.isIndexSelected(index),
|
||
|
|
onRemoveItem: function () { return _this.removeItem(item); },
|
||
|
|
onItemChange: _this.onItemChange
|
||
|
|
}); });
|
||
|
|
};
|
||
|
|
BasePicker.prototype.resetFocus = function (index) {
|
||
|
|
var items = this.state.items;
|
||
|
|
if (items.length) {
|
||
|
|
var newEl = this.root.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)];
|
||
|
|
if (newEl) {
|
||
|
|
this.focusZone.focusElement(newEl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.input.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onSuggestionSelect = function () {
|
||
|
|
if (this.suggestionStore.currentSuggestion) {
|
||
|
|
var currentValue = this.input.value;
|
||
|
|
var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
|
||
|
|
this.setState({ suggestedDisplayValue: itemValue });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onSelectionChange = function () {
|
||
|
|
this.forceUpdate();
|
||
|
|
};
|
||
|
|
BasePicker.prototype.updateSuggestions = function (suggestions) {
|
||
|
|
this.suggestionStore.updateSuggestions(suggestions, 0);
|
||
|
|
this.forceUpdate();
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onEmptyInputFocus = function () {
|
||
|
|
var suggestions = this.props.onEmptyInputFocus(this.state.items);
|
||
|
|
this.updateSuggestionsList(suggestions);
|
||
|
|
};
|
||
|
|
BasePicker.prototype.updateValue = function (updatedValue) {
|
||
|
|
var suggestions = this.props.onResolveSuggestions(updatedValue, this.state.items);
|
||
|
|
this.updateSuggestionsList(suggestions, updatedValue);
|
||
|
|
};
|
||
|
|
BasePicker.prototype.updateSuggestionsList = function (suggestions, updatedValue) {
|
||
|
|
var _this = this;
|
||
|
|
var suggestionsArray = suggestions;
|
||
|
|
var suggestionsPromiseLike = suggestions;
|
||
|
|
// Check to see if the returned value is an array, if it is then just pass it into the next function.
|
||
|
|
// If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
|
||
|
|
if (Array.isArray(suggestionsArray)) {
|
||
|
|
if (updatedValue !== undefined) {
|
||
|
|
this.resolveNewValue(updatedValue, suggestionsArray);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.suggestionStore.updateSuggestions(suggestionsArray);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {
|
||
|
|
if (!this.loadingTimer) {
|
||
|
|
this.loadingTimer = this._async.setTimeout(function () { return _this.setState({
|
||
|
|
suggestionsLoading: true
|
||
|
|
}); }, 500);
|
||
|
|
}
|
||
|
|
// Clear suggestions
|
||
|
|
this.suggestionStore.updateSuggestions([]);
|
||
|
|
if (updatedValue !== undefined) {
|
||
|
|
this.setState({
|
||
|
|
suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.setState({
|
||
|
|
suggestionsVisible: this.input.inputElement === document.activeElement
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// Ensure that the promise will only use the callback if it was the most recent one.
|
||
|
|
var promise_1 = this.currentPromise = suggestionsPromiseLike;
|
||
|
|
promise_1.then(function (newSuggestions) {
|
||
|
|
if (promise_1 === _this.currentPromise) {
|
||
|
|
if (updatedValue !== undefined) {
|
||
|
|
_this.resolveNewValue(updatedValue, newSuggestions);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_this.suggestionStore.updateSuggestions(newSuggestions);
|
||
|
|
_this.setState({
|
||
|
|
suggestionsLoading: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (_this.loadingTimer) {
|
||
|
|
_this._async.clearTimeout(_this.loadingTimer);
|
||
|
|
_this.loadingTimer = undefined;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) {
|
||
|
|
this.suggestionStore.updateSuggestions(suggestions, 0);
|
||
|
|
var itemValue = undefined;
|
||
|
|
if (this.suggestionStore.currentSuggestion) {
|
||
|
|
itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
suggestionsLoading: false,
|
||
|
|
suggestedDisplayValue: itemValue,
|
||
|
|
suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
|
||
|
|
});
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onChange = function () {
|
||
|
|
if (this.props.onChange) {
|
||
|
|
this.props.onChange(this.state.items);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onInputChange = function (value) {
|
||
|
|
this.updateValue(value);
|
||
|
|
this.setState({
|
||
|
|
moreSuggestionsAvailable: true,
|
||
|
|
isMostRecentlyUsedVisible: false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onSuggestionClick = function (ev, item, index) {
|
||
|
|
this.addItemByIndex(index);
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onSuggestionRemove = function (ev, item, index) {
|
||
|
|
if (this.props.onRemoveSuggestion) {
|
||
|
|
this.props.onRemoveSuggestion(item);
|
||
|
|
}
|
||
|
|
this.suggestionStore.removeSuggestion(index);
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onInputFocus = function (ev) {
|
||
|
|
this.selection.setAllSelected(false);
|
||
|
|
if (this.input.value === '' && this.props.onEmptyInputFocus) {
|
||
|
|
this.onEmptyInputFocus();
|
||
|
|
this.setState({
|
||
|
|
isMostRecentlyUsedVisible: true,
|
||
|
|
moreSuggestionsAvailable: false,
|
||
|
|
suggestionsVisible: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else if (this.input.value) {
|
||
|
|
this.setState({
|
||
|
|
isMostRecentlyUsedVisible: false,
|
||
|
|
suggestionsVisible: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onKeyDown = function (ev) {
|
||
|
|
var value = this.input.value;
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
if (this.state.suggestionsVisible) {
|
||
|
|
this.dismissSuggestions();
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.tab:
|
||
|
|
case Utilities_1.KeyCodes.enter:
|
||
|
|
if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
|
||
|
|
this.completeSuggestion();
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.backspace:
|
||
|
|
this.onBackspace(ev);
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.del:
|
||
|
|
if (ev.target === this.input.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) {
|
||
|
|
if (this.props.onRemoveSuggestion) {
|
||
|
|
this.props.onRemoveSuggestion(this.suggestionStore.currentSuggestion.item);
|
||
|
|
}
|
||
|
|
this.suggestionStore.removeSuggestion(this.suggestionStore.currentIndex);
|
||
|
|
this.forceUpdate();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.up:
|
||
|
|
if (ev.target === this.input.inputElement && this.suggestionStore.previousSuggestion() && this.state.suggestionsVisible) {
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
this.onSuggestionSelect();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.down:
|
||
|
|
if (ev.target === this.input.inputElement && this.state.suggestionsVisible) {
|
||
|
|
if (this.suggestionStore.nextSuggestion()) {
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
this.onSuggestionSelect();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onItemChange = function (changedItem, index) {
|
||
|
|
var _this = this;
|
||
|
|
var items = this.state.items;
|
||
|
|
if (index >= 0) {
|
||
|
|
var newItems = items;
|
||
|
|
newItems[index] = changedItem;
|
||
|
|
this.setState({ items: newItems }, function () { return _this.onChange(); });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.onGetMoreResults = function () {
|
||
|
|
var _this = this;
|
||
|
|
this.setState({
|
||
|
|
isSearching: true
|
||
|
|
}, function () {
|
||
|
|
if (_this.props.onGetMoreResults) {
|
||
|
|
var suggestions = _this.props.onGetMoreResults(_this.input.value, _this.state.items);
|
||
|
|
var suggestionsArray = suggestions;
|
||
|
|
var suggestionsPromiseLike = suggestions;
|
||
|
|
if (Array.isArray(suggestionsArray)) {
|
||
|
|
_this.updateSuggestions(suggestionsArray);
|
||
|
|
_this.setState({ isSearching: false });
|
||
|
|
}
|
||
|
|
else if (suggestionsPromiseLike.then) {
|
||
|
|
suggestionsPromiseLike.then(function (newSuggestions) {
|
||
|
|
_this.updateSuggestions(newSuggestions);
|
||
|
|
_this.setState({ isSearching: false });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_this.setState({ isSearching: false });
|
||
|
|
}
|
||
|
|
_this.input.focus();
|
||
|
|
_this.setState({
|
||
|
|
moreSuggestionsAvailable: false,
|
||
|
|
isResultsFooterVisible: true
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
BasePicker.prototype.addItemByIndex = function (index) {
|
||
|
|
this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item);
|
||
|
|
this.input.clear();
|
||
|
|
this.updateValue('');
|
||
|
|
};
|
||
|
|
BasePicker.prototype.addItem = function (item) {
|
||
|
|
var _this = this;
|
||
|
|
var newItems = this.state.items.concat([item]);
|
||
|
|
this.setState({ items: newItems }, function () { return _this.onChange(); });
|
||
|
|
};
|
||
|
|
BasePicker.prototype.removeItem = function (item) {
|
||
|
|
var _this = this;
|
||
|
|
var items = this.state.items;
|
||
|
|
var index = items.indexOf(item);
|
||
|
|
if (index >= 0) {
|
||
|
|
var newItems = items.slice(0, index).concat(items.slice(index + 1));
|
||
|
|
this.setState({ items: newItems }, function () { return _this.onChange(); });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype.removeItems = function (itemsToRemove) {
|
||
|
|
var _this = this;
|
||
|
|
var items = this.state.items;
|
||
|
|
var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; });
|
||
|
|
var firstItemToRemove = this.selection.getSelection()[0];
|
||
|
|
var index = items.indexOf(firstItemToRemove);
|
||
|
|
this.setState({ items: newItems }, function () {
|
||
|
|
_this.resetFocus(index);
|
||
|
|
_this.onChange();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// This is protected because we may expect the backspace key to work differently in a different kind of picker.
|
||
|
|
// This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
|
||
|
|
BasePicker.prototype.onBackspace = function (ev) {
|
||
|
|
if (this.state.items.length && !this.input.isValueSelected && this.input.cursorLocation === 0) {
|
||
|
|
if (this.selection.getSelectedCount() > 0) {
|
||
|
|
this.removeItems(this.selection.getSelection());
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.removeItem(this.state.items[this.state.items.length - 1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
BasePicker.prototype._getTextFromItem = function (item, currentValue) {
|
||
|
|
if (this.props.getTextFromItem) {
|
||
|
|
return this.props.getTextFromItem(item, currentValue);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return BasePicker;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "dismissSuggestions", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onInputChange", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onSuggestionClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onSuggestionRemove", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onInputFocus", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onItemChange", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "onGetMoreResults", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "addItemByIndex", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "addItem", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "removeItem", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePicker.prototype, "removeItems", null);
|
||
|
|
exports.BasePicker = BasePicker;
|
||
|
|
var BasePickerListBelow = (function (_super) {
|
||
|
|
__extends(BasePickerListBelow, _super);
|
||
|
|
function BasePickerListBelow() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
BasePickerListBelow.prototype.render = function () {
|
||
|
|
var suggestedDisplayValue = this.state.suggestedDisplayValue;
|
||
|
|
var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled;
|
||
|
|
return (React.createElement("div", null,
|
||
|
|
React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
|
||
|
|
React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
|
||
|
|
React.createElement(BaseAutoFill_1.BaseAutoFill, __assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))),
|
||
|
|
this.renderSuggestions(),
|
||
|
|
React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), className: 'ms-BasePicker-selectedItems', isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke }, this.renderItems())));
|
||
|
|
};
|
||
|
|
BasePickerListBelow.prototype.onBackspace = function (ev) {
|
||
|
|
// override the existing backspace method to not do anything because the list items appear below.
|
||
|
|
};
|
||
|
|
BasePickerListBelow.prototype._isFocusZoneInnerKeystroke = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.down:
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
return BasePickerListBelow;
|
||
|
|
}(BasePicker));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], BasePickerListBelow.prototype, "_isFocusZoneInnerKeystroke", null);
|
||
|
|
exports.BasePickerListBelow = BasePickerListBelow;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 325 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
pickerText: 'pickerText_f28c4353',
|
||
|
|
inputFocused: 'inputFocused_f28c4353',
|
||
|
|
pickerInput: 'pickerInput_f28c4353',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".pickerText_f28c4353{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;box-sizing:border-box;border:1px solid " }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";min-width:180px;padding:1px;min-height:32px}.pickerText_f28c4353:hover{border-color:" }, { "theme": "themeLight", "defaultValue": "#c7e0f4" }, { "rawString": "}.pickerText_f28c4353.inputFocused_f28c4353{border-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.pickerInput_f28c4353{height:26px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;margin:1px}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 326 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable */
|
||
|
|
var BasePicker_1 = __webpack_require__(324);
|
||
|
|
var SelectedItemDefault_1 = __webpack_require__(327);
|
||
|
|
var SuggestionItemDefault_1 = __webpack_require__(329);
|
||
|
|
__webpack_require__(330);
|
||
|
|
var BasePeoplePicker = (function (_super) {
|
||
|
|
__extends(BasePeoplePicker, _super);
|
||
|
|
function BasePeoplePicker() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
return BasePeoplePicker;
|
||
|
|
}(BasePicker_1.BasePicker));
|
||
|
|
exports.BasePeoplePicker = BasePeoplePicker;
|
||
|
|
var MemberListPeoplePicker = (function (_super) {
|
||
|
|
__extends(MemberListPeoplePicker, _super);
|
||
|
|
function MemberListPeoplePicker() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
return MemberListPeoplePicker;
|
||
|
|
}(BasePicker_1.BasePickerListBelow));
|
||
|
|
exports.MemberListPeoplePicker = MemberListPeoplePicker;
|
||
|
|
/**
|
||
|
|
* Standard People Picker.
|
||
|
|
*/
|
||
|
|
var NormalPeoplePicker = (function (_super) {
|
||
|
|
__extends(NormalPeoplePicker, _super);
|
||
|
|
function NormalPeoplePicker() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
return NormalPeoplePicker;
|
||
|
|
}(BasePeoplePicker));
|
||
|
|
NormalPeoplePicker.defaultProps = {
|
||
|
|
onRenderItem: function (props) { return React.createElement(SelectedItemDefault_1.SelectedItemDefault, __assign({}, props)); },
|
||
|
|
onRenderSuggestionsItem: function (props, itemProps) { return SuggestionItemDefault_1.SuggestionItemNormal(__assign({}, props), __assign({}, itemProps)); }
|
||
|
|
};
|
||
|
|
exports.NormalPeoplePicker = NormalPeoplePicker;
|
||
|
|
/**
|
||
|
|
* Compact layout. It uses small personas when displaying search results.
|
||
|
|
*/
|
||
|
|
var CompactPeoplePicker = (function (_super) {
|
||
|
|
__extends(CompactPeoplePicker, _super);
|
||
|
|
function CompactPeoplePicker() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
return CompactPeoplePicker;
|
||
|
|
}(BasePeoplePicker));
|
||
|
|
CompactPeoplePicker.defaultProps = {
|
||
|
|
onRenderItem: function (props) { return React.createElement(SelectedItemDefault_1.SelectedItemDefault, __assign({}, props)); },
|
||
|
|
onRenderSuggestionsItem: function (props, itemProps) { return SuggestionItemDefault_1.SuggestionItemSmall(__assign({}, props), __assign({}, itemProps)); }
|
||
|
|
};
|
||
|
|
exports.CompactPeoplePicker = CompactPeoplePicker;
|
||
|
|
/**
|
||
|
|
* MemberList layout. The selected people show up below the search box.
|
||
|
|
*/
|
||
|
|
var ListPeoplePicker = (function (_super) {
|
||
|
|
__extends(ListPeoplePicker, _super);
|
||
|
|
function ListPeoplePicker() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
return ListPeoplePicker;
|
||
|
|
}(MemberListPeoplePicker));
|
||
|
|
ListPeoplePicker.defaultProps = {
|
||
|
|
onRenderItem: function (props) { return React.createElement(SelectedItemDefault_1.SelectedItemDefault, __assign({}, props)); },
|
||
|
|
onRenderSuggestionsItem: function (props, itemProps) { return SuggestionItemDefault_1.SuggestionItemNormal(__assign({}, props), __assign({}, itemProps)); }
|
||
|
|
};
|
||
|
|
exports.ListPeoplePicker = ListPeoplePicker;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 327 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __assign = (this && this.__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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Persona_1 = __webpack_require__(281);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var stylesImport = __webpack_require__(328);
|
||
|
|
var styles = stylesImport;
|
||
|
|
exports.SelectedItemDefault = function (peoplePickerItemProps) {
|
||
|
|
var item = peoplePickerItemProps.item, onRemoveItem = peoplePickerItemProps.onRemoveItem, index = peoplePickerItemProps.index, selected = peoplePickerItemProps.selected;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-PickerPersona-container', styles.personaContainer, (_a = {},
|
||
|
|
_a['is-selected ' + styles.personaContainerIsSelected] = selected,
|
||
|
|
_a)), "data-is-focusable": true, "data-selection-index": index },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-PickerItem-content', styles.itemContent) },
|
||
|
|
React.createElement(Persona_1.Persona, __assign({}, item, { presence: item.presence !== undefined ? item.presence : Persona_1.PersonaPresence.none, size: Persona_1.PersonaSize.size28 }))),
|
||
|
|
React.createElement(Button_1.IconButton, { onClick: function () { if (onRemoveItem) {
|
||
|
|
onRemoveItem();
|
||
|
|
} }, iconProps: { iconName: 'Cancel' }, className: Utilities_1.css('ms-PickerItem-removeButton', styles.removeButton), "data-is-focusable": false })));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 328 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
personaContainer: 'personaContainer_96a1c5bb',
|
||
|
|
removeButton: 'removeButton_96a1c5bb',
|
||
|
|
personaContainerIsSelected: 'personaContainerIsSelected_96a1c5bb',
|
||
|
|
itemContent: 'itemContent_96a1c5bb',
|
||
|
|
personaDetails: 'personaDetails_96a1c5bb',
|
||
|
|
itemContainer: 'itemContainer_96a1c5bb',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".personaContainer_96a1c5bb{border-radius:15px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";margin:1px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:180px}.personaContainer_96a1c5bb::-moz-focus-inner{border:0}.personaContainer_96a1c5bb{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .personaContainer_96a1c5bb:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.personaContainer_96a1c5bb:hover{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.personaContainer_96a1c5bb:hover .removeButton_96a1c5bb{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb{background:" }, { "theme": "blue", "defaultValue": "#0078d7" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb .ms-Persona-primaryText{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb .removeButton_96a1c5bb .ms-Button-icon{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.personaContainer_96a1c5bb.personaContainerIsSelected_96a1c5bb .removeButton_96a1c5bb:hover{color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";background:" }, { "theme": "themeDark", "defaultValue": "#005a9e" }, { "rawString": "}.personaContainer_96a1c5bb .itemContent_96a1c5bb{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:0;max-width:100%;overflow-x:hidden}.personaContainer_96a1c5bb .removeButton_96a1c5bb{border-radius:15px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:28px;height:28px;-ms-flex-preferred-size:28px;flex-basis:28px}.personaContainer_96a1c5bb .removeButton_96a1c5bb:hover{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": ";color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.personaContainer_96a1c5bb .personaDetails_96a1c5bb{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.itemContainer_96a1c5bb{display:inline-block;vertical-align:top}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 329 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __assign = (this && this.__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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Persona_1 = __webpack_require__(281);
|
||
|
|
var stylesImport = __webpack_require__(330);
|
||
|
|
var styles = stylesImport;
|
||
|
|
exports.SuggestionItemNormal = function (personaProps, suggestionItemProps) {
|
||
|
|
var onRemoveItem = suggestionItemProps.onRemoveItem, onClick = suggestionItemProps.onClick, showRemoveButton = suggestionItemProps.showRemoveButton;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-PeoplePicker-personaContent', styles.peoplePickerPersonaContent) },
|
||
|
|
React.createElement(Persona_1.Persona, __assign({}, personaProps, { presence: personaProps.presence !== undefined ? personaProps.presence : Persona_1.PersonaPresence.none, size: Persona_1.PersonaSize.extraExtraSmall, className: Utilities_1.css('ms-PeoplePicker-Persona', styles.peoplePickerPersona), showSecondaryText: true }))));
|
||
|
|
};
|
||
|
|
exports.SuggestionItemSmall = function (personaProps, suggestionItemProps) {
|
||
|
|
var onRemoveItem = suggestionItemProps.onRemoveItem, onClick = suggestionItemProps.onClick;
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-PeoplePicker-personaContent', styles.peoplePickerPersonaContent) },
|
||
|
|
React.createElement(Persona_1.Persona, __assign({}, personaProps, { presence: personaProps.presence !== undefined ? personaProps.presence : Persona_1.PersonaPresence.none, size: Persona_1.PersonaSize.extraExtraSmall, className: Utilities_1.css('ms-PeoplePicker-Persona', styles.peoplePickerPersona) }))));
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 330 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
resultContent: 'resultContent_bee420eb',
|
||
|
|
resultItem: 'resultItem_bee420eb',
|
||
|
|
peoplePickerPersona: 'peoplePickerPersona_bee420eb',
|
||
|
|
peoplePicker: 'peoplePicker_bee420eb',
|
||
|
|
peoplePickerPersonaContent: 'peoplePickerPersonaContent_bee420eb',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".resultContent_bee420eb{display:table-row}.resultContent_bee420eb .resultItem_bee420eb{display:table-cell;vertical-align:bottom}.peoplePickerPersona_bee420eb{width:180px}.peoplePickerPersona_bee420eb .ms-Persona-details{width:100%}.peoplePicker_bee420eb .ms-BasePicker-text{min-height:40px}.peoplePickerPersonaContent_bee420eb{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 331 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
/* tslint:enable */
|
||
|
|
var BasePicker_1 = __webpack_require__(324);
|
||
|
|
var TagItem_1 = __webpack_require__(332);
|
||
|
|
var stylesImport = __webpack_require__(333);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var TagPicker = (function (_super) {
|
||
|
|
__extends(TagPicker, _super);
|
||
|
|
function TagPicker() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
return TagPicker;
|
||
|
|
}(BasePicker_1.BasePicker));
|
||
|
|
TagPicker.defaultProps = {
|
||
|
|
onRenderItem: function (props) { return React.createElement(TagItem_1.TagItem, __assign({}, props), props.item.name); },
|
||
|
|
onRenderSuggestionsItem: function (props) { return React.createElement("div", { className: Utilities_1.css('ms-TagItem-TextOverflow', styles.tagItemTextOverflow) },
|
||
|
|
" ",
|
||
|
|
props.name,
|
||
|
|
" "); }
|
||
|
|
};
|
||
|
|
exports.TagPicker = TagPicker;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 332 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(333);
|
||
|
|
var styles = stylesImport;
|
||
|
|
exports.TagItem = function (props) { return (React.createElement("div", { className: Utilities_1.css('ms-TagItem', styles.root, { 'is-selected': props.selected }, props.selected && styles.isSelected), key: props.index, "data-selection-index": props.index, "data-is-focusable": true },
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-TagItem-text', styles.tagItemText) }, props.children),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-TagItem-close', styles.tagItemClose), onClick: props.onRemoveItem },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'cancel' })))); };
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 333 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_df64cf87',
|
||
|
|
isSelected: 'isSelected_df64cf87',
|
||
|
|
tagItemText: 'tagItemText_df64cf87',
|
||
|
|
tagItemClose: 'tagItemClose_df64cf87',
|
||
|
|
tagItemButton: 'tagItemButton_df64cf87',
|
||
|
|
tagItemTextOverflow: 'tagItemTextOverflow_df64cf87',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_df64cf87{-ms-flex-negative:1;flex-shrink:1;background:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";margin:1px;height:26px;line-height:26px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;min-width:100px;max-width:100%}.root_df64cf87::-moz-focus-inner{border:0}.root_df64cf87{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_df64cf87:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.root_df64cf87:hover{background:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": "}.root_df64cf87.isSelected_df64cf87{background:" }, { "theme": "neutralQuaternary", "defaultValue": "#d0d0d0" }, { "rawString": "}.root_df64cf87.isSelected_df64cf87:hover{background:" }, { "theme": "neutralQuaternaryAlt", "defaultValue": "#dadada" }, { "rawString": "}.tagItemText_df64cf87{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:100px;margin:0 8px}.tagItemClose_df64cf87{cursor:pointer;color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";font-size:12px;display:inline-block;text-align:center;vertical-align:top;width:30px;height:100%;-ms-flex-negative:0;flex-shrink:0}.tagItemButton_df64cf87{width:100%;height:100%}.tagItemTextOverflow_df64cf87{overflow:hidden;text-overflow:ellipsis;max-width:60vw}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 334 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(335));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 335 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(336));
|
||
|
|
var PivotItem_1 = __webpack_require__(337);
|
||
|
|
exports.PivotItem = PivotItem_1.PivotItem;
|
||
|
|
__export(__webpack_require__(338));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 336 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var FocusZone_1 = __webpack_require__(50);
|
||
|
|
var PivotItem_1 = __webpack_require__(337);
|
||
|
|
var Pivot_Props_1 = __webpack_require__(338);
|
||
|
|
var Pivot_Props_2 = __webpack_require__(338);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(339);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Pivot = (function (_super) {
|
||
|
|
__extends(Pivot, _super);
|
||
|
|
function Pivot(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._pivotId = Utilities_1.getId('Pivot');
|
||
|
|
var links = _this._getPivotLinks(_this.props);
|
||
|
|
var selectedKey;
|
||
|
|
if (props.initialSelectedKey) {
|
||
|
|
selectedKey = props.initialSelectedKey;
|
||
|
|
}
|
||
|
|
else if (props.initialSelectedIndex) {
|
||
|
|
selectedKey = links[props.initialSelectedIndex].itemKey;
|
||
|
|
}
|
||
|
|
else if (props.selectedKey) {
|
||
|
|
selectedKey = props.selectedKey;
|
||
|
|
}
|
||
|
|
else if (links.length) {
|
||
|
|
selectedKey = links[0].itemKey;
|
||
|
|
}
|
||
|
|
_this.state = {
|
||
|
|
links: links,
|
||
|
|
selectedKey: selectedKey,
|
||
|
|
selectedTabId: _this._keyToTabIds[selectedKey],
|
||
|
|
};
|
||
|
|
_this._renderLink = _this._renderLink.bind(_this);
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Pivot.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
var _this = this;
|
||
|
|
var links = this._getPivotLinks(nextProps);
|
||
|
|
this.setState(function (prevState, props) {
|
||
|
|
var selectedKey;
|
||
|
|
if (_this._isKeyValid(nextProps.selectedKey)) {
|
||
|
|
selectedKey = nextProps.selectedKey;
|
||
|
|
}
|
||
|
|
else if (_this._isKeyValid(prevState.selectedKey)) {
|
||
|
|
selectedKey = prevState.selectedKey;
|
||
|
|
}
|
||
|
|
else if (links.length) {
|
||
|
|
selectedKey = links[0].itemKey;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
links: links,
|
||
|
|
selectedKey: selectedKey,
|
||
|
|
selectedTabId: _this._keyToTabIds[selectedKey],
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Pivot.prototype.render = function () {
|
||
|
|
return (React.createElement("div", null,
|
||
|
|
this._renderPivotLinks(),
|
||
|
|
this._renderPivotItem()));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Renders the set of links to route between pivots
|
||
|
|
*/
|
||
|
|
Pivot.prototype._renderPivotLinks = function () {
|
||
|
|
return (React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
|
||
|
|
React.createElement("ul", { className: Utilities_1.css('ms-Pivot', styles.root, (_a = {}, _a['ms-Pivot--large ' + styles.rootIsLarge] = this.props.linkSize === Pivot_Props_2.PivotLinkSize.large, _a), (_b = {}, _b['ms-Pivot--tabs ' + styles.rootIsTabs] = this.props.linkFormat === Pivot_Props_1.PivotLinkFormat.tabs, _b)), role: 'tablist' }, this.state.links.map(this._renderLink))));
|
||
|
|
var _a, _b;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Renders a pivot link
|
||
|
|
*/
|
||
|
|
Pivot.prototype._renderLink = function (link) {
|
||
|
|
var itemKey = link.itemKey;
|
||
|
|
var tabId = this._keyToTabIds[itemKey];
|
||
|
|
var onRenderItemLink = link.onRenderItemLink;
|
||
|
|
var linkContent;
|
||
|
|
if (onRenderItemLink) {
|
||
|
|
linkContent = onRenderItemLink(link, this._renderLinkContent);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
linkContent = this._renderLinkContent(link);
|
||
|
|
}
|
||
|
|
return (React.createElement(Button_1.CommandButton, { id: tabId, key: itemKey, className: Utilities_1.css('ms-Pivot-link', styles.link, (_a = {},
|
||
|
|
_a['is-selected ' + styles.linkIsSelected] = this.state.selectedKey === itemKey,
|
||
|
|
_a)), onClick: this._onLinkClick.bind(this, itemKey), onKeyPress: this._onKeyPress.bind(this, itemKey), ariaLabel: link.ariaLabel, role: 'tab', "aria-selected": this.state.selectedKey === itemKey }, linkContent));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Pivot.prototype._renderLinkContent = function (link) {
|
||
|
|
var itemCount = link.itemCount, itemIcon = link.itemIcon, linkText = link.linkText;
|
||
|
|
return React.createElement("span", { className: Utilities_1.css('ms-Pivot-link-content') },
|
||
|
|
itemIcon !== undefined && (React.createElement("span", { className: Utilities_1.css('ms-Pivot-icon', styles.icon) },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: itemIcon }))),
|
||
|
|
linkText !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-text', styles.text) },
|
||
|
|
" ",
|
||
|
|
link.linkText),
|
||
|
|
itemCount !== undefined && React.createElement("span", { className: Utilities_1.css('ms-Pivot-count', styles.count) },
|
||
|
|
" (",
|
||
|
|
itemCount,
|
||
|
|
")"));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Renders the current Pivot Item
|
||
|
|
*/
|
||
|
|
Pivot.prototype._renderPivotItem = function () {
|
||
|
|
if (this.props.headersOnly) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
var itemKey = this.state.selectedKey;
|
||
|
|
var index = this._keyToIndexMapping[itemKey];
|
||
|
|
var selectedTabId = this.state.selectedTabId;
|
||
|
|
return (React.createElement("div", { role: 'tabpanel', "aria-labelledby": selectedTabId }, React.Children.toArray(this.props.children)[index]));
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Gets the set of PivotLinks as arrary of IPivotItemProps
|
||
|
|
* The set of Links is determined by child components of type PivotItem
|
||
|
|
*/
|
||
|
|
Pivot.prototype._getPivotLinks = function (props) {
|
||
|
|
var _this = this;
|
||
|
|
var links = [];
|
||
|
|
this._keyToIndexMapping = {};
|
||
|
|
this._keyToTabIds = {};
|
||
|
|
React.Children.map(props.children, function (child, index) {
|
||
|
|
if (typeof child === 'object' && child.type === PivotItem_1.PivotItem) {
|
||
|
|
var pivotItem = child;
|
||
|
|
var itemKey = pivotItem.props.itemKey || index.toString();
|
||
|
|
links.push({
|
||
|
|
linkText: pivotItem.props.linkText,
|
||
|
|
ariaLabel: pivotItem.props.ariaLabel,
|
||
|
|
itemKey: itemKey,
|
||
|
|
itemCount: pivotItem.props.itemCount,
|
||
|
|
itemIcon: pivotItem.props.itemIcon,
|
||
|
|
onRenderItemLink: pivotItem.props.onRenderItemLink
|
||
|
|
});
|
||
|
|
_this._keyToIndexMapping[itemKey] = index;
|
||
|
|
_this._keyToTabIds[itemKey] = _this.getTabId(itemKey, index);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return links;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Generates the Id for the tab button.
|
||
|
|
*/
|
||
|
|
Pivot.prototype.getTabId = function (itemKey, index) {
|
||
|
|
if (this.props.getTabId) {
|
||
|
|
return this.props.getTabId(itemKey, index);
|
||
|
|
}
|
||
|
|
return this._pivotId + ("-Tab" + index);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* whether the key exists in the pivot items.
|
||
|
|
*/
|
||
|
|
Pivot.prototype._isKeyValid = function (itemKey) {
|
||
|
|
return itemKey !== undefined && this._keyToIndexMapping[itemKey] !== undefined;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Handles the onClick event on PivotLinks
|
||
|
|
*/
|
||
|
|
Pivot.prototype._onLinkClick = function (itemKey, ev) {
|
||
|
|
ev.preventDefault();
|
||
|
|
this._updateSelectedItem(itemKey, ev);
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Handle the onKeyPress eventon the PivotLinks
|
||
|
|
*/
|
||
|
|
Pivot.prototype._onKeyPress = function (itemKey, ev) {
|
||
|
|
ev.preventDefault();
|
||
|
|
if (ev.which === Utilities_1.KeyCodes.enter) {
|
||
|
|
this._updateSelectedItem(itemKey);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Updates the state with the new selected index
|
||
|
|
*/
|
||
|
|
Pivot.prototype._updateSelectedItem = function (itemKey, ev) {
|
||
|
|
this.setState({
|
||
|
|
selectedKey: itemKey,
|
||
|
|
selectedTabId: this._keyToTabIds[itemKey]
|
||
|
|
});
|
||
|
|
if (this.props.onLinkClick && this._keyToIndexMapping[itemKey] >= 0) {
|
||
|
|
var index = this._keyToIndexMapping[itemKey];
|
||
|
|
// React.Element<any> cannot directly convert to PivotItem.
|
||
|
|
var item = React.Children.toArray(this.props.children)[index];
|
||
|
|
if (typeof item === 'object' && item.type === PivotItem_1.PivotItem) {
|
||
|
|
this.props.onLinkClick(item, ev);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Pivot;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Pivot.prototype, "_renderLink", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Pivot.prototype, "_renderLinkContent", null);
|
||
|
|
exports.Pivot = Pivot;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 337 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var PivotItem = (function (_super) {
|
||
|
|
__extends(PivotItem, _super);
|
||
|
|
function PivotItem() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
PivotItem.prototype.render = function () {
|
||
|
|
return (React.createElement("div", __assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)), this.props.children));
|
||
|
|
};
|
||
|
|
return PivotItem;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
exports.PivotItem = PivotItem;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 338 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var PivotLinkFormat;
|
||
|
|
(function (PivotLinkFormat) {
|
||
|
|
/**
|
||
|
|
* Display Pivot Links as links
|
||
|
|
*/
|
||
|
|
PivotLinkFormat[PivotLinkFormat["links"] = 0] = "links";
|
||
|
|
/**
|
||
|
|
* Display Pivot Links as Tabs
|
||
|
|
*/
|
||
|
|
PivotLinkFormat[PivotLinkFormat["tabs"] = 1] = "tabs";
|
||
|
|
})(PivotLinkFormat = exports.PivotLinkFormat || (exports.PivotLinkFormat = {}));
|
||
|
|
var PivotLinkSize;
|
||
|
|
(function (PivotLinkSize) {
|
||
|
|
/**
|
||
|
|
* Display Link using normal font size
|
||
|
|
*/
|
||
|
|
PivotLinkSize[PivotLinkSize["normal"] = 0] = "normal";
|
||
|
|
/**
|
||
|
|
* Display links using large font size
|
||
|
|
*/
|
||
|
|
PivotLinkSize[PivotLinkSize["large"] = 1] = "large";
|
||
|
|
})(PivotLinkSize = exports.PivotLinkSize || (exports.PivotLinkSize = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 339 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_ca2b42d3',
|
||
|
|
links: 'links_ca2b42d3',
|
||
|
|
link: 'link_ca2b42d3',
|
||
|
|
text: 'text_ca2b42d3',
|
||
|
|
count: 'count_ca2b42d3',
|
||
|
|
icon: 'icon_ca2b42d3',
|
||
|
|
linkIsSelected: 'linkIsSelected_ca2b42d3',
|
||
|
|
linkIsDisabled: 'linkIsDisabled_ca2b42d3',
|
||
|
|
linkIsOverflow: 'linkIsOverflow_ca2b42d3',
|
||
|
|
ellipsis: 'ellipsis_ca2b42d3',
|
||
|
|
rootIsLarge: 'rootIsLarge_ca2b42d3',
|
||
|
|
rootIsTabs: 'rootIsTabs_ca2b42d3',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_ca2b42d3{box-sizing:border-box;box-shadow:none;margin:0;padding:0;font-size:14px;font-weight:400;position:relative;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";white-space:nowrap}.links_ca2b42d3{font-size:0;height:40px;list-style-type:none;padding:0;white-space:nowrap}.root_ca2b42d3 .link_ca2b42d3{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:inline-block;font-size:14px;font-weight:400;line-height:40px;padding:0 8px;text-align:center;position:relative;background-color:transparent;border:0}[dir=ltr] .root_ca2b42d3 .link_ca2b42d3{margin-right:8px}[dir=rtl] .root_ca2b42d3 .link_ca2b42d3{margin-left:8px}.root_ca2b42d3 .link_ca2b42d3:hover{cursor:pointer}.root_ca2b42d3 .link_ca2b42d3:focus{outline:0}.root_ca2b42d3 .link_ca2b42d3::before{background-color:transparent;bottom:0;content:'';height:2px;left:8px;position:absolute;right:8px;transition:background-color 267ms cubic-bezier(.1,.25,.75,.9)}.root_ca2b42d3 .link_ca2b42d3::after{color:transparent;content:attr(title);display:block;font-weight:700;height:1px;overflow:hidden;visibility:hidden}.root_ca2b42d3 .link_ca2b42d3 .count_ca2b42d3,.root_ca2b42d3 .link_ca2b42d3 .text_ca2b42d3{display:inline-block;vertical-align:top}html[dir=ltr] .root_ca2b42d3 .link_ca2b42d3 .icon_ca2b42d3+.text_ca2b42d3{margin-left:4px}html[dir=rtl] .root_ca2b42d3 .link_ca2b42d3 .icon_ca2b42d3+.text_ca2b42d3{margin-right:4px}html[dir=ltr] .root_ca2b42d3 .link_ca2b42d3 .count_ca2b42d3{margin-left:4px}html[dir=rtl] .root_ca2b42d3 .link_ca2b42d3 .count_ca2b42d3{margin-right:4px}.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3{font-weight:600}.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_ca2b42d3 .link_ca2b42d3.linkIsSelected_ca2b42d3::before{background-color:transparent;border-bottom:2px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.root_ca2b42d3 .link_ca2b42d3.linkIsDisabled_ca2b42d3{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.ms-Fabric.is-focusVisible .link_ca2b42d3:focus{outline:1px solid " }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3{color:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3.linkIsSelected_ca2b42d3{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3:focus:not(.linkIsSelected_ca2b42d3),.link_ca2b42d3.linkIsOverflow_ca2b42d3:hover:not(.linkIsSelected_ca2b42d3){color:" }, { "theme": "neutralDark", "defaultValue": "#212121" }, { "rawString": "}.link_ca2b42d3.linkIsOverflow_ca2b42d3:active{color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.ellipsis_ca2b42d3{font-size:15px;position:relative;top:0}.root_ca2b42d3.rootIsLarge_ca2b42d3 .link_ca2b42d3{font-size:17px}.root_ca2b42d3.rootIsLarge_ca2b42d3 .link_ca2b42d3.linkIsOverflow_ca2b42d3::after{font-size:17px}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3{height:40px;line-height:40px;background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";padding:0 10px;vertical-align:top}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3::-moz-focus-inner{border:0}.root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .root_ca2b42d3.rootIsTabs_ca2b42d3 .link_ca2b42d3:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSec
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 340 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(341));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 341 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(342));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 342 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var stylesImport = __webpack_require__(343);
|
||
|
|
var styles = stylesImport;
|
||
|
|
// if the percentComplete is near 0, don't animate it.
|
||
|
|
// This prevents animations on reset to 0 scenarios
|
||
|
|
var ZERO_THRESHOLD = 0.01;
|
||
|
|
var ProgressIndicator = (function (_super) {
|
||
|
|
__extends(ProgressIndicator, _super);
|
||
|
|
function ProgressIndicator(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnDeprecations({
|
||
|
|
title: 'label'
|
||
|
|
});
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ProgressIndicator.prototype.render = function () {
|
||
|
|
var _a = this.props, title = _a.title, label = _a.label, description = _a.description, percentComplete = _a.percentComplete, className = _a.className, ariaValueText = _a.ariaValueText;
|
||
|
|
// Handle deprecated value.
|
||
|
|
if (title) {
|
||
|
|
label = title;
|
||
|
|
}
|
||
|
|
percentComplete = Math.min(100, Math.max(0, percentComplete * 100));
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator', styles.root, className) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemName', styles.itemName) }, label),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemProgress', styles.itemProgress) },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressTrack', styles.progressTrack) }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-progressBar', styles.progressBar, {
|
||
|
|
'smoothTransition': percentComplete > ZERO_THRESHOLD
|
||
|
|
}), style: { width: percentComplete + '%' }, role: 'progressbar', "aria-valuemin": '0', "aria-valuemax": '100', "aria-valuenow": percentComplete.toFixed().toString(), "aria-valuetext": ariaValueText })),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-ProgressIndicator-itemDescription', styles.itemDescription) }, description)));
|
||
|
|
};
|
||
|
|
return ProgressIndicator;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
ProgressIndicator.defaultProps = {
|
||
|
|
label: '',
|
||
|
|
description: '',
|
||
|
|
percentComplete: 0,
|
||
|
|
width: 180
|
||
|
|
};
|
||
|
|
exports.ProgressIndicator = ProgressIndicator;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 343 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_40e2def2',
|
||
|
|
itemName: 'itemName_40e2def2',
|
||
|
|
itemDescription: 'itemDescription_40e2def2',
|
||
|
|
itemProgress: 'itemProgress_40e2def2',
|
||
|
|
progressTrack: 'progressTrack_40e2def2',
|
||
|
|
progressBar: 'progressBar_40e2def2',
|
||
|
|
smoothTransition: 'smoothTransition_40e2def2',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_40e2def2{font-weight:400}.itemName_40e2def2{color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";font-size:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-top:4px;line-height:20px}.itemDescription_40e2def2{color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:11px;line-height:18px}.itemProgress_40e2def2{position:relative;height:2px;padding:8px 0}.progressTrack_40e2def2{position:absolute;width:100%;height:2px;background-color:" }, { "theme": "neutralLight", "defaultValue": "#eaeaea" }, { "rawString": ";outline:1px solid transparent}.progressBar_40e2def2{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";height:2px;position:absolute;transition:width .3s ease;width:0}@media screen and (-ms-high-contrast:active){.progressBar_40e2def2{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.progressBar_40e2def2{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.smoothTransition_40e2def2{transition-property:width;transition-timing-function:linear;transition-duration:150ms}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 344 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(345));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 345 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(346));
|
||
|
|
__export(__webpack_require__(347));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 346 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 function (d, b) {
|
||
|
|
extendStatics(d, b);
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
})();
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var Rating_Props_1 = __webpack_require__(347);
|
||
|
|
var stylesImport = __webpack_require__(348);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Rating = (function (_super) {
|
||
|
|
__extends(Rating, _super);
|
||
|
|
function Rating(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
rating: _this._getInitialValue(props),
|
||
|
|
focusedRating: null
|
||
|
|
};
|
||
|
|
_this._id = Utilities_1.getId('Rating');
|
||
|
|
_this._labelId = Utilities_1.getId('RatingLabel');
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Rating.prototype.componentWillReceiveProps = function (nextProps) {
|
||
|
|
if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
|
||
|
|
this.setState({
|
||
|
|
rating: this._getClampedRating(nextProps.rating)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Rating.prototype.render = function () {
|
||
|
|
var stars = [];
|
||
|
|
for (var i = this.props.min; i <= this.props.max; ++i) {
|
||
|
|
stars.push(this._renderStar(i));
|
||
|
|
}
|
||
|
|
return React.createElement("div", { className: Utilities_1.css('ms-Rating', this.props.className, (_a = {},
|
||
|
|
_a['ms-Rating--large ' + styles.rootIsLarge] = this.props.size === Rating_Props_1.RatingSize.Large,
|
||
|
|
_a)), role: 'application' },
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Rating-container', styles.container), role: 'radiogroup', "aria-labelledby": this.props.ariaLabelId }, stars));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Rating.prototype._renderStar = function (rating) {
|
||
|
|
var inputId = this._id + "-" + rating;
|
||
|
|
return React.createElement("div", { className: Utilities_1.css('ms-Rating-star', styles.star, (_a = {},
|
||
|
|
_a['is-selected ' + styles.starIsSelected] = rating <= this.state.rating,
|
||
|
|
_a['is-inFocus ' + styles.starIsInFocus] = rating === this.state.focusedRating,
|
||
|
|
_a['is-disabled ' + styles.starIsDisabled] = this.props.disabled,
|
||
|
|
_a)), key: rating },
|
||
|
|
React.createElement("input", { className: Utilities_1.css('ms-Rating-input', styles.input), type: 'radio', name: this._id, id: inputId, value: rating, "aria-labelledby": this._labelId + "-" + rating, disabled: this.props.disabled, checked: rating === this.state.rating, onChange: this._onChange.bind(this, rating), onFocus: this._onFocus.bind(this, rating), onBlur: this._onBlur.bind(this, rating) }),
|
||
|
|
React.createElement("label", { className: Utilities_1.css('ms-Rating-label', styles.label), htmlFor: inputId },
|
||
|
|
this._getLabel(rating),
|
||
|
|
this._getIcon()));
|
||
|
|
var _a;
|
||
|
|
};
|
||
|
|
Rating.prototype._onFocus = function (value, ev) {
|
||
|
|
this.setState({
|
||
|
|
focusedRating: value
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Rating.prototype._onBlur = function (option, ev) {
|
||
|
|
this.setState({
|
||
|
|
focusedRating: null
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Rating.prototype._onChange = function (rating, evt) {
|
||
|
|
this.setState({
|
||
|
|
rating: rating
|
||
|
|
});
|
||
|
|
var onChanged = this.props.onChanged;
|
||
|
|
if (onChanged) {
|
||
|
|
onChanged(rating);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Rating.prototype._getLabel = function (rating) {
|
||
|
|
var text = this.props.ariaLabelIcon || 'Star';
|
||
|
|
return (React.createElement("span", { id: this._labelId + "-" + rating, className: Utilities_1.css('ms-Rating-labelText', styles.labelText) }, rating + " " + text));
|
||
|
|
};
|
||
|
|
Rating.prototype._getIcon = function () {
|
||
|
|
return React.createElement(Icon_1.Icon, { iconName: this.props.icon || 'favoriteStarFill' });
|
||
|
|
};
|
||
|
|
Rating.prototype._getInitialValue = function (props) {
|
||
|
|
if (typeof props.rating === 'undefined') {
|
||
|
|
return props.min;
|
||
|
|
}
|
||
|
|
if (props.rating === null) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return this._getClampedRating(props.rating);
|
||
|
|
};
|
||
|
|
Rating.prototype._getClampedRating = function (rating) {
|
||
|
|
rating = Math.floor(rating);
|
||
|
|
return Math.min(Math.max(rating, this.props.min), this.props.max);
|
||
|
|
};
|
||
|
|
return Rating;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Rating.defaultProps = {
|
||
|
|
min: 1,
|
||
|
|
max: 5
|
||
|
|
};
|
||
|
|
exports.Rating = Rating;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 347 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var RatingSize;
|
||
|
|
(function (RatingSize) {
|
||
|
|
RatingSize[RatingSize["Small"] = 0] = "Small";
|
||
|
|
RatingSize[RatingSize["Large"] = 1] = "Large";
|
||
|
|
})(RatingSize = exports.RatingSize || (exports.RatingSize = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 348 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
input: 'input_19b01ffa',
|
||
|
|
container: 'container_19b01ffa',
|
||
|
|
star: 'star_19b01ffa',
|
||
|
|
starIsDisabled: 'starIsDisabled_19b01ffa',
|
||
|
|
starIsSelected: 'starIsSelected_19b01ffa',
|
||
|
|
label: 'label_19b01ffa',
|
||
|
|
rootIsLarge: 'rootIsLarge_19b01ffa',
|
||
|
|
labelText: 'labelText_19b01ffa',
|
||
|
|
starIsInFocus: 'starIsInFocus_19b01ffa',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".input_19b01ffa{position:absolute;opacity:0;top:0}.container_19b01ffa{position:relative;display:inline-block}.container_19b01ffa:hover .star_19b01ffa:not(.starIsDisabled_19b01ffa){color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_19b01ffa:hover .star_19b01ffa:not(.starIsDisabled_19b01ffa).star_19b01ffa:hover{color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": "}.container_19b01ffa:hover .star_19b01ffa:not(.starIsDisabled_19b01ffa).star_19b01ffa:hover~.star_19b01ffa{color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_19b01ffa .star_19b01ffa{display:inline-block;text-align:center;color:" }, { "theme": "neutralTertiary", "defaultValue": "#a6a6a6" }, { "rawString": "}.container_19b01ffa .star_19b01ffa.starIsSelected_19b01ffa{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.container_19b01ffa .star_19b01ffa.starIsDisabled_19b01ffa{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.container_19b01ffa .star_19b01ffa.starIsDisabled_19b01ffa .label_19b01ffa{cursor:default}.container_19b01ffa .star_19b01ffa .label_19b01ffa{display:inline-block;cursor:pointer;font-size:16px;padding:12px 0;border:1px solid transparent}.rootIsLarge_19b01ffa .container_19b01ffa .label_19b01ffa{font-size:20px;padding:6px 2px 9px 2px}.labelText_19b01ffa{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-Fabric.is-focusVisible .starIsInFocus_19b01ffa .label_19b01ffa{border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 349 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(350));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 350 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(351));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 351 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Icon_1 = __webpack_require__(141);
|
||
|
|
var stylesImport = __webpack_require__(352);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var SearchBox = (function (_super) {
|
||
|
|
__extends(SearchBox, _super);
|
||
|
|
function SearchBox(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
value: props.value || '',
|
||
|
|
hasFocus: false,
|
||
|
|
id: Utilities_1.getId('SearchBox')
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
SearchBox.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.value !== undefined) {
|
||
|
|
this._latestValue = newProps.value;
|
||
|
|
this.setState({
|
||
|
|
value: newProps.value
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SearchBox.prototype.render = function () {
|
||
|
|
var _a = this.props, labelText = _a.labelText, className = _a.className;
|
||
|
|
var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
|
||
|
|
return (React.createElement("div", __assign({ ref: this._resolveRef('_rootElement'), className: Utilities_1.css('ms-SearchBox', className, styles.root, (_c = {},
|
||
|
|
_c['is-active ' + styles.rootIsActive] = hasFocus,
|
||
|
|
_c['can-clear ' + styles.rootCanClear] = value.length > 0,
|
||
|
|
_c)) }, { onFocusCapture: this._onFocusCapture }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-SearchBox-iconContainer', styles.iconContainer) },
|
||
|
|
React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-SearchBox-icon', styles.icon), iconName: 'Search' })),
|
||
|
|
React.createElement("input", { id: id, className: Utilities_1.css('ms-SearchBox-field', styles.field), placeholder: labelText, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, "aria-label": this.props.ariaLabel ? this.props.ariaLabel : this.props.labelText, ref: this._resolveRef('_inputElement') }),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-SearchBox-clearButton', styles.clearButton), onClick: this._onClearClick },
|
||
|
|
React.createElement(Icon_1.Icon, { iconName: 'Clear' }))));
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Sets focus to the search box input field
|
||
|
|
*/
|
||
|
|
SearchBox.prototype.focus = function () {
|
||
|
|
if (this._inputElement) {
|
||
|
|
this._inputElement.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SearchBox.prototype._onClearClick = function (ev) {
|
||
|
|
this.setState({
|
||
|
|
value: ''
|
||
|
|
});
|
||
|
|
this._callOnChange('');
|
||
|
|
ev.stopPropagation();
|
||
|
|
ev.preventDefault();
|
||
|
|
this._inputElement.focus();
|
||
|
|
};
|
||
|
|
SearchBox.prototype._onFocusCapture = function (ev) {
|
||
|
|
this.setState({
|
||
|
|
hasFocus: true
|
||
|
|
});
|
||
|
|
this._events.on(this._rootElement, 'blur', this._onBlur, true);
|
||
|
|
};
|
||
|
|
SearchBox.prototype._onKeyDown = function (ev) {
|
||
|
|
switch (ev.which) {
|
||
|
|
case Utilities_1.KeyCodes.escape:
|
||
|
|
this._onClearClick(ev);
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.enter:
|
||
|
|
if (this.props.onSearch && this.state.value.length > 0) {
|
||
|
|
this.props.onSearch(this.state.value);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// We only get here if the keypress has been handled.
|
||
|
|
ev.preventDefault();
|
||
|
|
ev.stopPropagation();
|
||
|
|
};
|
||
|
|
SearchBox.prototype._onBlur = function (ev) {
|
||
|
|
this._events.off(this._rootElement, 'blur');
|
||
|
|
this.setState({
|
||
|
|
hasFocus: false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
SearchBox.prototype._onInputChange = function (ev) {
|
||
|
|
var value = this._inputElement.value;
|
||
|
|
if (value === this._latestValue) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._latestValue = value;
|
||
|
|
this.setState({ value: value });
|
||
|
|
this._callOnChange(value);
|
||
|
|
};
|
||
|
|
SearchBox.prototype._callOnChange = function (newValue) {
|
||
|
|
var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
|
||
|
|
// Call @deprecated method.
|
||
|
|
if (onChanged) {
|
||
|
|
onChanged(newValue);
|
||
|
|
}
|
||
|
|
if (onChange) {
|
||
|
|
onChange(newValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return SearchBox;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
SearchBox.defaultProps = {
|
||
|
|
labelText: 'Search',
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SearchBox.prototype, "_onClearClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SearchBox.prototype, "_onFocusCapture", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SearchBox.prototype, "_onKeyDown", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SearchBox.prototype, "_onBlur", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], SearchBox.prototype, "_onInputChange", null);
|
||
|
|
exports.SearchBox = SearchBox;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 352 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_ec2202a4',
|
||
|
|
iconContainer: 'iconContainer_ec2202a4',
|
||
|
|
icon: 'icon_ec2202a4',
|
||
|
|
field: 'field_ec2202a4',
|
||
|
|
clearButton: 'clearButton_ec2202a4',
|
||
|
|
label: 'label_ec2202a4',
|
||
|
|
rootIsActive: 'rootIsActive_ec2202a4',
|
||
|
|
rootIsDisabled: 'rootIsDisabled_ec2202a4',
|
||
|
|
rootCanClear: 'rootCanClear_ec2202a4',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_ec2202a4{font-size:14px;font-weight:400;box-sizing:border-box;box-shadow:none;margin:0;padding:0;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;margin-bottom:10px;padding:0 0 0 8px;border:1px solid " }, { "theme": "themeTertiary", "defaultValue": "#71afe5" }, { "rawString": ";height:32px}html[dir=rtl] .root_ec2202a4{padding:0 8px 0 0}@media screen and (-ms-high-contrast:active){.root_ec2202a4{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.root_ec2202a4{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.iconContainer_ec2202a4{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "neutralSecondaryAlt", "defaultValue": "#767676" }, { "rawString": ";font-size:16px;width:32px;text-align:center;transition:width 167ms;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.icon_ec2202a4{opacity:1;transition:opacity 167ms 0s}.field_ec2202a4{box-sizing:border-box;box-shadow:none;margin:0;padding:0;border:none;outline:0;font-weight:inherit;font-family:inherit;font-size:inherit;color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": ";background-color:transparent;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0px;overflow:hidden;text-overflow:ellipsis;padding-bottom:.5px}.field_ec2202a4::-ms-clear{display:none}.clearButton_ec2202a4{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none;cursor:pointer;text-align:center;font-size:12px;-ms-flex-preferred-size:32px;flex-basis:32px;-ms-flex-negative:0;flex-shrink:0;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_ec2202a4:hover{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.root_ec2202a4:hover .label_ec2202a4{color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}.root_ec2202a4:hover .label_ec2202a4 .iconContainer_ec2202a4{color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_ec2202a4{border-color:" }, { "theme": "themeDarker", "defaultValue": "#004578" }, { "rawString": "}.rootIsActive_ec2202a4 .iconContainer_ec2202a4{width:4px;transition:width 167ms}.rootIsActive_ec2202a4 .icon_ec2202a4{opacity:0;opacity:0 0s 167ms}.rootIsDisabled_ec2202a4{border-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": "}.rootIsDisabled_ec2202a4 .iconContainer_ec2202a4{color:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}.rootIsDisabled_ec2202a4 .field_ec2202a4{background-color:" }, { "theme": "neutralLighter", "defaultValue": "#f4f4f4" }, { "rawString": ";pointer-events:none;cursor:default}.rootCanClear_ec2202a4 .clearButton_ec2202a4{display:-webkit-box;display:-ms-flexbox;display:flex}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 353 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(354));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 354 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(355));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 355 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Label_1 = __webpack_require__(189);
|
||
|
|
var stylesImport = __webpack_require__(356);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var ValuePosition;
|
||
|
|
(function (ValuePosition) {
|
||
|
|
ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
|
||
|
|
ValuePosition[ValuePosition["Next"] = 1] = "Next";
|
||
|
|
})(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {}));
|
||
|
|
var Slider = (function (_super) {
|
||
|
|
__extends(Slider, _super);
|
||
|
|
function Slider(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._warnMutuallyExclusive({
|
||
|
|
'value': 'defaultValue'
|
||
|
|
});
|
||
|
|
_this._id = Utilities_1.getId('Slider');
|
||
|
|
var value = props.value || props.defaultValue || props.min;
|
||
|
|
_this.state = {
|
||
|
|
value: value,
|
||
|
|
renderedValue: value
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Invoked when a component is receiving new props. This method is not called for the initial render.
|
||
|
|
*/
|
||
|
|
Slider.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.value !== undefined) {
|
||
|
|
var value = Math.max(newProps.min, Math.min(newProps.max, newProps.value));
|
||
|
|
this.setState({
|
||
|
|
value: value,
|
||
|
|
renderedValue: value
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Slider.prototype.render = function () {
|
||
|
|
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, disabled = _a.disabled, label = _a.label, max = _a.max, min = _a.min, showValue = _a.showValue, buttonProps = _a.buttonProps;
|
||
|
|
var _b = this.state, value = _b.value, renderedValue = _b.renderedValue;
|
||
|
|
var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100;
|
||
|
|
var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
|
||
|
|
var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
|
||
|
|
var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown };
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-Slider', styles.root, className, (_c = {},
|
||
|
|
_c['ms-Slider-enabled ' + styles.rootIsEnabled] = !disabled,
|
||
|
|
_c['ms-Slider-disabled ' + styles.rootIsDisabled] = disabled,
|
||
|
|
_c)), ref: 'root' },
|
||
|
|
label && (React.createElement(Label_1.Label, __assign({ className: styles.titleLabel }, ariaLabel ? {} : { 'htmlFor': this._id }), label)),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Slider-container', styles.container) },
|
||
|
|
React.createElement("button", __assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, (_d = {
|
||
|
|
'ms-Slider-showValue': showValue
|
||
|
|
},
|
||
|
|
_d['ms-Slider-showTransitions ' + styles.showTransitions] = (renderedValue === value),
|
||
|
|
_d)), id: this._id, disabled: disabled, type: 'button', role: 'slider' }),
|
||
|
|
React.createElement("div", { ref: 'sliderLine', className: Utilities_1.css('ms-Slider-line', styles.line) },
|
||
|
|
React.createElement("span", __assign({ ref: 'thumb', className: Utilities_1.css('ms-Slider-thumb', styles.thumb) }, ariaLabel ? { 'aria-label': ariaLabel } : {}, { style: Utilities_1.getRTL() ?
|
||
|
|
{ 'right': thumbOffsetPercent + '%' } :
|
||
|
|
{ 'left': thumbOffsetPercent + '%' } })),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-Slider-active', styles.activeSection), style: { 'width': thumbOffsetPercent + '%' } }),
|
||
|
|
React.createElement("span", { className: Utilities_1.css('ms-Slider-inactive', styles.inactiveSection), style: { 'width': (100 - thumbOffsetPercent) + '%' } }))),
|
||
|
|
showValue && React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Slider-value', styles.valueLabel) }, value))));
|
||
|
|
var _c, _d;
|
||
|
|
};
|
||
|
|
Slider.prototype.focus = function () {
|
||
|
|
if (this.refs.thumb) {
|
||
|
|
this.refs.thumb.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Object.defineProperty(Slider.prototype, "value", {
|
||
|
|
get: function () {
|
||
|
|
return this.state.value;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Slider.prototype._onMouseDownOrTouchStart = function (event) {
|
||
|
|
if (event.type === 'mousedown') {
|
||
|
|
this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true);
|
||
|
|
this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true);
|
||
|
|
}
|
||
|
|
else if (event.type === 'touchstart') {
|
||
|
|
this._events.on(window, 'touchmove', this._onMouseMoveOrTouchMove, true);
|
||
|
|
this._events.on(window, 'touchend', this._onMouseUpOrTouchEnd, true);
|
||
|
|
}
|
||
|
|
this._onMouseMoveOrTouchMove(event, true);
|
||
|
|
};
|
||
|
|
Slider.prototype._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
|
||
|
|
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
|
||
|
|
var steps = (max - min) / step;
|
||
|
|
var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect();
|
||
|
|
var sliderLength = sliderPositionRect.width;
|
||
|
|
var stepLength = sliderLength / steps;
|
||
|
|
var currentSteps;
|
||
|
|
if (event.type === 'mousedown' || event.type === 'mousemove') {
|
||
|
|
currentSteps = Utilities_1.getRTL() ?
|
||
|
|
(sliderPositionRect.right - event.clientX) / stepLength :
|
||
|
|
(event.clientX - sliderPositionRect.left) / stepLength;
|
||
|
|
}
|
||
|
|
else if (event.type === 'touchstart' || event.type === 'touchmove') {
|
||
|
|
currentSteps = Utilities_1.getRTL() ?
|
||
|
|
(sliderPositionRect.right - event.touches[0].clientX) / stepLength :
|
||
|
|
(event.touches[0].clientX - sliderPositionRect.left) / stepLength;
|
||
|
|
}
|
||
|
|
var currentValue;
|
||
|
|
var renderedValue;
|
||
|
|
// The value shouldn't be bigger than max or be smaller than min.
|
||
|
|
if (currentSteps > Math.floor(steps)) {
|
||
|
|
renderedValue = currentValue = max;
|
||
|
|
}
|
||
|
|
else if (currentSteps < 0) {
|
||
|
|
renderedValue = currentValue = min;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
renderedValue = min + step * currentSteps;
|
||
|
|
currentValue = min + step * Math.round(currentSteps);
|
||
|
|
}
|
||
|
|
this._updateValue(currentValue, renderedValue);
|
||
|
|
if (!suppressEventCancelation) {
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Slider.prototype._updateValue = function (value, renderedValue) {
|
||
|
|
var _this = this;
|
||
|
|
var valueChanged = value !== this.state.value;
|
||
|
|
this.setState({
|
||
|
|
value: value,
|
||
|
|
renderedValue: renderedValue
|
||
|
|
}, function () {
|
||
|
|
if (valueChanged && _this.props.onChange) {
|
||
|
|
_this.props.onChange(_this.state.value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
Slider.prototype._onMouseUpOrTouchEnd = function () {
|
||
|
|
// Synchronize the renderedValue to the actual value.
|
||
|
|
this.setState({
|
||
|
|
renderedValue: this.state.value
|
||
|
|
});
|
||
|
|
this._events.off();
|
||
|
|
};
|
||
|
|
Slider.prototype._onKeyDown = function (event) {
|
||
|
|
var value = this.state.value;
|
||
|
|
var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
|
||
|
|
var diff = 0;
|
||
|
|
switch (event.which) {
|
||
|
|
case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.left):
|
||
|
|
case Utilities_1.KeyCodes.down:
|
||
|
|
diff = -step;
|
||
|
|
break;
|
||
|
|
case Utilities_1.getRTLSafeKeyCode(Utilities_1.KeyCodes.right):
|
||
|
|
case Utilities_1.KeyCodes.up:
|
||
|
|
diff = step;
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.home:
|
||
|
|
value = min;
|
||
|
|
break;
|
||
|
|
case Utilities_1.KeyCodes.end:
|
||
|
|
value = max;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newValue = Math.min(max, Math.max(min, value + diff));
|
||
|
|
this._updateValue(newValue, newValue);
|
||
|
|
event.preventDefault();
|
||
|
|
event.stopPropagation();
|
||
|
|
};
|
||
|
|
return Slider;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
Slider.defaultProps = {
|
||
|
|
step: 1,
|
||
|
|
min: 0,
|
||
|
|
max: 10,
|
||
|
|
showValue: true,
|
||
|
|
disabled: false,
|
||
|
|
buttonProps: {}
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Slider.prototype, "_onMouseDownOrTouchStart", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Slider.prototype, "_onMouseMoveOrTouchMove", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Slider.prototype, "_onMouseUpOrTouchEnd", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Slider.prototype, "_onKeyDown", null);
|
||
|
|
exports.Slider = Slider;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 356 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_6b213d59',
|
||
|
|
titleLabel: 'titleLabel_6b213d59',
|
||
|
|
line: 'line_6b213d59',
|
||
|
|
activeSection: 'activeSection_6b213d59',
|
||
|
|
inactiveSection: 'inactiveSection_6b213d59',
|
||
|
|
showTransitions: 'showTransitions_6b213d59',
|
||
|
|
thumb: 'thumb_6b213d59',
|
||
|
|
slideBox: 'slideBox_6b213d59',
|
||
|
|
container: 'container_6b213d59',
|
||
|
|
valueLabel: 'valueLabel_6b213d59',
|
||
|
|
rootIsEnabled: 'rootIsEnabled_6b213d59',
|
||
|
|
rootIsDisabled: 'rootIsDisabled_6b213d59',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_6b213d59{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:8px}.titleLabel_6b213d59{padding:0}.line_6b213d59{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.line_6b213d59 span{height:4px;border-radius:4px;box-sizing:border-box}.activeSection_6b213d59{background:" }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.activeSection_6b213d59{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.activeSection_6b213d59{background-color:" }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.inactiveSection_6b213d59{background:" }, { "theme": "neutralTertiaryAlt", "defaultValue": "#c8c8c8" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.inactiveSection_6b213d59{border:1px solid " }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}}@media screen and (-ms-high-contrast:black-on-white){.inactiveSection_6b213d59{border:1px solid " }, { "theme": "black", "defaultValue": "#000000" }, { "rawString": "}}.showTransitions_6b213d59 .thumb_6b213d59{transition:left 367ms cubic-bezier(.1,.9,.2,1)}.showTransitions_6b213d59 .activeSection_6b213d59,.showTransitions_6b213d59 .inactiveSection_6b213d59{transition:width 367ms cubic-bezier(.1,.9,.2,1)}.slideBox_6b213d59{background:0 0;border:none;padding:0;margin:0}.slideBox_6b213d59 .thumb_6b213d59{border:2px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": ";box-sizing:border-box;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";display:block;width:16px;height:16px;position:absolute;top:-6px;border-radius:10px}html[dir=ltr] .slideBox_6b213d59 .thumb_6b213d59{-webkit-transform:translateX(-50%);transform:translateX(-50%)}html[dir=rtl] .slideBox_6b213d59 .thumb_6b213d59{-webkit-transform:translateX(50%);transform:translateX(50%)}.container_6b213d59{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.slideBox_6b213d59{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:28px;line-height:28px;padding:0 8px}.slideBox_6b213d59::-moz-focus-inner{border:0}.slideBox_6b213d59{outline:transparent;position:relative}.ms-Fabric.is-focusVisible .slideBox_6b213d59:focus:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid " }, { "theme": "neutralSecondary", "defaultValue": "#666666" }, { "rawString": "}.valueLabel_6b213d59{-ms-flex-negative:1;flex-shrink:1;width:30px;margin:0 8px;line-height:1}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .thumb_6b213d59{border:2px solid " }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .thumb_6b213d59{border-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .thumb_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .thumb_6b213d59{border-color:#37006e}}.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .activeSection_6b213d59{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}@media screen and (-ms-high-contrast:active){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .activeSection_6b213d59{background-color:#1aebff}}@media screen and (-ms-high-contrast:black-on-white){.rootIsEnabled_6b213d59 .slideBox_6b213d59:active .activeSection_6b213d59,.rootIsEnabled_6b213d59 .slideBox_6b213d59:hover .acti
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 357 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(358));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 358 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(359));
|
||
|
|
__export(__webpack_require__(360));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 359 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var TeachingBubbleContent_1 = __webpack_require__(360);
|
||
|
|
var Callout_1 = __webpack_require__(59);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var stylesImport = __webpack_require__(361);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var TeachingBubble = (function (_super) {
|
||
|
|
__extends(TeachingBubble, _super);
|
||
|
|
// Constructor
|
||
|
|
function TeachingBubble(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
TeachingBubble.prototype.render = function () {
|
||
|
|
var _a = this.props, calloutProps = _a.calloutProps, targetElement = _a.targetElement;
|
||
|
|
return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-TeachingBubble', styles.root), ref: this._resolveRef('_callout'), targetElement: targetElement }, calloutProps),
|
||
|
|
React.createElement(TeachingBubbleContent_1.TeachingBubbleContent, __assign({}, this.props))));
|
||
|
|
};
|
||
|
|
return TeachingBubble;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
// Specify default props values
|
||
|
|
TeachingBubble.defaultProps = {
|
||
|
|
calloutProps: {
|
||
|
|
beakWidth: 16,
|
||
|
|
gapSpace: 0,
|
||
|
|
setInitialFocus: true,
|
||
|
|
doNotLayer: false,
|
||
|
|
directionalHint: DirectionalHint_1.DirectionalHint.rightCenter
|
||
|
|
}
|
||
|
|
};
|
||
|
|
exports.TeachingBubble = TeachingBubble;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 360 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Button_1 = __webpack_require__(154);
|
||
|
|
var Image_1 = __webpack_require__(187);
|
||
|
|
var stylesImport = __webpack_require__(361);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var TeachingBubbleContent = (function (_super) {
|
||
|
|
__extends(TeachingBubbleContent, _super);
|
||
|
|
// Constructor
|
||
|
|
function TeachingBubbleContent(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this._id = Utilities_1.getId('TeachingBubble');
|
||
|
|
_this.state = {};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
TeachingBubbleContent.prototype.render = function () {
|
||
|
|
var _a = this.props, illustrationImage = _a.illustrationImage, primaryButtonProps = _a.primaryButtonProps, secondaryButtonProps = _a.secondaryButtonProps, headline = _a.headline, hasCondensedHeadline = _a.hasCondensedHeadline, hasCloseIcon = _a.hasCloseIcon, onDismiss = _a.onDismiss, closeButtonAriaLabel = _a.closeButtonAriaLabel;
|
||
|
|
var imageContent;
|
||
|
|
var headerContent;
|
||
|
|
var bodyContent;
|
||
|
|
var footerContent;
|
||
|
|
var closeButton;
|
||
|
|
if (illustrationImage && illustrationImage.src) {
|
||
|
|
imageContent = (React.createElement("div", { className: 'ms-TeachingBubble-header' },
|
||
|
|
React.createElement(Image_1.Image, __assign({}, illustrationImage))));
|
||
|
|
}
|
||
|
|
if (headline) {
|
||
|
|
headerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-header', hasCondensedHeadline ?
|
||
|
|
'ms-TeachingBubble-header--small ' + styles.headerIsSmall :
|
||
|
|
'ms-TeachingBubble-header--large ' + styles.headerIsLarge) },
|
||
|
|
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-headline', styles.headline) }, headline)));
|
||
|
|
}
|
||
|
|
if (this.props.children) {
|
||
|
|
bodyContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-body', styles.body) },
|
||
|
|
React.createElement("p", { className: Utilities_1.css('ms-TeachingBubble-subText', styles.subText) }, this.props.children)));
|
||
|
|
}
|
||
|
|
if (primaryButtonProps || secondaryButtonProps) {
|
||
|
|
footerContent = (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-footer', styles.footer) },
|
||
|
|
primaryButtonProps && (React.createElement(Button_1.PrimaryButton, __assign({}, primaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-primaryButton', styles.primaryButton, primaryButtonProps.className) }))),
|
||
|
|
secondaryButtonProps && (React.createElement(Button_1.DefaultButton, __assign({}, secondaryButtonProps, { className: Utilities_1.css('ms-TeachingBubble-secondaryButton', styles.secondaryButton, secondaryButtonProps.className) })))));
|
||
|
|
}
|
||
|
|
if (hasCloseIcon) {
|
||
|
|
closeButton = (React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-TeachingBubble-closebutton', styles.closeButton), iconProps: { iconName: 'Cancel' }, title: closeButtonAriaLabel, ariaLabel: closeButtonAriaLabel, onClick: onDismiss }));
|
||
|
|
}
|
||
|
|
return (React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-content') },
|
||
|
|
imageContent,
|
||
|
|
closeButton,
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-TeachingBubble-bodycontent', styles.bodyContent) },
|
||
|
|
headerContent,
|
||
|
|
bodyContent,
|
||
|
|
footerContent)));
|
||
|
|
};
|
||
|
|
return TeachingBubbleContent;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
// Specify default props values
|
||
|
|
TeachingBubbleContent.defaultProps = {
|
||
|
|
hasCondensedHeadline: false,
|
||
|
|
imageProps: {
|
||
|
|
imageFit: Image_1.ImageFit.cover,
|
||
|
|
width: 364,
|
||
|
|
height: 130
|
||
|
|
}
|
||
|
|
};
|
||
|
|
exports.TeachingBubbleContent = TeachingBubbleContent;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 361 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_f02ca86d',
|
||
|
|
bodyContent: 'bodyContent_f02ca86d',
|
||
|
|
headerIsLarge: 'headerIsLarge_f02ca86d',
|
||
|
|
headline: 'headline_f02ca86d',
|
||
|
|
headerIsSmall: 'headerIsSmall_f02ca86d',
|
||
|
|
body: 'body_f02ca86d',
|
||
|
|
subText: 'subText_f02ca86d',
|
||
|
|
closeButton: 'closeButton_f02ca86d',
|
||
|
|
footer: 'footer_f02ca86d',
|
||
|
|
primaryButton: 'primaryButton_f02ca86d',
|
||
|
|
secondaryButton: 'secondaryButton_f02ca86d',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_f02ca86d{display:block;max-width:364px}.bodyContent_f02ca86d{padding:20px}.headerIsLarge_f02ca86d:not(:last-child){margin-bottom:14px}.headline_f02ca86d{margin:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.headerIsLarge_f02ca86d .headline_f02ca86d{font-size:28px;font-weight:100;font-weight:100}.headerIsSmall_f02ca86d .headline_f02ca86d{font-size:14px;font-weight:400;font-weight:600}[dir=ltr] .headerIsSmall_f02ca86d .headline_f02ca86d{margin-right:10px}[dir=rtl] .headerIsSmall_f02ca86d .headline_f02ca86d{margin-left:10px}.body_f02ca86d:not(:last-child){margin-bottom:20px}.subText_f02ca86d{margin:0;font-size:14px;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-weight:300}.root_f02ca86d .closeButton_f02ca86d{position:absolute;top:0;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";font-size:12px}[dir=ltr] .root_f02ca86d .closeButton_f02ca86d{right:0}[dir=rtl] .root_f02ca86d .closeButton_f02ca86d{left:0}html[dir=ltr] .footer_f02ca86d .ms-Button:not(:first-child){margin-left:20px}html[dir=rtl] .footer_f02ca86d .ms-Button:not(:first-child){margin-right:20px}.root_f02ca86d .ms-Callout-beak,.root_f02ca86d .ms-Callout-main,.root_f02ca86d .ms-Callout-smallbeak{background:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d .ms-Button-label{font-size:14px;font-weight:400;color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d:hover{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d:focus{background-color:" }, { "theme": "themeLighter", "defaultValue": "#deecf9" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .primaryButton_f02ca86d:active{background-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d .ms-Button-label{font-size:14px;font-weight:400;color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d:hover{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d:focus{background-color:" }, { "theme": "themeDarkAlt", "defaultValue": "#106ebe" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}.root_f02ca86d .secondaryButton_f02ca86d:active{background-color:" }, { "theme": "themePrimary", "defaultValue": "#0078d7" }, { "rawString": ";border-color:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": "}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 362 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(363));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 363 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(364));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 364 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 = __webpack_require__(2);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Label_1 = __webpack_require__(189);
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Toggle_styles_1 = __webpack_require__(365);
|
||
|
|
var Toggle = (function (_super) {
|
||
|
|
__extends(Toggle, _super);
|
||
|
|
function Toggle(props) {
|
||
|
|
var _this = _super.call(this) || this;
|
||
|
|
_this._warnMutuallyExclusive({
|
||
|
|
checked: 'defaultChecked'
|
||
|
|
});
|
||
|
|
_this.state = {
|
||
|
|
isChecked: !!(props.checked || props.defaultChecked)
|
||
|
|
};
|
||
|
|
_this._id = props.id || Utilities_1.getId('Toggle');
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
Object.defineProperty(Toggle.prototype, "checked", {
|
||
|
|
/**
|
||
|
|
* Gets the current checked state of the toggle.
|
||
|
|
*/
|
||
|
|
get: function () {
|
||
|
|
return this.state.isChecked;
|
||
|
|
},
|
||
|
|
enumerable: true,
|
||
|
|
configurable: true
|
||
|
|
});
|
||
|
|
Toggle.prototype.componentWillReceiveProps = function (newProps) {
|
||
|
|
if (newProps.checked !== undefined) {
|
||
|
|
this.setState({
|
||
|
|
isChecked: !!newProps.checked // convert null to false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Toggle.prototype.render = function () {
|
||
|
|
// This control is using an input element for more universal accessibility support.
|
||
|
|
// Previously a button and the aria-pressed attribute were used. This technique works well with Narrator + Edge and NVDA + FireFox.
|
||
|
|
// However, JAWS and VoiceOver did not announce anything when the toggle was checked or unchecked.
|
||
|
|
// In the future when more screenreaders support aria-pressed it would be a good idea to change this control back to using it as it is
|
||
|
|
// more semantically correct.
|
||
|
|
var _this = this;
|
||
|
|
var _a = this.props, className = _a.className, customStyles = _a.styles, disabled = _a.disabled, label = _a.label, offAriaLabel = _a.offAriaLabel, offText = _a.offText, onAriaLabel = _a.onAriaLabel, onText = _a.onText;
|
||
|
|
var isChecked = this.state.isChecked;
|
||
|
|
var stateText = isChecked ? onText : offText;
|
||
|
|
var ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
|
||
|
|
var toggleNativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultChecked']);
|
||
|
|
var classNames = this._getClassNames(Toggle_styles_1.getStyles(undefined, customStyles), className, disabled, isChecked);
|
||
|
|
return (React.createElement("div", { className: classNames.root },
|
||
|
|
label && (React.createElement(Label_1.Label, { htmlFor: this._id, className: classNames.label }, label)),
|
||
|
|
React.createElement("div", { className: classNames.container },
|
||
|
|
React.createElement("button", __assign({}, toggleNativeProps, { className: classNames.pill, ref: function (c) { return _this._toggleButton = c; }, "aria-disabled": disabled, "aria-pressed": isChecked, id: this._id, onChange: function () { }, disabled: disabled, "data-is-focusable": true, onClick: this._onClick }),
|
||
|
|
React.createElement("div", { className: classNames.thumb })),
|
||
|
|
stateText && (React.createElement(Label_1.Label, { className: classNames.text }, stateText)))));
|
||
|
|
};
|
||
|
|
Toggle.prototype.focus = function () {
|
||
|
|
if (this._toggleButton) {
|
||
|
|
this._toggleButton.focus();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Toggle.prototype._onClick = function (ev) {
|
||
|
|
var _a = this.props, checked = _a.checked, onChanged = _a.onChanged, onClick = _a.onClick;
|
||
|
|
var isChecked = this.state.isChecked;
|
||
|
|
// Only update the state if the user hasn't provided it.
|
||
|
|
if (checked === undefined) {
|
||
|
|
this.setState({
|
||
|
|
isChecked: !isChecked
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (onChanged) {
|
||
|
|
onChanged(!isChecked);
|
||
|
|
}
|
||
|
|
if (onClick) {
|
||
|
|
onClick(ev);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
Toggle.prototype._getClassNames = function (styles, className, disabled, isChecked) {
|
||
|
|
return {
|
||
|
|
root: Styling_1.mergeStyles('ms-Toggle', isChecked && 'is-checked', !disabled && 'is-enabled', disabled && 'is-disabled', className, styles.root),
|
||
|
|
label: Styling_1.mergeStyles('ms-Toggle-label', styles.label),
|
||
|
|
container: Styling_1.mergeStyles('ms-Toggle-innerContainer', styles.container),
|
||
|
|
pill: Styling_1.mergeStyles('ms-Toggle-background', styles.pill, !disabled && [
|
||
|
|
!isChecked && {
|
||
|
|
':hover': styles.pillHovered,
|
||
|
|
':hover .ms-Toggle-thumb': styles.thumbHovered
|
||
|
|
},
|
||
|
|
isChecked && [
|
||
|
|
styles.pillChecked,
|
||
|
|
{
|
||
|
|
':hover': styles.pillCheckedHovered,
|
||
|
|
':hover .ms-Toggle-thumb': styles.thumbCheckedHovered
|
||
|
|
}
|
||
|
|
]
|
||
|
|
], disabled && [
|
||
|
|
!isChecked && styles.pillDisabled,
|
||
|
|
isChecked && styles.pillCheckedDisabled,
|
||
|
|
]),
|
||
|
|
thumb: Styling_1.mergeStyles('ms-Toggle-thumb', styles.thumb, !disabled && isChecked && styles.thumbChecked, disabled && [
|
||
|
|
!isChecked && styles.thumbDisabled,
|
||
|
|
isChecked && styles.thumbCheckedDisabled
|
||
|
|
]),
|
||
|
|
text: Styling_1.mergeStyles('ms-Toggle-stateText', styles.text),
|
||
|
|
};
|
||
|
|
};
|
||
|
|
;
|
||
|
|
return Toggle;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], Toggle.prototype, "_onClick", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.memoize
|
||
|
|
], Toggle.prototype, "_getClassNames", null);
|
||
|
|
exports.Toggle = Toggle;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 365 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
|
||
|
|
if (theme === void 0) { theme = Styling_1.getTheme(); }
|
||
|
|
var semanticColors = theme.semanticColors;
|
||
|
|
var pillUncheckedBackground = semanticColors.bodyBackground;
|
||
|
|
var pillCheckedBackground = semanticColors.inputBackgroundSelected;
|
||
|
|
var pillCheckedHoveredBackground = semanticColors.inputBackgroundSelectedHovered;
|
||
|
|
var pillCheckedDisabledBackground = semanticColors.disabledText;
|
||
|
|
var thumbBackground = semanticColors.inputBorderHovered;
|
||
|
|
var thumbCheckedBackground = semanticColors.inputForegroundSelected;
|
||
|
|
var thumbDisabledBackground = semanticColors.disabledText;
|
||
|
|
var thumbCheckedDisabledBackground = semanticColors.disabledBackground;
|
||
|
|
var pillBorderColor = semanticColors.inputBorder;
|
||
|
|
var pillBorderHoveredColor = semanticColors.inputBorderHovered;
|
||
|
|
var pillBorderDisabledColor = semanticColors.disabledText;
|
||
|
|
var toggleFocusBorderColor = semanticColors.focusBorder;
|
||
|
|
var styles = {
|
||
|
|
root: {
|
||
|
|
marginBottom: '8px'
|
||
|
|
},
|
||
|
|
container: [
|
||
|
|
{
|
||
|
|
display: 'inline-flex',
|
||
|
|
position: 'relative',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
pill: [
|
||
|
|
Styling_1.getFocusStyle(theme, '-1px'),
|
||
|
|
{
|
||
|
|
fontSize: '20px',
|
||
|
|
lineHeight: '1em',
|
||
|
|
boxSizing: 'border-box',
|
||
|
|
position: 'relative',
|
||
|
|
width: '2.2em',
|
||
|
|
height: '1em',
|
||
|
|
borderRadius: '1em',
|
||
|
|
transition: 'all 0.1s ease',
|
||
|
|
borderWidth: '1px',
|
||
|
|
borderStyle: 'solid',
|
||
|
|
background: pillUncheckedBackground,
|
||
|
|
borderColor: pillBorderColor,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
pillHovered: {
|
||
|
|
borderColor: pillBorderHoveredColor
|
||
|
|
},
|
||
|
|
pillChecked: {
|
||
|
|
background: pillCheckedBackground,
|
||
|
|
borderColor: 'transparent',
|
||
|
|
},
|
||
|
|
pillCheckedHovered: {
|
||
|
|
backgroundColor: pillCheckedHoveredBackground,
|
||
|
|
borderColor: 'transparent'
|
||
|
|
},
|
||
|
|
pillDisabled: {
|
||
|
|
borderColor: pillBorderDisabledColor
|
||
|
|
},
|
||
|
|
pillCheckedDisabled: {
|
||
|
|
backgroundColor: pillCheckedDisabledBackground,
|
||
|
|
borderColor: 'transparent'
|
||
|
|
},
|
||
|
|
thumb: {
|
||
|
|
width: '.5em',
|
||
|
|
height: '.5em',
|
||
|
|
borderRadius: '.5em',
|
||
|
|
position: 'absolute',
|
||
|
|
top: '.2em',
|
||
|
|
transition: 'all 0.1s ease',
|
||
|
|
backgroundColor: thumbBackground,
|
||
|
|
left: '.2em'
|
||
|
|
},
|
||
|
|
thumbChecked: {
|
||
|
|
backgroundColor: thumbCheckedBackground,
|
||
|
|
left: '1.4em'
|
||
|
|
},
|
||
|
|
thumbDisabled: {
|
||
|
|
backgroundColor: thumbDisabledBackground,
|
||
|
|
left: '.2em',
|
||
|
|
},
|
||
|
|
thumbCheckedDisabled: {
|
||
|
|
backgroundColor: thumbCheckedDisabledBackground,
|
||
|
|
left: '1.4em'
|
||
|
|
},
|
||
|
|
text: {
|
||
|
|
// Workaround; until Label is converted and we can pass in custom styles, we need to make this
|
||
|
|
// more specific. Once Label is converted, we should be able to just pull in the customized styling.
|
||
|
|
'.ms-Toggle-stateText': {
|
||
|
|
padding: '0',
|
||
|
|
margin: '0 10px',
|
||
|
|
userSelect: 'none'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Styling_1.mergeStyleSets(styles, customStyles);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 366 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(367));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 367 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
function __export(m) {
|
||
|
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||
|
|
}
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
__export(__webpack_require__(368));
|
||
|
|
__export(__webpack_require__(369));
|
||
|
|
__export(__webpack_require__(371));
|
||
|
|
__export(__webpack_require__(372));
|
||
|
|
__export(__webpack_require__(58));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 368 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var Tooltip_Props_1 = __webpack_require__(369);
|
||
|
|
var Callout_1 = __webpack_require__(59);
|
||
|
|
var DirectionalHint_1 = __webpack_require__(58);
|
||
|
|
var stylesImport = __webpack_require__(370);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var Styling_1 = __webpack_require__(68);
|
||
|
|
var Tooltip = (function (_super) {
|
||
|
|
__extends(Tooltip, _super);
|
||
|
|
function Tooltip() {
|
||
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
||
|
|
}
|
||
|
|
Tooltip.prototype.render = function () {
|
||
|
|
var _a = this.props, targetElement = _a.targetElement, content = _a.content, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id, _b = _a.onRenderContent, onRenderContent = _b === void 0 ? this._onRenderContent : _b;
|
||
|
|
return (React.createElement(Callout_1.Callout, __assign({ className: Utilities_1.css('ms-Tooltip', Styling_1.AnimationClassNames.fadeIn200, styles.root, (_c = {},
|
||
|
|
_c[styles.hasMediumDelay] = delay === Tooltip_Props_1.TooltipDelay.medium,
|
||
|
|
_c)), targetElement: targetElement, directionalHint: directionalHint }, calloutProps, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)),
|
||
|
|
React.createElement("div", { className: Utilities_1.css('ms-Tooltip-content', styles.content), id: id, role: 'tooltip' }, onRenderContent(this.props, this._onRenderContent))));
|
||
|
|
var _c;
|
||
|
|
};
|
||
|
|
Tooltip.prototype._onRenderContent = function (props) {
|
||
|
|
return (React.createElement("p", { className: Utilities_1.css('ms-Tooltip-subText', styles.subText) }, props.content));
|
||
|
|
};
|
||
|
|
return Tooltip;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
// Specify default props values
|
||
|
|
Tooltip.defaultProps = {
|
||
|
|
directionalHint: DirectionalHint_1.DirectionalHint.topCenter,
|
||
|
|
delay: Tooltip_Props_1.TooltipDelay.medium,
|
||
|
|
calloutProps: {
|
||
|
|
isBeakVisible: true,
|
||
|
|
beakWidth: 16,
|
||
|
|
gapSpace: 0,
|
||
|
|
setInitialFocus: true,
|
||
|
|
doNotLayer: false
|
||
|
|
}
|
||
|
|
};
|
||
|
|
exports.Tooltip = Tooltip;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 369 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var TooltipDelay;
|
||
|
|
(function (TooltipDelay) {
|
||
|
|
TooltipDelay[TooltipDelay["zero"] = 0] = "zero";
|
||
|
|
TooltipDelay[TooltipDelay["medium"] = 1] = "medium";
|
||
|
|
})(TooltipDelay = exports.TooltipDelay || (exports.TooltipDelay = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 370 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
root: 'root_9f132af5',
|
||
|
|
hasMediumDelay: 'hasMediumDelay_9f132af5',
|
||
|
|
content: 'content_9f132af5',
|
||
|
|
subText: 'subText_9f132af5',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".root_9f132af5{max-width:364px;background:" }, { "theme": "white", "defaultValue": "#ffffff" }, { "rawString": ";padding:8px;pointer-events:none}.root_9f132af5.hasMediumDelay_9f132af5{-webkit-animation-delay:.3s;animation-delay:.3s}.content_9f132af5{font-size:12px;color:" }, { "theme": "neutralPrimary", "defaultValue": "#333333" }, { "rawString": ";word-wrap:break-word;overflow-wrap:break-word}.subText_9f132af5{margin:0}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 371 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || (function () {
|
||
|
|
var 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 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) || 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;
|
||
|
|
};
|
||
|
|
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 });
|
||
|
|
/* tslint:disable:no-unused-variable */
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
/* tslint:enable:no-unused-variable */
|
||
|
|
var Utilities_1 = __webpack_require__(10);
|
||
|
|
var TooltipHost_Props_1 = __webpack_require__(372);
|
||
|
|
var Tooltip_1 = __webpack_require__(368);
|
||
|
|
var Tooltip_Props_1 = __webpack_require__(369);
|
||
|
|
var stylesImport = __webpack_require__(373);
|
||
|
|
var styles = stylesImport;
|
||
|
|
var TooltipHost = (function (_super) {
|
||
|
|
__extends(TooltipHost, _super);
|
||
|
|
// Constructor
|
||
|
|
function TooltipHost(props) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
isTooltipVisible: false
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
// Render
|
||
|
|
TooltipHost.prototype.render = function () {
|
||
|
|
var _a = this.props, calloutProps = _a.calloutProps, tooltipProps = _a.tooltipProps, content = _a.content, children = _a.children, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id, hostClassName = _a.hostClassName;
|
||
|
|
var isTooltipVisible = this.state.isTooltipVisible;
|
||
|
|
var tooltipId = id || Utilities_1.getId('tooltip');
|
||
|
|
return (React.createElement("div", __assign({ className: Utilities_1.css('ms-TooltipHost', styles.host, hostClassName), ref: this._resolveRef('_tooltipHost') }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._onTooltipMouseLeave }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, "aria-describedby": isTooltipVisible ? tooltipId : undefined }),
|
||
|
|
children,
|
||
|
|
isTooltipVisible && (React.createElement(Tooltip_1.Tooltip, __assign({}, tooltipProps, { id: tooltipId, delay: delay, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, calloutProps: Utilities_1.assign(calloutProps, { onDismiss: this._onTooltipCallOutDismiss }) }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties))))));
|
||
|
|
};
|
||
|
|
TooltipHost.prototype._getTargetElement = function () {
|
||
|
|
var overflowMode = this.props.overflowMode;
|
||
|
|
// Select target element based on overflow mode. For parent mode, you want to position the tooltip relative
|
||
|
|
// to the parent element, otherwise it might look off.
|
||
|
|
if (overflowMode !== undefined) {
|
||
|
|
switch (overflowMode) {
|
||
|
|
case TooltipHost_Props_1.TooltipOverflowMode.Parent:
|
||
|
|
return this._tooltipHost.parentElement;
|
||
|
|
case TooltipHost_Props_1.TooltipOverflowMode.Self:
|
||
|
|
return this._tooltipHost;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return this._tooltipHost;
|
||
|
|
};
|
||
|
|
// Show Tooltip
|
||
|
|
TooltipHost.prototype._onTooltipMouseEnter = function (ev) {
|
||
|
|
var overflowMode = this.props.overflowMode;
|
||
|
|
if (overflowMode !== undefined) {
|
||
|
|
var overflowElement = this._getTargetElement();
|
||
|
|
if (overflowElement && !Utilities_1.hasOverflow(overflowElement)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
isTooltipVisible: true
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// Hide Tooltip
|
||
|
|
TooltipHost.prototype._onTooltipMouseLeave = function (ev) {
|
||
|
|
this.setState({
|
||
|
|
isTooltipVisible: false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// Hide Tooltip
|
||
|
|
TooltipHost.prototype._onTooltipCallOutDismiss = function () {
|
||
|
|
this.setState({
|
||
|
|
isTooltipVisible: false
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return TooltipHost;
|
||
|
|
}(Utilities_1.BaseComponent));
|
||
|
|
TooltipHost.defaultProps = {
|
||
|
|
delay: Tooltip_Props_1.TooltipDelay.medium
|
||
|
|
};
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], TooltipHost.prototype, "_onTooltipMouseEnter", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], TooltipHost.prototype, "_onTooltipMouseLeave", null);
|
||
|
|
__decorate([
|
||
|
|
Utilities_1.autobind
|
||
|
|
], TooltipHost.prototype, "_onTooltipCallOutDismiss", null);
|
||
|
|
exports.TooltipHost = TooltipHost;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 372 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
var TooltipOverflowMode;
|
||
|
|
(function (TooltipOverflowMode) {
|
||
|
|
/** Only show tooltip if parent DOM element is overflowing */
|
||
|
|
TooltipOverflowMode[TooltipOverflowMode["Parent"] = 0] = "Parent";
|
||
|
|
/** Only show tooltip if tooltip host's content is overflowing */
|
||
|
|
TooltipOverflowMode[TooltipOverflowMode["Self"] = 1] = "Self";
|
||
|
|
})(TooltipOverflowMode = exports.TooltipOverflowMode || (exports.TooltipOverflowMode = {}));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 373 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
var load_themed_styles_1 = __webpack_require__(18);
|
||
|
|
var styles = {
|
||
|
|
host: 'host_e1b7b906',
|
||
|
|
};
|
||
|
|
load_themed_styles_1.loadStyles([{ "rawString": ".host_e1b7b906{display:inline}" }]);
|
||
|
|
module.exports = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 374 */,
|
||
|
|
/* 375 */,
|
||
|
|
/* 376 */,
|
||
|
|
/* 377 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
/*
|
||
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
||
|
|
Author Tobias Koppers @sokra
|
||
|
|
*/
|
||
|
|
// css base code, injected by the css-loader
|
||
|
|
module.exports = function() {
|
||
|
|
var list = [];
|
||
|
|
|
||
|
|
// return the list of modules as css string
|
||
|
|
list.toString = function toString() {
|
||
|
|
var result = [];
|
||
|
|
for(var i = 0; i < this.length; i++) {
|
||
|
|
var item = this[i];
|
||
|
|
if(item[2]) {
|
||
|
|
result.push("@media " + item[2] + "{" + item[1] + "}");
|
||
|
|
} else {
|
||
|
|
result.push(item[1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return result.join("");
|
||
|
|
};
|
||
|
|
|
||
|
|
// import a list of modules into the list
|
||
|
|
list.i = function(modules, mediaQuery) {
|
||
|
|
if(typeof modules === "string")
|
||
|
|
modules = [[null, modules, ""]];
|
||
|
|
var alreadyImportedModules = {};
|
||
|
|
for(var i = 0; i < this.length; i++) {
|
||
|
|
var id = this[i][0];
|
||
|
|
if(typeof id === "number")
|
||
|
|
alreadyImportedModules[id] = true;
|
||
|
|
}
|
||
|
|
for(i = 0; i < modules.length; i++) {
|
||
|
|
var item = modules[i];
|
||
|
|
// skip already imported module
|
||
|
|
// this implementation is not 100% perfect for weird media query combinations
|
||
|
|
// when a module is imported multiple times with different media queries.
|
||
|
|
// I hope this will never occur (Hey this way we have smaller bundles)
|
||
|
|
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
|
||
|
|
if(mediaQuery && !item[2]) {
|
||
|
|
item[2] = mediaQuery;
|
||
|
|
} else if(mediaQuery) {
|
||
|
|
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
|
||
|
|
}
|
||
|
|
list.push(item);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return list;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 378 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_378__;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 379 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var SearchUtils = (function () {
|
||
|
|
function SearchUtils() {
|
||
|
|
}
|
||
|
|
SearchUtils.getValueFromResults = function (key, results) {
|
||
|
|
var value = undefined;
|
||
|
|
if (results && results.length > 0 && key) {
|
||
|
|
for (var i = 0; i < results.length; i++) {
|
||
|
|
var resultItem = results[i];
|
||
|
|
if (resultItem.Key === key) {
|
||
|
|
value = resultItem.Value;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
};
|
||
|
|
SearchUtils.getPreviewImageUrl = function (result, siteUrl) {
|
||
|
|
var uniqueID = SearchUtils.getValueFromResults('uniqueID', result);
|
||
|
|
var siteId = SearchUtils.getValueFromResults('siteID', result);
|
||
|
|
var webId = SearchUtils.getValueFromResults('webID', result);
|
||
|
|
var docId = SearchUtils.getValueFromResults('DocId', result);
|
||
|
|
if (uniqueID && siteId && webId && docId) {
|
||
|
|
return siteUrl + "/_layouts/15/getpreview.ashx?guidFile=" + uniqueID + "&guidSite=" + siteId + "&guidWeb=" + webId + "&docid=" + docId + "\n &metadatatoken=300x424x2&ClientType=CodenameOsloWeb&size=small";
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
SearchUtils.getActionName = function (actionId) {
|
||
|
|
switch (actionId) {
|
||
|
|
case 1001:
|
||
|
|
return 'Viewed';
|
||
|
|
case 1003:
|
||
|
|
return 'Modified';
|
||
|
|
default:
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return SearchUtils;
|
||
|
|
}());
|
||
|
|
exports.SearchUtils = SearchUtils;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 380 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var Utils = (function () {
|
||
|
|
function Utils() {
|
||
|
|
}
|
||
|
|
Utils.getUserPhotoUrl = function (userEmail, siteUrl, size) {
|
||
|
|
if (size === void 0) { size = 'S'; }
|
||
|
|
return siteUrl + "/_layouts/15/userphoto.aspx?size=" + size + "&accountname=" + userEmail;
|
||
|
|
};
|
||
|
|
Utils.trim = function (s) {
|
||
|
|
if (s && s.length > 0) {
|
||
|
|
return s.replace(/^\s+|\s+$/gm, '');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return s;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return Utils;
|
||
|
|
}());
|
||
|
|
exports.Utils = Utils;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 381 */,
|
||
|
|
/* 382 */,
|
||
|
|
/* 383 */,
|
||
|
|
/* 384 */,
|
||
|
|
/* 385 */,
|
||
|
|
/* 386 */,
|
||
|
|
/* 387 */,
|
||
|
|
/* 388 */,
|
||
|
|
/* 389 */,
|
||
|
|
/* 390 */,
|
||
|
|
/* 391 */,
|
||
|
|
/* 392 */
|
||
|
|
/***/ function(module, exports) {
|
||
|
|
|
||
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_392__;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 393 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var __extends = (this && this.__extends) || function (d, b) {
|
||
|
|
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
||
|
|
function __() { this.constructor = d; }
|
||
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||
|
|
};
|
||
|
|
var React = __webpack_require__(2);
|
||
|
|
var WorkingWith_module_scss_1 = __webpack_require__(394);
|
||
|
|
var sp_http_1 = __webpack_require__(378);
|
||
|
|
var SearchUtils_1 = __webpack_require__(379);
|
||
|
|
var Utils_1 = __webpack_require__(380);
|
||
|
|
var office_ui_fabric_react_1 = __webpack_require__(6);
|
||
|
|
var WorkingWith = (function (_super) {
|
||
|
|
__extends(WorkingWith, _super);
|
||
|
|
function WorkingWith(props, state) {
|
||
|
|
var _this = _super.call(this, props) || this;
|
||
|
|
_this.state = {
|
||
|
|
people: [],
|
||
|
|
loading: true,
|
||
|
|
error: null
|
||
|
|
};
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
WorkingWith.prototype.componentDidMount = function () {
|
||
|
|
this.loadPeople(this.props.siteUrl, this.props.numberOfPeople);
|
||
|
|
};
|
||
|
|
WorkingWith.prototype.componentDidUpdate = function (prevProps, prevState, prevContext) {
|
||
|
|
if (this.props.numberOfPeople !== prevProps.numberOfPeople ||
|
||
|
|
this.props.siteUrl !== prevProps.siteUrl && (this.props.numberOfPeople && this.props.siteUrl)) {
|
||
|
|
this.loadPeople(this.props.siteUrl, this.props.numberOfPeople);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
WorkingWith.prototype.render = function () {
|
||
|
|
var _this = this;
|
||
|
|
var loading = this.state.loading ? React.createElement("div", { style: { margin: '0 auto' } },
|
||
|
|
React.createElement(office_ui_fabric_react_1.Spinner, { label: 'Loading...' })) : React.createElement("div", null);
|
||
|
|
var error = this.state.error ? React.createElement("div", null,
|
||
|
|
React.createElement("strong", null, "Error: "),
|
||
|
|
" ",
|
||
|
|
this.state.error) : React.createElement("div", null);
|
||
|
|
var people = this.state.people.map(function (person, i) {
|
||
|
|
return (React.createElement(office_ui_fabric_react_1.Persona, { primaryText: person.name, secondaryText: person.jobTitle, tertiaryText: person.department, imageUrl: person.photoUrl, size: office_ui_fabric_react_1.PersonaSize.large, presence: office_ui_fabric_react_1.PersonaPresence.none, onClick: function () { _this.navigateTo(person.profileUrl); }, key: person.email }));
|
||
|
|
});
|
||
|
|
return (React.createElement("div", { className: WorkingWith_module_scss_1.default.workingWith },
|
||
|
|
React.createElement("div", { className: office_ui_fabric_react_1.css('ms-font-xl', WorkingWith_module_scss_1.default.webPartTitle) }, this.props.title),
|
||
|
|
loading,
|
||
|
|
error,
|
||
|
|
people));
|
||
|
|
};
|
||
|
|
WorkingWith.prototype.navigateTo = function (url) {
|
||
|
|
window.open(url, '_blank');
|
||
|
|
};
|
||
|
|
WorkingWith.prototype.loadPeople = function (siteUrl, numberOfPeople) {
|
||
|
|
var _this = this;
|
||
|
|
this.props.httpClient.get(siteUrl + "/_api/search/query?querytext='*'&properties='GraphQuery:actor(me\\,action\\:1019)'&selectproperties='Title,WorkEmail,JobTitle,Department,Path'&rowlimit=" + numberOfPeople, sp_http_1.SPHttpClient.configurations.v1, {
|
||
|
|
headers: {
|
||
|
|
'Accept': 'application/json;odata=nometadata',
|
||
|
|
'odata-version': ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(function (response) {
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(function (response) {
|
||
|
|
if (!response ||
|
||
|
|
!response.PrimaryQueryResult ||
|
||
|
|
!response.PrimaryQueryResult.RelevantResults ||
|
||
|
|
response.PrimaryQueryResult.RelevantResults.RowCount === 0) {
|
||
|
|
_this.setState({
|
||
|
|
loading: false,
|
||
|
|
error: null,
|
||
|
|
people: []
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var people = [];
|
||
|
|
for (var i = 0; i < response.PrimaryQueryResult.RelevantResults.Table.Rows.length; i++) {
|
||
|
|
var personRow = response.PrimaryQueryResult.RelevantResults.Table.Rows[i];
|
||
|
|
var email = SearchUtils_1.SearchUtils.getValueFromResults('WorkEmail', personRow.Cells);
|
||
|
|
people.push({
|
||
|
|
name: SearchUtils_1.SearchUtils.getValueFromResults('Title', personRow.Cells),
|
||
|
|
email: email,
|
||
|
|
jobTitle: SearchUtils_1.SearchUtils.getValueFromResults('JobTitle', personRow.Cells),
|
||
|
|
department: SearchUtils_1.SearchUtils.getValueFromResults('Department', personRow.Cells),
|
||
|
|
photoUrl: Utils_1.Utils.getUserPhotoUrl(email, siteUrl, 'L'),
|
||
|
|
profileUrl: SearchUtils_1.SearchUtils.getValueFromResults('Path', personRow.Cells)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
_this.setState({
|
||
|
|
loading: false,
|
||
|
|
error: null,
|
||
|
|
people: people
|
||
|
|
});
|
||
|
|
}, function (error) {
|
||
|
|
_this.setState({
|
||
|
|
loading: false,
|
||
|
|
error: error,
|
||
|
|
people: []
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return WorkingWith;
|
||
|
|
}(React.Component));
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.default = WorkingWith;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 394 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
/* tslint:disable */
|
||
|
|
__webpack_require__(395);
|
||
|
|
var styles = {
|
||
|
|
workingWith: 'workingWith_cca48a75',
|
||
|
|
webPartTitle: 'webPartTitle_cca48a75',
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.default = styles;
|
||
|
|
/* tslint:enable */
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 395 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
var content = __webpack_require__(396);
|
||
|
|
var loader = __webpack_require__(18);
|
||
|
|
|
||
|
|
if(typeof content === "string") content = [[module.id, content]];
|
||
|
|
|
||
|
|
// add the styles to the DOM
|
||
|
|
for (var i = 0; i < content.length; i++) loader.loadStyles(content[i][1]);
|
||
|
|
|
||
|
|
if(content.locals) module.exports = content.locals;
|
||
|
|
|
||
|
|
/***/ },
|
||
|
|
/* 396 */
|
||
|
|
/***/ function(module, exports, __webpack_require__) {
|
||
|
|
|
||
|
|
exports = module.exports = __webpack_require__(377)();
|
||
|
|
// imports
|
||
|
|
|
||
|
|
|
||
|
|
// module
|
||
|
|
exports.push([module.id, ".workingWith_cca48a75 .webPartTitle_cca48a75{margin-bottom:1em}.workingWith_cca48a75 .ms-Spinner{width:7em;margin:0 auto}.workingWith_cca48a75 .ms-Persona{cursor:pointer}", ""]);
|
||
|
|
|
||
|
|
// exports
|
||
|
|
|
||
|
|
|
||
|
|
/***/ }
|
||
|
|
/******/ ])});;
|
||
|
|
//# sourceMappingURL=working-with.bundle.js.map
|