UNPKG

@wordpress/components

Version:
8 lines (7 loc) 7.77 kB
{ "version": 3, "sources": ["../../src/snackbar/index.tsx"], "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 6000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n useEffect(() => {\n if (spokenMessage) {\n speak(spokenMessage, politeness);\n }\n }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n className,\n children,\n spokenMessage = children,\n politeness = 'polite',\n actions = [],\n onRemove,\n icon = null,\n explicitDismiss = false,\n // onDismiss is a callback executed when the snackbar is dismissed.\n // It is distinct from onRemove, which _looks_ like a callback but is\n // actually the function to call to remove the snackbar from the UI.\n onDismiss,\n listRef\n}, ref) {\n function dismissMe(event) {\n if (event && event.preventDefault) {\n event.preventDefault();\n }\n\n // Prevent focus loss by moving it to the list element.\n listRef?.current?.focus();\n onDismiss?.();\n onRemove?.();\n }\n function onActionClick(event, onClick) {\n event.stopPropagation();\n onRemove?.();\n if (onClick) {\n onClick(event);\n }\n }\n useSpokenMessage(spokenMessage, politeness);\n\n // The `onDismiss/onRemove` can have unstable references,\n // trigger side-effect cleanup, and reset timers.\n const callbacksRef = useRef({\n onDismiss,\n onRemove\n });\n useLayoutEffect(() => {\n callbacksRef.current = {\n onDismiss,\n onRemove\n };\n });\n useEffect(() => {\n // Only set up the timeout dismiss if we're not explicitly dismissing.\n const timeoutHandle = setTimeout(() => {\n if (!explicitDismiss) {\n callbacksRef.current.onDismiss?.();\n callbacksRef.current.onRemove?.();\n }\n }, NOTICE_TIMEOUT);\n return () => clearTimeout(timeoutHandle);\n }, [explicitDismiss]);\n const classes = clsx(className, 'components-snackbar', {\n 'components-snackbar-explicit-dismiss': !!explicitDismiss\n });\n if (actions && actions.length > 1) {\n // We need to inform developers that snackbar only accepts 1 action.\n globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n // return first element only while keeping it inside an array\n actions = [actions[0]];\n }\n const snackbarContentClassnames = clsx('components-snackbar__content', {\n 'components-snackbar__content-with-icon': !!icon\n });\n return /*#__PURE__*/_jsx(\"div\", {\n ref: ref,\n className: classes,\n onClick: !explicitDismiss ? dismissMe : undefined,\n tabIndex: 0,\n role: !explicitDismiss ? 'button' : undefined,\n onKeyPress: !explicitDismiss ? dismissMe : undefined,\n \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n \"data-testid\": \"snackbar\",\n children: /*#__PURE__*/_jsxs(\"div\", {\n className: snackbarContentClassnames,\n children: [icon && /*#__PURE__*/_jsx(\"div\", {\n className: \"components-snackbar__icon\",\n children: icon\n }), children, actions.map(({\n label,\n onClick,\n url,\n openInNewTab = false\n }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n href: url,\n onClick: event => onActionClick(event, onClick),\n className: \"components-snackbar__action\",\n children: label\n }, index) : /*#__PURE__*/_jsx(Button, {\n __next40pxDefaultSize: true,\n href: url,\n variant: \"link\",\n onClick: event => onActionClick(event, onClick),\n className: \"components-snackbar__action\",\n children: label\n }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n role: \"button\",\n \"aria-label\": __('Dismiss this notice'),\n tabIndex: 0,\n className: \"components-snackbar__dismiss-button\",\n onClick: dismissMe,\n onKeyPress: dismissMe,\n children: \"\\u2715\"\n })]\n })\n });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n * <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nSnackbar.displayName = 'Snackbar';\nexport default Snackbar;"], "mappings": "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", "names": [] }