mirror of https://github.com/apache/superset.git
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 { mount } from 'enzyme';
|
||||
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
|
||||
import Toast from 'src/messageToasts/components/Toast';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import mockMessageToasts from '../mockMessageToasts';
|
||||
|
@ -27,7 +28,11 @@ const props = {
|
|||
onCloseToast() {},
|
||||
};
|
||||
|
||||
const setup = overrideProps => mount(<Toast {...props} {...overrideProps} />);
|
||||
const setup = overrideProps =>
|
||||
mount(<Toast {...props} {...overrideProps} />, {
|
||||
wrappingComponent: ThemeProvider,
|
||||
wrappingComponentProps: { theme: supersetTheme },
|
||||
});
|
||||
|
||||
describe('Toast', () => {
|
||||
it('should render', () => {
|
||||
|
|
|
@ -16,11 +16,11 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { styled } from '@superset-ui/core';
|
||||
import { styled, css, SupersetTheme } from '@superset-ui/core';
|
||||
import cx from 'classnames';
|
||||
import Interweave from 'interweave';
|
||||
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 { ToastMeta } from '../types';
|
||||
|
||||
|
@ -34,8 +34,9 @@ const ToastContainer = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
min-width: ${({ theme }) => theme.gridUnit * 5}px;
|
||||
const StyledIcon = (theme: SupersetTheme) => css`
|
||||
min-width: ${theme.gridUnit * 5}px;
|
||||
color: ${theme.colors.grayscale.base};
|
||||
`;
|
||||
|
||||
interface ToastPresenterProps {
|
||||
|
@ -76,16 +77,17 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
|
|||
};
|
||||
}, [handleClosePress, toast.duration]);
|
||||
|
||||
let iconName: IconName = 'circle-check-solid';
|
||||
let className = 'toast--success';
|
||||
let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
|
||||
|
||||
if (toast.toastType === ToastType.WARNING) {
|
||||
iconName = 'warning-solid';
|
||||
icon = <Icons.WarningSolid css={StyledIcon} />;
|
||||
className = 'toast--warning';
|
||||
} else if (toast.toastType === ToastType.DANGER) {
|
||||
iconName = 'error-solid';
|
||||
icon = <Icons.ErrorSolid css={StyledIcon} />;
|
||||
className = 'toast--danger';
|
||||
} else if (toast.toastType === ToastType.INFO) {
|
||||
iconName = 'info-solid';
|
||||
icon = <Icons.InfoSolid css={StyledIcon} />;
|
||||
className = 'toast--info';
|
||||
}
|
||||
|
||||
|
@ -95,7 +97,7 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
|
|||
data-test="toast-container"
|
||||
role="alert"
|
||||
>
|
||||
<StyledIcon name={iconName} />
|
||||
{icon}
|
||||
<Interweave content={toast.text} />
|
||||
<i
|
||||
className="fa fa-close pull-right pointer"
|
||||
|
|
Loading…
Reference in New Issue