@fluentui/react-northstar
Version:
A themable React component library.
98 lines (96 loc) • 3.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as customPropTypes from '@fluentui/react-proptypes';
import * as React from 'react';
import { childrenExist, commonPropTypes, rtlTextContainer, createShorthandFactory } from '../../utils';
import { Box } from '../Box/Box';
import { ReactionGroup } from './ReactionGroup';
import { useTelemetry, useFluentContext, getElementType, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings';
export var reactionClassName = 'ui-reaction';
export var reactionSlotClassNames = {
icon: reactionClassName + "__icon",
content: reactionClassName + "__content"
};
/**
* A Reaction indicates user's emotion or perception.
* Used to display user's reaction for entity in Chat (e.g. message).
*/
export var Reaction = /*#__PURE__*/function () {
var Reaction = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(Reaction.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var children = props.children,
icon = props.icon,
content = props.content,
className = props.className,
design = props.design,
styles = props.styles,
variables = props.variables;
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(Reaction.handledProps, props);
var getA11yProps = useAccessibility(props.accessibility, {
debugName: Reaction.displayName,
rtl: context.rtl
});
var _useStyles = useStyles(Reaction.displayName, {
className: reactionClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
hasContent: !!content
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes,
resolvedStyles = _useStyles.styles;
var element = /*#__PURE__*/React.createElement(ElementType, _extends({}, getA11yProps('root', Object.assign({
className: classes.root,
ref: ref
}, unhandledProps)), rtlTextContainer.getAttributes({
forElements: [children]
})), childrenExist(children) ? children : /*#__PURE__*/React.createElement(React.Fragment, null, Box.create(icon, {
defaultProps: function defaultProps() {
return getA11yProps('icon', {
className: reactionSlotClassNames.icon,
styles: resolvedStyles.icon
});
}
}), Box.create(content, {
defaultProps: function defaultProps() {
return getA11yProps('content', {
className: reactionSlotClassNames.content,
styles: resolvedStyles.content
});
}
})));
setEnd();
return element;
});
Reaction.displayName = 'Reaction';
Reaction.propTypes = Object.assign({}, commonPropTypes.createCommon({
content: 'shorthand'
}), {
icon: customPropTypes.shorthandAllowingChildren
});
Reaction.defaultProps = {
as: 'span'
};
Reaction.handledProps = Object.keys(Reaction.propTypes);
Reaction.Group = ReactionGroup;
Reaction.create = createShorthandFactory({
Component: Reaction,
mappedProp: 'content'
});
return Reaction;
}();
//# sourceMappingURL=Reaction.js.map