ConfirmationModal accepts forwardRef (#1852)

mongodb · Jul 24, 2023 · 30bd6f5 · 30bd6f5
1 parent 6b22fc9
commit 30bd6f5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 75 deletions.
diff --git a/.changeset/gorgeous-readers-know.md b/.changeset/gorgeous-readers-know.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/confirmation-modal': major
+---
+
+Component now accepts a ref prop
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
@@ -23,87 +23,93 @@ import {
   warningIconThemeStyle,
 } from './styles';
 
-export const ConfirmationModal = ({
-  children,
-  title,
-  requiredInputText,
-  buttonText,
-  submitDisabled = false,
-  variant = Variant.Default,
-  onConfirm,
-  onCancel,
-  darkMode: darkModeProp,
-  ...modalProps
-}: ConfirmationModalProps) => {
-  const [confirmEnabled, setConfirmEnabled] = useState(!requiredInputText);
-  const { theme, darkMode } = useDarkMode(darkModeProp);
+export const ConfirmationModal = React.forwardRef(
+  (
+    {
+      children,
+      title,
+      requiredInputText,
+      buttonText,
+      submitDisabled = false,
+      variant = Variant.Default,
+      onConfirm,
+      onCancel,
+      darkMode: darkModeProp,
+      ...modalProps
+    }: ConfirmationModalProps,
+    forwardRef: React.ForwardedRef<HTMLDivElement | null>,
+  ) => {
+    const [confirmEnabled, setConfirmEnabled] = useState(!requiredInputText);
+    const { theme, darkMode } = useDarkMode(darkModeProp);
 
-  const textEntryConfirmation = useMemo(() => {
-    setConfirmEnabled(!requiredInputText);
+    const textEntryConfirmation = useMemo(() => {
+      setConfirmEnabled(!requiredInputText);
 
-    let textEntryConfirmation = null;
+      let textEntryConfirmation = null;
 
-    if (requiredInputText) {
-      const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setConfirmEnabled(event.target.value === requiredInputText);
-      };
-      textEntryConfirmation = (
-        <TextInput
-          label={`Type "${requiredInputText}" to confirm your action`}
-          className={textEntryInputStyle}
-          onChange={onInputChange}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
-          darkMode={darkMode}
-        ></TextInput>
-      );
-    }
+      if (requiredInputText) {
+        const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+          setConfirmEnabled(event.target.value === requiredInputText);
+        };
+        textEntryConfirmation = (
+          <TextInput
+            label={`Type "${requiredInputText}" to confirm your action`}
+            className={textEntryInputStyle}
+            onChange={onInputChange}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+            darkMode={darkMode}
+          ></TextInput>
+        );
+      }
 
-    return textEntryConfirmation;
-  }, [requiredInputText, darkMode]);
+      return textEntryConfirmation;
+    }, [requiredInputText, darkMode]);
 
-  return (
-    <Modal
-      {...modalProps}
-      contentClassName={baseModalStyle}
-      setOpen={onCancel}
-      darkMode={darkMode}
-    >
-      <div
-        className={cx(contentStyle, contentVariantStyles[variant], {
-          [contentDarkModeStyles]: darkMode,
-        })}
+    return (
+      <Modal
+        {...modalProps}
+        contentClassName={baseModalStyle}
+        setOpen={onCancel}
+        darkMode={darkMode}
+        ref={forwardRef}
       >
-        {variant === Variant.Danger && (
-          <div className={cx(warningIconStyle, warningIconThemeStyle[theme])}>
-            <WarningIcon
-              fill={darkMode ? palette.red.light3 : palette.red.base}
-              role="presentation"
-            />
-          </div>
-        )}
-        <H3 as="h1" className={cx(titleStyle)}>
-          {title}
-        </H3>
-        {children}
-        {textEntryConfirmation}
-      </div>
-      <Footer>
-        <Button
-          variant={variant}
-          disabled={!confirmEnabled || submitDisabled}
-          onClick={onConfirm}
-          className={buttonStyle}
+        <div
+          className={cx(contentStyle, contentVariantStyles[variant], {
+            [contentDarkModeStyles]: darkMode,
+          })}
         >
-          {buttonText}
-        </Button>
-        <Button onClick={onCancel} className={buttonStyle}>
-          Cancel
-        </Button>
-      </Footer>
-    </Modal>
-  );
-};
+          {variant === Variant.Danger && (
+            <div className={cx(warningIconStyle, warningIconThemeStyle[theme])}>
+              <WarningIcon
+                fill={darkMode ? palette.red.light3 : palette.red.base}
+                role="presentation"
+              />
+            </div>
+          )}
+          <H3 as="h1" className={cx(titleStyle)}>
+            {title}
+          </H3>
+          {children}
+          {textEntryConfirmation}
+        </div>
+        <Footer>
+          <Button
+            variant={variant}
+            disabled={!confirmEnabled || submitDisabled}
+            onClick={onConfirm}
+            className={buttonStyle}
+          >
+            {buttonText}
+          </Button>
+          <Button onClick={onCancel} className={buttonStyle}>
+            Cancel
+          </Button>
+        </Footer>
+      </Modal>
+    );
+  },
+);
 
 ConfirmationModal.displayName = 'ConfirmationModal';
 
@@ -114,7 +120,7 @@ ConfirmationModal.propTypes = {
   onCancel: PropTypes.func,
   children: PropTypes.node,
   className: PropTypes.string,
-  buttonText: PropTypes.string,
+  buttonText: PropTypes.string.isRequired,
   variant: PropTypes.oneOf(Object.values(Variant)),
   requiredInputText: PropTypes.string,
   darkMode: PropTypes.bool,