Merge pull request #704 from sudhanshutech/add/prompt

[component] Add Prompt Component

src/custom/Prompt/index.tsx

@@ -0,0 +1,3 @@
+import PromptComponent from './promt-component';
+
+export default PromptComponent;

src/custom/Prompt/promt-component.tsx

@@ -0,0 +1,135 @@
+import { useTheme } from '@mui/material';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { Typography } from '../../base';
+import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
+import { ActionComponent, Subtitle } from './style';
+
+/* Promt variants are used to define the color of the prompt button */
+export const PROMPT_VARIANTS = {
+  WARNING: 'warning',
+  DANGER: 'error',
+  SUCCESS: 'success',
+  INFO: 'info'
+} as const;
+
+type PromptVariant = (typeof PROMPT_VARIANTS)[keyof typeof PROMPT_VARIANTS];
+
+interface PromptProps {
+  variant?: PromptVariant;
+}
+
+interface State {
+  isOpen: boolean;
+  title: string;
+  subtitle?: string;
+  primaryOption: string;
+  showInfoIcon?: string;
+  variant?: PromptVariant;
+}
+
+interface ShowParams {
+  title: string;
+  subtitle: string;
+  primaryOption: string;
+  variant: PromptVariant;
+  showInfoIcon?: string;
+}
+
+interface PromptRef {
+  show: (params: ShowParams) => Promise<string>;
+}
+
+const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) => {
+  const [state, setState] = useState<State>({
+    isOpen: false,
+    title: '',
+    subtitle: '',
+    primaryOption: '',
+    showInfoIcon: '',
+    variant
+  });
+
+  /* This ref is used to store the resolve and reject functions of the promise returned by the show method */
+  const promiseInfoRef = useRef<{ resolve: (value: string) => void; reject: () => void }>({
+    resolve: () => {},
+    reject: () => {}
+  });
+
+  const theme = useTheme();
+
+  /* This function is used to show the prompt */
+  const show = (params: ShowParams) => {
+    return new Promise<string>((resolve, reject) => {
+      promiseInfoRef.current = { resolve, reject };
+      setState({
+        ...params,
+        isOpen: true,
+        showInfoIcon: params.showInfoIcon || ''
+      });
+    });
+  };
+
+  /* This function is used to hide the prompt */
+  const hide = () => {
+    setState((prevState) => ({ ...prevState, isOpen: false }));
+  };
+
+  useImperativeHandle(ref, () => ({
+    show
+  }));
+
+  const { isOpen, primaryOption, title, subtitle, showInfoIcon } = state;
+  const { resolve } = promiseInfoRef.current;
+
+  return (
+    <Modal
+      open={isOpen}
+      closeModal={hide}
+      title={title}
+      id="searchClick"
+      headerIcon={undefined}
+      reactNode={undefined}
+    >
+      {subtitle && (
+        <ModalBody>
+          <Subtitle id="alert-dialog-description" variant="body1" component="div">
+            <Typography variant="body1" component="div">
+              {subtitle}
+            </Typography>
+          </Subtitle>
+        </ModalBody>
+      )}
+      <ModalFooter variant="filled" helpText={showInfoIcon}>
+        <ActionComponent>
+          <ModalButtonSecondary
+            onClick={() => {
+              hide();
+              resolve('CANCEL');
+            }}
+          >
+            Cancel
+          </ModalButtonSecondary>
+          <ModalButtonPrimary
+            onClick={() => {
+              hide();
+              resolve(primaryOption);
+            }}
+            style={
+              state.variant && {
+                backgroundColor: theme.palette.background[state.variant]?.default,
+                textTransform: 'capitalize'
+              }
+            }
+            type="submit"
+          >
+            {primaryOption}
+          </ModalButtonPrimary>
+        </ActionComponent>
+      </ModalFooter>
+    </Modal>
+  );
+});
+
+PromptComponent.displayName = 'PromptComponent';
+
+export default PromptComponent;

src/custom/Prompt/style.tsx

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material';
+import { Box, DialogContentText } from '../../base';
+
+export const Subtitle = styled(DialogContentText)(() => ({
+  minWidth: 400,
+  overflowWrap: 'anywhere',
+  textAlign: 'center',
+  padding: '5px'
+}));
+
+export const ActionComponent = styled(Box)(() => ({
+  display: 'flex',
+  justifyContent: 'end',
+  width: '100%',
+  gap: '10px'
+}));

src/custom/index.tsx

@@ -33,6 +33,7 @@ import { LearningCard } from './LearningCard';
 import { RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
 import PopperListener, { IPopperListener } from './PopperListener';
+import PromptComponent from './Prompt';
 import ResponsiveDataTable, {
   DataTableEllipsisMenu,
   ResponsiveDataTableProps
@@ -71,6 +72,7 @@ export {
   LearningCard,
   ModalCard,
   PopperListener,
+  PromptComponent,
   ResponsiveDataTable,
   SearchBar,
   StyledDialogActions,