mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
refactor: icon to icons for toasts component (#15579)
* initial commit * remove code * fix test * Update superset-frontend/src/messageToasts/components/Toast.tsx Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> * Update superset-frontend/src/messageToasts/components/Toast.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> * Update superset-frontend/src/messageToasts/components/Toast.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
parent
f67e40236d
commit
600473ff72
@ -18,6 +18,7 @@
|
|||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount } from 'enzyme';
|
import { mount } from 'enzyme';
|
||||||
|
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
|
||||||
import Toast from 'src/messageToasts/components/Toast';
|
import Toast from 'src/messageToasts/components/Toast';
|
||||||
import { act } from 'react-dom/test-utils';
|
import { act } from 'react-dom/test-utils';
|
||||||
import mockMessageToasts from '../mockMessageToasts';
|
import mockMessageToasts from '../mockMessageToasts';
|
||||||
@ -27,7 +28,11 @@ const props = {
|
|||||||
onCloseToast() {},
|
onCloseToast() {},
|
||||||
};
|
};
|
||||||
|
|
||||||
const setup = overrideProps => mount(<Toast {...props} {...overrideProps} />);
|
const setup = overrideProps =>
|
||||||
|
mount(<Toast {...props} {...overrideProps} />, {
|
||||||
|
wrappingComponent: ThemeProvider,
|
||||||
|
wrappingComponentProps: { theme: supersetTheme },
|
||||||
|
});
|
||||||
|
|
||||||
describe('Toast', () => {
|
describe('Toast', () => {
|
||||||
it('should render', () => {
|
it('should render', () => {
|
||||||
|
@ -16,11 +16,11 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import { styled } from '@superset-ui/core';
|
import { styled, css, SupersetTheme } from '@superset-ui/core';
|
||||||
import cx from 'classnames';
|
import cx from 'classnames';
|
||||||
import Interweave from 'interweave';
|
import Interweave from 'interweave';
|
||||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import Icon, { IconName } from 'src/components/Icon';
|
import Icons from 'src/components/Icons';
|
||||||
import { ToastType } from 'src/messageToasts/constants';
|
import { ToastType } from 'src/messageToasts/constants';
|
||||||
import { ToastMeta } from '../types';
|
import { ToastMeta } from '../types';
|
||||||
|
|
||||||
@ -34,8 +34,9 @@ const ToastContainer = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledIcon = styled(Icon)`
|
const StyledIcon = (theme: SupersetTheme) => css`
|
||||||
min-width: ${({ theme }) => theme.gridUnit * 5}px;
|
min-width: ${theme.gridUnit * 5}px;
|
||||||
|
color: ${theme.colors.grayscale.base};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface ToastPresenterProps {
|
interface ToastPresenterProps {
|
||||||
@ -76,16 +77,17 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
|
|||||||
};
|
};
|
||||||
}, [handleClosePress, toast.duration]);
|
}, [handleClosePress, toast.duration]);
|
||||||
|
|
||||||
let iconName: IconName = 'circle-check-solid';
|
|
||||||
let className = 'toast--success';
|
let className = 'toast--success';
|
||||||
|
let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
|
||||||
|
|
||||||
if (toast.toastType === ToastType.WARNING) {
|
if (toast.toastType === ToastType.WARNING) {
|
||||||
iconName = 'warning-solid';
|
icon = <Icons.WarningSolid css={StyledIcon} />;
|
||||||
className = 'toast--warning';
|
className = 'toast--warning';
|
||||||
} else if (toast.toastType === ToastType.DANGER) {
|
} else if (toast.toastType === ToastType.DANGER) {
|
||||||
iconName = 'error-solid';
|
icon = <Icons.ErrorSolid css={StyledIcon} />;
|
||||||
className = 'toast--danger';
|
className = 'toast--danger';
|
||||||
} else if (toast.toastType === ToastType.INFO) {
|
} else if (toast.toastType === ToastType.INFO) {
|
||||||
iconName = 'info-solid';
|
icon = <Icons.InfoSolid css={StyledIcon} />;
|
||||||
className = 'toast--info';
|
className = 'toast--info';
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,7 +97,7 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
|
|||||||
data-test="toast-container"
|
data-test="toast-container"
|
||||||
role="alert"
|
role="alert"
|
||||||
>
|
>
|
||||||
<StyledIcon name={iconName} />
|
{icon}
|
||||||
<Interweave content={toast.text} />
|
<Interweave content={toast.text} />
|
||||||
<i
|
<i
|
||||||
className="fa fa-close pull-right pointer"
|
className="fa fa-close pull-right pointer"
|
||||||
|
Loading…
Reference in New Issue
Block a user