continue and improve code for Selects

Signed-off-by: basseche <[email protected]>

src/components/inputs/reactQueryBuilder/CombinatorSelector.tsx

@@ -9,9 +9,10 @@ import { CombinatorSelectorProps } from 'react-querybuilder';
 import { useCallback, useState } from 'react';
 import { MaterialValueSelector } from '@react-querybuilder/material';
 import { PopupConfirmationDialog } from '../../dialogs/popupConfirmationDialog/PopupConfirmationDialog';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 export function CombinatorSelector(props: CombinatorSelectorProps) {
-    const { value, handleOnChange } = props;
+    const { options, value, handleOnChange } = props;
     const [tempCombinator, setTempCombinator] = useState(value);
     const [openPopup, setOpenPopup] = useState(false);
 
@@ -35,6 +36,7 @@ export function CombinatorSelector(props: CombinatorSelectorProps) {
                     setTempCombinator(newCombinator);
                     setOpenPopup(true);
                 }}
+                {...useSelectAppearance(options.length)}
             />
         </>
     );

src/components/inputs/reactQueryBuilder/FieldSelector.tsx

@@ -7,7 +7,7 @@
 
 import { ValueSelectorProps } from 'react-querybuilder';
 import { MaterialValueSelector } from '@react-querybuilder/material';
-import { useSelectAppearance } from './useSelectAppearance';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 const ITEM_HEIGHT = 32; // default value from React query builder defaultNativeSelectStyles that can't be accessed
 const ITEM_PADDING = 4;

src/components/inputs/reactQueryBuilder/PropertyValueEditor.tsx

@@ -16,7 +16,7 @@ import { OPERATOR_OPTIONS } from '../../filter/expert/expertFilterConstants';
 import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import { usePredefinedProperties } from '../../../hooks/usePredefinedProperties';
 import { EquipmentType } from '../../../utils';
-import { useSelectAppearance } from './useSelectAppearance';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 const PROPERTY_VALUE_OPERATORS = [OPERATOR_OPTIONS.IN];
 
@@ -113,11 +113,7 @@ export function PropertyValueEditor(props: ExpertFilterPropertyProps) {
                     multiple
                     renderInput={(params) => {
                         return (
-                            <TextField
-                                {...params}
-                                error={!valid}
-                                placeholder={valid ? '' : intl.formatMessage({ id: 'valuesList' })}
-                            />
+                            <TextField {...params} error={!valid} label={intl.formatMessage({ id: 'valuesList' })} />
                         );
                     }}
                     freeSolo

src/components/inputs/reactQueryBuilder/ValueSelector.tsx

@@ -7,7 +7,7 @@
 
 import { ValueSelectorProps } from 'react-querybuilder';
 import { MaterialValueSelector } from '@react-querybuilder/material';
-import { useSelectAppearance } from './useSelectAppearance';
+import { useSelectAppearance } from '../../../hooks/useSelectAppearance';
 
 export function ValueSelector(props: ValueSelectorProps) {
     const { options } = props;

src/hooks/index.ts

@@ -15,3 +15,4 @@ export * from './usePredefinedProperties';
 export * from './usePrevious';
 export * from './useSnackMessage';
 export * from './useFormatLabelWithUnit';
+export * from './useSelectAppearance';

src/components/inputs/reactQueryBuilder/useSelectAppearance.ts → src/hooks/useSelectAppearance.ts

@@ -5,7 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-// useSelectAppearance
+/** Hooks used to modify appearance of Select as a readonly TextField,
+    by hiding display button and setting readOnly prop to true
+    if options list is only one element long.
+    P.S :  Not to used on AutoComplete.
+*/
 export function useSelectAppearance(listLength: number) {
     if (listLength === 1) {
         return { IconComponent: () => null, readOnly: true };