Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

added default prop in checkbox widget (#3063)

Browse source 
* 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>
This commit is contained in:
Manish Kushare 2022-06-02 13:08:47 +05:30 committed by GitHub
parent 1552f834d6
commit 675e87157b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/Editor/Components/Checkbox.jsx
View file

@ -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 }}>

6
frontend/src/Editor/WidgetManager/widgetConfig.js
View file

@ -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: {