UNPKG

5.74 kBJavaScriptView Raw
1"use strict";
2var _a;
3Object.defineProperty(exports, "__esModule", { value: true });
4exports.MessageBarBase = void 0;
5var tslib_1 = require("tslib");
6var React = require("react");
7var Utilities_1 = require("../../Utilities");
8var Button_1 = require("../../Button");
9var Icon_1 = require("../../Icon");
10var MessageBar_types_1 = require("./MessageBar.types");
11var react_hooks_1 = require("@fluentui/react-hooks");
12var 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);
20var COMPONENT_NAME = 'MessageBar';
21var getClassNames = Utilities_1.classNamesFunction();
22var 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};
31var 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};
40exports.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 // eslint-disable-next-line deprecation/deprecation
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 // this span is probably not necessary, but preserving it for now in case anyone
71 // has styling that expects it to be present
72 React.createElement("span", null, children)))),
73 /* singleline expand/collapse button */ !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 /* singleline dismiss */ !isMultiline && dismissButton && (React.createElement("div", { className: classNames.dismissSingleLine }, dismissButton)),
77 isMultiline && dismissButton),
78 isMultiline && actionsDiv));
79});
80exports.MessageBarBase.displayName = COMPONENT_NAME;
81//# sourceMappingURL=MessageBar.base.js.map
\No newline at end of file