1 | "use strict";
|
2 | var _a;
|
3 | Object.defineProperty(exports, "__esModule", { value: true });
|
4 | exports.MessageBarBase = void 0;
|
5 | var tslib_1 = require("tslib");
|
6 | var React = require("react");
|
7 | var Utilities_1 = require("../../Utilities");
|
8 | var Button_1 = require("../../Button");
|
9 | var Icon_1 = require("../../Icon");
|
10 | var MessageBar_types_1 = require("./MessageBar.types");
|
11 | var react_hooks_1 = require("@fluentui/react-hooks");
|
12 | var ICON_MAP = (_a = {},
|
13 | _a[MessageBar_types_1.MessageBarType.info] = 'Info',
|
14 | _a[MessageBar_types_1.MessageBarType.warning] = 'Info',
|
15 | _a[MessageBar_types_1.MessageBarType.error] = 'ErrorBadge',
|
16 | _a[MessageBar_types_1.MessageBarType.blocked] = 'Blocked2',
|
17 | _a[MessageBar_types_1.MessageBarType.severeWarning] = 'Warning',
|
18 | _a[MessageBar_types_1.MessageBarType.success] = 'Completed',
|
19 | _a);
|
20 | var COMPONENT_NAME = 'MessageBar';
|
21 | var getClassNames = Utilities_1.classNamesFunction();
|
22 | var getAnnouncementPriority = function (messageBarType) {
|
23 | switch (messageBarType) {
|
24 | case MessageBar_types_1.MessageBarType.blocked:
|
25 | case MessageBar_types_1.MessageBarType.error:
|
26 | case MessageBar_types_1.MessageBarType.severeWarning:
|
27 | return 'assertive';
|
28 | }
|
29 | return 'polite';
|
30 | };
|
31 | var getRole = function (messageBarType) {
|
32 | switch (messageBarType) {
|
33 | case MessageBar_types_1.MessageBarType.blocked:
|
34 | case MessageBar_types_1.MessageBarType.error:
|
35 | case MessageBar_types_1.MessageBarType.severeWarning:
|
36 | return 'alert';
|
37 | }
|
38 | return 'status';
|
39 | };
|
40 | exports.MessageBarBase = React.forwardRef(function (props, ref) {
|
41 | var _a = react_hooks_1.useBoolean(false), expandSingleLine = _a[0], toggleExpandSingleLine = _a[1].toggle;
|
42 | var labelId = react_hooks_1.useId('MessageBar');
|
43 | var actions = props.actions, className = props.className, children = props.children,
|
44 |
|
45 | overflowButtonAriaLabel = props.overflowButtonAriaLabel, dismissIconProps = props.dismissIconProps, styles = props.styles, theme = props.theme, _b = props.messageBarType, messageBarType = _b === void 0 ? MessageBar_types_1.MessageBarType.info : _b, _c = props.onDismiss, onDismiss = _c === void 0 ? undefined : _c, _d = props.isMultiline, isMultiline = _d === void 0 ? true : _d, truncated = props.truncated, dismissButtonAriaLabel = props.dismissButtonAriaLabel, messageBarIconProps = props.messageBarIconProps, role = props.role, _e = props.delayedRender, delayedRender = _e === void 0 ? true : _e, expandButtonProps = props.expandButtonProps;
|
46 | var nativeProps = Utilities_1.getNativeProps(props, Utilities_1.htmlElementProperties, [
|
47 | 'className',
|
48 | 'role',
|
49 | ]);
|
50 | var classNames = getClassNames(styles, {
|
51 | theme: theme,
|
52 | messageBarType: messageBarType || MessageBar_types_1.MessageBarType.info,
|
53 | onDismiss: onDismiss !== undefined,
|
54 | actions: actions !== undefined,
|
55 | truncated: truncated,
|
56 | isMultiline: isMultiline,
|
57 | expandSingleLine: expandSingleLine,
|
58 | className: className,
|
59 | });
|
60 | var expandIconProps = { iconName: expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' };
|
61 | var regionProps = actions || onDismiss ? { 'aria-describedby': labelId, role: 'region' } : {};
|
62 | var actionsDiv = actions ? React.createElement("div", { className: classNames.actions }, actions) : null;
|
63 | var dismissButton = onDismiss ? (React.createElement(Button_1.IconButton, { disabled: false, className: classNames.dismissal, onClick: onDismiss, iconProps: dismissIconProps ? dismissIconProps : { iconName: 'Clear' }, title: dismissButtonAriaLabel, ariaLabel: dismissButtonAriaLabel })) : null;
|
64 | return (React.createElement("div", tslib_1.__assign({ ref: ref, className: classNames.root }, regionProps),
|
65 | React.createElement("div", { className: classNames.content },
|
66 | React.createElement("div", { className: classNames.iconContainer, "aria-hidden": true }, messageBarIconProps ? (React.createElement(Icon_1.Icon, tslib_1.__assign({}, messageBarIconProps, { className: Utilities_1.css(classNames.icon, messageBarIconProps.className) }))) : (React.createElement(Icon_1.Icon, { iconName: ICON_MAP[messageBarType], className: classNames.icon }))),
|
67 | React.createElement("div", { className: classNames.text, id: labelId, role: role || getRole(messageBarType), "aria-live": getAnnouncementPriority(messageBarType) },
|
68 | React.createElement("span", tslib_1.__assign({ className: classNames.innerText }, nativeProps), delayedRender ? (React.createElement(Utilities_1.DelayedRender, null,
|
69 | React.createElement("span", null, children))) : (
|
70 |
|
71 |
|
72 | React.createElement("span", null, children)))),
|
73 | !isMultiline && !actionsDiv && truncated && (React.createElement("div", { className: classNames.expandSingleLine },
|
74 | React.createElement(Button_1.IconButton, tslib_1.__assign({ disabled: false, className: classNames.expand, onClick: toggleExpandSingleLine, iconProps: expandIconProps, ariaLabel: overflowButtonAriaLabel, "aria-expanded": expandSingleLine }, expandButtonProps)))),
|
75 | !isMultiline && actionsDiv,
|
76 | !isMultiline && dismissButton && (React.createElement("div", { className: classNames.dismissSingleLine }, dismissButton)),
|
77 | isMultiline && dismissButton),
|
78 | isMultiline && actionsDiv));
|
79 | });
|
80 | exports.MessageBarBase.displayName = COMPONENT_NAME;
|
81 |
|
\ | No newline at end of file |