From e0d3b671c86f9f69c438556dffd8347d21d0dfa7 Mon Sep 17 00:00:00 2001
From: robin <robin@rnode.me>
Date: Fri, 11 Nov 2022 10:23:02 +0800
Subject: [PATCH] feat(ui): Add color form component

---
 ui/src/components/SchemaForm/index.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx
index 61eeef14..b3d30e84 100644
--- a/ui/src/components/SchemaForm/index.tsx
+++ b/ui/src/components/SchemaForm/index.tsx
@@ -274,17 +274,38 @@ const SchemaForm: FC<IProps> = ({
           );
         }
 
-        const as = widget === 'textarea' ? 'textarea' : 'input';
+        if (widget === 'textarea') {
+          return (
+            <Form.Group controlId={key} key={key} className="mb-3">
+              <Form.Label>{title}</Form.Label>
+              <Form.Control
+                as="textarea"
+                name={key}
+                placeholder={options?.placeholder || ''}
+                type={options?.type || 'text'}
+                value={formData[key]?.value}
+                onChange={handleInputChange}
+                isInvalid={formData[key].isInvalid}
+                rows={options?.rows || 3}
+              />
+              <Form.Control.Feedback type="invalid">
+                {formData[key]?.errorMsg}
+              </Form.Control.Feedback>
+
+              <Form.Text className="text-muted">{description}</Form.Text>
+            </Form.Group>
+          );
+        }
         return (
           <Form.Group controlId={key} key={key} className="mb-3">
             <Form.Label>{title}</Form.Label>
             <Form.Control
-              as={as}
               name={key}
               placeholder={options?.placeholder || ''}
               type={options?.type || 'text'}
               value={formData[key]?.value}
               onChange={handleInputChange}
+              style={options?.type === 'color' ? { width: '6rem' } : {}}
               isInvalid={formData[key].isInvalid}
             />
             <Form.Control.Feedback type="invalid">