office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1,217 lines (1,178 loc) • 868 kB
JavaScript
var Fabric =
/******/ (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__) {
/**
* 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];
}
__export(__webpack_require__(1));
__export(__webpack_require__(52));
__export(__webpack_require__(28));
__export(__webpack_require__(57));
__export(__webpack_require__(61));
__export(__webpack_require__(70));
__export(__webpack_require__(93));
__export(__webpack_require__(24));
__export(__webpack_require__(97));
__export(__webpack_require__(105));
__export(__webpack_require__(151));
__export(__webpack_require__(164));
__export(__webpack_require__(185));
__export(__webpack_require__(44));
__export(__webpack_require__(189));
__export(__webpack_require__(193));
__export(__webpack_require__(8));
__export(__webpack_require__(126));
__export(__webpack_require__(64));
__export(__webpack_require__(76));
__export(__webpack_require__(39));
__export(__webpack_require__(131));
__export(__webpack_require__(143));
__export(__webpack_require__(194));
__export(__webpack_require__(199));
__export(__webpack_require__(204));
__export(__webpack_require__(157));
__export(__webpack_require__(208));
__export(__webpack_require__(213));
__export(__webpack_require__(172));
__export(__webpack_require__(230));
__export(__webpack_require__(236));
__export(__webpack_require__(240));
__export(__webpack_require__(244));
__export(__webpack_require__(137));
__export(__webpack_require__(248));
__export(__webpack_require__(73));
__export(__webpack_require__(253));
__export(__webpack_require__(257));
__export(__webpack_require__(12));
/* Special cases that will be removed once we've moved utilities out into a common location. */
__export(__webpack_require__(16));
__export(__webpack_require__(13));
__export(__webpack_require__(7));
__export(__webpack_require__(6));
__export(__webpack_require__(21));
//# sourceMappingURL=index.js.map
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(__webpack_require__(2));
//# sourceMappingURL=Breadcrumb.js.map
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(__webpack_require__(3));
//# sourceMappingURL=index.js.map
/***/ },
/* 3 */
/***/ 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 __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;
};
var React = __webpack_require__(4);
var BaseComponent_1 = __webpack_require__(5);
var FocusZone_1 = __webpack_require__(8);
var ContextualMenu_1 = __webpack_require__(24);
var DirectionalHint_1 = __webpack_require__(27);
var rtl_1 = __webpack_require__(21);
var object_1 = __webpack_require__(19);
var css_1 = __webpack_require__(16);
var autobind_1 = __webpack_require__(15);
__webpack_require__(51);
var OVERFLOW_KEY = 'overflow';
var OVERFLOW_WIDTH = 44;
var Breadcrumb = (function (_super) {
__extends(Breadcrumb, _super);
function Breadcrumb(props) {
_super.call(this, props);
this._id = object_1.getId('Breadcrumb');
this.state = this._getStateFromProps(props);
}
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 className = this.props.className;
var _a = this.state, isOverflowOpen = _a.isOverflowOpen, overflowAnchor = _a.overflowAnchor, renderedItems = _a.renderedItems, renderedOverflowItems = _a.renderedOverflowItems;
var overflowMenuId = this._id + '-overflow';
return (React.createElement("div", {className: css_1.css('ms-Breadcrumb', className), ref: 'renderingArea'},
React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.horizontal},
React.createElement("ul", {className: 'ms-Breadcrumb-list'},
renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", {className: 'ms-Breadcrumb-overflow', key: OVERFLOW_KEY, ref: OVERFLOW_KEY},
React.createElement("div", {className: 'ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More', onClick: this._onOverflowClicked, "data-is-focusable": true, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null}),
React.createElement("i", {className: css_1.css('ms-Breadcrumb-chevron ms-Icon', rtl_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight')}))) : (null),
renderedItems.map(function (item, index) { return (React.createElement("li", {className: 'ms-Breadcrumb-listItem', key: item.key || String(index), ref: item.key || String(index)},
React.createElement("a", {className: 'ms-Breadcrumb-itemLink', onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null, href: item.href, role: item.onClick ? 'button' : 'link'}, item.text),
React.createElement("i", {className: css_1.css('ms-Breadcrumb-chevron ms-Icon', rtl_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--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: _this._onBreadcrumbClicked.bind(_this, item),
href: item.href
}); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed})) : (null)));
};
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
};
};
Breadcrumb.defaultProps = {
items: [],
maxDisplayedItems: 999
};
__decorate([
autobind_1.autobind
], Breadcrumb.prototype, "_onOverflowClicked", null);
__decorate([
autobind_1.autobind
], Breadcrumb.prototype, "_onOverflowDismissed", null);
__decorate([
autobind_1.autobind
], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
return Breadcrumb;
}(BaseComponent_1.BaseComponent));
exports.Breadcrumb = Breadcrumb;
//# sourceMappingURL=Breadcrumb.js.map
/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = React;
/***/ },
/* 5 */
/***/ 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__(4);
var Async_1 = __webpack_require__(6);
var EventGroup_1 = __webpack_require__(7);
var BaseComponent = (function (_super) {
__extends(BaseComponent, _super);
/**
* BaseComponent constructor
* @param {P} props The props for the component.
* @param {Object} deprecatedProps The map of deprecated prop names to new names, where the key is the old name and the
* value is the new name. If a prop is removed rather than renamed, leave the value undefined.
*/
function BaseComponent(props, deprecatedProps) {
_super.call(this, props);
if (deprecatedProps) {
for (var propName in deprecatedProps) {
if (propName in props) {
_warnDeprecation(this, propName, deprecatedProps[propName]);
}
}
}
_makeAllSafe(this, BaseComponent.prototype, [
'componentWillMount',
'componentDidMount',
'shouldComponentUpdate',
'componentWillUpdate',
'componentWillReceiveProps',
'render',
'componentDidUpdate',
'componentWillUnmount'
]);
}
/** 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 () {
var funcNameRegex = /function (.{1,})\(/;
var results = (funcNameRegex).exec((this).constructor.toString());
return (results && results.length > 1) ? results[1] : '';
},
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.
* @params refName Name of the member to assign the ref to.
*
* @examples
* class Foo extends BaseComponent<...> {
* private _root: HTMLElement;
*
* public render() {
* return <div ref={ this._resolveRef('_root') } />
* }
* }
*/
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];
};
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) {
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;
};
}
}
function _warnDeprecation(obj, propertyName, newPropertyName) {
if (console && console.warn) {
var deprecationMessage = obj.className + " property '" + propertyName + "' was used but has been deprecated.";
if (newPropertyName) {
deprecationMessage += " Use '" + newPropertyName + "' instead.";
}
console.warn(deprecationMessage);
}
}
BaseComponent.onError = function (errorMessage) {
console.error(errorMessage);
throw errorMessage;
};
//# sourceMappingURL=BaseComponent.js.map
/***/ },
/* 6 */
/***/ 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";
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.
* @return 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];
}
};
/**
* SetImmediate override, which will auto cancel the immediate during dispose.
* @param callback Callback to execute.
* @return 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];
}
};
/**
* SetInterval override, which will auto cancel the timeout during dispose.
* @param callback Callback to execute.
* @param duration Duration in milliseconds.
* @return 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];
}
};
/**
* 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.
* @param options.leading Specify execution on the leading edge of the timeout.
* @param options.trailing Specify execution on the trailing edge of the timeout.
* @return 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 - 0] = 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.
* @param options.leading Specify execution on the leading edge of the timeout.
* @param options.maxWait The maximum time func is allowed to be delayed before it's called.
* @param options.trailing Specify execution on the trailing edge of the timeout.
* @return 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 - 0] = 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;
//# sourceMappingURL=Async.js.map
/***/ },
/* 7 */
/***/ function(module, exports) {
/* tslint:disable:no-string-literal */
"use strict";
/** 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 - 0] = 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) {
}
return result;
};
eventRecord.elementCallback = processElementEvent;
if (target.addEventListener) {
/* tslint:disable:ban-native-functions */
target.addEventListener(eventName, processElementEvent, useCapture);
}
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 - 0] = 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;
}
}
};
EventGroup._uniqueId = 0;
return EventGroup;
}());
exports.EventGroup = EventGroup;
//# sourceMappingURL=EventGroup.js.map
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(__webpack_require__(9));
//# sourceMappingURL=FocusZone.js.map
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(__webpack_require__(10));
__export(__webpack_require__(11));
//# sourceMappingURL=index.js.map
/***/ },
/* 10 */
/***/ 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 __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;
};
var React = __webpack_require__(4);
var FocusZone_Props_1 = __webpack_require__(11);
var Utilities_1 = __webpack_require__(12);
var focus_1 = __webpack_require__(23);
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 FocusZone = (function (_super) {
__extends(FocusZone, _super);
function FocusZone(props) {
_super.call(this, props);
this._id = Utilities_1.getId('FocusZone');
_allInstances[this._id] = this;
this._focusAlignment = {
left: 0,
top: 0
};
}
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 (focus_1.isElementFocusZone(parentElement)) {
this._isInnerZone = true;
break;
}
parentElement = Utilities_1.getParent(parentElement);
}
this._events.on(windowElement, 'keydown', this._onKeyDownCapture, true);
};
FocusZone.prototype.componentWillUnmount = function () {
delete _allInstances[this._id];
};
FocusZone.prototype.render = function () {
var _a = this.props, rootProps = _a.rootProps, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;
return (React.createElement("div", __assign({}, rootProps, {className: Utilities_1.css('ms-FocusZone', className), ref: 'root', "data-focuszone-id": this._id, "aria-labelledby": ariaLabelledBy, 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(focus_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 t