@fluentui/react-northstar
Version:
A themable React component library.
219 lines (216 loc) • 8.81 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.alertSlotClassNames = exports.alertClassName = exports.Alert = void 0;
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
var _accessibility = require("@fluentui/accessibility");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _Box = require("../Box/Box");
var _Text = require("../Text/Text");
var _ButtonGroup = require("../Button/ButtonGroup");
var _AlertDismissAction = require("./AlertDismissAction");
var _reactBindings = require("@fluentui/react-bindings");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var alertClassName = 'ui-alert';
exports.alertClassName = alertClassName;
var alertSlotClassNames = {
content: alertClassName + "__content",
actions: alertClassName + "__actions",
icon: alertClassName + "__icon",
header: alertClassName + "__header",
body: alertClassName + "__body"
};
/**
* An Alert displays a brief, important message to attract a user's attention without interrupting their current task.
*
* @accessibility
* Implements [ARIA Alert](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) design pattern.
*/
exports.alertSlotClassNames = alertSlotClassNames;
var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(Alert.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var warning = props.warning,
danger = props.danger,
info = props.info,
success = props.success,
attached = props.attached,
fitted = props.fitted,
dismissible = props.dismissible,
variables = props.variables,
className = props.className,
design = props.design,
styles = props.styles,
children = props.children,
actions = props.actions,
dismissAction = props.dismissAction,
content = props.content,
icon = props.icon,
header = props.header,
body = props.body;
var _useAutoControlled = (0, _reactBindings.useAutoControlled)({
defaultValue: props.defaultVisible,
value: props.visible,
initialValue: true
}),
visible = _useAutoControlled[0],
setVisible = _useAutoControlled[1];
var _React$useState = React.useState((0, _uniqueId2.default)('alert-body-')),
bodyId = _React$useState[0];
var ElementType = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(Alert.handledProps, props);
var getA11yProps = (0, _reactBindings.useAccessibility)(props.accessibility, {
debugName: Alert.displayName,
mapPropsToBehavior: function mapPropsToBehavior() {
return {
warning: warning,
danger: danger,
bodyId: bodyId,
visible: visible
};
},
rtl: context.rtl
});
var _useStyles = (0, _reactBindings.useStyles)(Alert.displayName, {
className: alertClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
warning: warning,
danger: danger,
info: info,
success: success,
attached: attached,
fitted: fitted,
dismissible: dismissible,
visible: visible
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes,
resolvedStyles = _useStyles.styles;
var handleDismissOverrides = function handleDismissOverrides(predefinedProps) {
return {
onClick: function onClick(e, buttonProps) {
(0, _invoke2.default)(predefinedProps, 'onClick', e, buttonProps);
(0, _invoke2.default)(props, 'onVisibleChange', e, Object.assign({}, props, {
visible: false
}));
setVisible(false);
}
};
};
var handleFocus = function handleFocus(e) {
(0, _invoke2.default)(props, 'onFocus', e, props);
};
var renderContent = function renderContent() {
var bodyContent = /*#__PURE__*/React.createElement(React.Fragment, null, _Text.Text.create(header, {
defaultProps: function defaultProps() {
return getA11yProps('header', {
className: alertSlotClassNames.header,
styles: resolvedStyles.header
});
}
}), _Box.Box.create(content, {
defaultProps: function defaultProps() {
return getA11yProps('content', {
className: alertSlotClassNames.content,
styles: resolvedStyles.content
});
}
}));
return /*#__PURE__*/React.createElement(React.Fragment, null, _Box.Box.create(icon, {
defaultProps: function defaultProps() {
return getA11yProps('icon', {
className: alertSlotClassNames.icon,
styles: resolvedStyles.icon
});
}
}), _Box.Box.create(body, {
defaultProps: function defaultProps() {
return getA11yProps('body', {
className: alertSlotClassNames.body,
styles: resolvedStyles.body,
id: bodyId
});
},
overrideProps: {
children: bodyContent
}
}), _ButtonGroup.ButtonGroup.create(actions, {
defaultProps: function defaultProps() {
return getA11yProps('actions', {
className: alertSlotClassNames.actions,
styles: resolvedStyles.actions
});
}
}), dismissible && _AlertDismissAction.AlertDismissAction.create(dismissAction, {
defaultProps: function defaultProps() {
return getA11yProps('dismissAction', {
danger: danger,
warning: warning,
info: info,
success: success,
variables: variables
});
},
overrideProps: handleDismissOverrides
}));
};
var element = getA11yProps.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root,
onFocus: handleFocus,
ref: ref
}, unhandledProps)), (0, _utils.childrenExist)(children) ? children : renderContent()));
setEnd();
return element;
});
exports.Alert = Alert;
Alert.defaultProps = {
accessibility: _accessibility.alertBehavior,
dismissAction: {},
body: {}
};
Alert.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
content: 'shorthand'
}), {
actions: PropTypes.oneOfType([customPropTypes.itemShorthand, customPropTypes.collectionShorthand]),
icon: customPropTypes.shorthandAllowingChildren,
header: customPropTypes.itemShorthand,
attached: PropTypes.oneOf([true, false, 'top', 'bottom']),
fitted: PropTypes.bool,
danger: PropTypes.bool,
defaultVisible: PropTypes.bool,
dismissible: PropTypes.bool,
dismissAction: customPropTypes.shorthandAllowingChildren,
info: PropTypes.bool,
onVisibleChange: PropTypes.func,
onFocus: PropTypes.func,
success: PropTypes.bool,
visible: PropTypes.bool,
warning: PropTypes.bool,
body: customPropTypes.shorthandAllowingChildren
});
Alert.displayName = 'Alert';
Alert.handledProps = Object.keys(Alert.propTypes);
Alert.create = (0, _utils.createShorthandFactory)({
Component: Alert
});
Alert.DismissAction = _AlertDismissAction.AlertDismissAction;
//# sourceMappingURL=Alert.js.map