diff --git a/src/custom/Prompt/index.tsx b/src/custom/Prompt/index.tsx index 2a3497faf..46a7b6a75 100644 --- a/src/custom/Prompt/index.tsx +++ b/src/custom/Prompt/index.tsx @@ -1,3 +1,3 @@ -import PromptComponent from './promt-component'; - +import PromptComponent, { PROMPT_VARIANTS } from './promt-component'; +export { PROMPT_VARIANTS, PromptComponent }; export default PromptComponent; diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx index 90824d958..9dbecaf52 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/promt-component.tsx @@ -1,5 +1,5 @@ import { forwardRef, useImperativeHandle, useRef, useState } from 'react'; -import { Typography } from '../../base'; +import { Checkbox, FormControlLabel, Typography } from '../../base'; import { useTheme } from '../../theme'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { ActionComponent, Subtitle } from './style'; @@ -26,6 +26,8 @@ interface State { showInfoIcon?: string; variant?: PromptVariant; headerIcon?: React.ReactNode; + showCheckbox?: boolean; + isChecked?: boolean; } interface ShowParams { @@ -34,11 +36,13 @@ interface ShowParams { primaryOption: string; variant: PromptVariant; showInfoIcon?: string; + showCheckbox?: boolean; headerIcon?: React.ReactNode; } export interface PromptRef { show: (params: ShowParams) => Promise; + getCheckboxState: () => boolean; } const PromptComponent = forwardRef(({ variant }, ref) => { @@ -49,7 +53,9 @@ const PromptComponent = forwardRef(({ variant }, ref) => primaryOption: '', showInfoIcon: '', variant, - headerIcon: undefined + headerIcon: undefined, + isChecked: false, + showCheckbox: false }); /* This ref is used to store the resolve and reject functions of the promise returned by the show method */ @@ -67,7 +73,8 @@ const PromptComponent = forwardRef(({ variant }, ref) => setState({ ...params, isOpen: true, - showInfoIcon: params.showInfoIcon || '' + showInfoIcon: params.showInfoIcon || '', + showCheckbox: !!params.showCheckbox }); }); }; @@ -77,11 +84,20 @@ const PromptComponent = forwardRef(({ variant }, ref) => setState((prevState) => ({ ...prevState, isOpen: false })); }; + const handleCheckboxChange = () => { + setState((prevState) => ({ ...prevState, isChecked: !prevState.isChecked })); + }; + + const getCheckboxState = () => { + return !!state.isChecked; + }; + useImperativeHandle(ref, () => ({ - show + show, + getCheckboxState })); - const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon } = state; + const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon, showCheckbox } = state; const { resolve } = promiseInfoRef.current; return ( @@ -96,10 +112,28 @@ const PromptComponent = forwardRef(({ variant }, ref) => {subtitle && ( - + {subtitle} + {showCheckbox && ( + + } + label={Do not show again} + /> + )} )} diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 2a4e5e93b..b95c87904 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -36,7 +36,7 @@ import { LearningCard } from './LearningCard'; import { BasicMarkdown, RenderMarkdown } from './Markdown'; import { ModalCard } from './ModalCard'; import PopperListener, { IPopperListener } from './PopperListener'; -import PromptComponent from './Prompt'; +import { PROMPT_VARIANTS, PromptComponent } from './Prompt'; import ResponsiveDataTable, { DataTableEllipsisMenu, ResponsiveDataTableProps @@ -90,6 +90,7 @@ export { InfoTooltip, LearningCard, ModalCard, + PROMPT_VARIANTS, PopperListener, PromptComponent, ResponsiveDataTable,