Skip to content

Commit

Permalink
[UIE-120] Replaced idContainers with useUniqueId. (#4609)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evrii
evrii authored Jan 26, 2024
1 parent 2e048e6 commit 90804b8
Showing 1 changed file with 122 additions and 127 deletions.
249 changes: 122 additions & 127 deletions src/libs/notifications.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { ButtonPrimary, Clickable, icon, Link, Modal, useThemeFromContext } from '@terra-ui-packages/components';
import { ButtonPrimary, Clickable, icon, Link, Modal, useThemeFromContext, useUniqueId } from '@terra-ui-packages/components';
import { DEFAULT, switchCase } from '@terra-ui-packages/core-utils';
import _ from 'lodash/fp';
import { useState } from 'react';
import { div, h } from 'react-hyperscript-helpers';
import { Store } from 'react-notifications-component';
import { IdContainer } from 'src/components/common';
import ErrorView from 'src/components/ErrorView';
import { getLocalPref, setLocalPref } from 'src/libs/prefs';
import { useStore } from 'src/libs/react-utils';
Expand Down Expand Up @@ -74,134 +73,130 @@ const NotificationDisplay = ({ id }) => {
[DEFAULT, () => [colors.accent, 'notification']]
);
const iconType = switchCase(type, ['success', () => 'success-standard'], ['warn', () => 'warning-standard'], ['error', () => 'error-standard']);
const labelId = useUniqueId();
const descId = useUniqueId();

return h(IdContainer, [
(labelId) =>
h(IdContainer, [
(descId) =>
div(
{
style: {
backgroundColor: baseColor(0.15),
borderRadius: '4px',
boxShadow: '0 0 4px 0 rgba(0,0,0,0.5)',
cursor: 'auto',
display: 'flex',
flexDirection: 'column',
fontSize: 12,
},
role: 'alert',
'aria-labelledby': labelId,
'aria-describedby': message ? descId : undefined,
},
[
// content and close button
div({ style: { display: 'flex', padding: '0.75rem 1rem' } }, [
// content
div({ style: { display: 'flex', flex: 1, flexDirection: 'column', overflow: 'hidden' } }, [
// icon and title
div({ style: { display: 'flex' } }, [
!!iconType &&
icon(iconType, {
'aria-hidden': false,
'aria-label': ariaLabel,
size: 26,
style: { color: baseColor(), flexShrink: 0, marginRight: '0.5rem' },
}),
div({ id: labelId, style: { fontWeight: 600, overflow: 'hidden', overflowWrap: 'break-word' } }, [title]),
]),
!!message && div({ id: descId, style: { marginTop: '0.5rem', overflowWrap: 'break-word' } }, [message]),
div({ style: { display: 'flex' } }, [
!!detail &&
h(
Clickable,
{
style: { marginTop: '0.25rem', marginRight: '0.5rem', textDecoration: 'underline' },
onClick: () => setModal(true),
},
['Details']
),
!!action &&
h(
Clickable,
{
style: { marginTop: '0.25rem', textDecoration: 'underline' },
onClick: () => {
action.callback();
Store.removeNotification(id);
},
},
[action.label]
),
]),
]),
h(
Link,
{
style: { alignSelf: 'start' },
'aria-label': type ? `Dismiss ${type} notification` : 'Dismiss notification',
title: 'Dismiss notification',
onClick: () => {
Store.removeNotification(id);
onDismiss?.();
},
},
[icon('times', { size: 20 })]
),
]),
notifications.length > 1 &&
div(
{
style: { alignItems: 'center', borderTop: `1px solid ${baseColor()}`, display: 'flex', fontSize: 10, padding: '0.75rem 1rem' },
return div(
{
style: {
backgroundColor: baseColor(0.15),
borderRadius: '4px',
boxShadow: '0 0 4px 0 rgba(0,0,0,0.5)',
cursor: 'auto',
display: 'flex',
flexDirection: 'column',
fontSize: 12,
},
role: 'alert',
'aria-labelledby': labelId,
'aria-describedby': message ? descId : undefined,
},
[
// content and close button
div({ style: { display: 'flex', padding: '0.75rem 1rem' } }, [
// content
div({ style: { display: 'flex', flex: 1, flexDirection: 'column', overflow: 'hidden' } }, [
// icon and title
div({ style: { display: 'flex' } }, [
!!iconType &&
icon(iconType, {
'aria-hidden': false,
'aria-label': ariaLabel,
size: 26,
style: { color: baseColor(), flexShrink: 0, marginRight: '0.5rem' },
}),
div({ id: labelId, style: { fontWeight: 600, overflow: 'hidden', overflowWrap: 'break-word' } }, [title]),
]),
!!message && div({ id: descId, style: { marginTop: '0.5rem', overflowWrap: 'break-word' } }, [message]),
div({ style: { display: 'flex' } }, [
!!detail &&
h(
Clickable,
{
style: { marginTop: '0.25rem', marginRight: '0.5rem', textDecoration: 'underline' },
onClick: () => setModal(true),
},
['Details']
),
!!action &&
h(
Clickable,
{
style: { marginTop: '0.25rem', textDecoration: 'underline' },
onClick: () => {
action.callback();
Store.removeNotification(id);
},
[
h(
Link,
{
disabled: onFirst,
onClick: () => setNotificationNumber(notificationNumber - 1),
},
[icon('angle-left', { size: 12 })]
),
div(
{
style: {
backgroundColor: colors.accent(),
color: 'white',
fontWeight: 600,
borderRadius: 10,
padding: '0.2rem 0.5rem',
},
},
[notificationNumber + 1, '/', notifications.length]
),
h(
Link,
{
disabled: onLast,
onClick: () => setNotificationNumber(notificationNumber + 1),
},
[icon('angle-right', { size: 12 })]
),
]
),
modal &&
h(
Modal,
{
width: 800,
title,
showCancel: false,
showX: true,
onDismiss: () => setModal(false),
okButton: h(ButtonPrimary, { onClick: refreshPage }, 'Refresh Page'),
},
[h(ErrorView, { error: detail })]
),
]
),
},
[action.label]
),
]),
]),
h(
Link,
{
style: { alignSelf: 'start' },
'aria-label': type ? `Dismiss ${type} notification` : 'Dismiss notification',
title: 'Dismiss notification',
onClick: () => {
Store.removeNotification(id);
onDismiss?.();
},
},
[icon('times', { size: 20 })]
),
]),
]);
notifications.length > 1 &&
div(
{
style: { alignItems: 'center', borderTop: `1px solid ${baseColor()}`, display: 'flex', fontSize: 10, padding: '0.75rem 1rem' },
},
[
h(
Link,
{
disabled: onFirst,
onClick: () => setNotificationNumber(notificationNumber - 1),
},
[icon('angle-left', { size: 12 })]
),
div(
{
style: {
backgroundColor: colors.accent(),
color: 'white',
fontWeight: 600,
borderRadius: 10,
padding: '0.2rem 0.5rem',
},
},
[notificationNumber + 1, '/', notifications.length]
),
h(
Link,
{
disabled: onLast,
onClick: () => setNotificationNumber(notificationNumber + 1),
},
[icon('angle-right', { size: 12 })]
),
]
),
modal &&
h(
Modal,
{
width: 800,
title,
showCancel: false,
showX: true,
onDismiss: () => setModal(false),
okButton: h(ButtonPrimary, { onClick: refreshPage }, 'Refresh Page'),
},
[h(ErrorView, { error: detail })]
),
]
);
};

const refreshPage = () => {
Expand Down

0 comments on commit 90804b8

Please sign in to comment.