@bytebrand/fe-ui-core 4.2.33 → 4.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.33",
+  "version": "4.2.35",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/SearchPage/Filters/MakeModel/MakeModel.tsx

@@ -5,6 +5,7 @@ import MaterialAutocomplete from '../../../_common/MaterialAutocomplete/Material
 import MaterialSelect from '../../../_common/MaterialSelect/MaterialSelect';
 import MaterialField from '../../../_common/MaterialField/MaterialField';
 import IconSVG from '../../../_common/IconSVG/IconSVG';
+import _debounce from 'lodash/debounce';
 
 import styles from './MakeModel.styl';
 
@@ -17,6 +18,8 @@ export interface IMakeModelProps {
   t?: any;
 }
 
+const DEBOUNCE_TIME: number = 700;
+
 class MakeModel extends React.Component<IMakeModelProps> {
   renderLabel = (option: any): React.ReactNode => {
     const { t } = this.props;
@@ -54,6 +57,13 @@ class MakeModel extends React.Component<IMakeModelProps> {
     return bodyType ? <MaterialSelect {...ddProps} /> : <MaterialAutocomplete {...ddProps} />;
   };
 
+  debaunceOnFilterChange = _debounce( // is used for the text field to add a delay and not make a search request for each key stroke
+    (name: string, value: string, index: number) => {
+      this.props.onChange(name, value, index)
+    },
+    DEBOUNCE_TIME
+  );
+
   renderTextField = (props: any) => {
     const { name, values, index, placeholder } = props;
 
@@ -62,7 +72,7 @@ class MakeModel extends React.Component<IMakeModelProps> {
       placeholder,
       size: 'custom',
       value: values,
-      onChange: (value: string, name: string) => this.props.onChange(name, value, index)
+      onChange: (value: string, name: string) => this.debaunceOnFilterChange(name, value, index)
     };
 
     return (<MaterialField {...textFieldProps} />);

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import { TextField, IconButton } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { Theme } from './MaterialField.styled';
@@ -43,11 +43,13 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
   placeholder
 }: IVehicleModalProps) => {
   const [showPassword, setShowPassword] = React.useState(false);
+  const [enteredValue, setEnteredValue] = useState(value);
 
   const onHandleChange = (event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const value = event.currentTarget.value;
     const name = event.currentTarget.name;
 
+    setEnteredValue(event.target.value);
     onChange(value, name, event);
   };
 
@@ -67,7 +69,7 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
         fullWidth={true}
         autoComplete={autoComplete}
         label={label}
-        value={value}
+        value={enteredValue}
         name={name}
         sx={sx}
         error={!!error}

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import _get from 'lodash/get';
 import _startsWith from 'lodash/startsWith';
+import _debounce from 'lodash/debounce';
 import qs from 'qs';
 import { observer } from 'mobx-react';
 import { toJS } from 'mobx';
 import { checkRangeValuesOnEqual, getGroupValuesForQuery } from '../../../../framework/utils/CommonUtils';
 import { FilterBlockFactory } from '../../../SearchFilters/common/FilterBlock/FilterBlockFactory';
 import { FilterGroups, IFilters } from '../../../SearchFilters/FiltersFactory';
-import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME } from '../../../../framework/constants/Search';
+import { MANUFACTURER_KEY, MM_GROUPS_EXCLUDE_KEY, MODEL_KEY, RANGE_FILTERS, SERIES_KEY, SUPER_ADMIN_FILTER_NAME, SUB_MODEL_KEY } from '../../../../framework/constants/Search';
 import { MMS_GROUPS_KEY, OBJECT_FILTERS } from '../../../../framework/constants/SearchWidget';
 import { resolveMmsValue } from '../../../../framework/utils/FiltersUtils';
 import FilterBlock from '../../../SearchFilters/common/FilterBlock/FilterBlock';