fix(Notifications): added errorTitle and emptyTitle props (#136)

gravity-ui · Jan 30, 2024 · 4024223 · 4024223
1 parent 5684bf6
commit 4024223
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/src/components/Notifications/Notifications.tsx b/src/components/Notifications/Notifications.tsx
@@ -36,9 +36,21 @@ export const Notifications = React.memo(function Notifications(props: Notificati
             </InfiniteScroll>
         );
     } else if (props.errorContent) {
-        content = <NotificationsErrorState image={props.errorImage} content={props.errorContent} />;
+        content = (
+            <NotificationsErrorState
+                image={props.errorImage}
+                title={props.errorTitle}
+                content={props.errorContent}
+            />
+        );
     } else {
-        content = <NotificationsEmptyState image={props.emptyImage} content={props.emptyContent} />;
+        content = (
+            <NotificationsEmptyState
+                image={props.emptyImage}
+                title={props.emptyTitle}
+                content={props.emptyContent}
+            />
+        );
     }
 
     return (

diff --git a/src/components/Notifications/NotificationsEmptyState.tsx b/src/components/Notifications/NotificationsEmptyState.tsx
@@ -12,14 +12,14 @@ const b = block('notifications');
 
 const nothingFoundSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="172" height="172" fill="none"><path d="M0 0h172v172H0z"/><path fill="#ECF2F9" fill-rule="evenodd" d="M138.82 73.223c4.092-6.182 6.138-14.192 6.138-24.074 0-14.975-5.094-26.947-15.367-35.784C119.404 4.44 102.165 0 83.141 0c-5.703 0-10.492.392-15.15 1.175-4.658.784-8.75 1.698-12.276 2.743-2.351.697-7.01 2.481-10.144 3.744-1.785.74-3.003 2.612-3.003 4.702v17.195c0 3.57 3.395 6.008 6.486 4.571.268-.12.53-.24.786-.356 1.03-.468 1.938-.88 2.566-1.124 2.481-1.001 5.398-1.828 8.75-2.525 3.352-.697 7.096-1.045 11.188-1.045 9.665 0 18.763 2.177 22.768 6.487 4.005 4.353 6.008 9.795 6.008 16.325 0 5.659-1.176 10.491-3.57 14.453-2.394 3.961-5.703 7.836-9.969 11.536a438.068 438.068 0 0 0-9.577 8.62 48.083 48.083 0 0 0-7.619 9.011c-2.133 3.265-3.787 6.965-4.919 11.014-.697 2.438-1.175 8.837-1.437 13.495-.13 2.874 1.96 5.311 4.659 5.311h22.289c2.35 0 4.353-1.915 4.614-4.44.261-2.481.87-5.442 2.394-7.749 1.742-2.568 3.788-5.137 6.4-7.531 2.612-2.395 5.659-4.789 9.098-7.27 3.483-2.438 7.053-5.268 10.84-8.446 5.572-4.963 10.405-10.491 14.497-16.673Zm-72.963 92.595c3.918 4.136 8.75 6.182 14.54 6.182a18.59 18.59 0 0 0 7.923-1.741c2.526-1.132 4.746-2.612 6.618-4.484 1.871-1.872 3.352-4.092 4.44-6.617 1.088-2.525 1.611-5.268 1.611-8.272 0-2.96-.523-5.746-1.611-8.271a22.497 22.497 0 0 0-4.44-6.704c-1.872-1.959-4.093-3.439-6.618-4.484a20.57 20.57 0 0 0-7.922-1.567c-5.79 0-10.623 2.002-14.54 6.051-3.919 4.048-5.878 9.055-5.878 15.019 0 5.833 1.96 10.796 5.877 14.888Z" clip-rule="evenodd"/><path stroke="#00E6C5" stroke-dasharray="5.75 5.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M98.16 153.586H13.923c-4.353 0-7.923-3.57-7.923-7.923V91.072c0-4.354 3.57-7.923 7.923-7.923H98.16c4.353 0 7.923 3.57 7.923 7.923v54.591c0 4.396-3.57 7.923-7.923 7.923Z" clip-rule="evenodd"/><path fill="#2EE5C0" d="M15.675 93.167a1.792 1.792 0 1 0 0-3.584 1.792 1.792 0 0 0 0 3.584ZM21.408 93.167a1.792 1.792 0 1 0 0-3.583 1.792 1.792 0 0 0 0 3.583ZM27.142 93.167a1.792 1.792 0 1 0 0-3.584 1.792 1.792 0 0 0 0 3.584Z"/><path stroke="#00E6C5" stroke-dasharray="5.75 5.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.583 99.259h96.034"/><path fill="#027BF3" d="m136.078 115.189-94.424 5.224c-3.178.174-5.79-2.263-5.79-5.441V42.097c0-3.178 2.612-5.616 5.79-5.442l94.424 5.224c2.437.13 4.396 2.482 4.396 5.224v62.862c0 2.743-1.959 5.094-4.396 5.224Z"/><path fill="#fff" fill-rule="evenodd" d="M44.397 46.885c1.48.087 2.655-1.044 2.655-2.524s-1.175-2.743-2.655-2.787A2.504 2.504 0 0 0 41.74 44.1c0 1.48 1.175 2.743 2.656 2.786Zm8.619.349a2.52 2.52 0 0 0 2.612-2.525c0-1.437-1.175-2.656-2.612-2.743a2.52 2.52 0 0 0-2.612 2.525c0 1.437 1.175 2.7 2.612 2.743Zm10.97-2.134c0 1.437-1.131 2.569-2.524 2.482-1.394-.044-2.569-1.263-2.569-2.7 0-1.436 1.132-2.568 2.569-2.48 1.392.043 2.524 1.262 2.524 2.698Zm27.918 28.097 7.034-7.782 6.408 7.112-6.96 7.782 6.96 7.633-6.408 7.26-7.034-7.632-7.144 8.005-6.666-7.112 7.218-8.005-7.218-7.82 6.666-7.26 7.144 7.819Z" clip-rule="evenodd"/><path fill="#67B0F8" d="M147.57 49.019c0-12.364-9.446-16.151-14.583-16.5-.044 0-14.584 1.002-14.584 19.721 0 11.101 9.229 19.808 20.025 19.416 3.396-.13 6.487-1.132 9.142-2.786V49.019Z"/><path fill="#FF4645" d="M170.686 85.195c-1.262 1.48-3.308 1.61-4.571.348l-16.804-16.978 4.92-5.31 16.455 16.977c1.263 1.306 1.263 3.483 0 4.963Z"/><path fill="#D93654" d="m154.274 63.297-4.92 5.311 1.611 1.611c.827.827 2.133.87 2.96.087.479-.435.958-.914 1.393-1.393.262-.305.566-.61.828-.914a2.14 2.14 0 0 0-.131-2.873l-1.741-1.829Z"/><path fill="#00236B" fill-rule="evenodd" d="M121.537 66.998c-10.013-9.316-10.013-24.945 0-34 9.534-8.62 23.987-7.4 32.389 1.872 8.01 8.881 8.01 22.507 0 31.17-8.402 9.055-22.855 9.839-32.389.958Zm4.092-4.702c6.791 6.53 17.326 6.182 23.552-.392 6.007-6.356 6.007-16.455 0-22.985-6.226-6.748-16.761-7.4-23.552-1.089-7.052 6.574-7.052 17.718 0 24.466Z" clip-rule="evenodd"/><path fill="#2EE5C0" d="M23.02 18.502a1 1 0 1 0-2 0h2Zm-2 3.613a1 1 0 1 0 2 0h-2Zm2 7.488a1 1 0 1 0-2 0h2Zm-2 3.874a1 1 0 1 0 2 0h-2Zm8.488-6.488a1 1 0 1 0 0-2v2Zm-3.57-2a1 1 0 0 0 0 2v-2Zm-7.793 2a1 1 0 1 0 0-2v2Zm-3.57-2a1 1 0 1 0 0 2v-2Zm6.445-6.487v3.613h2v-3.613h-2Zm0 11.1v3.875h2v-3.874h-2Zm8.488-4.613h-3.57v2h3.57v-2Zm-11.363 0h-3.57v2h3.57v-2Z"/></svg>`;
 
-type Props = {image?: React.ReactNode; content: React.ReactNode};
+type Props = {image?: React.ReactNode; title?: React.ReactNode; content?: React.ReactNode};
 
 export const NotificationsEmptyState = React.memo(function NotificationsEmptyState(props: Props) {
     return (
         <div className={b('empty')}>
             {props.image ? props.image : <Icon data={nothingFoundSvg} size={172} />}
             <div className={b('empty-message')}>
-                <div className={b('empty-title')}>{i18n('no-notifications')}</div>
+                <div className={b('empty-title')}>{props.title || i18n('no-notifications')}</div>
                 {props.content ? (
                     <div className={b('empty-message-content')}>{props.content}</div>
                 ) : null}