-
setShowColorPicker(true)}>
-
{color}
- {!(color === `Invalid Color`) &&
}
+
+
+
setShowColorPicker(true)}
+ >
+
{color}
+ {!(color === `Invalid Color`) &&
}
+
{showColorPicker && (
- <>
-
setShowColorPicker(false)}
- width={width}
- >
-
-
-
setShowColorPicker(false)}>
-
+
+
+
)}
);
diff --git a/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx b/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx
index fa96cec8b9..5bfe9818e5 100644
--- a/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx
+++ b/frontend/src/Editor/Components/CustomComponent/CustomComponent.jsx
@@ -1,33 +1,18 @@
import React, { useEffect, useState, useRef } from 'react';
import { isEqual } from 'lodash';
import iframeContent from './iframe.html';
-
-import { useDataQueries } from '@/_stores/dataQueriesStore';
-import { useGridStore } from '@/_stores/gridStore';
-import { isQueryRunnable } from '@/_helpers/utils';
+import useStore from '@/AppBuilder/_stores/store';
import { shallow } from 'zustand/shallow';
export const CustomComponent = (props) => {
- const { height, properties, styles, id, setExposedVariable, exposedVariables, fireEvent, dataCy, component } = props;
- const dataQueries = useDataQueries();
-
- const showPlaceholder = useGridStore((state) => {
- const { resizingComponentId, draggingComponentId } = state;
- if (
- (resizingComponentId === null && draggingComponentId === id) ||
- (draggingComponentId === null && resizingComponentId === id) ||
- id === 'resizingComponentId'
- ) {
- return true;
- }
- return false;
- }, shallow);
-
+ const { height, properties, styles, id, setExposedVariable, dataCy } = props;
+ const exposedVariables = useStore((state) => state.getExposedValueOfComponent(id), shallow);
+ const onEvent = useStore((state) => state.eventsSlice.onEvent, shallow);
const { visibility, boxShadow } = styles;
const { code, data } = properties;
const [customProps, setCustomProps] = useState(data);
const iFrameRef = useRef(null);
- const dataQueryRef = useRef(dataQueries);
+
const customPropRef = useRef(data);
useEffect(() => {
@@ -42,17 +27,13 @@ export const CustomComponent = (props) => {
sendMessageToIframe({ message: 'DATA_UPDATED' });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [setExposedVariable, customProps, exposedVariables.data]);
+ }, [customProps, exposedVariables.data]);
useEffect(() => {
sendMessageToIframe({ message: 'CODE_UPDATED' });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [code]);
- useEffect(() => {
- dataQueryRef.current = dataQueries;
- }, [dataQueries]);
-
useEffect(() => {
window.addEventListener('message', (e) => {
try {
@@ -60,17 +41,11 @@ export const CustomComponent = (props) => {
if (e.data.message === 'UPDATE_DATA') {
setCustomProps({ ...customPropRef.current, ...e.data.updatedObj });
} else if (e.data.message === 'RUN_QUERY') {
- const filteredQuery = dataQueryRef.current.filter(
- (query) => query.name === e.data.queryName && isQueryRunnable(query)
- );
- const parameters = e.data.parameters ? JSON.parse(e.data.parameters) : {};
- filteredQuery.length === 1 &&
- fireEvent('onTrigger', {
- component,
- queryId: filteredQuery[0].id,
- queryName: filteredQuery[0].name,
- parameters,
- });
+ const options = {
+ parameters: e.data.parameters,
+ queryName: e.data.queryName,
+ };
+ onEvent('onTrigger', [], options);
} else {
sendMessageToIframe(e.data);
}
@@ -90,7 +65,7 @@ export const CustomComponent = (props) => {
{
message: 'INIT_RESPONSE',
componentId: id,
- data: customProps,
+ data: customPropRef.current,
code: code,
},
'*'
@@ -121,14 +96,12 @@ export const CustomComponent = (props) => {
return (
- {showPlaceholder ? null : (
-
- )}
+
);
};
diff --git a/frontend/src/Editor/Components/Datepicker.jsx b/frontend/src/Editor/Components/Datepicker.jsx
index e7c624cbad..3e04df1e4d 100644
--- a/frontend/src/Editor/Components/Datepicker.jsx
+++ b/frontend/src/Editor/Components/Datepicker.jsx
@@ -1,27 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import DatePickerComponent from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
+import './datepicker.scss';
+import cx from 'classnames';
export const Datepicker = function Datepicker({
height,
properties,
styles,
- exposedVariables,
setExposedVariable,
+ setExposedVariables,
validate,
onComponentClick,
- component,
id,
darkMode,
fireEvent,
dataCy,
}) {
+ const isInitialRender = useRef(true);
const { enableTime, enableDate, defaultValue, disabledDates } = properties;
const format = typeof properties.format === 'string' ? properties.format : '';
const { visibility, disabledState, borderRadius, boxShadow } = styles;
- const [date, setDate] = useState(null);
+ const [date, setDate] = useState(defaultValue);
const [excludedDates, setExcludedDates] = useState([]);
const [showValidationError, setShowValidationError] = useState(false);
@@ -46,6 +48,7 @@ export const Datepicker = function Datepicker({
};
useEffect(() => {
+ if (isInitialRender.current) return;
const dateMomentInstance = defaultValue && moment(defaultValue, selectedDateFormat);
if (dateMomentInstance && dateMomentInstance.isValid()) {
setDate(dateMomentInstance.toDate());
@@ -70,14 +73,32 @@ export const Datepicker = function Datepicker({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [disabledDates, format]);
- const validationData = validate(exposedVariables.value);
+ const validationData = validate(computeDateString(date));
const { isValid, validationError } = validationData;
useEffect(() => {
+ isInitialRender.current = false;
setExposedVariable('isValid', isValid);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isValid]);
+ useEffect(() => {
+ const exposedVariables = {
+ isValid,
+ };
+ const dateMomentInstance = defaultValue && moment(defaultValue, selectedDateFormat);
+ if (dateMomentInstance && dateMomentInstance.isValid()) {
+ setDate(dateMomentInstance.toDate());
+ exposedVariables.value = defaultValue;
+ } else {
+ setDate(null);
+ exposedVariables.value = undefined;
+ }
+ setExposedVariables(exposedVariables);
+ isInitialRender.current = false;
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
return (
onDateChange(date)}
showTimeInput={enableTime ? true : false}
showTimeSelectOnly={enableDate ? false : true}
onFocus={(event) => {
- onComponentClick(id, component, event);
+ onComponentClick(id);
}}
showMonthDropdown
showYearDropdown
diff --git a/frontend/src/Editor/Components/DaterangePicker.jsx b/frontend/src/Editor/Components/DaterangePicker.jsx
index 67cfdd7f22..b30e189bd6 100644
--- a/frontend/src/Editor/Components/DaterangePicker.jsx
+++ b/frontend/src/Editor/Components/DaterangePicker.jsx
@@ -10,11 +10,14 @@ export const DaterangePicker = function DaterangePicker({
properties,
styles,
setExposedVariable,
+ setExposedVariables,
width,
darkMode,
fireEvent,
dataCy,
+ id,
}) {
+ const isInitialRender = useRef(true);
const { borderRadius, visibility, disabledState, boxShadow } = styles;
const { defaultStartDate, defaultEndDate } = properties;
const formatProp = typeof properties.format === 'string' ? properties.format : '';
@@ -26,12 +29,28 @@ export const DaterangePicker = function DaterangePicker({
const dateRangeRef = useRef(null);
useEffect(() => {
+ if (isInitialRender.current) return;
+ setStartDate(moment(defaultStartDate, formatProp));
+ setExposedVariable('startDate', moment(defaultStartDate, formatProp).format(formatProp));
+ }, [defaultStartDate, formatProp]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setEndDate(moment(defaultEndDate, formatProp));
+ setExposedVariable('endDate', moment(defaultEndDate, formatProp).format(formatProp));
+ }, [defaultEndDate, formatProp]);
+
+ useEffect(() => {
+ const exposedVariables = {
+ startDate: moment(defaultStartDate, formatProp).format(formatProp),
+ endDate: moment(defaultEndDate, formatProp).format(formatProp),
+ };
+ setExposedVariables(exposedVariables);
setStartDate(moment(defaultStartDate, formatProp));
setEndDate(moment(defaultEndDate, formatProp));
- setExposedVariable('startDate', startDate.format(formatProp));
- setExposedVariable('endDate', endDate.format(formatProp));
+ isInitialRender.current = false;
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [defaultEndDate, defaultStartDate, formatProp]);
+ }, []);
useEffect(() => {
dateRangeRef.current.container.querySelector('.DateRangePickerInput').style.borderRadius = `${Number.parseFloat(
@@ -63,6 +82,11 @@ export const DaterangePicker = function DaterangePicker({
function focusChanged(focus) {
setFocusedInput(focus);
+ if (focus) {
+ document.querySelector(`.ele-${id}`).style.zIndex = 3;
+ } else {
+ document.querySelector(`.ele-${id}`).style.zIndex = '';
+ }
}
return (
diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index b0aefad133..723cb34c3a 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -1,5 +1,5 @@
import _ from 'lodash';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import Select, { components } from 'react-select';
import TriangleDownArrow from '@/_ui/Icon/bulkIcons/TriangleDownArrow';
import TriangleUpArrow from '@/_ui/Icon/bulkIcons/TriangleUpArrow';
@@ -10,22 +10,20 @@ export const DropDown = function DropDown({
properties,
styles,
setExposedVariable,
+ setExposedVariables,
fireEvent,
darkMode,
onComponentClick,
id,
- component,
- exposedVariables,
dataCy,
}) {
+ const isInitialRender = useRef(true);
let { label, value, advanced, schema, placeholder, display_values, values } = properties;
const { selectedTextColor, borderRadius, visibility, disabledState, justifyContent, boxShadow } = styles;
const [currentValue, setCurrentValue] = useState(() => (advanced ? findDefaultItem(schema) : value));
- const { value: exposedValue } = exposedVariables;
const [showValidationError, setShowValidationError] = useState(false);
const validationData = validate(value);
const { isValid, validationError } = validationData;
-
function findDefaultItem(schema) {
const foundItem = schema?.find((item) => item?.default === true);
return !hasVisibleFalse(foundItem?.value) ? foundItem?.value : undefined;
@@ -63,10 +61,13 @@ export const DropDown = function DropDown({
const setExposedItem = (value, index, onSelectFired = false) => {
setCurrentValue(value);
if (onSelectFired) {
- setExposedVariable('value', value);
fireEvent('onSelect');
- } else setExposedVariable('value', value);
- setExposedVariable('selectedOptionLabel', index === undefined ? undefined : display_values?.[index]);
+ }
+ const exposedVariables = {
+ value,
+ selectedOptionLabel: index === undefined ? undefined : display_values?.[index],
+ };
+ setExposedVariables(exposedVariables);
};
function selectOption(value) {
@@ -79,19 +80,71 @@ export const DropDown = function DropDown({
setExposedItem(undefined, undefined, true);
}
}
-
- useEffect(() => {
- setExposedVariable('selectOption', async function (value) {
- selectOption(value);
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [JSON.stringify(values), setCurrentValue, JSON.stringify(display_values)]);
-
useEffect(() => {
+ if (isInitialRender.current) return;
setExposedVariable('isValid', isValid);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isValid]);
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('value', currentValue);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentValue]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ const index = values?.indexOf(currentValue);
+ setExposedVariable('selectedOptionLabel', display_values?.[index]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentValue, JSON.stringify(display_values), JSON.stringify(values)]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('label', label);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [label]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ if (advanced) {
+ setExposedVariable(
+ 'optionLabels',
+ schema?.filter((item) => item?.visible)?.map((item) => item.label)
+ );
+ if (hasVisibleFalse(currentValue)) {
+ setCurrentValue(findDefaultItem(schema));
+ }
+ } else setExposedVariable('optionLabels', display_values);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [JSON.stringify(schema), advanced, JSON.stringify(display_values), currentValue]);
+
+ useEffect(() => {
+ const index = values?.indexOf(currentValue);
+ let optionLabels = display_values;
+ if (advanced) {
+ optionLabels = schema?.filter((item) => item?.visible)?.map((item) => item.label);
+ }
+ const exposedVariables = {
+ selectOption: async function (value) {
+ selectOption(value);
+ },
+ isValid: isValid,
+ value: currentValue,
+ selectedOptionLabel: display_values?.[index],
+ label: label,
+ optionLabels: optionLabels,
+ };
+
+ setExposedVariables(exposedVariables);
+ if (hasVisibleFalse(currentValue)) {
+ setCurrentValue(findDefaultItem(schema));
+ }
+ isInitialRender.current = false;
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
useEffect(() => {
let newValue = undefined;
let index = null;
@@ -104,16 +157,6 @@ export const DropDown = function DropDown({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(value), JSON.stringify(values)]);
- useEffect(() => {
- let index = null;
- if (exposedValue !== currentValue) {
- setExposedVariable('value', currentValue);
- }
- index = values?.indexOf(currentValue);
- setExposedVariable('selectedOptionLabel', display_values?.[index]);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentValue, JSON.stringify(display_values), JSON.stringify(values)]);
-
useEffect(() => {
let newValue = undefined;
let index = null;
@@ -125,24 +168,6 @@ export const DropDown = function DropDown({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(values)]);
- useEffect(() => {
- setExposedVariable('label', label);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [label]);
-
- useEffect(() => {
- if (advanced) {
- setExposedVariable(
- 'optionLabels',
- schema?.filter((item) => item?.visible)?.map((item) => item.label)
- );
- if (hasVisibleFalse(currentValue)) {
- setCurrentValue(findDefaultItem(schema));
- }
- } else setExposedVariable('optionLabels', display_values);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [JSON.stringify(schema), advanced, JSON.stringify(display_values), currentValue]);
-
function hasVisibleFalse(value) {
for (let i = 0; i < schema?.length; i++) {
if (schema[i].value === value && schema[i].visible === false) {
@@ -227,42 +252,6 @@ export const DropDown = function DropDown({
backgroundColor: darkMode ? 'rgb(31,40,55)' : 'white',
}),
};
- const [isOpen, setIsOpen] = useState(false);
-
- const handleDropdownOpen = () => {
- setIsOpen(true);
- };
-
- const handleDropdownClose = () => {
- setIsOpen(false);
- };
-
- const DropdownIndicator = (props) => {
- return (
-
- (isOpen ? handleDropdownClose() : handleDropdownOpen())}>
- {isOpen ? (
-
- ) : (
-
- )}
-
-
- );
- };
-
- useEffect(() => {
- const handleClickOutside = (event) => {
- if (isOpen && !event.target.closest('.dropdown-widget')) {
- handleDropdownClose();
- }
- };
-
- document.addEventListener('click', handleClickOutside);
- return () => {
- document.removeEventListener('click', handleClickOutside);
- };
- }, [isOpen]);
return (
<>
@@ -271,7 +260,7 @@ export const DropDown = function DropDown({
style={{ height, display: visibility ? '' : 'none' }}
onClick={(event) => {
event.stopPropagation();
- onComponentClick(id, component, event);
+ onComponentClick(id);
}}
data-cy={dataCy}
>
@@ -297,13 +286,9 @@ export const DropDown = function DropDown({
styles={customStyles}
isLoading={properties.loadingState}
onInputChange={onSearchTextChange}
- onFocus={(event) => onComponentClick(event, component, id)}
+ onFocus={(event) => onComponentClick(id)}
menuPortalTarget={document.body}
placeholder={placeholder}
- onMenuOpen={handleDropdownOpen}
- onMenuClose={handleDropdownClose}
- menuIsOpen={isOpen}
- components={{ DropdownIndicator }}
/>
diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
index df4697835c..9b1c5981e0 100644
--- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
@@ -1,5 +1,3 @@
-import { resolveReferences } from '@/_helpers/utils';
-import { useCurrentState } from '@/_stores/currentStateStore';
import React, { useState, useEffect, useMemo, useRef } from 'react';
import Select, { components } from 'react-select';
import ClearIndicatorIcon from '@/_ui/Icon/bulkIcons/ClearIndicator';
@@ -16,6 +14,8 @@ import CustomOption from './CustomOption';
import Label from '@/_ui/Label';
import cx from 'classnames';
import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from './utils';
+import useStore from '@/AppBuilder/_stores/store';
+import { shallow } from 'zustand/shallow';
const { DropdownIndicator, ClearIndicator } = components;
const INDICATOR_CONTAINER_WIDTH = 60;
@@ -55,11 +55,20 @@ export const DropdownV2 = ({
darkMode,
onComponentClick,
id,
- component,
- exposedVariables,
+ componentName,
+ validation,
dataCy,
}) => {
- const { label, value, advanced, schema, placeholder, loadingState: dropdownLoadingState, disabledState } = properties;
+ const {
+ label,
+ value,
+ advanced,
+ schema,
+ placeholder,
+ loadingState: dropdownLoadingState,
+ disabledState,
+ optionsLoadingState,
+ } = properties;
const {
selectedTextColor,
fieldBorderRadius,
@@ -79,11 +88,11 @@ export const DropdownV2 = ({
accentColor,
padding,
} = styles;
+ const isInitialRender = useRef(true);
const [currentValue, setCurrentValue] = useState(() => (advanced ? findDefaultItem(schema) : value));
- const { value: exposedValue } = exposedVariables;
- const currentState = useCurrentState();
- const isMandatory = resolveReferences(component?.definition?.validation?.mandatory?.value, currentState);
- const options = component?.definition?.properties?.options?.value;
+ const getResolvedValue = useStore((state) => state.getResolvedValue, shallow);
+ const isMandatory = validation?.mandatory ?? false;
+ const options = properties?.options;
const validationData = validate(currentValue);
const { isValid, validationError } = validationData;
const ref = React.useRef(null);
@@ -106,13 +115,14 @@ export const DropdownV2 = ({
let _options = advanced ? schema : options;
if (Array.isArray(_options)) {
let _selectOptions = _options
- .filter((data) => resolveReferences(advanced ? data?.visible : data?.visible?.value, currentState))
+ .filter((data) => getResolvedValue(advanced ? data?.visible : data?.visible?.value) ?? true)
.map((data) => ({
...data,
- label: resolveReferences(data?.label, currentState),
- value: resolveReferences(data?.value, currentState),
- isDisabled: resolveReferences(advanced ? data?.disable : data?.disable?.value, currentState),
+ label: String(getResolvedValue(data?.label)),
+ value: getResolvedValue(data?.value),
+ isDisabled: getResolvedValue(advanced ? data?.disable : data?.disable?.value) ?? false,
}));
+
return _selectOptions;
} else {
return [];
@@ -139,6 +149,7 @@ export const DropdownV2 = ({
const onSearchTextChange = (searchText, actionProps) => {
if (actionProps.action === 'input-change') {
setSearchInputValue(searchText);
+ setExposedVariable('searchText', searchText);
fireEvent('onSearchTextChanged');
}
};
@@ -174,11 +185,21 @@ export const DropdownV2 = ({
}, [properties.visibility, dropdownLoadingState, disabledState]);
// Exposed variables
+
useEffect(() => {
- if (exposedValue !== currentValue) {
- const _selectedOption = selectOptions.find((option) => option.value === currentValue);
- setExposedVariable('selectedOption', pick(_selectedOption, ['label', 'value']));
- }
+ if (isInitialRender.current) return;
+ setExposedVariable('value', currentValue);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentValue]);
+
+ useEffect(() => {
+ const _selectedOption = selectOptions.find((option) => option.value === currentValue);
+ setExposedVariable('selectedOption', pick(_selectedOption, ['label', 'value']));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentValue, JSON.stringify(selectOptions)]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
const _options = selectOptions?.map(({ label, value }) => ({ label, value }));
setExposedVariable('options', _options);
@@ -191,33 +212,75 @@ export const DropdownV2 = ({
}, [currentValue, JSON.stringify(selectOptions)]);
useEffect(() => {
+ if (isInitialRender.current) return;
setExposedVariable('label', label);
- setExposedVariable('searchText', searchInputValue);
- setExposedVariable('isValid', isValid);
- setExposedVariable('isVisible', properties.visibility);
- setExposedVariable('isLoading', dropdownLoadingState);
- setExposedVariable('isDisabled', disabledState);
- setExposedVariable('isMandatory', isMandatory);
-
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [properties.visibility, dropdownLoadingState, disabledState, isMandatory, label, searchInputValue, isValid]);
+ }, [label]);
useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('searchText', searchInputValue);
+ }, [searchInputValue]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isValid', isValid);
+ }, [isValid]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isVisible', properties.visibility);
+ }, [properties.visibility]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isLoading', dropdownLoadingState);
+ }, [dropdownLoadingState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isDisabled', disabledState);
+ }, [disabledState]);
+
+ useEffect(() => {
+ if (isInitialRender.current) return;
+ setExposedVariable('isMandatory', isMandatory);
+ }, [isMandatory]);
+
+ useEffect(() => {
+ const _options = selectOptions?.map(({ label, value }) => ({ label, value }));
const exposedVariables = {
clear: async function () {
setCurrentValue(null);
},
setVisibility: async function (value) {
setVisibility(value);
+ setExposedVariable('isVisible', value);
},
setLoading: async function (value) {
setIsDropdownLoading(value);
+ setExposedVariable('isLoading', value);
},
setDisable: async function (value) {
setIsDropdownDisabled(value);
+ setExposedVariable('isDisabled', value);
},
+ selectOption: async function (value) {
+ let _value = value;
+ if (isObject(value) && has(value, 'value')) _value = value?.value;
+ selectOption(_value);
+ },
+ options: _options,
+ value: currentValue,
+ label: label,
+ searchText: searchInputValue,
+ isValid: isValid,
+ isVisible: properties.visibility,
+ isLoading: dropdownLoadingState,
+ isDisabled: disabledState,
+ isMandatory: isMandatory,
};
setExposedVariables(exposedVariables);
+ isInitialRender.current = false;
}, []);
const customStyles = {
@@ -343,7 +406,7 @@ export const DropdownV2 = ({
return (
<>
{
- onComponentClick(id, component, event);
+ onComponentClick(id);
// This following line is needed because sometimes after clicking on canvas then also dropdown remains selected
useEditorStore.getState().actions.setHoveredComponent('');
}}
@@ -397,7 +460,7 @@ export const DropdownV2 = ({
isLoading={isDropdownLoading}
onInputChange={onSearchTextChange}
inputValue={searchInputValue}
- onFocus={() => {
+ onMenuOpen={() => {
fireEvent('onFocus');
}}
onMenuInputFocus={() => setIsFocused(true)}
@@ -425,7 +488,7 @@ export const DropdownV2 = ({
iconColor={iconColor}
isSearchable={false}
darkMode={darkMode}
- optionsLoadingState={properties.optionsLoadingState}
+ optionsLoadingState={optionsLoadingState && advanced}
menuPlacement="auto"
/>
diff --git a/frontend/src/Editor/Components/FilePicker.jsx b/frontend/src/Editor/Components/FilePicker.jsx
index e73abe3356..b2e2b1ff86 100644
--- a/frontend/src/Editor/Components/FilePicker.jsx
+++ b/frontend/src/Editor/Components/FilePicker.jsx
@@ -1,57 +1,46 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
import { useDropzone } from 'react-dropzone';
-import { resolveWidgetFieldValue } from '@/_helpers/utils';
import { toast } from 'react-hot-toast';
// eslint-disable-next-line import/no-unresolved
import * as XLSX from 'xlsx/xlsx.mjs';
import { useAppInfo } from '@/_stores/appDataStore';
+import useStore from '@/AppBuilder/_stores/store';
export const FilePicker = ({
id,
width,
height,
component,
+ fireEvent,
onComponentOptionChanged,
- onEvent,
darkMode,
styles,
+ properties,
setExposedVariable,
+ setExposedVariables,
dataCy,
}) => {
- //* properties definitions
- const instructionText =
- component.definition.properties.instructionText?.value ?? 'Drag and drop files here or click to select files';
- const enableDropzone = component.definition.properties.enableDropzone.value ?? true;
- const enablePicker = component.definition.properties?.enablePicker?.value ?? true;
- const maxFileCount = component.definition.properties.maxFileCount?.value ?? 2;
- const enableMultiple = component.definition.properties.enableMultiple?.value ?? false;
- const fileType = component.definition.properties.fileType?.value ?? 'image/*';
- const maxSize = component.definition.properties.maxSize?.value ?? 1048576;
- const minSize = component.definition.properties.minSize?.value ?? 0;
- const parseContent = resolveWidgetFieldValue(component.definition.properties.parseContent?.value);
- const fileTypeFromExtension = component.definition.properties.parseFileType?.value ?? 'auto-detect';
- const parsedEnableDropzone = typeof enableDropzone !== 'boolean' ? resolveWidgetFieldValue(enableDropzone) : true;
- const parsedEnablePicker = typeof enablePicker !== 'boolean' ? resolveWidgetFieldValue(enablePicker) : true;
-
- const parsedMaxFileCount = typeof maxFileCount !== 'number' ? resolveWidgetFieldValue(maxFileCount) : maxFileCount;
- const parsedEnableMultiple =
- typeof enableMultiple !== 'boolean' ? resolveWidgetFieldValue(enableMultiple) : enableMultiple;
- const parsedFileType = resolveWidgetFieldValue(fileType);
- const parsedMinSize = typeof fileType !== 'number' ? resolveWidgetFieldValue(minSize) : minSize;
- const parsedMaxSize = typeof fileType !== 'number' ? resolveWidgetFieldValue(maxSize) : maxSize;
- //* styles definitions
- const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
- const disabledState = component.definition.styles?.disabledState?.value ?? false;
-
- const parsedDisabledState =
- typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState) : disabledState;
- const parsedWidgetVisibility =
- typeof widgetVisibility !== 'boolean' ? resolveWidgetFieldValue(widgetVisibility) : widgetVisibility;
+ //* resolved properties d
+ const isInitialRender = useRef(true);
+ const instructionText = properties?.instructionText ?? 'Drag and drop files here or click to select files';
+ const enableDropzone = properties?.enableDropzone ?? true;
+ const enablePicker = properties?.enablePicker ?? true;
+ const maxFileCount = properties?.maxFileCount ?? 2;
+ const enableMultiple = properties?.enableMultiple ?? false;
+ const fileType = properties?.fileType ?? 'image/*';
+ const maxSize = properties?.maxSize ?? 1048576;
+ const minSize = properties?.minSize ?? 0;
+ const parseContent = properties.parseContent;
+ const fileTypeFromExtension = properties.parseFileType ?? 'auto-detect';
+ //* resolved styles
+ const widgetVisibility = styles?.visibility ?? true;
+ const disabledState = styles?.disabledState ?? false;
const { events: allAppEvents } = useAppInfo();
const filePickerEvents = allAppEvents.filter((event) => event.target === 'component' && event.sourceId === id);
+ console.log(filePickerEvents);
const bgThemeColor = darkMode ? '#232E3C' : '#fff';
@@ -68,9 +57,9 @@ export const FilePicker = ({
color: '#bdbdbd',
outline: 'none',
transition: 'border .24s ease-in-out',
- display: parsedWidgetVisibility ? 'flex' : 'none',
+ display: widgetVisibility ? 'flex' : 'none',
height,
- backgroundColor: !parsedDisabledState && bgThemeColor,
+ backgroundColor: !disabledState && bgThemeColor,
boxShadow: styles.boxShadow,
};
@@ -90,14 +79,14 @@ export const FilePicker = ({
const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject, acceptedFiles, fileRejections } =
useDropzone({
- accept: { parsedFileType: [parsedFileType] },
- noClick: !parsedEnablePicker || disablePicker,
- noDrag: !parsedEnableDropzone || disablePicker,
+ accept: { parsedFileType: [fileType] },
+ noClick: !enablePicker || disablePicker,
+ noDrag: !enableDropzone || disablePicker,
noKeyboard: true,
- maxFiles: parsedMaxFileCount,
- minSize: parsedMinSize,
- maxSize: parsedMaxSize,
- multiple: parsedEnableMultiple,
+ maxFiles: maxFileCount,
+ minSize: minSize,
+ maxSize: maxSize,
+ multiple: enableMultiple,
disabled: disablePicker,
validator: validateFileExists,
onDropRejected: () => (selectedFiles.length > 0 ? setShowSelectedFiles(true) : setShowSelectedFiles(false)),
@@ -107,9 +96,9 @@ export const FilePicker = ({
const style = useMemo(
() => ({
...baseStyle,
- ...(isDragActive && parsedEnableDropzone ? activeStyle : {}),
- ...(isDragAccept && parsedEnableDropzone ? acceptStyle : {}),
- ...(isDragReject && parsedEnableDropzone ? rejectStyle : {}),
+ ...(isDragActive && enableDropzone ? activeStyle : {}),
+ ...(isDragAccept && enableDropzone ? acceptStyle : {}),
+ ...(isDragReject && enableDropzone ? rejectStyle : {}),
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[baseStyle, isDragActive, isDragAccept, acceptStyle, isDragReject]
@@ -123,7 +112,7 @@ export const FilePicker = ({
function validateFileExists(_file) {
const selectedFilesCount = selectedFiles.length;
- if (selectedFilesCount === parsedMaxFileCount) {
+ if (selectedFilesCount === maxFileCount) {
return {
code: 'max_file_count_reached',
message: `Max file count reached`,
@@ -134,14 +123,13 @@ export const FilePicker = ({
}
useEffect(() => {
- if (parsedDisabledState) setDisablePicker(true);
-
- if (selectedFiles.length === parsedMaxFileCount && parsedEnableMultiple) {
+ if (disabledState) setDisablePicker(true);
+ else if (selectedFiles.length === maxFileCount && enableMultiple) {
setDisablePicker(true);
} else {
setDisablePicker(false);
}
- }, [selectedFiles.length, parsedDisabledState, parsedMaxFileCount, parsedEnableMultiple]);
+ }, [selectedFiles.length, disabledState, maxFileCount, enableMultiple]);
/**
* *getFileData()
@@ -220,35 +208,38 @@ export const FilePicker = ({
const fileSize = formatFileSize(rejectedFileSize);
if (code === errorType.MIN_SIZE) {
- return `File size ${fileSize} is too small. Minimum size is ${formatFileSize(parsedMinSize)}`;
+ return `File size ${fileSize} is too small. Minimum size is ${formatFileSize(minSize)}`;
}
if (code === errorType.MAX_SIZE) {
- return `File size ${fileSize} is too large. Maximum size is ${formatFileSize(parsedMaxSize)}`;
+ return `File size ${fileSize} is too large. Maximum size is ${formatFileSize(maxSize)}`;
}
return message;
};
useEffect(() => {
+ if (isInitialRender.current) return;
if (acceptedFiles.length === 0 && selectedFiles.length === 0) {
- onComponentOptionChanged(component, 'file', [], id);
+ setExposedVariable('file', []);
+ // onComponentOptionChanged(component, 'file', [], id);
}
- if (acceptedFiles.length !== 0 && onEvent) {
- const fileData = parsedEnableMultiple ? [...selectedFiles] : [];
+ if (acceptedFiles.length !== 0 && fireEvent) {
+ const fileData = enableMultiple ? [...selectedFiles] : [];
if (parseContent) {
- onComponentOptionChanged(component, 'isParsing', true, id);
+ setExposedVariable('isParsing', true);
+ // onComponentOptionChanged(component, 'isParsing', true, id);
}
acceptedFiles.map((acceptedFile) => {
const acceptedFileData = fileReader(acceptedFile);
acceptedFileData.then((data) => {
- if (fileData.length < parsedMaxFileCount) {
+ if (fileData.length < maxFileCount) {
fileData.push(data);
}
});
});
- onEvent('onFileSelected', filePickerEvents, { component })
+ fireEvent('onFileSelected', id, 'canvas', { component })
.then(() => {
setAccepted(true);
// eslint-disable-next-line no-unused-vars
@@ -256,15 +247,17 @@ export const FilePicker = ({
setTimeout(() => {
setShowSelectedFiles(true);
setAccepted(false);
- onComponentOptionChanged(component, 'isParsing', false, id);
+ setExposedVariable('isParsing', false);
+ // onComponentOptionChanged(component, 'isParsing', false, id);
resolve();
}, 600);
});
})
- .then(() => onEvent('onFileLoaded', filePickerEvents, { component }))
+ .then(() => fireEvent('onFileLoaded', id, 'canvas', { component }))
.then(() => {
setSelectedFiles(fileData);
- onComponentOptionChanged(component, 'file', fileData, id);
+ setExposedVariable('file', fileData);
+ // onComponentOptionChanged(component, 'file', fileData, id);
});
}
@@ -288,20 +281,32 @@ export const FilePicker = ({
copy.splice(index, 1);
return copy;
});
- onEvent('onFileDeselected', filePickerEvents);
+ fireEvent('onFileDeselected', id);
};
useEffect(() => {
+ isInitialRender.current = false;
if (selectedFiles.length === 0) {
setShowSelectedFiles(false);
}
- onComponentOptionChanged(component, 'file', selectedFiles, id);
- setExposedVariable('clearFiles', async function () {
- setSelectedFiles([]);
- });
+ setExposedVariable('file', selectedFiles);
+ // onComponentOptionChanged(component, 'file', selectedFiles, id);
+
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFiles]);
+ useEffect(() => {
+ const exposedVariables = {
+ clearFiles: async function () {
+ setSelectedFiles([]);
+ },
+ file: [],
+ };
+ setExposedVariables(exposedVariables);
+ setShowSelectedFiles(false);
+ isInitialRender.current = false;
+ }, []);
+
return (
@@ -342,12 +347,12 @@ export const FilePicker = ({
)}
diff --git a/frontend/src/Editor/Components/Form/Form.jsx b/frontend/src/Editor/Components/Form/Form.jsx
index 286525e328..34bbdec67e 100644
--- a/frontend/src/Editor/Components/Form/Form.jsx
+++ b/frontend/src/Editor/Components/Form/Form.jsx
@@ -77,7 +77,6 @@ export const Form = function Form(props) {
fireEvent('onInvalid');
}
});
-
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -112,7 +111,7 @@ export const Form = function Form(props) {
}, [advanced]);
useEffect(() => {
- setUIComponents(generateUIComponents(JSONSchema, advanced));
+ setUIComponents(generateUIComponents(JSONSchema, advanced, component.name));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(JSONSchema), advanced]);
@@ -142,7 +141,8 @@ export const Form = function Form(props) {
} else {
Object.keys(childComponents ?? {}).forEach((childId) => {
if (childrenData[childId]?.name) {
- formattedChildData[childrenData[childId].name] = { ...omit(childrenData[childId], 'name'), id: childId };
+ const componentName = childComponents?.[childId]?.component?.name;
+ formattedChildData[componentName] = { ...omit(childrenData[childId], 'name'), id: childId };
childValidation = childValidation && (childrenData[childId]?.isValid ?? true);
}
});
@@ -247,7 +247,7 @@ export const Form = function Form(props) {
) : (