| 1 | {"version":3,"file":"TeachingBubbleContent.base.js","sourceRoot":"../src/","sources":["components/TeachingBubble/TeachingBubbleContent.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { initializeComponentRef, classNamesFunction, KeyCodes } from '../../Utilities';\nimport { ITeachingBubbleProps, ITeachingBubbleStyleProps, ITeachingBubbleStyles } from './TeachingBubble.types';\nimport { ITeachingBubbleState } from './TeachingBubble.base';\nimport { PrimaryButton, DefaultButton, IconButton } from '../../Button';\nimport { Image } from '../../Image';\nimport { Stack } from '../../Stack';\nimport { FocusTrapZone } from '../../FocusTrapZone';\n\nconst getClassNames = classNamesFunction<ITeachingBubbleStyleProps, ITeachingBubbleStyles>();\n\nexport class TeachingBubbleContentBase extends React.Component<ITeachingBubbleProps, ITeachingBubbleState> {\n public rootElement = React.createRef<HTMLDivElement>();\n\n constructor(props: ITeachingBubbleProps) {\n super(props);\n\n initializeComponentRef(this);\n this.state = {};\n }\n\n public componentDidMount(): void {\n if (this.props.onDismiss) {\n document.addEventListener('keydown', this._onKeyDown, false);\n }\n }\n\n public componentWillUnmount(): void {\n if (this.props.onDismiss) {\n document.removeEventListener('keydown', this._onKeyDown);\n }\n }\n\n public focus(): void {\n if (this.rootElement.current) {\n this.rootElement.current.focus();\n }\n }\n\n public render(): JSX.Element {\n const {\n children,\n illustrationImage,\n primaryButtonProps,\n secondaryButtonProps,\n headline,\n hasCondensedHeadline,\n // eslint-disable-next-line deprecation/deprecation\n hasCloseButton = this.props.hasCloseIcon,\n onDismiss,\n closeButtonAriaLabel,\n hasSmallHeadline,\n isWide,\n styles,\n theme,\n ariaDescribedBy,\n ariaLabelledBy,\n footerContent: customFooterContent,\n focusTrapZoneProps,\n } = this.props;\n\n let imageContent;\n let headerContent;\n let bodyContent;\n let footerContent;\n let closeButton;\n\n const classNames = getClassNames(styles, {\n theme: theme!,\n hasCondensedHeadline,\n hasSmallHeadline,\n hasCloseButton,\n hasHeadline: !!headline,\n isWide,\n primaryButtonClassName: primaryButtonProps ? primaryButtonProps.className : undefined,\n secondaryButtonClassName: secondaryButtonProps ? secondaryButtonProps.className : undefined,\n });\n\n if (illustrationImage && illustrationImage.src) {\n imageContent = (\n <div className={classNames.imageContent}>\n <Image {...(illustrationImage as any)} />\n </div>\n );\n }\n\n if (headline) {\n const HeaderWrapperAs = typeof headline === 'string' ? 'p' : 'div';\n\n headerContent = (\n <div className={classNames.header}>\n <HeaderWrapperAs role=\"heading\" aria-level={3} className={classNames.headline} id={ariaLabelledBy}>\n {headline}\n </HeaderWrapperAs>\n </div>\n );\n }\n\n if (children) {\n const BodyContentWrapperAs = typeof children === 'string' ? 'p' : 'div';\n\n bodyContent = (\n <div className={classNames.body}>\n <BodyContentWrapperAs className={classNames.subText} id={ariaDescribedBy}>\n {children}\n </BodyContentWrapperAs>\n </div>\n );\n }\n\n if (primaryButtonProps || secondaryButtonProps || customFooterContent) {\n footerContent = (\n <Stack className={classNames.footer} horizontal horizontalAlign={customFooterContent ? 'space-between' : 'end'}>\n <Stack.Item align=\"center\">{<span>{customFooterContent}</span>}</Stack.Item>\n <Stack.Item>\n {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} className={classNames.secondaryButton} />}\n {primaryButtonProps && <PrimaryButton {...primaryButtonProps} className={classNames.primaryButton} />}\n </Stack.Item>\n </Stack>\n );\n }\n\n if (hasCloseButton) {\n closeButton = (\n <IconButton\n className={classNames.closeButton}\n iconProps={{ iconName: 'Cancel' }}\n title={closeButtonAriaLabel}\n ariaLabel={closeButtonAriaLabel}\n onClick={onDismiss}\n />\n );\n }\n\n return (\n <div\n className={classNames.content}\n ref={this.rootElement}\n role={'dialog'}\n tabIndex={-1}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n data-is-focusable={true}\n >\n {imageContent}\n <FocusTrapZone isClickableOutsideFocusTrap={true} {...focusTrapZoneProps}>\n <div className={classNames.bodyContent}>\n {headerContent}\n {bodyContent}\n {footerContent}\n {closeButton}\n </div>\n </FocusTrapZone>\n </div>\n );\n }\n\n private _onKeyDown = (e: any): void => {\n if (this.props.onDismiss) {\n if (e.which === KeyCodes.escape) {\n this.props.onDismiss();\n }\n }\n };\n}\n"]} |