@fluentui/react-northstar
Version:
A themable React component library.
212 lines (210 loc) • 7.49 kB
JavaScript
import _invoke from "lodash/invoke";
import _uniqueId from "lodash/uniqueId";
import { alertBehavior } from '@fluentui/accessibility';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { commonPropTypes, childrenExist, createShorthandFactory } from '../../utils';
import { Box } from '../Box/Box';
import { Text } from '../Text/Text';
import { ButtonGroup } from '../Button/ButtonGroup';
import { AlertDismissAction } from './AlertDismissAction';
import { useAccessibility, getElementType, useStyles, useTelemetry, useFluentContext, useUnhandledProps, useAutoControlled } from '@fluentui/react-bindings';
export var alertClassName = 'ui-alert';
export 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.
*/
export var Alert = /*#__PURE__*/function () {
var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = useFluentContext();
var _useTelemetry = 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 = useAutoControlled({
defaultValue: props.defaultVisible,
value: props.visible,
initialValue: true
}),
visible = _useAutoControlled[0],
setVisible = _useAutoControlled[1];
var _React$useState = React.useState(_uniqueId('alert-body-')),
bodyId = _React$useState[0];
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(Alert.handledProps, props);
var getA11yProps = useAccessibility(props.accessibility, {
debugName: Alert.displayName,
mapPropsToBehavior: function mapPropsToBehavior() {
return {
warning: warning,
danger: danger,
bodyId: bodyId,
visible: visible
};
},
rtl: context.rtl
});
var _useStyles = 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) {
_invoke(predefinedProps, 'onClick', e, buttonProps);
_invoke(props, 'onVisibleChange', e, Object.assign({}, props, {
visible: false
}));
setVisible(false);
}
};
};
var handleFocus = function handleFocus(e) {
_invoke(props, 'onFocus', e, props);
};
var renderContent = function renderContent() {
var bodyContent = /*#__PURE__*/React.createElement(React.Fragment, null, Text.create(header, {
defaultProps: function defaultProps() {
return getA11yProps('header', {
className: alertSlotClassNames.header,
styles: resolvedStyles.header
});
}
}), Box.create(content, {
defaultProps: function defaultProps() {
return getA11yProps('content', {
className: alertSlotClassNames.content,
styles: resolvedStyles.content
});
}
}));
return /*#__PURE__*/React.createElement(React.Fragment, null, Box.create(icon, {
defaultProps: function defaultProps() {
return getA11yProps('icon', {
className: alertSlotClassNames.icon,
styles: resolvedStyles.icon
});
}
}), Box.create(body, {
defaultProps: function defaultProps() {
return getA11yProps('body', {
className: alertSlotClassNames.body,
styles: resolvedStyles.body,
id: bodyId
});
},
overrideProps: {
children: bodyContent
}
}), ButtonGroup.create(actions, {
defaultProps: function defaultProps() {
return getA11yProps('actions', {
className: alertSlotClassNames.actions,
styles: resolvedStyles.actions
});
}
}), dismissible && 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)), childrenExist(children) ? children : renderContent()));
setEnd();
return element;
});
Alert.defaultProps = {
accessibility: alertBehavior,
dismissAction: {},
body: {}
};
Alert.propTypes = Object.assign({}, 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 = createShorthandFactory({
Component: Alert
});
Alert.DismissAction = AlertDismissAction;
return Alert;
}();
//# sourceMappingURL=Alert.js.map