From f4f29172f3296e71a9d78cf82231e9f1928f02d6 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Wed, 28 Sep 2022 17:51:09 +0530
Subject: [PATCH] Enhancement : [ text input widget ] refactor (#4036)

* added loading, disable, hidden states in the properties

* added onfocus and unfocus events

* added new csa

* added text color prop

* changed placeholder text

* bug fixed

* changed the type of action for visibility,loading and disable  to toggle

* changed the default text color to black

* cleanup code

* reverting change - moving register action back to it's original space, out of useeffect

* removed unwanted loading action

* bug fix: app was crashing due to added array dependencies for blur and focus actions
---
 frontend/src/Editor/Components/TextInput.jsx  | 43 +++++++++++++++++--
 .../src/Editor/WidgetManager/widgetConfig.js  | 34 +++++++++++++--
 frontend/src/_helpers/appUtils.js             |  2 +
 3 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 271ee49092..9038f9912a 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 export const TextInput = function TextInput({
   height,
@@ -11,19 +11,46 @@ export const TextInput = function TextInput({
   component,
   darkMode,
 }) {
+  const textInputRef = useRef();
+
+  const textColor = darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor;
+
+  const [disable, setDisable] = useState(styles.disabledState);
   const [value, setValue] = useState(properties.value);
+  const [visibility, setVisibility] = useState(styles.visibility);
   const { isValid, validationError } = validate(value);
 
+  useEffect(() => {
+    disable !== styles.disabledState && setDisable(styles.disabledState);
+  }, [styles.disabledState]);
+
+  useEffect(() => {
+    visibility !== styles.visibility && setVisibility(styles.visibility);
+  }, [styles.visibility]);
+
   useEffect(() => {
     setExposedVariable('isValid', isValid);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isValid]);
+
   useEffect(() => {
     setValue(properties.value);
     setExposedVariable('value', properties.value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [properties.value]);
 
+  registerAction('setFocus', async function () {
+    textInputRef.current.focus();
+  });
+  registerAction('setBlur', async function () {
+    textInputRef.current.blur();
+  });
+  registerAction('disable', async function (value) {
+    setDisable(value);
+  });
+  registerAction('visibility', async function (value) {
+    setVisibility(value);
+  });
   registerAction(
     'setText',
     async function (text) {
@@ -42,9 +69,9 @@ export const TextInput = function TextInput({
   );
 
   return (
-    <div className="text-input">
+    <div data-disabled={disable} className={`text-input ${visibility || 'invisible'}`}>
       <input
-        disabled={styles.disabledState}
+        ref={textInputRef}
         onKeyUp={(e) => {
           if (e.key == 'Enter') {
             setValue(e.target.value);
@@ -58,12 +85,20 @@ export const TextInput = function TextInput({
           setExposedVariable('value', e.target.value);
           fireEvent('onChange');
         }}
+        onBlur={(e) => {
+          e.stopPropagation();
+          fireEvent('onBlur');
+        }}
+        onFocus={(e) => {
+          e.stopPropagation();
+          fireEvent('onFocus');
+        }}
         type="text"
         className={`form-control ${!isValid ? 'is-invalid' : ''} validation-without-icon ${
           darkMode && 'dark-theme-placeholder'
         }`}
         placeholder={properties.placeholder}
-        style={{ height, display: styles.visibility ? '' : 'none', borderRadius: `${styles.borderRadius}px` }}
+        style={{ height, borderRadius: `${styles.borderRadius}px`, color: textColor }}
         value={value}
         data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
       />
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index e54ab147e9..40b13d4b5e 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -872,15 +872,22 @@ export const widgets = [
     events: {
       onChange: { displayName: 'On change' },
       onEnterPressed: { displayName: 'On Enter Pressed' },
+      onFocus: { displayName: 'On focus' },
+      onBlur: { displayName: 'On blur' },
     },
     styles: {
-      visibility: { type: 'toggle', displayName: 'Visibility', validation: { schema: { type: 'boolean' } } },
-      disabledState: { type: 'toggle', displayName: 'Disable', validation: { schema: { type: 'boolean' } } },
+      textColor: {
+        type: 'color',
+        displayName: 'Text Color',
+        validation: { schema: { type: 'string' } },
+      },
       borderRadius: {
         type: 'code',
         displayName: 'Border radius',
         validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
       },
+      visibility: { type: 'toggle', displayName: 'Visibility', validation: { schema: { type: 'boolean' } } },
+      disabledState: { type: 'toggle', displayName: 'Disable', validation: { schema: { type: 'boolean' } } },
     },
     exposedVariables: {
       value: '',
@@ -895,6 +902,24 @@ export const widgets = [
         handle: 'clear',
         displayName: 'Clear',
       },
+      {
+        handle: 'setFocus',
+        displayName: 'Set focus',
+      },
+      {
+        handle: 'setBlur',
+        displayName: 'Set blur',
+      },
+      {
+        handle: 'disable',
+        displayName: 'Disable',
+        params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+      },
+      {
+        handle: 'visibility',
+        displayName: 'Visibility',
+        params: [{ handle: 'visibility', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }],
+      },
     ],
     definition: {
       validation: {
@@ -909,13 +934,14 @@ export const widgets = [
       },
       properties: {
         value: { value: '' },
-        placeholder: { value: 'Placeholder text' },
+        placeholder: { value: 'Enter your input' },
       },
       events: [],
       styles: {
+        textColor: { value: '#000' },
+        borderRadius: { value: '{{0}}' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
-        borderRadius: { value: '{{0}}' },
       },
     },
   },
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index eb0e59c666..aa73e6271d 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -508,6 +508,8 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
       'onCardSelected',
       'onCardUpdated',
       'onTabSwitch',
+      'onFocus',
+      'onBlur',
       'onOpen',
       'onClose',
       'onRowClicked',