Enhancement : [ Text widget ] refactor (#4038)

* refactor Text widget

* refactored text widget

* bug fixed

* changed the type of action for visibility to toggle

* changed the default value of background color to transparent

* made event menu open by default in widget inspector

* made the suggested changes

* bug fixed : app was crashing due to visibility

* made changes to improve readability

frontend/src/Editor/Components/Text.jsx

@@ -6,8 +6,7 @@ export const Text = function Text({ height, properties, styles, darkMode, regist
     textSize,
     textColor,
     textAlign,
-    visibility,
-    disabledState,
+    backgroundColor,
     fontWeight,
     decoration,
     transformation,
@@ -17,29 +16,33 @@ export const Text = function Text({ height, properties, styles, darkMode, regist
     letterSpacing,
     wordSpacing,
     fontVariant,
+    disabledState,
   } = styles;
-  const [loadingState, setLoadingState] = useState(false);
+  const { loadingState } = properties;
   const [text, setText] = useState(() => computeText());
-
+  const [visibility, setVisibility] = useState(styles.visibility);
   const color = textColor === '#000' ? (darkMode ? '#fff' : '#000') : textColor;
 
+  useEffect(() => {
+    visibility !== styles.visibility && setVisibility(styles.visibility);
+  }, [styles.visibility]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => setText(() => computeText()), [properties.text]);
-  useEffect(() => {
-    const loadingStateProperty = properties.loadingState;
-    setLoadingState(loadingStateProperty);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [properties.loadingState]);
 
   registerAction('setText', async function (text) {
     setText(text);
   });
+  registerAction('visibility', async function (value) {
+    setVisibility(value);
+  });
 
   function computeText() {
     return properties.text === 0 || properties.text === false ? properties.text?.toString() : properties.text;
   }
 
   const computedStyles = {
+    backgroundColor,
     color,
     height,
     display: visibility ? 'flex' : 'none',

frontend/src/Editor/Inspector/Components/DefaultComponent.jsx

@@ -86,7 +86,7 @@ export const baseComponentProperties = (
   if (events.length > 0) {
     items.push({
       title: `${i18next.t('widget.common.events', 'Events')}`,
-      isOpen: false,
+      isOpen: true,
       children: (
         <EventManager
           component={component}
@@ -123,7 +123,7 @@ export const baseComponentProperties = (
 
   items.push({
     title: `${i18next.t('widget.common.general', 'General')}`,
-    isOpen: false,
+    isOpen: true,
     children: (
       <>
         {renderElement(
@@ -142,7 +142,7 @@ export const baseComponentProperties = (
 
   items.push({
     title: `${i18next.t('widget.common.layout', 'Layout')}`,
-    isOpen: false,
+    isOpen: true,
     children: (
       <>
         {renderElement(

frontend/src/Editor/Inspector/Inspector.jsx

@@ -326,7 +326,7 @@ export const Inspector = ({
 
     items.push({
       title: `${t('widget.common.general', 'General')}`,
-      isOpen: false,
+      isOpen: true,
       children: (
         <>
           {renderElement(

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -1655,7 +1655,13 @@ export const widgets = [
           schema: { type: 'number' },
         },
       },
-
+      backgroundColor: {
+        type: 'color',
+        displayName: 'Background Color',
+        validation: {
+          schema: { type: 'string' },
+        },
+      },
       textColor: {
         type: 'color',
         displayName: 'Text Color',
@@ -1692,6 +1698,11 @@ export const widgets = [
         displayName: 'Set Text',
         params: [{ handle: 'text', displayName: 'Text', defaultValue: 'New text' }],
       },
+      {
+        handle: 'visibility',
+        displayName: 'Set Visibility',
+        params: [{ handle: 'visibility', displayName: 'Value', defaultValue: `{{false}}`, type: 'toggle' }],
+      },
     ],
     definition: {
       others: {
@@ -1699,17 +1710,15 @@ export const widgets = [
         showOnMobile: { value: '{{false}}' },
       },
       properties: {
-        text: { value: 'Text goes here !' },
-        visible: { value: '{{true}}' },
+        text: { value: 'Hello, there!' },
         loadingState: { value: `{{false}}` },
       },
       events: [],
       styles: {
-        textSize: { value: 14 },
+        backgroundColor: { value: '#ffffff00' },
         textColor: { value: '#000' },
+        textSize: { value: 14 },
         textAlign: { value: 'left' },
-        visibility: { value: '{{true}}' },
-        disabledState: { value: '{{false}}' },
         fontWeight: { value: 'normal' },
         decoration: { value: 'none' },
         transformation: { value: 'none' },
@@ -1719,6 +1728,8 @@ export const widgets = [
         letterSpacing: { value: 0 },
         wordSpacing: { value: 0 },
         fontVariant: { value: 'normal' },
+        visibility: { value: '{{true}}' },
+        disabledState: { value: '{{false}}' },
       },
     },
   },