define(["require", "exports", "tslib", "react", "@fluentui/react-experiments", "@fluentui/react", "@fluentui/example-data", "@fluentui/react-experiments/lib/components/signals/Signal.scss", "./Signals.Example.scss"], function (require, exports, tslib_1, React, react_experiments_1, react_1, example_data_1, SignalStylesModule, SignalsExampleStylesModule) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.SignalsBasicExample = void 0;
    var SignalStyles = SignalStylesModule;
    var SignalsExampleStyles = SignalsExampleStylesModule;
    var SignalExample = function (props) {
        var _a = props.text, text = _a === void 0 ? example_data_1.lorem(4) : _a;
        return (React.createElement("div", null,
            React.createElement("h3", null, props.name),
            React.createElement(react_experiments_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 (ev, option) {
                _this.setState({
                    fontSize: option === null || option === void 0 ? void 0 : 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;
            var _b = this.state, fontSize = _b.fontSize, isDark = _b.isDark;
            return (React.createElement("div", null,
                React.createElement("p", null,
                    React.createElement(react_1.ChoiceGroup, { label: "Font size", defaultSelectedKey: fontSize, onChange: this._onFontSizeChoiceChanged, options: [
                            { key: 'small', text: 'Small' },
                            { key: 'medium', text: 'Medium' },
                            { key: 'large', text: 'Large' },
                        ] })),
                React.createElement("p", null,
                    React.createElement(react_1.Checkbox, { label: "Dark?", defaultChecked: isDark, onChange: this._onIsDarkChanged })),
                React.createElement("div", { className: react_1.css(SignalsExampleStyles.example, (_a = {},
                        _a[SignalsExampleStyles.small] = fontSize === 'small',
                        _a[SignalsExampleStyles.medium] = fontSize === 'medium',
                        _a[SignalsExampleStyles.large] = fontSize === 'large',
                        _a[SignalsExampleStyles.dark + " " + SignalStyles.dark] = isDark,
                        _a)) },
                    React.createElement(SignalExample, { name: "You checked out", signal: React.createElement(react_experiments_1.YouCheckedOutSignal, null) }),
                    React.createElement(SignalExample, { name: "Malware detected", signal: React.createElement(react_experiments_1.MalwareDetectedSignal, null) }),
                    React.createElement(SignalExample, { name: "Blocked", signal: React.createElement(react_experiments_1.BlockedSignal, null) }),
                    React.createElement(SignalExample, { name: "Missing metadata", signal: React.createElement(react_experiments_1.MissingMetadataSignal, null) }),
                    React.createElement(SignalExample, { name: "Warning", signal: React.createElement(react_experiments_1.WarningSignal, null) }),
                    React.createElement(SignalExample, { name: "Awaiting approval", signal: React.createElement(react_experiments_1.AwaitingApprovalSignal, null) }),
                    React.createElement(SignalExample, { name: "Trending", signal: React.createElement(react_experiments_1.TrendingSignal, null) }),
                    React.createElement(SignalExample, { name: "Someone checked out", signal: React.createElement(react_experiments_1.SomeoneCheckedOutSignal, null) }),
                    React.createElement(SignalExample, { name: "New", signal: React.createElement(react_experiments_1.NewSignal, null) }),
                    React.createElement(SignalExample, { name: "New (positioning)", signal: React.createElement(react_experiments_1.NewSignal, null), text: "O" }),
                    React.createElement(SignalExample, { name: "Live edit", signal: React.createElement(react_experiments_1.LiveEditSignal, null) }),
                    React.createElement(SignalExample, { name: "Mention", signal: React.createElement(react_experiments_1.MentionSignal, null) }),
                    React.createElement(SignalExample, { name: "Comments", signal: React.createElement(react_experiments_1.CommentsSignal, null) }),
                    React.createElement(SignalExample, { name: "Comments (count)", signal: React.createElement(react_experiments_1.CommentsSignal, null, "2") }),
                    React.createElement(SignalExample, { name: "Unseen reply", signal: React.createElement(react_experiments_1.UnseenReplySignal, null) }),
                    React.createElement(SignalExample, { name: "Unseen edit", signal: React.createElement(react_experiments_1.UnseenEditSignal, null) }),
                    React.createElement(SignalExample, { name: "Emailed", signal: React.createElement(react_experiments_1.EmailedSignal, null) }),
                    React.createElement(SignalExample, { name: "Record", signal: React.createElement(react_experiments_1.RecordSignal, null) }),
                    React.createElement(SignalExample, { name: "Read-only", signal: React.createElement(react_experiments_1.ReadOnlySignal, null) }),
                    React.createElement(SignalExample, { name: "Shared", signal: React.createElement(react_experiments_1.SharedSignal, null) }),
                    React.createElement(SignalExample, { name: "Needs Republishing", signal: React.createElement(react_experiments_1.NeedsRepublishingSignal, null) }),
                    React.createElement(SignalExample, { name: "Page Scheduled", signal: React.createElement(react_experiments_1.ItemScheduledSignal, null) }),
                    React.createElement(SignalExample, { name: "Special Folder (Desktop)", signal: React.createElement(react_experiments_1.DesktopSignal, null) }),
                    React.createElement(SignalExample, { name: "Special Folder (Documents)", signal: React.createElement(react_experiments_1.DocumentsSignal, null) }),
                    React.createElement(SignalExample, { name: "Special Folder (Pictures)", signal: React.createElement(react_experiments_1.PicturesSignal, null) }))));
        };
        return SignalsBasicExample;
    }(React.Component));
    exports.SignalsBasicExample = SignalsBasicExample;
});
//# sourceMappingURL=Signals.Basic.Example.js.map