@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/SearchWidget/HighlightsWidget/HighlightsWidget.tsx

@@ -1,99 +1,99 @@
-import React from 'react';
-
-import styles from './HighlightsWidget.styl';
-import FilterLabel from '../../_common/FilterLabel/FilterLabel';
-import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
-
-export interface IHighlight {
-  tkey: string;
-  weightOrder: number;
-  mobileIndex: number;
-  desktopIndex: number;
-}
-
-export interface IHighlights {
-  options: {
-    mobileHighlights: string[];
-    desktopHighlights: string[];
-  };
-  values: string[];
-  aggregation: any;
-}
-
-export interface IHighlightsWidgetProps {
-  t: any;
-  Link?: any;
-  HIGHLIGHTS: IHighlights;
-  onFilterChange: (fieldName: string, fieldValue: string[]) => void;
-}
-
-class HighlightsWidget extends React.Component<IHighlightsWidgetProps, {}> {
-
-  onFilterChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-
-    const { HIGHLIGHTS: { values } } = this.props;
-    let _value = value;
-    const groupValue = values;
-
-    // Specific behavior for checkbox type group
-    const valueIndex = groupValue.indexOf(value);
-
-    if (!checked) {
-      // item was checked before, now we have to uncheck it
-      _value = [...groupValue.slice(0, valueIndex), ...groupValue.slice(valueIndex + 1)];
-    } else {
-      // item was unchecked, we need to check it now
-      _value = [...groupValue, value];
-    }
-
-    this.props.onFilterChange('HIGHLIGHTS', _value);
-  };
-
-  renderHighlights = () => {
-    const { HIGHLIGHTS, t } = this.props;
-    const { options, aggregation, values } = HIGHLIGHTS;
-    const { desktopHighlights } = options;
-
-    return desktopHighlights.map((option: string): React.ReactNode => {
-      const agg = aggregation && aggregation[option] ? aggregation[option] : 0;
-      const props = {
-        type: 'icon',
-        name: option,
-        value: option,
-        className: styles.highlight,
-        label: <FilterLabel text={t(`cbd:${option}`)} agg={agg} />,
-        icon: option,
-        onChange: this.onFilterChange,
-        checked: values.indexOf(option) > -1
-      };
-      return (
-        <CheckboxMaterial key={option} {...props} />
-      );
-    });
-  };
-
-  render(): JSX.Element {
-    const { t, Link } = this.props;
-
-    return (
-      <div className={styles.highlights}>
-        <div className={styles.title}>
-          <h3 className={styles.titleText}>
-            {t('filters.highlights')}
-          </h3>
-        </div>
-
-        <div className={styles.types}>
-          {this.renderHighlights()}
-        </div>
-
-        <Link to={`/search/detailed${location.search}`} className={styles.bottomLink}>{t('filters.moreCriteria')}</Link>
-      </div>
-    );
-  }
-}
-
-// export default withRouter(HighlightsWidget);
-export default HighlightsWidget;
+import React from 'react';
+
+import styles from './HighlightsWidget.styl';
+import FilterLabel from '../../_common/FilterLabel/FilterLabel';
+import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
+
+export interface IHighlight {
+  tkey: string;
+  weightOrder: number;
+  mobileIndex: number;
+  desktopIndex: number;
+}
+
+export interface IHighlights {
+  options: {
+    mobileHighlights: string[];
+    desktopHighlights: string[];
+  };
+  values: string[];
+  aggregation: any;
+}
+
+export interface IHighlightsWidgetProps {
+  t: any;
+  Link?: any;
+  HIGHLIGHTS: IHighlights;
+  onFilterChange: (fieldName: string, fieldValue: string[]) => void;
+}
+
+class HighlightsWidget extends React.Component<IHighlightsWidgetProps, {}> {
+
+  onFilterChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean | string, value?: any) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+
+    const { HIGHLIGHTS: { values } } = this.props;
+    let _value = value;
+    const groupValue = values;
+
+    // Specific behavior for checkbox type group
+    const valueIndex = groupValue.indexOf(value);
+
+    if (!checked) {
+      // item was checked before, now we have to uncheck it
+      _value = [...groupValue.slice(0, valueIndex), ...groupValue.slice(valueIndex + 1)];
+    } else {
+      // item was unchecked, we need to check it now
+      _value = [...groupValue, value];
+    }
+
+    this.props.onFilterChange('HIGHLIGHTS', _value);
+  };
+
+  renderHighlights = () => {
+    const { HIGHLIGHTS, t } = this.props;
+    const { options, aggregation, values } = HIGHLIGHTS;
+    const { desktopHighlights } = options;
+
+    return desktopHighlights.map((option: string): React.ReactNode => {
+      const agg = aggregation && aggregation[option] ? aggregation[option] : 0;
+      const props = {
+        type: 'icon',
+        name: option,
+        value: option,
+        className: styles.highlight,
+        label: <FilterLabel text={t(`cbd:${option}`)} agg={agg} />,
+        icon: option,
+        onChange: this.onFilterChange,
+        checked: values.indexOf(option) > -1
+      };
+      return (
+        <CheckboxMaterial key={option} {...props} />
+      );
+    });
+  };
+
+  render(): JSX.Element {
+    const { t, Link } = this.props;
+
+    return (
+      <div className={styles.highlights}>
+        <div className={styles.title}>
+          <h3 className={styles.titleText}>
+            {t('filters.highlights')}
+          </h3>
+        </div>
+
+        <div className={styles.types}>
+          {this.renderHighlights()}
+        </div>
+
+        <Link to={`/search/detailed${location.search}`} className={styles.bottomLink}>{t('filters.moreCriteria')}</Link>
+      </div>
+    );
+  }
+}
+
+// export default withRouter(HighlightsWidget);
+export default HighlightsWidget;

package/source/components/SearchWidget/InteriorWidget/DetailedInteriorWidget.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import styles from './InteriorWidget.styl';
-import { Container, Row, Col } from 'react-grid-system';
-
-import InteriorMaterial from '../../SearchFilters/filters/InteriorMaterial';
-import InteriorColor from '../../SearchFilters/filters/InteriorColor';
-
-interface ICheckedWidgetState {
-  [key: string]: boolean;
-}
-
-interface IFilter {
-  options: string[];
-  values: string[];
-}
-
-interface IInteriorWidgetProps {
-  INTERIOR_COLOR: IFilter;
-  INTERIOR_TYPE: IFilter;
-  onFilterChange?: (field: string, value: string[]) => void;
-  t: any;
-}
-
-class DetailedInteriorWidget extends React.Component<IInteriorWidgetProps, ICheckedWidgetState> {
-  render(): JSX.Element {
-    const { INTERIOR_COLOR, INTERIOR_TYPE, onFilterChange, t } = this.props;
-    const colLg = 6;
-
-    return (
-      <Container fluid>
-        <Row className={styles.row}>
-          <Col lg={colLg}>
-            <InteriorColor {...INTERIOR_COLOR} onChange={onFilterChange} t={t} />
-          </Col>
-          <Col lg={colLg}>
-            <InteriorMaterial {...INTERIOR_TYPE} onChange={onFilterChange} t={t} isHorizontal={true} />
-          </Col>
-        </Row>
-      </Container>
-    );
-  }
-}
-
-export default DetailedInteriorWidget;
+import * as React from 'react';
+import styles from './InteriorWidget.styl';
+import { Container, Row, Col } from 'react-grid-system';
+
+import InteriorMaterial from '../../SearchFilters/filters/InteriorMaterial';
+import InteriorColor from '../../SearchFilters/filters/InteriorColor';
+
+interface ICheckedWidgetState {
+  [key: string]: boolean;
+}
+
+interface IFilter {
+  options: string[];
+  values: string[];
+}
+
+interface IInteriorWidgetProps {
+  INTERIOR_COLOR: IFilter;
+  INTERIOR_TYPE: IFilter;
+  onFilterChange?: (field: string, value: string[]) => void;
+  t: any;
+}
+
+class DetailedInteriorWidget extends React.Component<IInteriorWidgetProps, ICheckedWidgetState> {
+  render(): JSX.Element {
+    const { INTERIOR_COLOR, INTERIOR_TYPE, onFilterChange, t } = this.props;
+    const colLg = 6;
+
+    return (
+      <Container fluid>
+        <Row className={styles.row}>
+          <Col lg={colLg}>
+            <InteriorColor {...INTERIOR_COLOR} onChange={onFilterChange} t={t} />
+          </Col>
+          <Col lg={colLg}>
+            <InteriorMaterial {...INTERIOR_TYPE} onChange={onFilterChange} t={t} isHorizontal={true} />
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+export default DetailedInteriorWidget;

package/source/components/SearchWidget/InteriorWidget/InteriorWidget.styl

@@ -1,29 +1,29 @@
-@import '../../../theme/theme.styl'
-
-.interiorWidget
-  font-family: $font-style-arial
-
-.section
-  box-sizing: border-box
-  padding: 9px
-  border-bottom: 1px solid rgba($grey-d, 50%)
-
-.noBottomBorder
-  border-bottom: 0 !important
-
-.displayFlex
-  display: flex
-
-.flexGrow30Percent
-  flex-basis: 0
-  flex-grow: 1
-
-.flexGrow70Percent
-  flex-basis: 0
-  flex-grow: 2
-
-.row
-  margin-bottom: 10px
-
-.divider
+@import '../../../theme/theme.styl'
+
+.interiorWidget
+  font-family: $font-style-arial
+
+.section
+  box-sizing: border-box
+  padding: 9px
+  border-bottom: 1px solid rgba($grey-d, 50%)
+
+.noBottomBorder
+  border-bottom: 0 !important
+
+.displayFlex
+  display: flex
+
+.flexGrow30Percent
+  flex-basis: 0
+  flex-grow: 1
+
+.flexGrow70Percent
+  flex-basis: 0
+  flex-grow: 2
+
+.row
+  margin-bottom: 10px
+
+.divider
   margin-bottom: 20px

package/source/components/SearchWidget/InteriorWidget/InteriorWidget.tsx

@@ -1,42 +1,42 @@
-import * as React from 'react';
-import styles from './InteriorWidget.styl';
-
-// import InteriorMaterial from '../../Filters/InteriorMaterial';
-// import InteriorColor from '../../Filters/InteriorColor';
-import InteriorMaterial from '../../SearchFilters/filters/InteriorMaterial';
-import InteriorColor from '../../SearchFilters/filters/InteriorColor';
-
-interface ICheckedWidgetState {
-  [key: string]: boolean;
-}
-
-interface IFilter {
-  options: string[];
-  values: string[];
-  aggregation?: any;
-}
-
-interface IInteriorWidgetProps {
-  INTERIOR_COLOR: IFilter;
-  INTERIOR_TYPE: IFilter;
-  onFilterChange?: (field: string, value: string[]) => void;
-  t: any;
-}
-
-class InteriorWidget extends React.Component<IInteriorWidgetProps, ICheckedWidgetState> {
-  render(): JSX.Element {
-    const { INTERIOR_COLOR, INTERIOR_TYPE, onFilterChange, t } = this.props;
-    return (
-      <div className={styles.interiorWidget}>
-        <div className={styles.section}>
-          <InteriorColor {...INTERIOR_COLOR} onChange={onFilterChange} t={t} />
-        </div>
-        <div className={styles.section}>
-          <InteriorMaterial {...INTERIOR_TYPE} onChange={onFilterChange} t={t} isHorizontal={false} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default InteriorWidget;
+import * as React from 'react';
+import styles from './InteriorWidget.styl';
+
+// import InteriorMaterial from '../../Filters/InteriorMaterial';
+// import InteriorColor from '../../Filters/InteriorColor';
+import InteriorMaterial from '../../SearchFilters/filters/InteriorMaterial';
+import InteriorColor from '../../SearchFilters/filters/InteriorColor';
+
+interface ICheckedWidgetState {
+  [key: string]: boolean;
+}
+
+interface IFilter {
+  options: string[];
+  values: string[];
+  aggregation?: any;
+}
+
+interface IInteriorWidgetProps {
+  INTERIOR_COLOR: IFilter;
+  INTERIOR_TYPE: IFilter;
+  onFilterChange?: (field: string, value: string[]) => void;
+  t: any;
+}
+
+class InteriorWidget extends React.Component<IInteriorWidgetProps, ICheckedWidgetState> {
+  render(): JSX.Element {
+    const { INTERIOR_COLOR, INTERIOR_TYPE, onFilterChange, t } = this.props;
+    return (
+      <div className={styles.interiorWidget}>
+        <div className={styles.section}>
+          <InteriorColor {...INTERIOR_COLOR} onChange={onFilterChange} t={t} />
+        </div>
+        <div className={styles.section}>
+          <InteriorMaterial {...INTERIOR_TYPE} onChange={onFilterChange} t={t} isHorizontal={false} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default InteriorWidget;

package/source/components/SearchWidget/OfferDetalisWidget/OfferDetailsWidgetMobile.tsx

@@ -1,59 +1,59 @@
-import React, { memo } from 'react';
-import { styled } from '@mui/system';
-import MaterialAutocomplete from '../../../components/_common/MaterialAutocomplete/MaterialAutocomplete';
-import { IFilters } from '../../SearchFilters/FiltersFactory';
-import { ONLINE_SINCE_KEY } from '../../../framework/constants';
-import _get from 'lodash/get';
-
-interface IOfferDetailsWidgetProps {
-  t?: (key: string, options?: object) => string;
-  ONLINE_SINCE: IFilters;
-  onFilterChange?: (field: string, value: string) => void;
-}
-
-const Wrapper = styled('div')({
-  display: 'grid',
-  gridGap: '16px',
-  padding: 15,
-  gridTemplateColumns: '1fr',
-  '@media(min-width: 768px)': {
-    gridTemplateColumns: 'repeat(2, 1fr)'
-  },
-  '@media(min-width: 992px)': {
-    gridTemplateColumns: 'repeat(3, 1fr)'
-  }
-});
-
-const OfferDetailsWidgetMobile: React.FC<IOfferDetailsWidgetProps> = ({
-  t,
-  onFilterChange,
-  ONLINE_SINCE
-}: IOfferDetailsWidgetProps) => {
-  const getCurrentValue = _get(ONLINE_SINCE, 'values');
-  const getValue = (value: string) => ({
-    value,
-    label: t(`filters.${value}`)
-  });
-
-  return (
-    <Wrapper id={ONLINE_SINCE_KEY}>
-      <MaterialAutocomplete
-        size='custom'
-        freeSolo={false}
-        value={getCurrentValue ? getValue(getCurrentValue) : null}
-        onChange={(value: string) => onFilterChange(ONLINE_SINCE_KEY, value)}
-        label={t('filters.onlineSince')}
-        items={ONLINE_SINCE.options.map((option: any) => ({
-          value: option.value,
-          label: t(`filters.${option.value}`)
-        }))}
-        >
-      </MaterialAutocomplete>
-    </Wrapper>
-  );
-};
-
-export default memo(OfferDetailsWidgetMobile, (prevProps: IOfferDetailsWidgetProps, nextProps: IOfferDetailsWidgetProps) =>
-  prevProps.t                === nextProps.t
-  && prevProps.ONLINE_SINCE.values  === nextProps.ONLINE_SINCE.values
-);
+import React, { memo } from 'react';
+import { styled } from '@mui/system';
+import MaterialAutocomplete from '../../../components/_common/MaterialAutocomplete/MaterialAutocomplete';
+import { IFilters } from '../../SearchFilters/FiltersFactory';
+import { ONLINE_SINCE_KEY } from '../../../framework/constants';
+import _get from 'lodash/get';
+
+interface IOfferDetailsWidgetProps {
+  t?: (key: string, options?: object) => string;
+  ONLINE_SINCE: IFilters;
+  onFilterChange?: (field: string, value: string) => void;
+}
+
+const Wrapper = styled('div')({
+  display: 'grid',
+  gridGap: '16px',
+  padding: 15,
+  gridTemplateColumns: '1fr',
+  '@media(min-width: 768px)': {
+    gridTemplateColumns: 'repeat(2, 1fr)'
+  },
+  '@media(min-width: 992px)': {
+    gridTemplateColumns: 'repeat(3, 1fr)'
+  }
+});
+
+const OfferDetailsWidgetMobile: React.FC<IOfferDetailsWidgetProps> = ({
+  t,
+  onFilterChange,
+  ONLINE_SINCE
+}: IOfferDetailsWidgetProps) => {
+  const getCurrentValue = _get(ONLINE_SINCE, 'values');
+  const getValue = (value: string) => ({
+    value,
+    label: t(`filters.${value}`)
+  });
+
+  return (
+    <Wrapper id={ONLINE_SINCE_KEY}>
+      <MaterialAutocomplete
+        size='custom'
+        freeSolo={false}
+        value={getCurrentValue ? getValue(getCurrentValue) : null}
+        onChange={(value: string) => onFilterChange(ONLINE_SINCE_KEY, value)}
+        label={t('filters.onlineSince')}
+        items={ONLINE_SINCE.options.map((option: any) => ({
+          value: option.value,
+          label: t(`filters.${option.value}`)
+        }))}
+        >
+      </MaterialAutocomplete>
+    </Wrapper>
+  );
+};
+
+export default memo(OfferDetailsWidgetMobile, (prevProps: IOfferDetailsWidgetProps, nextProps: IOfferDetailsWidgetProps) =>
+  prevProps.t                === nextProps.t
+  && prevProps.ONLINE_SINCE.values  === nextProps.ONLINE_SINCE.values
+);