1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/configuration/textAreaWrapper.tsx b/src/components/configuration/textAreaWrapper.tsx
new file mode 100644
index 0000000..6a30f42
--- /dev/null
+++ b/src/components/configuration/textAreaWrapper.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+
+import { useDebouncedCallback } from 'use-debounce'
+
+import ConfigType from '../../../common/types/configType'
+
+type TextAreaProps = {
+  title?: string
+  alt?: string
+  value: string
+  placeholder?: string
+  keyName: keyof ConfigType
+  handleChange: (value: any, key: keyof ConfigType) => void
+  disabled?: boolean
+}
+
+const TextAreaWrapper = ({
+  title,
+  alt,
+  keyName,
+  value,
+  placeholder,
+  handleChange,
+  disabled
+}: TextAreaProps) => {
+  const [internalValue, setInternalValue] = useState(value)
+
+  const debounced = useDebouncedCallback((value) => {
+    handleChange({ value, editable: true, state: true }, keyName)
+  }, 500)
+
+  const processChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInternalValue(e.target.value)
+    debounced(e.target.value)
+  }
+
+  useEffect(() => {
+    setInternalValue(value)
+  }, [value])
+
+  return (
+    <div className="form-control" style={{ display: 'none' }}>
+      {title && (
+        <label className="label">
+          <span className="label-text">{title}</span>
+          {alt && <span className="label-text-alt">{alt}</span>}
+        </label>
+      )}
+      <textarea
+        className="textarea textarea-bordered h-20"
+        value={internalValue}
+        onChange={processChange}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+    </div>
+  )
+}
+export default TextAreaWrapper