Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 09:28:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Convert sortArray func into a utility func to reuse it.

Browse source
This commit is contained in:
devanshu052000 2025-03-06 13:20:20 +05:30
parent 26ac5ffdce
commit 592f273e3b
4 changed files with 18 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/AppBuilder/RightSideBar/Inspector/Components/Select.jsx
View file

@ -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);
}
}}

13
frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx
View file

@ -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 [];
}

9
frontend/src/Editor/Components/DropdownV2/utils.js
View file

@ -67,3 +67,12 @@ export const highlightText = (text = '', highlight) => {
</span>
);
};
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;
};

13
frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
View file

@ -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]);