From 592f273e3ba3a61667477ddc8418875ab75def03 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Thu, 6 Mar 2025 13:20:20 +0530 Subject: [PATCH] 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]);