@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
55 lines • 2.69 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Styling", "office-ui-fabric-react/lib/Utilities"], function (require, exports, tslib_1, React, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LayoutGroup = /** @class */ (function (_super) {
tslib_1.__extends(LayoutGroup, _super);
function LayoutGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._getJustify = function (justify) {
if (justify === 'end') {
return 'flex-end';
}
else if (justify === 'center') {
return 'center';
}
else {
return 'flex-start';
}
};
return _this;
}
LayoutGroup.prototype.render = function () {
var _a = this.props, children = _a.children, direction = _a.direction, layoutGap = _a.layoutGap, justify = _a.justify;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var numberOfChildren = React.Children.count(children);
var group = React.Children.map(children, function (child, i) {
var isLastChild = i === numberOfChildren - 1;
// Render individual item
return (React.createElement("div", { className: Styling_1.mergeStyles('ms-LayoutGroup-item', direction === 'horizontal' &&
!isLastChild && {
marginRight: layoutGap + 'px'
}, direction === 'vertical' &&
!isLastChild && {
marginBottom: layoutGap + 'px'
}, justify === 'fill' && {
flexBasis: '0',
flexGrow: 1
}) }, child));
});
// Render all items
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Styling_1.mergeStyles('ms-LayoutGroup', {
display: 'flex',
flexDirection: direction === 'horizontal' ? 'row' : 'column',
justifyContent: this._getJustify(justify)
}) }), group));
};
LayoutGroup.defaultProps = {
layoutGap: 8,
direction: 'vertical',
justify: 'start'
};
return LayoutGroup;
}(React.Component));
exports.LayoutGroup = LayoutGroup;
});
//# sourceMappingURL=LayoutGroup.js.map