From 67d8dfcb9abdfe5e069ef3ab2eb170c3694c8062 Mon Sep 17 00:00:00 2001 From: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com> Date: Fri, 26 Jul 2024 08:33:47 +0530 Subject: [PATCH] Fix dropdown/multiselect add option (#10243) * fix not able to add option in Dropdown and multiselect * fix multiselect default value * fix options not updating on dropdown component change * Fix icon visibility issue in inspector * fix * fix --- .../CodeBuilder/Elements/Visibility.jsx | 5 ++- .../Components/DropdownV2/DropdownV2.jsx | 24 ++++------ .../MultiselectV2/MultiselectV2.jsx | 15 ++++--- .../Editor/Inspector/Components/Select.jsx | 18 ++------ .../WidgetManager/configs/dropdownV2.js | 44 ++++++++++--------- .../WidgetManager/configs/multiselectV2.js | 30 ++++++++++--- 6 files changed, 73 insertions(+), 63 deletions(-) diff --git a/frontend/src/Editor/CodeBuilder/Elements/Visibility.jsx b/frontend/src/Editor/CodeBuilder/Elements/Visibility.jsx index 0b8c100b34..525e5d998f 100644 --- a/frontend/src/Editor/CodeBuilder/Elements/Visibility.jsx +++ b/frontend/src/Editor/CodeBuilder/Elements/Visibility.jsx @@ -1,8 +1,9 @@ import React from 'react'; import SolidIcon from '@/_ui/Icon/SolidIcons'; +import { resolveReferences } from '@/_helpers/utils'; export const Visibility = ({ onVisibilityChange, styleDefinition }) => { - const iconVisibility = styleDefinition?.iconVisibility?.value || false; + const iconVisibility = resolveReferences(styleDefinition?.iconVisibility?.value) || false; return (
{ style={{ top: iconVisibility && '42%' }} onClick={(e) => { e.stopPropagation(); - onVisibilityChange(!iconVisibility); + onVisibilityChange(`{{${!iconVisibility}}}`); }} > diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx index d64a9ce698..0699eb34a6 100644 --- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx +++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx @@ -60,16 +60,7 @@ export const DropdownV2 = ({ dataCy, isEditorReady, }) => { - const { - label, - value, - advanced, - schema, - placeholder, - loadingState: dropdownLoadingState, - disabledState, - options, - } = properties; + const { label, value, advanced, schema, placeholder, loadingState: dropdownLoadingState, disabledState } = properties; const { selectedTextColor, fieldBorderRadius, @@ -93,6 +84,7 @@ export const DropdownV2 = ({ const { value: exposedValue } = exposedVariables; const currentState = useCurrentState(); const isMandatory = resolveReferences(component?.definition?.validation?.mandatory?.value, currentState); + const options = component?.definition?.properties?.options?.value; const validationData = validate(currentValue); const { isValid, validationError } = validationData; const ref = React.useRef(null); @@ -103,7 +95,6 @@ export const DropdownV2 = ({ const [searchInputValue, setSearchInputValue] = useState(''); const _height = padding === 'default' ? `${height}px` : `${height + 4}px`; const labelRef = useRef(); - function findDefaultItem(schema) { let _schema = schema; if (!Array.isArray(schema)) { @@ -112,15 +103,16 @@ export const DropdownV2 = ({ const foundItem = _schema?.find((item) => item?.default === true); return !hasVisibleFalse(foundItem?.value) ? foundItem?.value : undefined; } - const selectOptions = useMemo(() => { let _options = advanced ? schema : options; if (Array.isArray(_options)) { let _selectOptions = _options - .filter((data) => data?.visible?.value) - .map((value) => ({ - ...value, - isDisabled: value?.disable?.value, + .filter((data) => resolveReferences(advanced ? data?.visible : data?.visible?.value, currentState)) + .map((data) => ({ + ...data, + label: resolveReferences(data?.label, currentState), + value: resolveReferences(data?.value, currentState), + isDisabled: resolveReferences(advanced ? data?.disable : data?.disable?.value, currentState), })); return _selectOptions; } else { diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index 0d506b5ca2..1049532c4b 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -31,8 +31,6 @@ export const MultiselectV2 = ({ }) => { let { label, - values, - options, showAllOption, disabledState, advanced, @@ -62,6 +60,8 @@ export const MultiselectV2 = ({ const [selected, setSelected] = useState([]); const currentState = useCurrentState(); const isMandatory = resolveReferences(component?.definition?.validation?.mandatory?.value, currentState); + const options = component?.definition?.properties?.options?.value; + const values = component?.definition?.properties?.values?.value; const multiselectRef = React.useRef(null); const labelRef = React.useRef(null); const validationData = validate(selected?.length ? selected?.map((option) => option.value) : null); @@ -87,10 +87,12 @@ export const MultiselectV2 = ({ const _options = advanced ? schema : options; let _selectOptions = Array.isArray(_options) ? _options - .filter((data) => data?.visible?.value) - .map((value) => ({ - ...value, - isDisabled: value?.disable?.value, + .filter((data) => resolveReferences(advanced ? data?.visible : data?.visible?.value, currentState)) + .map((data) => ({ + ...data, + label: resolveReferences(data?.label, currentState), + value: resolveReferences(data?.value, currentState), + isDisabled: resolveReferences(advanced ? data?.disable : data?.disable?.value, currentState), })) : []; return _selectOptions; @@ -365,6 +367,7 @@ export const MultiselectV2 = ({ }), }; const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value + return ( <>
{ - const newOption = { ...option }; - - valuesToResolve.forEach((key) => { - if (option[key]) { - newOption[key] = resolveReferences(option[key], currentState); - } - }); - - return newOption; - }); + options = optionsValue?.map((option) => option); } return options.map((option) => { @@ -271,7 +261,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { useEffect(() => { setOptions(constructOptions()); - }, [isMultiSelect]); + }, [isMultiSelect, component?.id]); const _renderOverlay = (item, index) => { return ( @@ -310,7 +300,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
- {item.label} + {resolveReferences(item.label, currentState)}
{index === hoveredOptionIndex && ( diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js index 860f0acb4b..247af3ccef 100644 --- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js +++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js @@ -46,21 +46,6 @@ export const dropdownV2Config = { }, accordian: 'Options', }, - value: { - type: 'code', - displayName: 'Default value', - conditionallyRender: { - key: 'advanced', - value: false, - }, - validation: { - schema: { - type: 'union', - schemas: [{ type: 'string' }, { type: 'number' }, { type: 'boolean' }], - }, - }, - accordian: 'Options', - }, schema: { type: 'code', displayName: 'Schema', @@ -286,11 +271,32 @@ export const dropdownV2Config = { advanced: { value: `{{false}}` }, schema: { value: - "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true} },{label: 'option3',value: '3',disable: {value: false },visible: {value:true },default: {value: false} }\t]}}", + "{{[\t{label: 'option1',value: 1,disable: false,visible: true,default: true},{label: 'option2',value: 2,disable: false,visible: true},{label: 'option3',value: 3,disable: false,visible: true}\t]}}", }, options: { - value: - "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true} },{label: 'option3',value: '3',disable: {value: false },visible: {value:true },default: {value: false} }\t]}}", + value: [ + { + label: 'option1', + value: '1', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + { + label: 'option2', + value: '2', + disable: { value: false }, + visible: { value: true }, + default: { value: true }, + }, + { + label: 'option3', + value: '3', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + ], }, label: { value: 'Select' }, value: { value: '{{"2"}}' }, @@ -299,8 +305,6 @@ export const dropdownV2Config = { visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, loadingState: { value: '{{false}}' }, - optionVisibility: { value: '{{[true, true, true]}}' }, - optionDisable: { value: '{{[false, false, false]}}' }, tooltip: { value: '' }, }, events: [], diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index d809ca34cb..6aefd71067 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -309,8 +309,7 @@ export const multiselectV2Config = { }, properties: { label: { value: 'Select' }, - // value: { value: '{{["1","2"]}}' }, - values: { value: '{{["1","2"]}}' }, + values: { value: ['1', '2'] }, advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, @@ -320,11 +319,32 @@ export const multiselectV2Config = { loadingState: { value: '{{false}}' }, schema: { value: - "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true} },{label: 'option3',value: '3',disable: {value: false },visible: {value:true },default: {value: false} }\t]}}", + "{{[\t{label: 'option1',value: 1,disable: false,visible: true,default: true},{label: 'option2',value: 2,disable: false,visible: true},{label: 'option3',value: 3,disable: false,visible: true}\t]}}", }, options: { - value: - "{{[\t{label: 'option1',value: '1',disable: {value: false },visible: {value:true },default: {value: false} },{label: 'option2',value: '2',disable: {value: false },visible:{value: true},default: {value: true} },{label: 'option3',value: '3',disable: {value: false },visible: {value:true },default: {value: false} }\t]}}", + value: [ + { + label: 'option1', + value: '1', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + { + label: 'option2', + value: '2', + disable: { value: false }, + visible: { value: true }, + default: { value: true }, + }, + { + label: 'option3', + value: '3', + disable: { value: false }, + visible: { value: true }, + default: { value: false }, + }, + ], }, tooltip: { value: '' }, },