Related #4602 - For Toast

primefaces · Aug 4, 2023 · 3e0fa14 · 3e0fa14
1 parent f0a402e
commit 3e0fa14
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 131 deletions.
diff --git a/components/lib/toast/Toast.css b/components/lib/toast/Toast.css
diff --git 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
@@ -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
@@ -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,23 +143,23 @@ export const ToastMessage = React.memo(
 
                 const textProps = mergeProps(
                     {
-                        className: 'p-toast-message-text'
+                        className: cx('message.text')
                     },
                     ptm('text', parentParams),
                     ptmo(pt, 'text', params)
                 );
 
                 const summaryProps = mergeProps(
                     {
-                        className: 'p-toast-summary'
+                        className: cx('message.summary')
                     },
                     ptm('summary', parentParams),
                     ptmo(pt, 'summary', params)
                 );
 
                 const detailProps = mergeProps(
                     {
-                        className: 'p-toast-detail'
+                        className: cx('message.detail')
                     },
                     ptm('detail', parentParams),
                     ptmo(pt, 'detail', params)
@@ -183,21 +181,14 @@ 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();
 
         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
@@ -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
@@ -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";