diff --git a/src/components/manage/Blocks/DiscodataComponents/Select/Edit.jsx b/src/components/manage/Blocks/DiscodataComponents/Select/Edit.jsx index 8b92133f..59a5917b 100644 --- a/src/components/manage/Blocks/DiscodataComponents/Select/Edit.jsx +++ b/src/components/manage/Blocks/DiscodataComponents/Select/Edit.jsx @@ -3,8 +3,7 @@ import { connect } from 'react-redux'; import { compose } from 'redux'; import _uniqueId from 'lodash/uniqueId'; import View from './View'; -import { settings } from '~/config'; -import { isArray, isObject } from 'lodash'; +import { isArray } from 'lodash'; import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; import { SidebarPortal } from '@plone/volto/components'; diff --git a/src/components/manage/Blocks/DiscodataComponents/Select/View.jsx b/src/components/manage/Blocks/DiscodataComponents/Select/View.jsx index 68a7e101..c54929c4 100644 --- a/src/components/manage/Blocks/DiscodataComponents/Select/View.jsx +++ b/src/components/manage/Blocks/DiscodataComponents/Select/View.jsx @@ -8,46 +8,59 @@ import { setQueryParam } from 'volto-datablocks/actions'; import cx from 'classnames'; -const components = { - select: ( - options, - queryParameters, - search, - setQueryParam, - placeholder, - className, - mode, - ) => { - let activeValue = ''; - if (queryParameters[0]?.queryParameterToSet) { - activeValue = search[queryParameters[0].queryParameterToSet] || ''; - } - return ( -
- { - const queryParametersToSet = {}; - queryParameters.forEach((queryParam) => { - queryParametersToSet[ - queryParam.queryParameterToSet - ] = data.options.filter((opt) => { - return opt.value === data.value; - })[0]?.[queryParam.selectorOptionKey]; - }); - setQueryParam({ - queryParam: { - ...(queryParametersToSet || {}), - }, - }); - }} - placeholder={placeholder} - options={options} - value={activeValue} - /> -
- ); - }, +const Select = (props) => { + const { + options = [], + queryParameters = [], + search = {}, + setQueryParam = () => {}, + placeholder = '', + className = '', + mode = '', + } = props; + const [dataReady, setDataReady] = useState(false); + + if ( + !dataReady && + queryParameters[0]?.queryParameterToSet && + queryParameters[0]?.selectorOptionKey && + !search[queryParameters[0]?.queryParameterToSet] && + options.length + ) { + setQueryParam({ + queryParam: { + [queryParameters[0].queryParameterToSet]: + options[0]?.[queryParameters[0]?.selectorOptionKey], + }, + }); + setDataReady(true); + } + + return ( +
+ { + const queryParametersToSet = {}; + queryParameters.forEach((queryParam) => { + queryParametersToSet[ + queryParam.queryParameterToSet + ] = data.options.filter((opt) => { + return opt.value === data.value; + })[0]?.[queryParam.selectorOptionKey]; + }); + setQueryParam({ + queryParam: { + ...(queryParametersToSet || {}), + }, + }); + }} + placeholder={placeholder} + options={options} + value={search[queryParameters[0]?.queryParameterToSet] || ''} + /> +
+ ); }; const View = ({ content, ...props }) => { @@ -127,19 +140,16 @@ const View = ({ content, ...props }) => { /* eslint-disable-next-line */ }, [props.search, props.discodata_resources, props.discodataValues]) - return ( - <> - {components.select( - options, - queryParametersToSet, - props.search, - props.setQueryParam, - placeholder, - className, - props.mode, - )} - +