office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
75 lines • 3.54 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Customizer, getNativeProps, on, divProperties, classNamesFunction, getWindow, getDocument, isDirectionalKeyCode, memoizeFunction } from '../../Utilities';
import { getStyles } from './Fabric.styles';
var getClassNames = classNamesFunction();
var getRTLTheme = memoizeFunction(function (theme, isRTL) { return (tslib_1.__assign({}, theme, { rtl: isRTL })); });
var FabricBase = /** @class */ (function (_super) {
tslib_1.__extends(FabricBase, _super);
function FabricBase(props) {
var _this = _super.call(this, props) || this;
_this._rootElement = React.createRef();
_this._disposables = [];
_this._removeClassNameFromBody = undefined;
_this._onMouseDown = function (ev) {
_this.setState({ isFocusVisible: false });
};
_this._onKeyDown = function (ev) {
if (isDirectionalKeyCode(ev.which)) {
_this.setState({ isFocusVisible: true });
}
};
_this.state = { isFocusVisible: false };
return _this;
}
FabricBase.prototype.render = function () {
var _a = this.props, _b = _a.as, Root = _b === void 0 ? 'div' : _b, theme = _a.theme, dir = _a.dir;
var classNames = this._getClassNames();
var divProps = getNativeProps(this.props, divProperties);
var isRTL = dir === 'rtl';
var renderedContent = React.createElement(Root, tslib_1.__assign({}, divProps, { className: classNames.root, ref: this._rootElement }));
// Expose an rtl based theme if dir is specified and it doesn't agree with the theme setting.
if (dir !== undefined && theme && (theme.rtl === undefined || theme.rtl !== isRTL)) {
renderedContent = React.createElement(Customizer, { settings: { theme: getRTLTheme(theme, isRTL) } }, renderedContent);
}
return renderedContent;
};
FabricBase.prototype.componentDidMount = function () {
var win = getWindow(this._rootElement.current);
if (win) {
this._disposables.push(on(win, 'mousedown', this._onMouseDown, true), on(win, 'keydown', this._onKeyDown, true));
}
this._addClassNameToBody();
};
FabricBase.prototype.componentWillUnmount = function () {
this._disposables.forEach(function (dispose) { return dispose(); });
if (this._removeClassNameFromBody) {
this._removeClassNameFromBody();
}
};
FabricBase.prototype._getClassNames = function () {
var _a = this.props, className = _a.className, theme = _a.theme, applyTheme = _a.applyTheme;
var classNames = getClassNames(getStyles, {
theme: theme,
applyTheme: applyTheme,
className: className,
isFocusVisible: this.state.isFocusVisible
});
return classNames;
};
FabricBase.prototype._addClassNameToBody = function () {
if (this.props.applyThemeToBody) {
var classNames_1 = this._getClassNames();
var currentDoc_1 = getDocument(this._rootElement.current);
if (currentDoc_1) {
currentDoc_1.body.classList.add(classNames_1.bodyThemed);
this._removeClassNameFromBody = function () {
currentDoc_1.body.classList.remove(classNames_1.bodyThemed);
};
}
}
};
return FabricBase;
}(React.Component));
export { FabricBase };
//# sourceMappingURL=Fabric.base.js.map