Skip to content

Commit

Permalink
feat: add dts to toast and confirm modal
Browse files Browse the repository at this point in the history
  • Loading branch information
Kai Gao committed May 2, 2023
1 parent e8f50d1 commit a4d4a21
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 6 deletions.
1 change: 1 addition & 0 deletions src/components/ConfirmModal/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export interface ConfirmModalProps {
* determines if the modal needs to be shown or not
*/
show?: boolean;
dts?: string;
}

declare const ConfirmModal: React.FC<ConfirmModalProps>;
Expand Down
3 changes: 3 additions & 0 deletions src/components/ConfirmModal/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const ConfirmModal = ({
modalDescription,
modalTitle,
show,
dts,
}) => {
const cancelAction = () => {
modalClose();
Expand All @@ -26,6 +27,7 @@ const ConfirmModal = ({
<ActionPanel
isModal
data-testid="confirm-modal-wrapper"
dts={dts}
className="confirm-modal-component"
size="small"
title={modalTitle}
Expand Down Expand Up @@ -81,6 +83,7 @@ ConfirmModal.propTypes = {
* determines if the modal needs to be shown or not
*/
show: PropTypes.bool,
dts: PropTypes.string,
};

ConfirmModal.defaultProps = {
Expand Down
2 changes: 2 additions & 0 deletions src/components/Toast/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export interface ToastNotificationProps {
title?: string;
theme?: ToastNotificationTheme;
message: React.ReactNode;
dts?: string;
}

declare const ToastNotification: React.FC<ToastNotificationProps>;
Expand All @@ -59,6 +60,7 @@ export interface notifyProps {
title?: string;
theme?: notifyTheme;
message: React.ReactNode;
dts?: string;
}

declare const notify: React.FC<notifyProps>;
Expand Down
15 changes: 9 additions & 6 deletions src/components/Toast/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import classnames from 'classnames';
import { toast, ToastContainer as ReactToastContainer } from 'react-toastify';
import PropTypes from 'prop-types';
import { toastPlacements } from './constants';
import { expandDts } from '../../utils';
import 'react-toastify/dist/ReactToastify.css';
import './styles.css';

Expand Down Expand Up @@ -42,9 +43,9 @@ ToastContainer.defaultProps = {

const getToastClass = (theme) => classnames('aui--toast-title', { [`aui--toast-title-${theme}`]: theme });

export const ToastMessage = ({ toastClass, title = '', message }) => (
export const ToastMessage = ({ toastClass, title = '', message, dts }) => (
<React.Fragment>
<span className="aui--toast-body-message">
<span className="aui--toast-body-message" {...expandDts(dts)}>
<span className={toastClass}>{title}</span>
<span>{message}</span>
</span>
Expand All @@ -59,17 +60,17 @@ const withDefaultOptions = (options) => ({
...options,
});

const ToastNotification = ({ theme = 'info', title = '', message, ...options }) => {
const ToastNotification = ({ theme = 'info', title = '', message, dts, ...options }) => {
const toastClass = getToastClass(theme);
const toastMessage = <ToastMessage toastClass={toastClass} title={title} message={message} />;
const toastMessage = <ToastMessage toastClass={toastClass} title={title} message={message} dts={dts} />;

toast.info(toastMessage, withDefaultOptions({ theme, ...options }));
return null;
};

const notify = ({ theme = 'info', title, message, ...options }) => {
const notify = ({ theme = 'info', title, message, dts, ...options }) => {
toast.info(
<ToastMessage toastClass={getToastClass(theme)} title={title} message={message} />,
<ToastMessage toastClass={getToastClass(theme)} title={title} message={message} dts={dts} />,
withDefaultOptions({ theme, ...options })
);
return;
Expand All @@ -80,6 +81,7 @@ notify.propTypes = {
title: PropTypes.string,
theme: PropTypes.oneOf(['success', 'info', 'alert', 'attention']),
message: PropTypes.node.isRequired,
dts: PropTypes.string,
};

ToastNotification.propTypes = {
Expand All @@ -92,6 +94,7 @@ ToastNotification.propTypes = {
title: PropTypes.string,
theme: PropTypes.oneOf(['success', 'info', 'alert', 'attention']),
message: PropTypes.node.isRequired,
dts: PropTypes.string,
};

const dismiss = toast.dismiss;
Expand Down
7 changes: 7 additions & 0 deletions www/containers/props.json
Original file line number Diff line number Diff line change
Expand Up @@ -1626,6 +1626,13 @@
"value": "false",
"computed": false
}
},
"dts": {
"type": {
"name": "string"
},
"required": false,
"description": ""
}
}
}
Expand Down

0 comments on commit a4d4a21

Please sign in to comment.