From 1e1ebf6f01080b4d5db9a8cc0b9d40877b47191e Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 19 Feb 2025 01:34:30 +0530 Subject: [PATCH 1/4] Added option for sorting in the properties panel. --- .../RightSideBar/Inspector/Components/Select.jsx | 13 +++++++++++++ .../AppBuilder/WidgetManager/widgets/dropdownV2.js | 13 +++++++++++++ .../WidgetManager/widgets/multiselectV2.js | 13 +++++++++++++ .../src/Editor/WidgetManager/configs/dropdownV2.js | 13 +++++++++++++ .../Editor/WidgetManager/configs/multiselectV2.js | 13 +++++++++++++ .../apps/services/widget-config/dropdownV2.js | 13 +++++++++++++ .../apps/services/widget-config/multiselectV2.js | 13 +++++++++++++ 7 files changed, 91 insertions(+) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index a57c879121..959a0571c6 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -32,6 +32,8 @@ export function Select({ componentMeta, darkMode, ...restProps }) { const isDynamicOptionsEnabled = getResolvedValue(component?.component?.definition?.properties?.advanced?.value); + const isSortingEnabled = componentMeta?.properties['sort'] ?? false; + const constructOptions = () => { let optionsValue = component?.component?.definition?.properties?.options?.value; if (!Array.isArray(optionsValue)) { @@ -512,6 +514,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) { currentState, allComponents )} + {isSortingEnabled && + renderElement( + component, + componentMeta, + paramUpdated, + dataQueries, + 'sort', + 'properties', + currentState, + allComponents + )} ), }); diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js index 247af3ccef..befb739c2a 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js @@ -63,6 +63,18 @@ export const dropdownV2Config = { }, accordian: 'Options', }, + sort: { + type: 'switch', + displayName: 'Sort options', + validation: { schema: { type: 'string' }, defaultValue: 'none' }, + options: [ + { displayName: 'None', value: 'none' }, + { displayName: 'a-z', value: 'asc' }, + { displayName: 'z-a', value: 'desc' }, + ], + accordian: 'Options', + isFxNotRequired: true, + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -301,6 +313,7 @@ export const dropdownV2Config = { label: { value: 'Select' }, value: { value: '{{"2"}}' }, optionsLoadingState: { value: '{{false}}' }, + sort: { value: 'none' }, placeholder: { value: 'Select an option' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index 6aefd71067..a6bf6f80e2 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -130,6 +130,18 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + sort: { + type: 'switch', + displayName: 'Sort options', + validation: { schema: { type: 'string' }, defaultValue: 'none' }, + options: [ + { displayName: 'None', value: 'none' }, + { displayName: 'a-z', value: 'asc' }, + { displayName: 'z-a', value: 'desc' }, + ], + accordian: 'Options', + isFxNotRequired: true, + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -313,6 +325,7 @@ export const multiselectV2Config = { advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, + sort: { value: 'none' }, placeholder: { value: 'Select the options' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js index 247af3ccef..befb739c2a 100644 --- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js +++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js @@ -63,6 +63,18 @@ export const dropdownV2Config = { }, accordian: 'Options', }, + sort: { + type: 'switch', + displayName: 'Sort options', + validation: { schema: { type: 'string' }, defaultValue: 'none' }, + options: [ + { displayName: 'None', value: 'none' }, + { displayName: 'a-z', value: 'asc' }, + { displayName: 'z-a', value: 'desc' }, + ], + accordian: 'Options', + isFxNotRequired: true, + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -301,6 +313,7 @@ export const dropdownV2Config = { label: { value: 'Select' }, value: { value: '{{"2"}}' }, optionsLoadingState: { value: '{{false}}' }, + sort: { value: 'none' }, placeholder: { value: 'Select an option' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index 6aefd71067..a6bf6f80e2 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -130,6 +130,18 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + sort: { + type: 'switch', + displayName: 'Sort options', + validation: { schema: { type: 'string' }, defaultValue: 'none' }, + options: [ + { displayName: 'None', value: 'none' }, + { displayName: 'a-z', value: 'asc' }, + { displayName: 'z-a', value: 'desc' }, + ], + accordian: 'Options', + isFxNotRequired: true, + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -313,6 +325,7 @@ export const multiselectV2Config = { advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, + sort: { value: 'none' }, placeholder: { value: 'Select the options' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/server/src/modules/apps/services/widget-config/dropdownV2.js b/server/src/modules/apps/services/widget-config/dropdownV2.js index 247af3ccef..befb739c2a 100644 --- a/server/src/modules/apps/services/widget-config/dropdownV2.js +++ b/server/src/modules/apps/services/widget-config/dropdownV2.js @@ -63,6 +63,18 @@ export const dropdownV2Config = { }, accordian: 'Options', }, + sort: { + type: 'switch', + displayName: 'Sort options', + validation: { schema: { type: 'string' }, defaultValue: 'none' }, + options: [ + { displayName: 'None', value: 'none' }, + { displayName: 'a-z', value: 'asc' }, + { displayName: 'z-a', value: 'desc' }, + ], + accordian: 'Options', + isFxNotRequired: true, + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -301,6 +313,7 @@ export const dropdownV2Config = { label: { value: 'Select' }, value: { value: '{{"2"}}' }, optionsLoadingState: { value: '{{false}}' }, + sort: { value: 'none' }, placeholder: { value: 'Select an option' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js index 6aefd71067..a6bf6f80e2 100644 --- a/server/src/modules/apps/services/widget-config/multiselectV2.js +++ b/server/src/modules/apps/services/widget-config/multiselectV2.js @@ -130,6 +130,18 @@ export const multiselectV2Config = { }, accordian: 'Options', }, + sort: { + type: 'switch', + displayName: 'Sort options', + validation: { schema: { type: 'string' }, defaultValue: 'none' }, + options: [ + { displayName: 'None', value: 'none' }, + { displayName: 'a-z', value: 'asc' }, + { displayName: 'z-a', value: 'desc' }, + ], + accordian: 'Options', + isFxNotRequired: true, + }, loadingState: { type: 'toggle', displayName: 'Loading state', @@ -313,6 +325,7 @@ export const multiselectV2Config = { advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, + sort: { value: 'none' }, placeholder: { value: 'Select the options' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, From 1082190e98c5c55515bae292fd772365047bbee7 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 19 Feb 2025 11:51:02 +0530 Subject: [PATCH 2/4] Changed the default value of Sorting. --- frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js | 4 ++-- .../src/AppBuilder/WidgetManager/widgets/multiselectV2.js | 4 ++-- frontend/src/Editor/WidgetManager/configs/dropdownV2.js | 4 ++-- frontend/src/Editor/WidgetManager/configs/multiselectV2.js | 4 ++-- server/src/modules/apps/services/widget-config/dropdownV2.js | 4 ++-- .../src/modules/apps/services/widget-config/multiselectV2.js | 4 ++-- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js index befb739c2a..b4672c6afe 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/dropdownV2.js @@ -66,7 +66,7 @@ export const dropdownV2Config = { sort: { type: 'switch', displayName: 'Sort options', - validation: { schema: { type: 'string' }, defaultValue: 'none' }, + validation: { schema: { type: 'string' }, defaultValue: 'asc' }, options: [ { displayName: 'None', value: 'none' }, { displayName: 'a-z', value: 'asc' }, @@ -313,7 +313,7 @@ export const dropdownV2Config = { label: { value: 'Select' }, value: { value: '{{"2"}}' }, optionsLoadingState: { value: '{{false}}' }, - sort: { value: 'none' }, + sort: { value: 'asc' }, placeholder: { value: 'Select an option' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js index a6bf6f80e2..b603db9c4a 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js @@ -133,7 +133,7 @@ export const multiselectV2Config = { sort: { type: 'switch', displayName: 'Sort options', - validation: { schema: { type: 'string' }, defaultValue: 'none' }, + validation: { schema: { type: 'string' }, defaultValue: 'asc' }, options: [ { displayName: 'None', value: 'none' }, { displayName: 'a-z', value: 'asc' }, @@ -325,7 +325,7 @@ export const multiselectV2Config = { advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, - sort: { value: 'none' }, + sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js index befb739c2a..b4672c6afe 100644 --- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js +++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js @@ -66,7 +66,7 @@ export const dropdownV2Config = { sort: { type: 'switch', displayName: 'Sort options', - validation: { schema: { type: 'string' }, defaultValue: 'none' }, + validation: { schema: { type: 'string' }, defaultValue: 'asc' }, options: [ { displayName: 'None', value: 'none' }, { displayName: 'a-z', value: 'asc' }, @@ -313,7 +313,7 @@ export const dropdownV2Config = { label: { value: 'Select' }, value: { value: '{{"2"}}' }, optionsLoadingState: { value: '{{false}}' }, - sort: { value: 'none' }, + sort: { value: 'asc' }, placeholder: { value: 'Select an option' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js index a6bf6f80e2..b603db9c4a 100644 --- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js +++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js @@ -133,7 +133,7 @@ export const multiselectV2Config = { sort: { type: 'switch', displayName: 'Sort options', - validation: { schema: { type: 'string' }, defaultValue: 'none' }, + validation: { schema: { type: 'string' }, defaultValue: 'asc' }, options: [ { displayName: 'None', value: 'none' }, { displayName: 'a-z', value: 'asc' }, @@ -325,7 +325,7 @@ export const multiselectV2Config = { advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, - sort: { value: 'none' }, + sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/server/src/modules/apps/services/widget-config/dropdownV2.js b/server/src/modules/apps/services/widget-config/dropdownV2.js index befb739c2a..b4672c6afe 100644 --- a/server/src/modules/apps/services/widget-config/dropdownV2.js +++ b/server/src/modules/apps/services/widget-config/dropdownV2.js @@ -66,7 +66,7 @@ export const dropdownV2Config = { sort: { type: 'switch', displayName: 'Sort options', - validation: { schema: { type: 'string' }, defaultValue: 'none' }, + validation: { schema: { type: 'string' }, defaultValue: 'asc' }, options: [ { displayName: 'None', value: 'none' }, { displayName: 'a-z', value: 'asc' }, @@ -313,7 +313,7 @@ export const dropdownV2Config = { label: { value: 'Select' }, value: { value: '{{"2"}}' }, optionsLoadingState: { value: '{{false}}' }, - sort: { value: 'none' }, + sort: { value: 'asc' }, placeholder: { value: 'Select an option' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, diff --git a/server/src/modules/apps/services/widget-config/multiselectV2.js b/server/src/modules/apps/services/widget-config/multiselectV2.js index a6bf6f80e2..b603db9c4a 100644 --- a/server/src/modules/apps/services/widget-config/multiselectV2.js +++ b/server/src/modules/apps/services/widget-config/multiselectV2.js @@ -133,7 +133,7 @@ export const multiselectV2Config = { sort: { type: 'switch', displayName: 'Sort options', - validation: { schema: { type: 'string' }, defaultValue: 'none' }, + validation: { schema: { type: 'string' }, defaultValue: 'asc' }, options: [ { displayName: 'None', value: 'none' }, { displayName: 'a-z', value: 'asc' }, @@ -325,7 +325,7 @@ export const multiselectV2Config = { advanced: { value: `{{false}}` }, showAllOption: { value: '{{false}}' }, optionsLoadingState: { value: '{{false}}' }, - sort: { value: 'none' }, + sort: { value: 'asc' }, placeholder: { value: 'Select the options' }, visibility: { value: '{{true}}' }, disabledState: { value: '{{false}}' }, From 26ac5ffdceba957007f12601e64eea220fd59e50 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Fri, 21 Feb 2025 10:00:55 +0530 Subject: [PATCH 3/4] Implemented sorting for dropdown and multiselect in component and properties panel. --- .../Inspector/Components/Select.jsx | 70 +++++++++++++------ .../Components/DropdownV2/DropdownV2.jsx | 15 +++- .../MultiselectV2/MultiselectV2.jsx | 14 +++- 3 files changed, 75 insertions(+), 24 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index 959a0571c6..cf5bc97d1a 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import Accordion from '@/_ui/Accordion'; import { EventManager } from '../EventManager'; import { renderElement } from '../Utils'; @@ -27,12 +27,13 @@ export function Select({ componentMeta, darkMode, ...restProps }) { allComponents, pages, } = restProps; + + const isInitialRender = useRef(true); const getResolvedValue = useStore((state) => state.getResolvedValue, shallow); const isMultiSelect = component?.component?.component === 'MultiselectV2'; - const isDynamicOptionsEnabled = getResolvedValue(component?.component?.definition?.properties?.advanced?.value); - const isSortingEnabled = componentMeta?.properties['sort'] ?? false; + const sort = component?.component?.definition?.properties?.sort?.value; const constructOptions = () => { let optionsValue = component?.component?.definition?.properties?.options?.value; @@ -83,6 +84,15 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } } + const sortArray = (arr) => { + if (sort === 'asc') { + return arr.sort((a, b) => a.label?.localeCompare(b.label)); + } else if (sort === 'desc') { + return arr.sort((a, b) => b.label?.localeCompare(a.label)); + } + return arr; + }; + const getItemStyle = (isDragging, draggableStyle) => ({ userSelect: 'none', ...draggableStyle, @@ -92,6 +102,15 @@ export function Select({ componentMeta, darkMode, ...restProps }) { paramUpdated({ name: 'options' }, 'value', options, 'properties', false, props); }; + const updateSortParam = (value) => { + paramUpdated({ name: 'sort' }, 'value', value, 'properties'); + }; + + const updateOptions = (options) => { + setOptions(options); + updateAllOptionsParams(options); + }; + const generateNewOptions = () => { let found = false; let label = ''; @@ -117,8 +136,8 @@ export function Select({ componentMeta, darkMode, ...restProps }) { const handleAddOption = () => { let _option = generateNewOptions(); const _items = [...options, _option]; - setOptions(_items); - updateAllOptionsParams(_items); + const sortedItems = sortArray(_items); + updateOptions(sortedItems); }; const handleDeleteOption = (index) => { @@ -137,8 +156,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } return option; }); - setOptions(_options); - updateAllOptionsParams(_options); + updateOptions(_options); }; const handleValueChange = (value, index) => { @@ -151,16 +169,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } return option; }); - setOptions(_options); - updateAllOptionsParams(_options); + updateOptions(_options); }; const reorderOptions = async (startIndex, endIndex) => { const result = [...options]; const [removed] = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); - setOptions(result); - updateAllOptionsParams(result); + updateOptions(result); + if (isSortingEnabled && sort !== 'none') { + updateSortParam('none'); + } }; const onDragEnd = ({ source, destination }) => { @@ -203,8 +222,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { }; } }); - setOptions(_options); - updateAllOptionsParams(_options); + updateOptions(_options); setMarkedAsDefault(_value); paramUpdated({ name: 'value' }, 'value', _value, 'properties'); } @@ -223,8 +241,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } return option; }); - setOptions(_options); - updateAllOptionsParams(_options); + updateOptions(_options); }; const handleDisableChange = (value, index) => { @@ -240,8 +257,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } return option; }); - setOptions(_options); - updateAllOptionsParams(_options); + updateOptions(_options); }; const handleOnFxPress = (active, index, key) => { @@ -257,12 +273,20 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } return option; }); - setOptions(_options); - updateAllOptionsParams(_options); + updateOptions(_options); }; useEffect(() => { - setOptions(constructOptions()); + if (!isInitialRender.current && isSortingEnabled) { + const sortedOptions = sortArray([...options]); + updateOptions(sortedOptions); + } + }, [sort]); + + useEffect(() => { + const sortedOptions = sortArray(constructOptions()); + updateOptions(sortedOptions); + isInitialRender.current = false; }, [isMultiSelect, component?.id]); const _renderOverlay = (item, index) => { @@ -389,6 +413,12 @@ export function Select({ componentMeta, darkMode, ...restProps }) { trigger="click" placement="left" rootClose + onExited={() => { + if (isSortingEnabled && sort !== 'none') { + const sortedOptions = sortArray([...options]); + updateOptions(sortedOptions); + } + }} overlay={_renderOverlay(item, index)} >
diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx index ae976e54ea..4cb5309d46 100644 --- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx +++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx @@ -68,6 +68,7 @@ export const DropdownV2 = ({ loadingState: dropdownLoadingState, disabledState, optionsLoadingState, + sort, } = properties; const { selectedTextColor, @@ -112,6 +113,16 @@ export const DropdownV2 = ({ const foundItem = _schema?.find((item) => item?.default === true); return !hasVisibleFalse(foundItem?.value) ? foundItem?.value : undefined; } + + const sortArray = (arr) => { + if (sort === 'asc') { + return arr.sort((a, b) => a.label?.localeCompare(b.label)); + } else if (sort === 'desc') { + return arr.sort((a, b) => b.label?.localeCompare(a.label)); + } + return arr; + }; + const selectOptions = useMemo(() => { let _options = advanced ? schema : options; if (Array.isArray(_options)) { @@ -124,11 +135,11 @@ export const DropdownV2 = ({ isDisabled: data?.disable ?? false, })); - return _selectOptions; + return sortArray(_selectOptions); } else { return []; } - }, [advanced, schema, options]); + }, [advanced, schema, options, sort]); function selectOption(value) { const val = selectOptions.filter((option) => !option.isDisabled)?.find((option) => option.value === value); diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index 6ef45e84d9..e7dcd52a1a 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -36,6 +36,7 @@ export const MultiselectV2 = ({ placeholder, loadingState: multiSelectLoadingState, optionsLoadingState, + sort, } = properties; const { selectedTextColor, @@ -84,6 +85,15 @@ export const MultiselectV2 = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [properties.visibility, multiSelectLoadingState, disabledState]); + const sortArray = (arr) => { + if (sort === 'asc') { + return arr.sort((a, b) => a.label?.localeCompare(b.label)); + } else if (sort === 'desc') { + return arr.sort((a, b) => b.label?.localeCompare(a.label)); + } + return arr; + }; + const selectOptions = useMemo(() => { const _options = advanced ? schema : options; let _selectOptions = Array.isArray(_options) @@ -96,9 +106,9 @@ export const MultiselectV2 = ({ isDisabled: data?.disable ?? false, })) : []; - return _selectOptions; + return sortArray(_selectOptions); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [advanced, JSON.stringify(schema), JSON.stringify(options)]); + }, [advanced, JSON.stringify(schema), JSON.stringify(options), sort]); function findDefaultItem(value, isAdvanced, isDefault) { if (isAdvanced) { From 592f273e3ba3a61667477ddc8418875ab75def03 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Thu, 6 Mar 2025 13:20:20 +0530 Subject: [PATCH 4/4] Convert sortArray func into a utility func to reuse it. --- .../Inspector/Components/Select.jsx | 18 +++++------------- .../Components/DropdownV2/DropdownV2.jsx | 13 ++----------- .../src/Editor/Components/DropdownV2/utils.js | 9 +++++++++ .../Components/MultiselectV2/MultiselectV2.jsx | 13 ++----------- 4 files changed, 18 insertions(+), 35 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx index cf5bc97d1a..a99ce25ac6 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx @@ -14,6 +14,7 @@ import { ButtonSolid } from '@/_ui/AppButton/AppButton'; import SortableList from '@/_components/SortableList'; import Trash from '@/_ui/Icon/solidIcons/Trash'; import { shallow } from 'zustand/shallow'; +import { sortArray } from '@/Editor/Components/DropdownV2/utils'; export function Select({ componentMeta, darkMode, ...restProps }) { const { @@ -84,15 +85,6 @@ export function Select({ componentMeta, darkMode, ...restProps }) { } } - const sortArray = (arr) => { - if (sort === 'asc') { - return arr.sort((a, b) => a.label?.localeCompare(b.label)); - } else if (sort === 'desc') { - return arr.sort((a, b) => b.label?.localeCompare(a.label)); - } - return arr; - }; - const getItemStyle = (isDragging, draggableStyle) => ({ userSelect: 'none', ...draggableStyle, @@ -136,7 +128,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { const handleAddOption = () => { let _option = generateNewOptions(); const _items = [...options, _option]; - const sortedItems = sortArray(_items); + const sortedItems = sortArray(_items, sort); updateOptions(sortedItems); }; @@ -278,13 +270,13 @@ export function Select({ componentMeta, darkMode, ...restProps }) { useEffect(() => { if (!isInitialRender.current && isSortingEnabled) { - const sortedOptions = sortArray([...options]); + const sortedOptions = sortArray([...options], sort); updateOptions(sortedOptions); } }, [sort]); useEffect(() => { - const sortedOptions = sortArray(constructOptions()); + const sortedOptions = sortArray(constructOptions(), sort); updateOptions(sortedOptions); isInitialRender.current = false; }, [isMultiSelect, component?.id]); @@ -415,7 +407,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) { rootClose onExited={() => { if (isSortingEnabled && sort !== 'none') { - const sortedOptions = sortArray([...options]); + const sortedOptions = sortArray([...options], sort); updateOptions(sortedOptions); } }} diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx index 4cb5309d46..ce286d7fb8 100644 --- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx +++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx @@ -13,7 +13,7 @@ import CustomMenuList from './CustomMenuList'; import CustomOption from './CustomOption'; import Label from '@/_ui/Label'; import cx from 'classnames'; -import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from './utils'; +import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor, sortArray } from './utils'; import { isMobileDevice } from '@/_helpers/appUtils'; const { DropdownIndicator, ClearIndicator } = components; @@ -114,15 +114,6 @@ export const DropdownV2 = ({ return !hasVisibleFalse(foundItem?.value) ? foundItem?.value : undefined; } - const sortArray = (arr) => { - if (sort === 'asc') { - return arr.sort((a, b) => a.label?.localeCompare(b.label)); - } else if (sort === 'desc') { - return arr.sort((a, b) => b.label?.localeCompare(a.label)); - } - return arr; - }; - const selectOptions = useMemo(() => { let _options = advanced ? schema : options; if (Array.isArray(_options)) { @@ -135,7 +126,7 @@ export const DropdownV2 = ({ isDisabled: data?.disable ?? false, })); - return sortArray(_selectOptions); + return sortArray(_selectOptions, sort); } else { return []; } diff --git a/frontend/src/Editor/Components/DropdownV2/utils.js b/frontend/src/Editor/Components/DropdownV2/utils.js index 3c8edb9b9b..ed58cbe73d 100644 --- a/frontend/src/Editor/Components/DropdownV2/utils.js +++ b/frontend/src/Editor/Components/DropdownV2/utils.js @@ -67,3 +67,12 @@ export const highlightText = (text = '', highlight) => { ); }; + +export const sortArray = (arr, sort) => { + if (sort === 'asc') { + return arr.sort((a, b) => a.label?.localeCompare(b.label)); + } else if (sort === 'desc') { + return arr.sort((a, b) => b.label?.localeCompare(a.label)); + } + return arr; +}; diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index e7dcd52a1a..90b612b0c1 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -11,7 +11,7 @@ import cx from 'classnames'; import Label from '@/_ui/Label'; const tinycolor = require('tinycolor2'); import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2'; -import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from '../DropdownV2/utils'; +import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor, sortArray } from '../DropdownV2/utils'; export const MultiselectV2 = ({ id, @@ -85,15 +85,6 @@ export const MultiselectV2 = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [properties.visibility, multiSelectLoadingState, disabledState]); - const sortArray = (arr) => { - if (sort === 'asc') { - return arr.sort((a, b) => a.label?.localeCompare(b.label)); - } else if (sort === 'desc') { - return arr.sort((a, b) => b.label?.localeCompare(a.label)); - } - return arr; - }; - const selectOptions = useMemo(() => { const _options = advanced ? schema : options; let _selectOptions = Array.isArray(_options) @@ -106,7 +97,7 @@ export const MultiselectV2 = ({ isDisabled: data?.disable ?? false, })) : []; - return sortArray(_selectOptions); + return sortArray(_selectOptions, sort); // eslint-disable-next-line react-hooks/exhaustive-deps }, [advanced, JSON.stringify(schema), JSON.stringify(options), sort]);