Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Feature: color selector for checkbox (#930)

Browse source
This commit is contained in:
Sagar Choudhary 2021-10-08 13:50:11 +05:30 committed by GitHub
parent 92d8fb5bb3
commit 5a70d996fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,9 +11,12 @@ export const Checkbox = function Checkbox({
onComponentOptionChanged,
onEvent,
}) {
const [checked, setChecked] = React.useState(false);
const label = component.definition.properties.label.value;
const textColorProperty = component.definition.styles.textColor;
const textColor = textColorProperty ? textColorProperty.value : '#000';
const checkboxColorProperty = component.definition.styles.checkboxColor;
const checkboxColor = checkboxColorProperty ? checkboxColorProperty.value : '#3c92dc';
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
@ -29,9 +32,10 @@ export const Checkbox = function Checkbox({
}
function toggleValue(e) {
const checked = e.target.checked;
onComponentOptionChanged(component, 'value', checked);
if (checked) {
const isChecked = e.target.checked;
setChecked(isChecked);
onComponentOptionChanged(component, 'value', isChecked);
if (isChecked) {
onEvent('onCheck', { component });
} else {
onEvent('onUnCheck', { component });
@ -55,6 +59,7 @@ export const Checkbox = function Checkbox({
onClick={(e) => {
toggleValue(e);
}}
style={{ backgroundColor: checked ? `${checkboxColor}` : 'white' }}
/>
<span className="form-check-label" style={{ color: textColor }}>
{label}

2
frontend/src/Editor/Components/components.js
View file

@ -419,6 +419,7 @@ export const componentTypes = [
},
styles: {
textColor: { type: 'color', displayName: 'Text Color' },
checkboxColor: { type: 'color', displayName: 'Checkbox Color' },
visibility: { type: 'code', displayName: 'Visibility' },
disabledState: { type: 'code', displayName: 'Disable' },
},
@ -434,6 +435,7 @@ export const componentTypes = [
events: [],
styles: {
textColor: { value: '#000' },
checkboxColor: { value: '#3c92dc' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},