From dd7b74314382220cb83e15d52a94caace1b54fb0 Mon Sep 17 00:00:00 2001 From: Appledora Date: Tue, 15 Nov 2022 14:41:29 +0600 Subject: [PATCH] adds `On change` event in color picker component (#4203) * #issue4174 * #issue-4174 * #issue-4174 * bug fixed : event is getting fired on reloading the component * bug fixed : event getting fired on changing default value of the color picker from the inspector widget Co-authored-by: manishkushare --- .../src/Editor/Components/ColorPicker.jsx | 43 +++++++++++-------- .../DataSourceManager/TestConnection.jsx | 8 +++- .../src/Editor/Inspector/Components/Table.jsx | 4 +- .../src/Editor/WidgetManager/widgetConfig.js | 4 +- 4 files changed, 37 insertions(+), 22 deletions(-) diff --git a/frontend/src/Editor/Components/ColorPicker.jsx b/frontend/src/Editor/Components/ColorPicker.jsx index ecf5ec83b6..5fbe3a6fbc 100644 --- a/frontend/src/Editor/Components/ColorPicker.jsx +++ b/frontend/src/Editor/Components/ColorPicker.jsx @@ -9,6 +9,7 @@ export const ColorPicker = function ({ darkMode, height, registerAction, + fireEvent, }) { const { visibility } = styles; const defaultColor = properties.defaultColor; @@ -46,16 +47,18 @@ export const ColorPicker = function ({ registerAction( 'setColor', - async function (color) { - if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(color)) { - setExposedVariable('selectedColorHex', `${color}`); - setExposedVariable('selectedColorRGB', hexToRgb(color)); - setExposedVariable('selectedColorRGBA', hexToRgba(color)); - setColor(color); + async function (colorCode) { + if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(colorCode)) { + if (colorCode !== color) { + setColor(colorCode); + setExposedVariable('selectedColorHex', `${colorCode}`); + setExposedVariable('selectedColorRGB', hexToRgb(colorCode)); + setExposedVariable('selectedColorRGBA', hexToRgba(colorCode)).then(() => fireEvent('onChange')); + } } else { setExposedVariable('selectedColorHex', 'undefined'); setExposedVariable('selectedColorRGB', 'undefined'); - setExposedVariable('selectedColorRGBA', 'undefined'); + setExposedVariable('selectedColorRGBA', 'undefined').then(() => fireEvent('onChange')); setColor('Invalid Color'); } }, @@ -64,10 +67,12 @@ export const ColorPicker = function ({ useEffect(() => { if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(defaultColor)) { - setExposedVariable('selectedColorHex', `${defaultColor}`); - setExposedVariable('selectedColorRGB', hexToRgb(defaultColor)); - setExposedVariable('selectedColorRGBA', hexToRgba(defaultColor)); - setColor(defaultColor); + if (defaultColor !== color) { + setExposedVariable('selectedColorHex', `${defaultColor}`); + setExposedVariable('selectedColorRGB', hexToRgb(defaultColor)); + setExposedVariable('selectedColorRGBA', hexToRgba(defaultColor)); + setColor(defaultColor); + } } else { setExposedVariable('selectedColorHex', 'undefined'); setExposedVariable('selectedColorRGB', 'undefined'); @@ -77,13 +82,15 @@ export const ColorPicker = function ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultColor]); - const handleColorChange = (color) => { - const { r, g, b, a } = color.rgb; - const { hex: hexColor } = color; - setColor(hexColor); - setExposedVariable('selectedColorHex', `${hexColor}`); - setExposedVariable('selectedColorRGB', `rgb(${r},${g},${b})`); - setExposedVariable('selectedColorRGBA', `rgb(${r},${g},${b},${a})`); + const handleColorChange = (colorCode) => { + const { r, g, b, a } = colorCode.rgb; + const { hex: hexColor } = colorCode; + if (hexColor !== color) { + setColor(hexColor); + setExposedVariable('selectedColorHex', `${hexColor}`); + setExposedVariable('selectedColorRGB', `rgb(${r},${g},${b})`); + setExposedVariable('selectedColorRGBA', `rgb(${r},${g},${b},${a})`).then(() => fireEvent('onChange')); + } }; //background color style for the div dispaying box filled by selected color const backgroundColorDivStyle = { diff --git a/frontend/src/Editor/DataSourceManager/TestConnection.jsx b/frontend/src/Editor/DataSourceManager/TestConnection.jsx index cb0ba5a9e3..811e5a394c 100644 --- a/frontend/src/Editor/DataSourceManager/TestConnection.jsx +++ b/frontend/src/Editor/DataSourceManager/TestConnection.jsx @@ -47,11 +47,15 @@ export const TestConnection = ({ kind, options, pluginId, onConnectionTestFailed return (
{connectionStatus === 'failed' && ( - {t('globals.noConnection', 'could not connect')} + + {t('globals.noConnection', 'could not connect')} + )} {connectionStatus === 'success' && ( - {t('globals.connectionVerified', 'connection verified')} + + {t('globals.connectionVerified', 'connection verified')} + )} {connectionStatus === 'unknown' && ( diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index 8d58798d76..1260994aa4 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -786,7 +786,9 @@ class TableComponent extends React.Component { const displayServerSideFilter = component.component.definition.properties.showFilterButton?.value ? resolveReferences(component.component.definition.properties.showFilterButton?.value, currentState) : false; - const displayServerSideSearch = (component.component.definition.properties.displaySearchBox?.value) ? resolveReferences(component.component.definition.properties.displaySearchBox?.value, currentState) : false; + const displayServerSideSearch = component.component.definition.properties.displaySearchBox?.value + ? resolveReferences(component.component.definition.properties.displaySearchBox?.value, currentState) + : false; const serverSidePagination = component.component.definition.properties.serverSidePagination?.value ? resolveReferences(component.component.definition.properties.serverSidePagination?.value, currentState) : false; diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js index 35fa83acda..59a35f2dcc 100644 --- a/frontend/src/Editor/WidgetManager/widgetConfig.js +++ b/frontend/src/Editor/WidgetManager/widgetConfig.js @@ -4828,7 +4828,9 @@ ReactDOM.render(, document.body);`, showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, }, - events: {}, + events: { + onChange: { displayName: 'On change' }, + }, styles: { visibility: { type: 'toggle', displayName: 'Visibility' }, },