From ba76193d333735cc1bccd272e2438435d094a5ac Mon Sep 17 00:00:00 2001
From: Minhyeok Park <pmh_only@pmh.codes>
Date: Tue, 12 Nov 2024 10:50:42 +0900
Subject: [PATCH] feat: auto-close preview screen when input value is longer
 than 30000 chars

---
 src/TransformGridItem/index.tsx         | 34 ++++++++++++++++++++++---
 src/TransformGridItem/style.module.scss |  6 ++---
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/TransformGridItem/index.tsx b/src/TransformGridItem/index.tsx
index 3ac9fbe..c0d3605 100644
--- a/src/TransformGridItem/index.tsx
+++ b/src/TransformGridItem/index.tsx
@@ -24,17 +24,37 @@ interface TransformGridItemProp {
 export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const [value, setValue] = useRecoilState(EditorValueState)
   const [options, setOptions] = useState(transform.options)
+  const [previewDisabled, setPreviewDisabled] = useState(false)
+  const [alreadyClosed, setAlreadyClosed] = useState(false)
   const [closed, setClosed] = useLocalStorage(`transform_closed__${transform.name}`, false)
   const [result, setResult] = useState<WrappedTransformResult>({
     error: false,
     value: ''
   })
+
+  useEffect(() => {
+    setAlreadyClosed(closed)
+  }, [])
   
   useEffect(() => {
+    if (closed)
+      return
+
     transform
       .fn(value, options)
       .then(setResult.bind(this))
-  }, [value, options])
+  }, [value, options, closed])
+
+  useEffect(() => {
+    if (value.length > 30000) {
+      setClosed(true)
+      setPreviewDisabled(true)
+      return
+    }
+
+    setClosed(alreadyClosed)
+    setPreviewDisabled(false)
+  }, [value])
 
   const onCheckboxOptionChanged =
     (option: TransformCheckboxOption) =>
@@ -92,6 +112,14 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
     setValue(result.value)
   }
 
+  const onLabelClicked = () => {
+    if (previewDisabled)
+      return
+
+    setClosed(!closed)
+    setAlreadyClosed(!closed)
+  }
+
   return (
     <div className={clsx(style.item, closed && style.closed)}>
       <div className={style.toolbar}>
@@ -100,8 +128,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         </Button>
         
         <h2
-          onClick={() => setClosed(!closed)}
-          className={style.name}>
+          onClick={onLabelClicked}
+          className={clsx(style.name, previewDisabled && style.previewDisabled)}>
 
           {transform.name}
         </h2>
diff --git a/src/TransformGridItem/style.module.scss b/src/TransformGridItem/style.module.scss
index 1a6f506..18afdab 100644
--- a/src/TransformGridItem/style.module.scss
+++ b/src/TransformGridItem/style.module.scss
@@ -16,9 +16,9 @@
     .name {
       font-size: inherit;
       padding: 14px 6px;
-      cursor: pointer;
-
-      &:hover {
+      
+      &:hover:not(.previewDisabled) {
+        cursor: pointer;
         text-decoration: underline dotted;
       }
     }