Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Merge pull request #12672 from ToolJet/feat/multiselect-label

Browse source 
Added toggle for showing 'All options selected' label in multiselect
This commit is contained in:
Johnson Cherian 2025-04-25 12:05:15 +05:30 committed by GitHub
commit 0bed40ab3f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -539,6 +539,17 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
currentState,
allComponents
)}
{isMultiSelect &&
renderElement(
component,
componentMeta,
paramUpdated,
dataQueries,
'showAllSelectedLabel',
'properties',
currentState,
allComponents
)}
{isSortingEnabled &&
renderElement(
component,

7
frontend/src/AppBuilder/WidgetManager/widgets/multiselectV2.js
View file

@ -121,6 +121,12 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
showAllSelectedLabel: {
type: 'toggle',
displayName: 'Show "All items are selected"',
validation: { schema: { type: 'boolean' }, defaultValue: true },
accordian: 'Options',
},
optionsLoadingState: {
type: 'toggle',
displayName: 'Options loading state',
@ -339,6 +345,7 @@ export const multiselectV2Config = {
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'asc' },
placeholder: { value: 'Select the options' },
showAllSelectedLabel: { value: '{{true}}' },
showClearBtn: { value: '{{true}}' },
showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },

2
frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
View file

@ -36,7 +36,7 @@ const CustomValueContainer = ({ children, ...props }) => {
</Placeholder>
) : (
<span className="text-truncate" {...props} id="options" style={{ maxWidth: valueContainerWidth }}>
{isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
{selectProps?.showAllSelectedLabel && isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
</span>
)}
{/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus

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

@ -37,6 +37,7 @@ export const MultiselectV2 = ({
loadingState: multiSelectLoadingState,
optionsLoadingState,
sort,
showAllSelectedLabel,
showClearBtn,
showSearchInput,
} = properties;
@ -544,6 +545,7 @@ export const MultiselectV2 = ({
icon={icon}
doShowIcon={iconVisibility}
containerRef={valueContainerRef}
showAllSelectedLabel={showAllSelectedLabel}
iconColor={iconColor}
optionsLoadingState={optionsLoadingState && advanced}
darkMode={darkMode}

7
frontend/src/Editor/WidgetManager/configs/multiselectV2.js
View file

@ -121,6 +121,12 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
showAllSelectedLabel: {
type: 'toggle',
displayName: 'Show "All items are selected"',
validation: { schema: { type: 'boolean' }, defaultValue: true },
accordian: 'Options',
},
optionsLoadingState: {
type: 'toggle',
displayName: 'Options loading state',
@ -339,6 +345,7 @@ export const multiselectV2Config = {
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'asc' },
placeholder: { value: 'Select the options' },
showAllSelectedLabel: { value: '{{true}}' },
showClearBtn: { value: '{{true}}' },
showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },

7
server/src/modules/apps/services/widget-config/multiselectV2.js
View file

@ -121,6 +121,12 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
showAllSelectedLabel: {
type: 'toggle',
displayName: 'Show "All items are selected"',
validation: { schema: { type: 'boolean' }, defaultValue: true },
accordian: 'Options',
},
optionsLoadingState: {
type: 'toggle',
displayName: 'Options loading state',
@ -339,6 +345,7 @@ export const multiselectV2Config = {
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'asc' },
placeholder: { value: 'Select the options' },
showAllSelectedLabel: { value: '{{true}}' },
showClearBtn: { value: '{{true}}' },
showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },