@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
91 lines • 6.13 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { SignalField, YouCheckedOutSignal, MalwareDetectedSignal, BlockedSignal, MissingMetadataSignal, WarningSignal, AwaitingApprovalSignal, TrendingSignal, SomeoneCheckedOutSignal, NewSignal, LiveEditSignal, MentionSignal, CommentsSignal, UnseenReplySignal, UnseenEditSignal, ReadOnlySignal, SharedSignal, EmailedSignal, RecordSignal } from '../Signals';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { css } from 'office-ui-fabric-react/lib/Utilities';
import { lorem } from '@uifabric/example-app-base';
import * as SignalStylesModule from '../Signal.scss';
import * as SignalsExampleStylesModule from './Signals.Example.scss';
// tslint:disable-next-line:no-any
var SignalStyles = SignalStylesModule;
// tslint:disable-next-line:no-any
var SignalsExampleStyles = SignalsExampleStylesModule;
var SignalExample = function (props) {
var _a = props.text, text = _a === void 0 ? lorem(4) : _a;
return (React.createElement("div", null,
React.createElement("h3", null, props.name),
React.createElement(SignalField, { before: props.signal }, text)));
};
var SignalsBasicExample = /** @class */ (function (_super) {
tslib_1.__extends(SignalsBasicExample, _super);
function SignalsBasicExample(props) {
var _this = _super.call(this, props) || this;
_this._onFontSizeChoiceChanged = function (option) {
_this.setState({
fontSize: option.key
});
};
_this._onIsDarkChanged = function (ev, checked) {
_this.setState({
isDark: checked
});
};
_this.state = {
fontSize: 'small',
isDark: false
};
return _this;
}
SignalsBasicExample.prototype.render = function () {
var _a = this.state, fontSize = _a.fontSize, isDark = _a.isDark;
return (React.createElement("div", null,
React.createElement("p", null,
React.createElement(ChoiceGroup, { label: "Font size", defaultSelectedKey: fontSize, onChanged: this._onFontSizeChoiceChanged, options: [
{
key: 'small',
text: 'Small'
},
{
key: 'medium',
text: 'Medium'
},
{
key: 'large',
text: 'Large'
}
] })),
React.createElement("p", null,
React.createElement(Checkbox, { label: "Dark?", defaultChecked: isDark, onChange: this._onIsDarkChanged })),
React.createElement("div", { className: css(SignalsExampleStyles.example, (_b = {},
_b[SignalsExampleStyles.small] = fontSize === 'small',
_b[SignalsExampleStyles.medium] = fontSize === 'medium',
_b[SignalsExampleStyles.large] = fontSize === 'large',
_b[SignalsExampleStyles.dark + " " + SignalStyles.dark] = isDark,
_b)) },
React.createElement(SignalExample, { name: "You checked out", signal: React.createElement(YouCheckedOutSignal, null) }),
React.createElement(SignalExample, { name: "Malware detected", signal: React.createElement(MalwareDetectedSignal, null) }),
React.createElement(SignalExample, { name: "Blocked", signal: React.createElement(BlockedSignal, null) }),
React.createElement(SignalExample, { name: "Missing metadata", signal: React.createElement(MissingMetadataSignal, null) }),
React.createElement(SignalExample, { name: "Warning", signal: React.createElement(WarningSignal, null) }),
React.createElement(SignalExample, { name: "Awaiting approval", signal: React.createElement(AwaitingApprovalSignal, null) }),
React.createElement(SignalExample, { name: "Trending", signal: React.createElement(TrendingSignal, null) }),
React.createElement(SignalExample, { name: "Someone checked out", signal: React.createElement(SomeoneCheckedOutSignal, null) }),
React.createElement(SignalExample, { name: "New", signal: React.createElement(NewSignal, null) }),
React.createElement(SignalExample, { name: "New (positioning)", signal: React.createElement(NewSignal, null), text: "O" }),
React.createElement(SignalExample, { name: "Live edit", signal: React.createElement(LiveEditSignal, null) }),
React.createElement(SignalExample, { name: "Mention", signal: React.createElement(MentionSignal, null) }),
React.createElement(SignalExample, { name: "Comments", signal: React.createElement(CommentsSignal, null) }),
React.createElement(SignalExample, { name: "Comments (count)", signal: React.createElement(CommentsSignal, null, "2") }),
React.createElement(SignalExample, { name: "Unseen reply", signal: React.createElement(UnseenReplySignal, null) }),
React.createElement(SignalExample, { name: "Unseen edit", signal: React.createElement(UnseenEditSignal, null) }),
React.createElement(SignalExample, { name: "Emailed", signal: React.createElement(EmailedSignal, null) }),
React.createElement(SignalExample, { name: "Record", signal: React.createElement(RecordSignal, null) }),
React.createElement(SignalExample, { name: "Read-only", signal: React.createElement(ReadOnlySignal, null) }),
React.createElement(SignalExample, { name: "Shared", signal: React.createElement(SharedSignal, null) }))));
var _b;
};
return SignalsBasicExample;
}(React.Component));
export { SignalsBasicExample };
//# sourceMappingURL=Signals.Basic.Example.js.map