@bytebrand/fe-ui-core 4.8.25 → 4.8.27

package/source/components/SearchWidget/ColorWidget/BodyColorWidget.tsx

@@ -1,122 +1,122 @@
-import React, { memo } from 'react';
-import { Visible } from 'react-grid-system';
-import { isMobileOnly } from 'react-device-detect';
-import styles from './BodyColorWidget.styl';
-import FilterLabel from '../../_common/FilterLabel/FilterLabel';
-import FormattedNumber from '../../FormattedNumber/FormattedNumber';
-import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
-import { isEqual } from 'lodash';
-
-export interface IBodyColor {
-  options: any;
-  values: string[];
-  aggregation: {
-    [key: string]: number;
-  };
-}
-
-export interface IMetallic {
-  values: boolean;
-  aggregation?: any;
-}
-
-export interface IBodyColorWidgetProps {
-  BODY_COLOR: IBodyColor;
-  METALLIC: IMetallic;
-  labelClassName?: string;
-  onFilterChange?: (field: string, value: any) => void;
-  t?: (phrase: string) => string;
-  showAgg?: boolean;
-}
-
-const BodyColorWidget = ({
-  onFilterChange,
-  BODY_COLOR,
-  labelClassName,
-  t,
-  METALLIC,
-  showAgg
-
-}: IBodyColorWidgetProps) => {
-
-  const onColorChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: string | boolean, value?: any): void => {
-    event.stopPropagation();
-    event.nativeEvent.stopImmediatePropagation();
-    let _value = value;
-    const groupValue = BODY_COLOR.values;
-    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];
-    }
-    onFilterChange('BODY_COLOR', _value);
-  };
-
-  const onCheckboxClick = (_event?: React.ChangeEvent<HTMLInputElement>, value?: string | boolean): void => {
-    onFilterChange('METALLIC', value ? 'exterior_metallic' : '');
-  };
-
-  const renderColors = (): React.ReactNode => {
-    const { options, aggregation } = BODY_COLOR;
-
-    return options.map((option: string, index: number) => {
-      const agg = aggregation && aggregation[option] ? aggregation[option] : 0;
-      const isChecked = BODY_COLOR.values.indexOf(option) !== -1;
-      const props = {
-        labelClassName,
-        type: 'color',
-        name: option,
-        content: option,
-        value: option,
-        className: styles.color,
-        labelPlacement: 'bottom' as 'bottom',
-        checked: isChecked,
-        label: <FilterLabel text={t(`cbd:${option}`)} agg={agg} isVertical={true}/>,
-        onChange: onColorChange
-      };
-
-      return (
-        <CheckboxMaterial key={index} {...props} />
-      );
-    });
-  };
-
-  const renderCheckbox = (): React.ReactNode => {
-    const agg: number = (METALLIC.aggregation && METALLIC.aggregation['exterior_metallic'])
-      ? METALLIC.aggregation['exterior_metallic']
-      : 0;
-
-    const label = <span>{t('filters.metallic')} {showAgg && (<FormattedNumber numbersAfterDot={0} value={agg} />)}</span>;
-
-    return (
-      <CheckboxMaterial
-        checked={METALLIC.values}
-        onChange={onCheckboxClick}
-        label={label}
-      />
-    );
-  };
-  return (
-    <div className={styles.colorWidget}>
-      {isMobileOnly &&
-        <Visible xs sm md>
-          <h4 className={styles.colorSubtitle}>{t('filters.bodyColor')}</h4>
-        </Visible>
-      }
-      <div className={styles.colorsContainer}>
-        {renderColors()}
-      </div>
-      {renderCheckbox()}
-    </div>
-  );
-};
-
-export default memo(BodyColorWidget, (prevProps: IBodyColorWidgetProps, nextProps: IBodyColorWidgetProps) => {
-  return isEqual(prevProps.BODY_COLOR.values.length, nextProps.BODY_COLOR.values.length) &&
-    isEqual(prevProps.BODY_COLOR.aggregation, nextProps.BODY_COLOR.aggregation) &&
-    prevProps.METALLIC.values === nextProps.METALLIC.values &&
-    prevProps.t === nextProps.t;
-});
+import React, { memo } from 'react';
+import { Visible } from 'react-grid-system';
+import { isMobileOnly } from 'react-device-detect';
+import styles from './BodyColorWidget.styl';
+import FilterLabel from '../../_common/FilterLabel/FilterLabel';
+import FormattedNumber from '../../FormattedNumber/FormattedNumber';
+import CheckboxMaterial from '../../_common/CheckboxMaterial/CheckboxMaterial';
+import { isEqual } from 'lodash';
+
+export interface IBodyColor {
+  options: any;
+  values: string[];
+  aggregation: {
+    [key: string]: number;
+  };
+}
+
+export interface IMetallic {
+  values: boolean;
+  aggregation?: any;
+}
+
+export interface IBodyColorWidgetProps {
+  BODY_COLOR: IBodyColor;
+  METALLIC: IMetallic;
+  labelClassName?: string;
+  onFilterChange?: (field: string, value: any) => void;
+  t?: (phrase: string) => string;
+  showAgg?: boolean;
+}
+
+const BodyColorWidget = ({
+  onFilterChange,
+  BODY_COLOR,
+  labelClassName,
+  t,
+  METALLIC,
+  showAgg
+
+}: IBodyColorWidgetProps) => {
+
+  const onColorChange = (event?: React.ChangeEvent<HTMLInputElement>, checked?: string | boolean, value?: any): void => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    let _value = value;
+    const groupValue = BODY_COLOR.values;
+    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];
+    }
+    onFilterChange('BODY_COLOR', _value);
+  };
+
+  const onCheckboxClick = (_event?: React.ChangeEvent<HTMLInputElement>, value?: string | boolean): void => {
+    onFilterChange('METALLIC', value ? 'exterior_metallic' : '');
+  };
+
+  const renderColors = (): React.ReactNode => {
+    const { options, aggregation } = BODY_COLOR;
+
+    return options.map((option: string, index: number) => {
+      const agg = aggregation && aggregation[option] ? aggregation[option] : 0;
+      const isChecked = BODY_COLOR.values.indexOf(option) !== -1;
+      const props = {
+        labelClassName,
+        type: 'color',
+        name: option,
+        content: option,
+        value: option,
+        className: styles.color,
+        labelPlacement: 'bottom' as 'bottom',
+        checked: isChecked,
+        label: <FilterLabel text={t(`cbd:${option}`)} agg={agg} isVertical={true}/>,
+        onChange: onColorChange
+      };
+
+      return (
+        <CheckboxMaterial key={index} {...props} />
+      );
+    });
+  };
+
+  const renderCheckbox = (): React.ReactNode => {
+    const agg: number = (METALLIC.aggregation && METALLIC.aggregation['exterior_metallic'])
+      ? METALLIC.aggregation['exterior_metallic']
+      : 0;
+
+    const label = <span>{t('filters.metallic')} {showAgg && (<FormattedNumber numbersAfterDot={0} value={agg} />)}</span>;
+
+    return (
+      <CheckboxMaterial
+        checked={METALLIC.values}
+        onChange={onCheckboxClick}
+        label={label}
+      />
+    );
+  };
+  return (
+    <div className={styles.colorWidget}>
+      {isMobileOnly &&
+        <Visible xs sm md>
+          <h4 className={styles.colorSubtitle}>{t('filters.bodyColor')}</h4>
+        </Visible>
+      }
+      <div className={styles.colorsContainer}>
+        {renderColors()}
+      </div>
+      {renderCheckbox()}
+    </div>
+  );
+};
+
+export default memo(BodyColorWidget, (prevProps: IBodyColorWidgetProps, nextProps: IBodyColorWidgetProps) => {
+  return isEqual(prevProps.BODY_COLOR.values.length, nextProps.BODY_COLOR.values.length) &&
+    isEqual(prevProps.BODY_COLOR.aggregation, nextProps.BODY_COLOR.aggregation) &&
+    prevProps.METALLIC.values === nextProps.METALLIC.values &&
+    prevProps.t === nextProps.t;
+});

package/source/components/SearchWidget/DriveTransmissionWidget/DriveTransmissionWidget.styl

@@ -1,17 +1,17 @@
-@import '../../../theme/theme.styl'
-
-.section
-  padding: 10px
-
-.section:not(:last-child)
-  border-bottom: 1px solid $grey-e
-
-.sectionTitle
-  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
-  font-weight: 700
-  font-size: 14px
-  margin: 0
-  margin-top: 10px
-
-.PropertySelector
-  margin: 10px 0
+@import '../../../theme/theme.styl'
+
+.section
+  padding: 10px
+
+.section:not(:last-child)
+  border-bottom: 1px solid $grey-e
+
+.sectionTitle
+  font-family: 'Arial Fett', 'Arial Standard', 'Arial'
+  font-weight: 700
+  font-size: 14px
+  margin: 0
+  margin-top: 10px
+
+.PropertySelector
+  margin: 10px 0

package/source/components/SearchWidget/DriveTransmissionWidget/DriveTransmissionWidget.tsx

@@ -1,36 +1,36 @@
-import * as React from 'react';
-import styles from './DriveTransmissionWidget.styl';
-// import DriveType, { IDriveTypeProps } from '../../Filters/DriveType';
-import DriveType, { IDriveTypeProps } from '../../SearchFilters/filters/DriveType';
-// import Transmission, { ITransmissionProps } from '../../Filters/Transmission';
-import Transmission, { ITransmissionProps } from '../../SearchFilters/filters/Transmission';
-
-interface IDriveTransmissionWidgetProps {
-  DRIVE_TYPE: IDriveTypeProps;
-  TRANSMISSION: ITransmissionProps;
-  onFilterChange?: (fieldName: string, fieldValue: any[]) => void;
-  t: any;
-}
-
-interface IDriveTransmissionWidgetState {
-  [key: string]: boolean;
-}
-
-class DriveTransmissionWidget extends React.Component<IDriveTransmissionWidgetProps, IDriveTransmissionWidgetState> {
-  render(): JSX.Element {
-    const { DRIVE_TYPE, TRANSMISSION, onFilterChange, t } = this.props;
-
-    return (
-      <div className={styles.checkdedWidget}>
-        <div className={styles.section}>
-          <DriveType {...DRIVE_TYPE} onChange={onFilterChange} t={t} />
-        </div>
-        <div className={styles.section}>
-          <Transmission {...TRANSMISSION} onChange={onFilterChange} t={t} />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default DriveTransmissionWidget;
+import * as React from 'react';
+import styles from './DriveTransmissionWidget.styl';
+// import DriveType, { IDriveTypeProps } from '../../Filters/DriveType';
+import DriveType, { IDriveTypeProps } from '../../SearchFilters/filters/DriveType';
+// import Transmission, { ITransmissionProps } from '../../Filters/Transmission';
+import Transmission, { ITransmissionProps } from '../../SearchFilters/filters/Transmission';
+
+interface IDriveTransmissionWidgetProps {
+  DRIVE_TYPE: IDriveTypeProps;
+  TRANSMISSION: ITransmissionProps;
+  onFilterChange?: (fieldName: string, fieldValue: any[]) => void;
+  t: any;
+}
+
+interface IDriveTransmissionWidgetState {
+  [key: string]: boolean;
+}
+
+class DriveTransmissionWidget extends React.Component<IDriveTransmissionWidgetProps, IDriveTransmissionWidgetState> {
+  render(): JSX.Element {
+    const { DRIVE_TYPE, TRANSMISSION, onFilterChange, t } = this.props;
+
+    return (
+      <div className={styles.checkdedWidget}>
+        <div className={styles.section}>
+          <DriveType {...DRIVE_TYPE} onChange={onFilterChange} t={t} />
+        </div>
+        <div className={styles.section}>
+          <Transmission {...TRANSMISSION} onChange={onFilterChange} t={t} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DriveTransmissionWidget;

package/source/components/SearchWidget/EnvironmentWidget/DetailedEnvironmentWidget.styl

@@ -1,25 +1,25 @@
-.widgetItemHeader
-  display inline-block
-  margin-bottom 10px
-  font-size 14px
-  font-weight 700
-
-.checkbox
-  display inline-block
-  margin-right 10px
-
-.checkboxWrapper
-  display flex
-  align-items center
-  padding-left 30px
-
-.icon
-  width: 25px
-  height: 25px
-
-.flexRow
-  display: flex
-  justify-content space-between
-
-.col
-  margin-bottom: 15px
+.widgetItemHeader
+  display inline-block
+  margin-bottom 10px
+  font-size 14px
+  font-weight 700
+
+.checkbox
+  display inline-block
+  margin-right 10px
+
+.checkboxWrapper
+  display flex
+  align-items center
+  padding-left 30px
+
+.icon
+  width: 25px
+  height: 25px
+
+.flexRow
+  display: flex
+  justify-content space-between
+
+.col
+  margin-bottom: 15px

package/source/components/SearchWidget/EnvironmentWidget/DetailedEnvironmentWidget.tsx

@@ -1,126 +1,126 @@
-// import * as React from 'react';
-// import classnames from 'classnames';
-// import { Container, Row, Col } from 'react-grid-system';
-// import { Checkbox, PropertySelector } from '@bytebrand/fe-ui-core/common';
-
-// import DropDown from '../../../../ui/DropDown/DropDown';
-// import { IFilters } from '../../../../../framework/factories/FilterFactory';
-// import { PropertyType } from '../../../../ui/PropertySelector/PropertySelector';
-// import Consumption from '../../FiltersDetailed/Consumption';
-// import { EMISSION_STICKERS_ICONS } from '../../../../../framework/constants/search';
-
-// import styles from './DetailedEnvironmentWidget.styl';
-
-// interface IEnvironmentWidgetProps {
-//   t?: any;
-//   EMISSION_CLASS: IFilters;
-//   EMISSION_STICKER: IFilters;
-//   PARTICULATE_FILTER: IFilters;
-//   CONSUMPTION: IFilters;
-//   onFilterChange?: (field: string, value: string) => void;
-// }
-
-// class DetailedEnvironmentWidget extends React.Component<IEnvironmentWidgetProps, {}> {
-
-//   onEmissionClassChange = (event: any) => {
-//     this.props.onFilterChange('EMISSION_CLASS', event ? event.value : '');
-//   };
-
-//   onEmissionStickersChange = (event: any, checked: boolean, value: any) => {
-//     this.props.onFilterChange('EMISSION_STICKER', value);
-//   };
-
-//   onCheckboxClick = (event: React.ChangeEvent<HTMLInputElement>, value: boolean) => {
-//     this.props.onFilterChange('PARTICULATE_FILTER', value ? 'engineData_particulateFilterDiesel' : '');
-//   };
-
-//   renderEmissionClass = () => {
-//     const { EMISSION_CLASS: { values: value, options = [] }, t } = this.props;
-//     const props = {
-//       name,
-//       value: value && { value, label: t(`cbd:${value}`) },
-//       placeholder: t('ENVIRONMENT.pollutantClass'),
-//       onChange: this.onEmissionClassChange,
-//       isClearable: true,
-//       options: options.map((option: string) => ({
-//         value: option,
-//         label: t(`cbd:${option}`)
-//       }))
-//     };
-//     return <DropDown {...props} />;
-//   };
-
-//   renderEmissionStickers = () => {
-//     const { EMISSION_STICKER: { values: value, options = [] }, t } = this.props;
-//     return options.map((sticker: string) => {
-//       const isNoSticker = sticker === 'selector_emissionSticker_no';
-//       const type: PropertyType = isNoSticker ? 'text' : 'icon';
-
-//       const props = {
-//         type,
-//         key: sticker,
-//         name: sticker,
-//         value: sticker,
-//         checked: value === sticker,
-//         content: isNoSticker ? t('ENVIRONMENT.no') : <img src={EMISSION_STICKERS_ICONS[sticker] || null} className={styles.icon} />,
-//         onChange: this.onEmissionStickersChange
-//       };
-//       return <PropertySelector {...props} />;
-//     });
-//   };
-
-//   renderConsumption = () => {
-//     const { CONSUMPTION, t, onFilterChange } = this.props;
-//     const props = {
-//       t,
-//       values: CONSUMPTION.values,
-//       options: CONSUMPTION.options,
-//       onChange: onFilterChange
-//     };
-//     return (
-//       <Consumption {...props} />
-//     );
-//   };
-
-//   render(): JSX.Element {
-//     const { t } = this.props;
-
-//     const checkboxProps = {
-//       containerClassName: styles.checkbox,
-//       checked: this.props.PARTICULATE_FILTER.values,
-//       onChange: this.onCheckboxClick,
-//       label: t('ENVIRONMENT.dieselParticulateFilter')
-//     };
-
-//     const colLg = 3;
-//     const colSm = 6;
-
-//     return (
-//       <Container fluid>
-//         <Row>
-//           <Col sm={colSm} lg={colLg} className={styles.col}>
-//             {this.renderConsumption()}
-//           </Col>
-
-//           <Col sm={colSm} lg={colLg} className={styles.col}>
-//             <span className={styles.widgetItemHeader}>{t('ENVIRONMENT.pollutantClass')}</span>
-//             {this.renderEmissionClass()}
-//           </Col>
-
-//           <Col sm={colSm} lg={colLg} className={styles.col}>
-//             <span className={styles.widgetItemHeader}>{t('ENVIRONMENT.badges')}</span>
-//             <div className={styles.flexRow}>
-//               {this.renderEmissionStickers()}
-//             </div>
-//           </Col>
-
-//           <Col sm={colSm} lg={colLg} className={classnames(styles.checkboxWrapper, styles.col)}>
-//             <Checkbox {...checkboxProps} />
-//           </Col>
-//         </Row>
-//       </Container>
-//     );
-//   }
-// }
-
-// export default DetailedEnvironmentWidget;
+// import * as React from 'react';
+// import classnames from 'classnames';
+// import { Container, Row, Col } from 'react-grid-system';
+// import { Checkbox, PropertySelector } from '@bytebrand/fe-ui-core/common';
+
+// import DropDown from '../../../../ui/DropDown/DropDown';
+// import { IFilters } from '../../../../../framework/factories/FilterFactory';
+// import { PropertyType } from '../../../../ui/PropertySelector/PropertySelector';
+// import Consumption from '../../FiltersDetailed/Consumption';
+// import { EMISSION_STICKERS_ICONS } from '../../../../../framework/constants/search';
+
+// import styles from './DetailedEnvironmentWidget.styl';
+
+// interface IEnvironmentWidgetProps {
+//   t?: any;
+//   EMISSION_CLASS: IFilters;
+//   EMISSION_STICKER: IFilters;
+//   PARTICULATE_FILTER: IFilters;
+//   CONSUMPTION: IFilters;
+//   onFilterChange?: (field: string, value: string) => void;
+// }
+
+// class DetailedEnvironmentWidget extends React.Component<IEnvironmentWidgetProps, {}> {
+
+//   onEmissionClassChange = (event: any) => {
+//     this.props.onFilterChange('EMISSION_CLASS', event ? event.value : '');
+//   };
+
+//   onEmissionStickersChange = (event: any, checked: boolean, value: any) => {
+//     this.props.onFilterChange('EMISSION_STICKER', value);
+//   };
+
+//   onCheckboxClick = (event: React.ChangeEvent<HTMLInputElement>, value: boolean) => {
+//     this.props.onFilterChange('PARTICULATE_FILTER', value ? 'engineData_particulateFilterDiesel' : '');
+//   };
+
+//   renderEmissionClass = () => {
+//     const { EMISSION_CLASS: { values: value, options = [] }, t } = this.props;
+//     const props = {
+//       name,
+//       value: value && { value, label: t(`cbd:${value}`) },
+//       placeholder: t('ENVIRONMENT.pollutantClass'),
+//       onChange: this.onEmissionClassChange,
+//       isClearable: true,
+//       options: options.map((option: string) => ({
+//         value: option,
+//         label: t(`cbd:${option}`)
+//       }))
+//     };
+//     return <DropDown {...props} />;
+//   };
+
+//   renderEmissionStickers = () => {
+//     const { EMISSION_STICKER: { values: value, options = [] }, t } = this.props;
+//     return options.map((sticker: string) => {
+//       const isNoSticker = sticker === 'selector_emissionSticker_no';
+//       const type: PropertyType = isNoSticker ? 'text' : 'icon';
+
+//       const props = {
+//         type,
+//         key: sticker,
+//         name: sticker,
+//         value: sticker,
+//         checked: value === sticker,
+//         content: isNoSticker ? t('ENVIRONMENT.no') : <img src={EMISSION_STICKERS_ICONS[sticker] || null} className={styles.icon} />,
+//         onChange: this.onEmissionStickersChange
+//       };
+//       return <PropertySelector {...props} />;
+//     });
+//   };
+
+//   renderConsumption = () => {
+//     const { CONSUMPTION, t, onFilterChange } = this.props;
+//     const props = {
+//       t,
+//       values: CONSUMPTION.values,
+//       options: CONSUMPTION.options,
+//       onChange: onFilterChange
+//     };
+//     return (
+//       <Consumption {...props} />
+//     );
+//   };
+
+//   render(): JSX.Element {
+//     const { t } = this.props;
+
+//     const checkboxProps = {
+//       containerClassName: styles.checkbox,
+//       checked: this.props.PARTICULATE_FILTER.values,
+//       onChange: this.onCheckboxClick,
+//       label: t('ENVIRONMENT.dieselParticulateFilter')
+//     };
+
+//     const colLg = 3;
+//     const colSm = 6;
+
+//     return (
+//       <Container fluid>
+//         <Row>
+//           <Col sm={colSm} lg={colLg} className={styles.col}>
+//             {this.renderConsumption()}
+//           </Col>
+
+//           <Col sm={colSm} lg={colLg} className={styles.col}>
+//             <span className={styles.widgetItemHeader}>{t('ENVIRONMENT.pollutantClass')}</span>
+//             {this.renderEmissionClass()}
+//           </Col>
+
+//           <Col sm={colSm} lg={colLg} className={styles.col}>
+//             <span className={styles.widgetItemHeader}>{t('ENVIRONMENT.badges')}</span>
+//             <div className={styles.flexRow}>
+//               {this.renderEmissionStickers()}
+//             </div>
+//           </Col>
+
+//           <Col sm={colSm} lg={colLg} className={classnames(styles.checkboxWrapper, styles.col)}>
+//             <Checkbox {...checkboxProps} />
+//           </Col>
+//         </Row>
+//       </Container>
+//     );
+//   }
+// }
+
+// export default DetailedEnvironmentWidget;