office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
61 lines • 3.04 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Styling", "@uifabric/example-data", "office-ui-fabric-react/lib/ScrollablePane", "office-ui-fabric-react/lib/Sticky"], function (require, exports, tslib_1, React, Styling_1, example_data_1, ScrollablePane_1, Sticky_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var theme = Styling_1.getTheme();
var classNames = Styling_1.mergeStyleSets({
wrapper: {
height: '40vh',
position: 'relative',
maxHeight: 'inherit'
},
pane: {
maxWidth: 400,
border: '1px solid ' + theme.palette.neutralLight
},
sticky: {
color: theme.palette.neutralDark,
padding: '5px 20px 5px 10px',
fontSize: '13px',
borderTop: '1px solid ' + theme.palette.black,
borderBottom: '1px solid ' + theme.palette.black
},
textContent: {
padding: '15px 10px'
}
});
var ScrollablePaneDefaultExample = /** @class */ (function (_super) {
tslib_1.__extends(ScrollablePaneDefaultExample, _super);
function ScrollablePaneDefaultExample(props) {
var _this = _super.call(this, props) || this;
_this._createContentArea = function (item) {
return (React.createElement("div", { key: item.index, style: {
backgroundColor: item.color
} },
React.createElement(Sticky_1.Sticky, { stickyPosition: Sticky_1.StickyPositionType.Both },
React.createElement("div", { className: classNames.sticky },
"Sticky Component #",
item.index + 1)),
React.createElement("div", { className: classNames.textContent }, item.text)));
};
var colors = ['#eaeaea', '#dadada', '#d0d0d0', '#c8c8c8', '#a6a6a6', '#c7e0f4', '#71afe5', '#eff6fc', '#deecf9'];
_this._items = [];
// Using splice prevents the colors from being duplicated
for (var i = 0; i < 5; i++) {
_this._items.push({
color: colors.splice(Math.floor(Math.random() * colors.length), 1)[0],
text: example_data_1.lorem(200),
index: i
});
}
return _this;
}
ScrollablePaneDefaultExample.prototype.render = function () {
var contentAreas = this._items.map(this._createContentArea);
return (React.createElement("div", { className: classNames.wrapper },
React.createElement(ScrollablePane_1.ScrollablePane, { styles: { root: classNames.pane } }, contentAreas)));
};
return ScrollablePaneDefaultExample;
}(React.Component));
exports.ScrollablePaneDefaultExample = ScrollablePaneDefaultExample;
});
//# sourceMappingURL=ScrollablePane.Default.Example.js.map