From 3e0fa141f445bc547c2cb2047018fbfc055da7cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Fri, 4 Aug 2023 11:24:10 +0300 Subject: [PATCH] Related #4602 - For Toast --- components/lib/toast/Toast.css | 106 ------------------------ components/lib/toast/Toast.js | 12 ++- components/lib/toast/ToastBase.js | 115 +++++++++++++++++++++++++++ components/lib/toast/ToastMessage.js | 25 ++---- components/lib/toast/toast.d.ts | 5 ++ styles/primereact.css | 1 - 6 files changed, 133 insertions(+), 131 deletions(-) delete mode 100644 components/lib/toast/Toast.css diff --git a/components/lib/toast/Toast.css b/components/lib/toast/Toast.css deleted file mode 100644 index cd437efb91..0000000000 --- a/components/lib/toast/Toast.css +++ /dev/null @@ -1,106 +0,0 @@ -.p-toast { - position: fixed; - width: calc(100% - var(--toast-indent, 0px)); - max-width: 25rem; -} - -.p-toast-message-content { - display: flex; - align-items: flex-start; -} - -.p-toast-message-text { - flex: 1 1 auto; -} - -.p-toast-summary { - overflow-wrap: anywhere; -} - -.p-toast-detail { - overflow-wrap: anywhere; -} - -.p-toast-top-right { - --toast-indent: 20px; - top: 20px; - right: 20px; -} - -.p-toast-top-left { - --toast-indent: 20px; - top: 20px; - left: 20px; -} - -.p-toast-bottom-left { - --toast-indent: 20px; - bottom: 20px; - left: 20px; -} - -.p-toast-bottom-right { - --toast-indent: 20px; - bottom: 20px; - right: 20px; -} - -.p-toast-top-center { - top: 20px; - left: 50%; - transform: translateX(-50%); -} - -.p-toast-bottom-center { - bottom: 20px; - left: 50%; - transform: translateX(-50%); -} - -.p-toast-center { - left: 50%; - top: 50%; - min-width: 20vw; - transform: translate(-50%, -50%); -} - -.p-toast-icon-close { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -.p-toast-icon-close.p-link { - cursor: pointer; -} - -/* Animations */ -.p-toast-message-enter { - opacity: 0; - transform: translateY(50%); -} - -.p-toast-message-enter-active { - opacity: 1; - transform: translateY(0); - transition: transform 0.3s, opacity 0.3s; -} - -.p-toast-message-enter-done { - transform: none; -} - -.p-toast-message-exit { - opacity: 1; - max-height: 1000px; -} - -.p-toast .p-toast-message.p-toast-message-exit-active { - opacity: 0; - max-height: 0; - margin-bottom: 0; - overflow: hidden; - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; -} diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js index 5250d113cd..e6fdcd8d46 100644 --- a/components/lib/toast/Toast.js +++ b/components/lib/toast/Toast.js @@ -8,6 +8,7 @@ import { ZIndexUtils, classNames, mergeProps } from '../utils/Utils'; import { ToastBase } from './ToastBase'; import { ToastMessage } from './ToastMessage'; import PrimeReact from '../api/Api'; +import { useHandleStyle } from '../componentbase/ComponentBase'; let messageIdx = 0; @@ -28,6 +29,8 @@ export const Toast = React.memo( const ptCallbacks = ToastBase.setMetaData(metaData); + useHandleStyle(ToastBase.css.styles, ptCallbacks.isUnstyled, { name: 'toast' }); + const show = (messageInfo) => { if (messageInfo) { setMessagesState((prev) => assignIdentifiers(prev, messageInfo, true)); @@ -109,17 +112,12 @@ export const Toast = React.memo( })); const createElement = () => { - const className = classNames('p-toast p-component p-toast-' + props.position, props.className, { - 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', - 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false - }); - const rootProps = mergeProps( { ref: containerRef, id: props.id, - className, - style: props.style + className: ptCallbacks.cx('root', { context }), + style: ptCallbacks.sx('root') }, ToastBase.getOtherProps(props), ptCallbacks.ptm('root') diff --git a/components/lib/toast/ToastBase.js b/components/lib/toast/ToastBase.js index d56e357d9e..c9043832d7 100644 --- a/components/lib/toast/ToastBase.js +++ b/components/lib/toast/ToastBase.js @@ -1,4 +1,114 @@ +import PrimeReact from '../api/Api'; import { ComponentBase } from '../componentbase/ComponentBase'; +import { classNames } from '../utils/Utils'; + +const styles = ` +.p-toast { + width: calc(100% - var(--toast-indent, 0px)); + max-width: 25rem; +} + +.p-toast-message-content { + display: flex; + align-items: flex-start; +} + +.p-toast-message-text { + flex: 1 1 auto; +} + +.p-toast-summary { + overflow-wrap: anywhere; +} + +.p-toast-detail { + overflow-wrap: anywhere; +} + +.p-toast-top-center { + transform: translateX(-50%); +} + +.p-toast-bottom-center { + transform: translateX(-50%); +} + +.p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); +} + +.p-toast-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; +} + +.p-toast-icon-close.p-link { + cursor: pointer; +} + +/* Animations */ +.p-toast-message-enter { + opacity: 0; + transform: translateY(50%); +} + +.p-toast-message-enter-active { + opacity: 1; + transform: translateY(0); + transition: transform 0.3s, opacity 0.3s; +} + +.p-toast-message-enter-done { + transform: none; +} + +.p-toast-message-exit { + opacity: 1; + max-height: 1000px; +} + +.p-toast .p-toast-message.p-toast-message-exit-active { + opacity: 0; + max-height: 0; + margin-bottom: 0; + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; +} +`; + +const classes = { + root: ({ props, context }) => + classNames('p-toast p-component p-toast-' + props.position, props.className, { + 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', + 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false + }), + message: { + message: ({ severity }) => + classNames('p-toast-message', { + [`p-toast-message-${severity}`]: severity + }), + buttonicon: 'p-toast-icon-close-icon', + button: 'p-toast-icon-close p-link', + icon: 'p-toast-message-icon', + text: 'p-toast-message-text', + summary: 'p-toast-summary', + detail: 'p-toast-detail' + } +}; + +const inlineStyles = { + root: ({ props }) => ({ + position: 'fixed', + top: props.position === 'top-right' || props.position === 'top-left' || props.position === 'top-center' ? '20px' : props.position === 'center' ? '50%' : null, + right: (props.position === 'top-right' || props.position === 'bottom-right') && '20px', + bottom: (props.position === 'bottom-left' || props.position === 'bottom-right' || props.position === 'bottom-center') && '20px', + left: props.position === 'top-left' || props.position === 'bottom-left' ? '20px' : props.position === 'center' || props.position === 'top-center' || props.position === 'bottom-center' ? '50%' : null + }) +}; export const ToastBase = ComponentBase.extend({ defaultProps: { @@ -17,5 +127,10 @@ export const ToastBase = ComponentBase.extend({ onMouseEnter: null, onMouseLeave: null, children: undefined + }, + css: { + classes, + styles, + inlineStyles } }); diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js index 9400d8541a..2ac04c798b 100644 --- a/components/lib/toast/ToastMessage.js +++ b/components/lib/toast/ToastMessage.js @@ -14,7 +14,7 @@ export const ToastMessage = React.memo( const { messageInfo, metaData: parentMetaData, - ptCallbacks: { ptm, ptmo }, + ptCallbacks: { ptm, ptmo, cx }, index } = props; const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle, icon: _icon, closeIcon: _closeIcon, pt } = messageInfo.message; @@ -70,10 +70,9 @@ export const ToastMessage = React.memo( }; const createCloseIcon = () => { - const iconClassName = 'p-toast-icon-close-icon'; const buttonIconProps = mergeProps( { - className: iconClassName + className: cx('message.buttonicon') }, ptm('buttonicon', parentParams), ptmo(pt, 'buttonicon', params) @@ -86,7 +85,7 @@ export const ToastMessage = React.memo( const buttonProps = mergeProps( { type: 'button', - className: 'p-toast-icon-close p-link', + className: cx('message.button'), onClick: onClose, 'aria-label': ariaLabel }, @@ -111,10 +110,9 @@ export const ToastMessage = React.memo( const createMessage = () => { if (messageInfo) { const contentEl = ObjectUtils.getJSXElement(content, { message: messageInfo.message, onClick, onClose }); - const iconClassName = 'p-toast-message-icon'; const iconProps = mergeProps( { - className: iconClassName + className: cx('message.icon') }, ptm('icon', parentParams), ptmo(pt, 'icon', params) @@ -145,7 +143,7 @@ export const ToastMessage = React.memo( const textProps = mergeProps( { - className: 'p-toast-message-text' + className: cx('message.text') }, ptm('text', parentParams), ptmo(pt, 'text', params) @@ -153,7 +151,7 @@ export const ToastMessage = React.memo( const summaryProps = mergeProps( { - className: 'p-toast-summary' + className: cx('message.summary') }, ptm('summary', parentParams), ptmo(pt, 'summary', params) @@ -161,7 +159,7 @@ export const ToastMessage = React.memo( const detailProps = mergeProps( { - className: 'p-toast-detail' + className: cx('message.detail') }, ptm('detail', parentParams), ptmo(pt, 'detail', params) @@ -183,13 +181,6 @@ export const ToastMessage = React.memo( return null; }; - const className = classNames( - 'p-toast-message', - { - [`p-toast-message-${severity}`]: severity - }, - _className - ); const contentClassName = classNames('p-toast-message-content', _contentClassName); const message = createMessage(); const closeIcon = createCloseIcon(); @@ -197,7 +188,7 @@ export const ToastMessage = React.memo( const messageProps = mergeProps( { ref, - className, + className: classNames(_className, cx('message.message', { severity })), style, role: 'alert', 'aria-live': 'assertive', diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts index e053ae5be7..27e84bff14 100644 --- a/components/lib/toast/toast.d.ts +++ b/components/lib/toast/toast.d.ts @@ -107,6 +107,11 @@ export interface ToastMessageOptions { * @type {ToastPassThroughOptions} */ pt?: ToastPassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; } /** diff --git a/styles/primereact.css b/styles/primereact.css index 5b296feb87..a63960c999 100644 --- a/styles/primereact.css +++ b/styles/primereact.css @@ -1,7 +1,6 @@ @import "../components/lib/common/Common.css"; @import "../components/lib/iconbase/IconBase.css"; @import "../components/lib/datatable/DataTable.css"; -@import "../components/lib/toast/Toast.css"; @import "../components/lib/tooltip/Tooltip.css"; @import "../components/lib/treetable/TreeTable.css"; @import "../components/lib/ripple/Ripple.css";