office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
79 lines • 4.31 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Shimmer, ShimmerElementsGroup, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';
import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
var wrapperClass = mergeStyles({
padding: 2,
selectors: {
'& > .ms-Shimmer-container': {
margin: '10px 0'
}
}
});
var ShimmerLoadDataExample = /** @class */ (function (_super) {
tslib_1.__extends(ShimmerLoadDataExample, _super);
function ShimmerLoadDataExample(props) {
var _this = _super.call(this, props) || this;
_this._getContentOne = function (ev, checked) {
var isDataLoadedOne = _this.state.isDataLoadedOne;
_this.setState({
isDataLoadedOne: checked,
contentOne: !isDataLoadedOne ? 'Congratulations!!! You have successfully loaded the content. ' : ''
});
};
_this._getContentTwo = function (ev, checked) {
var isDataLoadedTwo = _this.state.isDataLoadedTwo;
_this.setState({
isDataLoadedTwo: checked,
examplePersona: !isDataLoadedTwo
? {
imageUrl: 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png',
imageInitials: 'AL',
primaryText: 'Annie Lindqvist',
secondaryText: 'Software Engineer'
}
: {}
});
};
_this._getCustomElements = function () {
return (React.createElement("div", { style: { display: 'flex' } },
React.createElement(ShimmerElementsGroup, { shimmerElements: [{ type: ShimmerElementType.circle, height: 40 }, { type: ShimmerElementType.gap, width: 16, height: 40 }] }),
React.createElement(ShimmerElementsGroup, { flexWrap: true, width: "100%", shimmerElements: [
{ type: ShimmerElementType.line, width: '100%', height: 10, verticalAlign: 'bottom' },
{ type: ShimmerElementType.line, width: '90%', height: 8 },
{ type: ShimmerElementType.gap, width: '10%', height: 20 }
] })));
};
_this.state = {
isDataLoadedOne: false,
isDataLoadedTwo: false,
contentOne: '',
examplePersona: {}
};
return _this;
}
ShimmerLoadDataExample.prototype.render = function () {
var _a = this.state, isDataLoadedOne = _a.isDataLoadedOne, isDataLoadedTwo = _a.isDataLoadedTwo, contentOne = _a.contentOne, examplePersona = _a.examplePersona;
return (React.createElement("div", { className: wrapperClass },
React.createElement(Toggle, { checked: isDataLoadedOne, onChange: this._getContentOne, onText: "Toggle to show shimmer", offText: "Toggle to load content" }),
React.createElement(Shimmer, { isDataLoaded: isDataLoadedOne, ariaLabel: "Loading content" },
React.createElement("div", { style: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
lineHeight: '1',
minHeight: '16px' // Default height of Shimmer when no elements being provided.
} },
contentOne,
contentOne,
contentOne)),
React.createElement(Toggle, { checked: isDataLoadedTwo, onChange: this._getContentTwo, onText: "Toggle to show shimmer", offText: "Toggle to load content" }),
React.createElement(Shimmer, { customElementsGroup: this._getCustomElements(), width: 300, isDataLoaded: isDataLoadedTwo },
React.createElement(Persona, tslib_1.__assign({}, examplePersona, { size: PersonaSize.size40, presence: PersonaPresence.away })))));
};
return ShimmerLoadDataExample;
}(React.Component));
export { ShimmerLoadDataExample };
//# sourceMappingURL=Shimmer.LoadData.Example.js.map