@uifabric/experiments/lib/components/signals/Signals.js

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { css } from 'office-ui-fabric-react/lib/Utilities';
import { Signal } from './Signal';
import * as SignalsStyles from './Signals.scss';
import * as SignalStyles from './Signal.scss';
import { getRTL } from '../../Utilities';
export * from './Signal';
export * from './SignalField';
export var YouCheckedOutSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.youCheckedOut, iconName: "checkedoutbyyou12" }));
};
export var BlockedSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.blocked, iconName: "blocked12" }));
};
export var MissingMetadataSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.missingMetadata, iconName: getRTL() ? 'TagUnknown12Mirror' : 'TagUnknown12' }));
};
export var WarningSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.warning, iconName: "warning12" }));
};
export var AwaitingApprovalSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.awaitingApproval, iconName: "clock" }));
};
export var TrendingSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.trending, iconName: "market" }));
};
export var SomeoneCheckedOutSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.someoneCheckedOut, iconName: "checkedoutbyother12" }));
};
export var RecordSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.record, iconName: "lock" }));
};
/**
 * Renders a signal marking the proceeding content as new.
 */
export var NewSignal = function (props) {
    var ariaLabel = props.ariaLabel, spanProps = tslib_1.__rest(props, ["ariaLabel"]);
    return (React.createElement("span", tslib_1.__assign({}, spanProps, { className: css(SignalStyles.signal, SignalsStyles.newSignal) }),
        React.createElement(Icon, { ariaLabel: props.ariaLabel, className: css(SignalsStyles.newIcon), iconName: "glimmer" })));
};
/**
 * Renders a signal for a live-edit scenario.
 */
export var LiveEditSignal = function (props) {
    var className = props.className, spanProps = tslib_1.__rest(props, ["className"]);
    return React.createElement(Signal, tslib_1.__assign({ className: css(className, SignalsStyles.liveEdit) }, spanProps));
};
export var MentionSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.mention, iconName: "accounts" }));
};
/**
 * Renders a signal for a number of comments.
 */
export var CommentsSignal = function (props) {
    var ariaLabel = props.ariaLabel, className = props.className, children = props.children, spanProps = tslib_1.__rest(props, ["ariaLabel", "className", "children"]);
    return (React.createElement(Signal, tslib_1.__assign({ className: css(SignalsStyles.comments, className) }, spanProps),
        React.createElement(Icon, { ariaLabel: props.ariaLabel, className: css(SignalsStyles.commentsIcon), iconName: "MessageFill" }),
        children ? React.createElement("span", { className: css(SignalsStyles.commentsCount) }, children) : null));
};
/**
 * Renders a signal for a number of comments.
 */
export var UnseenReplySignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.unseenReply, iconName: "commentprevious" }));
};
export var UnseenEditSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.unseenEdit, iconName: "edit" }));
};
export var ReadOnlySignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.readOnly, iconName: "uneditablesolid12" }));
};
export var EmailedSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.emailed, iconName: "mail" }));
};
export var SharedSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.shared, iconName: "people" }));
};
export var MalwareDetectedSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.malwareDetected, iconName: "BlockedSiteSolid12" }));
};
export var ATPSignal = MalwareDetectedSignal; // TODO Delete on next major version.
/**
 * Renders a signal for an external item.
 */
export var ExternalSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.external, iconName: "Globe" }));
};
export var NotFollowedSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.bookmarkOutline, iconName: "SingleBookmark" }));
};
export var FollowedSignal = function (props) {
    return React.createElement(IconSignal, tslib_1.__assign({}, props, { signalClass: SignalsStyles.bookmarkFilled, iconName: "SingleBookmarkSolid" }));
};
/**
 * Renders a signal as just an Icon. This is the simplest Signal case.
 */
// tslint:disable-next-line:function-name
function IconSignal(props) {
    var ariaLabel = props.ariaLabel, className = props.className, signalClass = props.signalClass, spanProps = tslib_1.__rest(props, ["ariaLabel", "className", "signalClass"]);
    return React.createElement(Icon, tslib_1.__assign({}, spanProps, { ariaLabel: props.ariaLabel, className: css(SignalStyles.signal, signalClass, className) }));
}
//# sourceMappingURL=Signals.js.map