@uifabric/experiments/lib-commonjs/components/signals/examples/Signals.Basic.Example.js

Experimental React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Signals_1 = require("../Signals");
var ChoiceGroup_1 = require("office-ui-fabric-react/lib/ChoiceGroup");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var example_app_base_1 = require("@uifabric/example-app-base");
var SignalStylesModule = require("../Signal.scss");
var SignalsExampleStylesModule = require("./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 ? example_app_base_1.lorem(4) : _a;
    return (React.createElement("div", null,
        React.createElement("h3", null, props.name),
        React.createElement(Signals_1.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_1.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_1.Checkbox, { label: "Dark?", defaultChecked: isDark, onChange: this._onIsDarkChanged })),
            React.createElement("div", { className: Utilities_1.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(Signals_1.YouCheckedOutSignal, null) }),
                React.createElement(SignalExample, { name: "Malware detected", signal: React.createElement(Signals_1.MalwareDetectedSignal, null) }),
                React.createElement(SignalExample, { name: "Blocked", signal: React.createElement(Signals_1.BlockedSignal, null) }),
                React.createElement(SignalExample, { name: "Missing metadata", signal: React.createElement(Signals_1.MissingMetadataSignal, null) }),
                React.createElement(SignalExample, { name: "Warning", signal: React.createElement(Signals_1.WarningSignal, null) }),
                React.createElement(SignalExample, { name: "Awaiting approval", signal: React.createElement(Signals_1.AwaitingApprovalSignal, null) }),
                React.createElement(SignalExample, { name: "Trending", signal: React.createElement(Signals_1.TrendingSignal, null) }),
                React.createElement(SignalExample, { name: "Someone checked out", signal: React.createElement(Signals_1.SomeoneCheckedOutSignal, null) }),
                React.createElement(SignalExample, { name: "New", signal: React.createElement(Signals_1.NewSignal, null) }),
                React.createElement(SignalExample, { name: "New (positioning)", signal: React.createElement(Signals_1.NewSignal, null), text: "O" }),
                React.createElement(SignalExample, { name: "Live edit", signal: React.createElement(Signals_1.LiveEditSignal, null) }),
                React.createElement(SignalExample, { name: "Mention", signal: React.createElement(Signals_1.MentionSignal, null) }),
                React.createElement(SignalExample, { name: "Comments", signal: React.createElement(Signals_1.CommentsSignal, null) }),
                React.createElement(SignalExample, { name: "Comments (count)", signal: React.createElement(Signals_1.CommentsSignal, null, "2") }),
                React.createElement(SignalExample, { name: "Unseen reply", signal: React.createElement(Signals_1.UnseenReplySignal, null) }),
                React.createElement(SignalExample, { name: "Unseen edit", signal: React.createElement(Signals_1.UnseenEditSignal, null) }),
                React.createElement(SignalExample, { name: "Emailed", signal: React.createElement(Signals_1.EmailedSignal, null) }),
                React.createElement(SignalExample, { name: "Record", signal: React.createElement(Signals_1.RecordSignal, null) }),
                React.createElement(SignalExample, { name: "Read-only", signal: React.createElement(Signals_1.ReadOnlySignal, null) }),
                React.createElement(SignalExample, { name: "Shared", signal: React.createElement(Signals_1.SharedSignal, null) }))));
        var _b;
    };
    return SignalsBasicExample;
}(React.Component));
exports.SignalsBasicExample = SignalsBasicExample;
//# sourceMappingURL=Signals.Basic.Example.js.map