@bytebrand/fe-ui-core 4.1.29 → 4.1.31

package/package.json

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

package/source/components/SearchPage/SearchTopBar/SearchTopBar.styl

@@ -11,6 +11,7 @@
   margin-top: 10px;
   box-sizing: border-box
   justify-content: space-between
+  column-gap: 10px
   +media-tablet-landscape-down()
     height: 50px
   +media-tablet-down()
@@ -45,7 +46,7 @@
 
 .sorting
   flex-basis: 20%
-  min-width: 180px
+  min-width: 140px
   [class*='MuiPaper-root'], [class*='MuiOutlinedInput-root']
     font-size: 14px !important
 
@@ -86,4 +87,11 @@
 +media-tablet-down()
   .sorting
     flex-basis: 0
-    margin-left: auto;
+    margin-left: auto;
+
+.searchFilterComponent
+  text-align: right;
+
+.sortingHeader
+  color: $skyBlue
+  font-size: 13px

package/source/components/SearchPage/SearchTopBar/SearchTopBar.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import _get from 'lodash/get';
-import MaterialAutocomplete from '../../_common/MaterialAutocomplete/MaterialAutocomplete';
 import { DEFAULT_LANG } from '../../../framework/constants/app';
 import styles from './SearchTopBar.styl';
 import { searchTopBarTranslate } from '../../../locales/data';
+import MaterialMenu from '../../_common/UserMenu/MaterialMenu';
+import { isMobileOnly } from 'react-device-detect';
+import MaterialAutocomplete from '../../_common/MaterialAutocomplete/MaterialAutocomplete';
 
 interface ISearchTopBarProps {
   t?: (key: string, options?: object) => string;
@@ -37,6 +39,14 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
     );
   };
 
+  renderSortingHeader = (value: string) => {
+    return (
+      <span className={styles.sortingHeader}>
+        {value}
+      </span>
+    )
+  }
+
   renderSorting = () => {
     const {
       t = (phrase: string) => _get(searchTopBarTranslate(), phrase, phrase),
@@ -50,8 +60,17 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
     );
 
     const value = activeSorting ? { label: t(`sortingOptions.${activeSorting}`), value: activeSorting } : null;
+    
+    const headerValue = value && value.label || t('sortingPlaceholder');
 
-    return (
+    return isMobileOnly ?
+      <MaterialMenu
+        onChange={onSortChange}
+        headerComponent={this.renderSortingHeader(headerValue)}
+        menuItems={translatedSortingOptions}
+        containerClassname={styles.searchFilterComponent}
+      />
+      :
       <MaterialAutocomplete
         size={'custom'}
         freeSolo={false}
@@ -63,8 +82,7 @@ class SearchTopBar extends React.Component<ISearchTopBarProps, {}> {
         onChange={onSortChange}
         name='mobileSearch'
         disableClearable={true}
-      />
-    );
+      />;
   };
 
   render(): JSX.Element {

package/source/components/_common/UserMenu/MaterialMenu.story.js

@@ -31,7 +31,7 @@ const userMenuItems = [
     content: 'Favorites',
     amount: 0
   },
-  {
+  !superAdmin && {
     icon: 'dealersIcon',
     content: 'Dealers',
     amount: 1234,

package/source/components/_common/UserMenu/MaterialMenu.tsx

@@ -12,9 +12,12 @@ export interface ILoggedInUserInfoProps {
   isLang?: boolean;
   onChange?: (value: string) => void;
   containerClassname?: string;
+  isSelect?: boolean;
+  value?: any;
+  Link?: any
 }
 
-const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerClassname }: ILoggedInUserInfoProps) => {
+const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerClassname, isSelect, value, Link }: ILoggedInUserInfoProps) => {
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
@@ -28,22 +31,24 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
 
   const onHandleChange = (value: any, index: number) => {
     setSelectedIndex(index);
-    onChange(value);
+    if (!!onChange) {
+      onChange(value);
+    }
   };
 
   const containerRef = useRef(null);
 
   return (
     <ThemeProvider theme={Theme}>
-      <div className={containerClassname} ref={containerRef} onMouseEnter={handleClick}>
+      <div className={containerClassname} ref={containerRef} onClick={handleClick} onMouseEnter={handleClick}>
         {headerComponent && headerComponent}
-        {isLang &&
+        {(isLang && !!value) &&
           <FlexContainer>
             <IconSVG
               customDimensions
               width='42px'
               height='27px'
-              name={`new_lang_${menuItems[selectedIndex].value}`}
+              name={`new_lang_${value}`}
             />
           </FlexContainer>
         }
@@ -66,6 +71,8 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
                 key={listItemProps.text}
                 selected={index === selectedIndex}
                 onClick={() => onHandleChange(value, index)}
+                isSelect={isSelect}
+                Link={Link}
                 { ...listItemProps }
               />;
           })}

package/source/components/_common/UserMenu/MaterialMenuItem.tsx

@@ -4,31 +4,47 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import IconSVG from '../IconSVG/IconSVG';
 import ListItemText from '@mui/material/ListItemText';
 import { AmountBlock } from './MaterialMenu.styled';
-import { Link } from '@mui/material';
 
 interface IListItem {
   icon: string;
-  content: any;
+  label: any;
   amount?: number;
   divider?: boolean;
   onClick?: () => void;
   href?: string;
   isComponent?: string;
+  isSelect?: boolean;
+  Link?: any;
 }
 
-const ListItem = ({ icon, content, amount, divider, onClick, href, isComponent }: IListItem) => {
-  return (
-    <Link color='#4C4E64DE' variant='caption' href={href} underline='none' onClick={onClick}>
+const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link }: IListItem) => {
+  return !!href ? (
+    <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
       <MenuItem
         divider={divider}
         disableRipple={isComponent ? true : false}
         isComponent={isComponent}
       >
         {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
-        <ListItemText>{content}</ListItemText>
+        <ListItemText>
+          {label}
+        </ListItemText>
         {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
       </MenuItem>
     </Link>
+  ) : (
+    <MenuItem
+      onClick={onClick}
+      divider={divider}
+      disableRipple={isComponent ? true : false}
+      isComponent={isComponent}
+    >
+      {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
+      <ListItemText>
+        {label}
+      </ListItemText>
+      {(amount || amount === 0) && <AmountBlock>{amount}</AmountBlock>}
+    </MenuItem>
   );
 };