[improvement] Widget components #1475 - toggle widget (#1484)

* new implementation/toggle-btn

* Make ToggleSwitch expose its value on load itself

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>

frontend/src/Editor/Components/Toggle.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
+import React, { useEffect } from 'react';
 
 class Switch extends React.Component {
   render() {
@@ -24,58 +23,35 @@ class Switch extends React.Component {
   }
 }
 
-export const ToggleSwitch = ({
-  id,
-  height,
-  component,
-  onComponentClick,
-  currentState,
-  onComponentOptionChanged,
-  onEvent,
-}) => {
+export const ToggleSwitch = ({ height, properties, styles, fireEvent, setExposedVariable }) => {
   const [on, setOn] = React.useState(false);
-  const label = component.definition.properties.label.value;
-  const textColorProperty = component.definition.styles.textColor;
-  const toggleSwitchColorProperty = component.definition.styles.toggleSwitchColor;
-  const toggleSwitchColor = toggleSwitchColorProperty ? toggleSwitchColorProperty.value : '#3c92dc';
-  const textColor = textColorProperty ? textColorProperty.value : '#000';
-  const widgetVisibility = component.definition.styles.visibility?.value ?? true;
-  const disabledState = component.definition.styles.disabledState?.value ?? false;
+  const label = properties.label;
 
-  const parsedDisabledState =
-    typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
-
-  let parsedWidgetVisibility = widgetVisibility;
-
-  try {
-    parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
-  } catch (err) {
-    console.log(err);
-  }
+  const { visibility, disabledState, toggleSwitchColor, textColor } = styles;
 
   function toggleValue(e) {
     const toggled = e.target.checked;
-    onComponentOptionChanged(component, 'value', toggled);
-    onEvent('onChange', { component });
+    setExposedVariable('value', toggled);
+    fireEvent('onChange');
   }
 
+  // Exposing the initially set false value once on load
+  useEffect(() => {
+    console.log('shashi');
+    setExposedVariable('value', false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const toggle = () => setOn(!on);
 
   return (
-    <div
-      className="row py-1"
-      style={{ height, display: parsedWidgetVisibility ? '' : 'none' }}
-      onClick={(event) => {
-        event.stopPropagation();
-        onComponentClick(id, component, event);
-      }}
-    >
+    <div className="row py-1" style={{ height, display: visibility ? '' : 'none' }}>
       <span className="form-check-label form-check-label col-auto my-auto" style={{ color: textColor }}>
         {label}
       </span>
       <div className="col px-1 py-0 mt-0">
         <Switch
-          disabledState={parsedDisabledState}
+          disabledState={disabledState}
           on={on}
           onClick={toggle}
           onChange={toggleValue}

frontend/src/Editor/Components/components.js

@@ -576,7 +576,9 @@ export const componentTypes = [
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },
-    exposedVariables: {},
+    exposedVariables: {
+      value: false,
+    },
     definition: {
       others: {
         showOnDesktop: { value: true },

frontend/src/Editor/Editor.jsx

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 import { datasourceService, dataqueryService, appService, authenticationService } from '@/_services';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { defaults } from 'lodash';
+import { defaults, cloneDeep, isEqual, isEmpty } from 'lodash';
 import { Container } from './Container';
 import { CustomDragLayer } from './CustomDragLayer';
 import { LeftSidebar } from './LeftSidebar';
@@ -31,7 +31,6 @@ import Fuse from 'fuse.js';
 import config from 'config';
 import queryString from 'query-string';
 import toast from 'react-hot-toast';
-import { cloneDeep, isEqual, isEmpty } from 'lodash';
 import produce, { enablePatches, setAutoFreeze, applyPatches } from 'immer';
 import Logo from './Icons/logo.svg';
 import EditIcon from './Icons/edit.svg';