From 105ac48c18675ce14530d32db195c77d8c69c8a8 Mon Sep 17 00:00:00 2001
From: "nida.ghuman" <nidaqg@gmail.com>
Date: Thu, 11 Aug 2022 21:14:48 +0500
Subject: [PATCH] PLAY-255-TS conversion of fixed confirmation toast

---
 .../_fixed_confirmation_toast.jsx             | 93 -------------------
 .../_fixed_confirmation_toast.tsx             | 80 ++++++++++++++++
 2 files changed, 80 insertions(+), 93 deletions(-)
 delete mode 100644 playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
 create mode 100644 playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

diff --git a/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx b/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
deleted file mode 100644
index d54535785c..0000000000
--- a/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useState } from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-
-const iconMap = {
-  success: 'check',
-  error: 'exclamation-triangle',
-  neutral: 'info-circle',
-  tip: 'info-circle',
-}
-
-type FixedConfirmationToastProps = {
-  className?: string,
-  closeable?: boolean,
-  data?: string,
-  horizontal?: 'right' | 'left' | 'center',
-  id?: string,
-  multiLine?: boolean,
-  onClose?: () => void,
-  open?: boolean,
-  status?: 'success' | 'error' | 'neutral' | 'tip',
-  text: string,
-  vertical?: 'top' | 'bottom',
-}
-
-const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
-  const [showToast, toggleToast] = useState(true)
-  const {
-    className,
-    closeable = false,
-    horizontal,
-    multiLine = false,
-    onClose = () => {},
-    open = true,
-    status = 'neutral',
-    text,
-    vertical,
-  } = props
-  const css = classnames(
-    `pb_fixed_confirmation_toast_kit_${status}`,
-    { '_multi_line': multiLine },
-    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
-    globalProps(props),
-    className
-  )
-  const icon = iconMap[status]
-
-  useEffect(() => {
-    toggleToast(open)
-  }, [open])
-
-  const handleClick = () => {
-    toggleToast(!closeable)
-    onClose()
-  }
-
-  return (
-    <If condition={showToast}>
-      <div
-          className={css}
-          onClick={handleClick}
-      >
-        <If condition={icon}>
-          <Icon
-              className="pb_icon"
-              fixedWidth
-              icon={icon}
-          />
-        </If>
-        <Title
-            className="pb_fixed_confirmation_toast_text"
-            size={4}
-            text={text}
-        />
-        <If condition={closeable}>
-          <Icon
-              className="pb_icon"
-              fixedWidth={false}
-              icon="times"
-          />
-        </If>
-      </div>
-    </If>
-  )
-}
-
-export default FixedConfirmationToast
diff --git a/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx b/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
new file mode 100644
index 0000000000..fbf7a8d337
--- /dev/null
+++ b/playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+
+import Icon from "../pb_icon/_icon";
+import Title from "../pb_title/_title";
+
+const iconMap = {
+  success: "check",
+  error: "exclamation-triangle",
+  neutral: "info-circle",
+  tip: "info-circle",
+};
+
+type FixedConfirmationToastProps = {
+  className?: string;
+  closeable?: boolean;
+  data?: string;
+  horizontal?: "right" | "left" | "center";
+  id?: string;
+  multiLine?: boolean;
+  onClose?: () => void;
+  open?: boolean;
+  status?: "success" | "error" | "neutral" | "tip";
+  text: string;
+  vertical?: "top" | "bottom";
+};
+
+const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+  const [showToast, toggleToast] = useState(true);
+  const {
+    className,
+    closeable = false,
+    horizontal,
+    multiLine = false,
+    onClose = () => {},
+    open = true,
+    status = "neutral",
+    text,
+    vertical,
+  } = props;
+  const css = classnames(
+    `pb_fixed_confirmation_toast_kit_${status}`,
+    { _multi_line: multiLine },
+    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
+    globalProps(props),
+    className
+  );
+  const icon = iconMap[status];
+
+  useEffect(() => {
+    toggleToast(open);
+  }, [open]);
+
+  const handleClick = () => {
+    toggleToast(!closeable);
+    onClose();
+  };
+
+  return (
+    <>
+      {showToast && (
+        <div className={css} onClick={handleClick}>
+          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
+          <Title
+            className="pb_fixed_confirmation_toast_text"
+            size={4}
+            text={text}
+          />
+          {closeable && (
+            <Icon className="pb_icon" fixedWidth={false} icon="times" />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FixedConfirmationToast;