From 675e87157bade1009972e0853b486094230eeb62 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Thu, 2 Jun 2022 13:08:47 +0530
Subject: [PATCH] added default prop in checkbox widget (#3063)

* added default prop in checkbox widget

* removed unwanted code

* changing defaultValue prop display name to Default Status

* added value key in exposedVariables prop

* Fixed :  the issue where checkbox is getting filled instead of checked

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>
---
 frontend/src/Editor/Components/Checkbox.jsx       | 14 ++++++++++++--
 frontend/src/Editor/WidgetManager/widgetConfig.js |  6 +++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Components/Checkbox.jsx b/frontend/src/Editor/Components/Checkbox.jsx
index fd326a0b1d..cceb217b28 100644
--- a/frontend/src/Editor/Components/Checkbox.jsx
+++ b/frontend/src/Editor/Components/Checkbox.jsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export const Checkbox = function Checkbox({ height, properties, styles, fireEvent, setExposedVariable }) {
-  const [checked, setChecked] = React.useState(false);
+  const defaultValueFromProperties = properties.defaultValue ?? false;
+  const [defaultValue, setDefaultvalue] = React.useState(defaultValueFromProperties);
+  const [checked, setChecked] = React.useState(defaultValueFromProperties);
   const { label } = properties;
   const { visibility, disabledState, checkboxColor, textColor } = styles;
 
@@ -15,6 +17,12 @@ export const Checkbox = function Checkbox({ height, properties, styles, fireEven
       fireEvent('onUnCheck');
     }
   }
+  useEffect(() => {
+    setExposedVariable('value', defaultValueFromProperties);
+    setDefaultvalue(defaultValueFromProperties);
+    setChecked(defaultValueFromProperties);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValueFromProperties]);
 
   return (
     <div data-disabled={disabledState} className="row py-1" style={{ height, display: visibility ? '' : 'none' }}>
@@ -26,6 +34,8 @@ export const Checkbox = function Checkbox({ height, properties, styles, fireEven
             onClick={(e) => {
               toggleValue(e);
             }}
+            defaultChecked={defaultValue}
+            checked={checked}
             style={{ backgroundColor: checked ? `${checkboxColor}` : 'white', marginTop: '1px' }}
           />
           <span className="form-check-label" style={{ color: textColor }}>
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index ba171f2aee..e05721c913 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -552,6 +552,7 @@ export const widgets = [
     },
     properties: {
       label: { type: 'code', displayName: 'Label' },
+      defaultValue: { type: 'toggle', displayName: 'Default Status' },
     },
     events: {
       onCheck: { displayName: 'On check' },
@@ -563,7 +564,9 @@ export const widgets = [
       visibility: { type: 'toggle', displayName: 'Visibility' },
       disabledState: { type: 'toggle', displayName: 'Disable' },
     },
-    exposedVariables: {},
+    exposedVariables: {
+      value: false,
+    },
     definition: {
       others: {
         showOnDesktop: { value: '{{true}}' },
@@ -571,6 +574,7 @@ export const widgets = [
       },
       properties: {
         label: { value: 'Checkbox label' },
+        defaultValue: { value: '{{false}}' },
       },
       events: [],
       styles: {