@bytebrand/fe-ui-core 4.8.26 → 4.8.27

package/source/components/SearchFilters/FiltersFactory.story.js

@@ -1,273 +1,273 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import DropDown from './../_common/DropDown/DropDown';
-import { FiltersFactory } from './FiltersFactory';
-import FilterBlock from './common/FilterBlock/FilterBlock';
-import { DAMAGED_OPTIONS, DOORS, OWNERS_OPTIONS, STATE_OPTIONS } from '../../framework/constants/Search';
-import {
-  BODY_TYPES,
-  DRIVE_TYPES,
-  EMISSION_CLASS,
-  EMISSION_STICKERS,
-  EXTERIOR_COLORS,
-  FUEL_TYPES, HIGHLIGHTS_TYPES, INTERIOR_COLORS, INTERIOR_TYPES, TRANSMISSION_TYPES
-} from '../../framework/constants/selectors';
-import { FIRST_REGISTRATION_HISTOGRAM, MILEAGE_HISTOGRAM, POWER_HISTOGRAM, PRICE_HISTOGRAM } from '../../framework/data';
-import { MMS_GROUPS } from '../../framework/constants/filters';
-
-const t = (phrase, options = {}) => {
-  const dictionary = {
-    'filters.rateTitle': 'Price/Rate',
-    'filters.price': 'Price',
-    'filters.rate': 'Rate',
-    'rateSearchWidget.changeRateLink': 'open',
-    'rateSearchWidget.any': 'any',
-    'rateSearchWidget.defaultValue': 'any, 60 Months',
-    'rateSearchWidget.monthsValue': 'Months Value',
-  };
-  return dictionary[phrase];
-};
-
-const HIGHLIGHTS = {
-  aggregation: {},
-  values: [],
-  options: HIGHLIGHTS_TYPES
-};
-
-const FILTERS = {
-  CONSUMPTION: {
-    values: { from: 1, to: 18 },
-    options: [{ from: 1, to: 18 }],
-    onChange: action('change consumption'),
-    t: () => ''
-  },
-  DAMAGED: {
-    values: '',
-    options: DAMAGED_OPTIONS,
-    onChange: action('change damaged'),
-    t: () => ''
-  },
-  DOORS: {
-    values: '',
-    options: DOORS,
-    onChange: action('change seats'),
-    t: () => ''
-  },
-  DRIVE_TYPE: {
-    aggregation: {},
-    values: [],
-    options: DRIVE_TYPES,
-    onChange: action('change drive type'),
-    t: () => ''
-  },
-  EMISSION_CLASS: {
-    values: '',
-    options: EMISSION_CLASS,
-    onChange: action('change emission class'),
-    t: () => ''
-  },
-  EMISSION_STICKER: {
-    value: '',
-    options: EMISSION_STICKERS,
-    onChange: action('change emission sticker'),
-    t: () => ''
-  },
-  EXTERIOR_COLOR: {
-    name: 'EXTERIOR_COLOR',
-    values: [],
-    options: EXTERIOR_COLORS,
-    onChange: action('change exterior color'),
-    t: () => ''
-  },
-  FIRST_REGISTRATION: {
-    name: 'FIRST_REGISTRATION',
-    values: { from: 1970, to: 2019 },
-    controls: { from: '', to: '' },
-    options: FIRST_REGISTRATION_HISTOGRAM,
-    onChange: action('change first registration'),
-    onChangeControls: action('change first registration'),
-    t: () => ''
-  },
-  FUEL: {
-    aggregation: {},
-    values: [],
-    options: FUEL_TYPES,
-    onChange: action('change fuel'),
-    t: () => ''
-  },
-  HIGHLIGHTS: {
-    HIGHLIGHTS: HIGHLIGHTS,
-    onFilterChange: action('change highlights'),
-    t: () => ''
-  },
-  INTERIOR_COLOR: {
-    name: 'INTERIOR_COLOR',
-    values: [],
-    options: INTERIOR_COLORS,
-    onChange: action('change interior color'),
-    t: () => ''
-  },
-  INTERIOR_TYPE: {
-    aggregation: {},
-    values: [],
-    options: INTERIOR_TYPES,
-    onChange: action('change interior material'),
-    t: () => ''
-  },
-  MAKE_MODEL: {
-    MMS_GROUPS,
-    BODY_TYPE: {
-      options: BODY_TYPES,
-      values: []
-    },
-    onAddMmsGroup: () => { },
-    onRemoveMmsGroup: (index) => { },
-    onChange: (field, value, index, isSeries) => { },
-    t: () => { }
-  },
-  MILEAGE: {
-    name: 'MILEAGE',
-    values: { from: 0, to: 150000 },
-    controls: { from: '', to: '' },
-    options: MILEAGE_HISTOGRAM,
-    onChange: action('change mileage'),
-    onChangeControls: action('change mileage'),
-    t: () => ''
-  },
-  OWNERS: {
-    value: '',
-    options: OWNERS_OPTIONS,
-    onChange: action('change owner'),
-    t: () => ''
-  },
-  POWER: {
-    name: 'POWER',
-    values: { from: 0, to: 600 },
-    controls: { from: '', to: '' },
-    options: POWER_HISTOGRAM,
-    onChange: action('change power'),
-    onChangeControls: action('change power'),
-    t: () => ''
-  },
-  COST: {
-    COST_TYPE: {
-      options: ['price', 'rate'],
-      values: 'rate'
-    },
-    PRICE: {
-      options: PRICE_HISTOGRAM,
-      values: { from: 0, to: 90000 },
-      controls: { from: '', to: '' }
-    },
-    RATE: {
-      values: { monthlyInstallmentFrom: 'any', monthlyInstallmentTo: 'any', firstInstallment: 0, paybackPeriod: 60 }
-    },
-    onChange: action('change'),
-    onChangeControls: action('change'),
-    getRateSearchPrice: (value) => ({ from: 1000, to: 5000 }),
-    t
-  },
-  PRICE: {
-    name: 'PRICE',
-    values: { from: 0, to: 90000 },
-    controls: { from: '', to: '' },
-    options: PRICE_HISTOGRAM,
-    onChange: action('change price'),
-    onChangeControls: action('change price'),
-    t: () => ''
-  },
-  RATE: {
-    values: { monthlyInstallmentFrom: 'any', monthlyInstallmentTo: 'any', firstInstallment: 0, paybackPeriod: 60 },
-    isRateWidgetOpened: false,
-    onRateWidgetOpen: action('widget open'),
-    onRateWidgetClose: action('widget close'),
-    onRateChange: action('change rate'),
-    t
-  },
-  SEATS: {
-    values: { from: 1, to: 12 },
-    options: [{ from: 1, to: 12 }],
-    onChange: action('change seats'),
-    t: () => ''
-  },
-  STATE_OPTIONS: {
-    fieldValues: [],
-    fieldOptions: STATE_OPTIONS,
-    onChange: action('change state'),
-    t: () => ''
-  },
-  TRANSMISSION: {
-    aggregation: {},
-    values: [],
-    options: TRANSMISSION_TYPES,
-    onChange: action('change transmission type'),
-    t: () => ''
-  }
-};
-
-const containerStyles = {
-  width: '280px'
-};
-
-const filterStyles = {
-  marginTop: '20px',
-  paddingTop: '20px',
-  borderTop: '1px solid #005CCB'
-};
-
-// Stateful container for testing interaction
-class FiltersContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeFilter: 'CONSUMPTION'
-    }
-  }
-
-  changeActiveFilter = (filter) => {
-    this.setState(() => ({
-      activeFilter: filter.value
-    }));
-  };
-
-  getOptions = (options) => options.map((option) => ({
-    value: option,
-    label: option
-  }));
-
-  render() {
-    const { activeFilter } = this.state;
-
-    const filterProps = FILTERS[activeFilter];
-    const filters = Object.keys(FILTERS);
-    const component = FiltersFactory[activeFilter](filterProps);
-
-    const ddProps = {
-      options: this.getOptions(filters),
-      onChange: this.changeActiveFilter
-    };
-
-    return (
-      <div>
-        <DropDown {...ddProps} />
-        <div style={filterStyles}>
-          <FilterBlock expand={true}>
-            {component}
-          </FilterBlock>
-        </div>
-      </div>
-    )
-
-  }
-}
-
-storiesOf('FiltersFactory', module)
-  .add('All available filters', () => (
-    <div style={containerStyles}>
-      <FiltersContainer />
-    </div>
-  ));
-
-
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import DropDown from './../_common/DropDown/DropDown';
+import { FiltersFactory } from './FiltersFactory';
+import FilterBlock from './common/FilterBlock/FilterBlock';
+import { DAMAGED_OPTIONS, DOORS, OWNERS_OPTIONS, STATE_OPTIONS } from '../../framework/constants/Search';
+import {
+  BODY_TYPES,
+  DRIVE_TYPES,
+  EMISSION_CLASS,
+  EMISSION_STICKERS,
+  EXTERIOR_COLORS,
+  FUEL_TYPES, HIGHLIGHTS_TYPES, INTERIOR_COLORS, INTERIOR_TYPES, TRANSMISSION_TYPES
+} from '../../framework/constants/selectors';
+import { FIRST_REGISTRATION_HISTOGRAM, MILEAGE_HISTOGRAM, POWER_HISTOGRAM, PRICE_HISTOGRAM } from '../../framework/data';
+import { MMS_GROUPS } from '../../framework/constants/filters';
+
+const t = (phrase, options = {}) => {
+  const dictionary = {
+    'filters.rateTitle': 'Price/Rate',
+    'filters.price': 'Price',
+    'filters.rate': 'Rate',
+    'rateSearchWidget.changeRateLink': 'open',
+    'rateSearchWidget.any': 'any',
+    'rateSearchWidget.defaultValue': 'any, 60 Months',
+    'rateSearchWidget.monthsValue': 'Months Value',
+  };
+  return dictionary[phrase];
+};
+
+const HIGHLIGHTS = {
+  aggregation: {},
+  values: [],
+  options: HIGHLIGHTS_TYPES
+};
+
+const FILTERS = {
+  CONSUMPTION: {
+    values: { from: 1, to: 18 },
+    options: [{ from: 1, to: 18 }],
+    onChange: action('change consumption'),
+    t: () => ''
+  },
+  DAMAGED: {
+    values: '',
+    options: DAMAGED_OPTIONS,
+    onChange: action('change damaged'),
+    t: () => ''
+  },
+  DOORS: {
+    values: '',
+    options: DOORS,
+    onChange: action('change seats'),
+    t: () => ''
+  },
+  DRIVE_TYPE: {
+    aggregation: {},
+    values: [],
+    options: DRIVE_TYPES,
+    onChange: action('change drive type'),
+    t: () => ''
+  },
+  EMISSION_CLASS: {
+    values: '',
+    options: EMISSION_CLASS,
+    onChange: action('change emission class'),
+    t: () => ''
+  },
+  EMISSION_STICKER: {
+    value: '',
+    options: EMISSION_STICKERS,
+    onChange: action('change emission sticker'),
+    t: () => ''
+  },
+  EXTERIOR_COLOR: {
+    name: 'EXTERIOR_COLOR',
+    values: [],
+    options: EXTERIOR_COLORS,
+    onChange: action('change exterior color'),
+    t: () => ''
+  },
+  FIRST_REGISTRATION: {
+    name: 'FIRST_REGISTRATION',
+    values: { from: 1970, to: 2019 },
+    controls: { from: '', to: '' },
+    options: FIRST_REGISTRATION_HISTOGRAM,
+    onChange: action('change first registration'),
+    onChangeControls: action('change first registration'),
+    t: () => ''
+  },
+  FUEL: {
+    aggregation: {},
+    values: [],
+    options: FUEL_TYPES,
+    onChange: action('change fuel'),
+    t: () => ''
+  },
+  HIGHLIGHTS: {
+    HIGHLIGHTS: HIGHLIGHTS,
+    onFilterChange: action('change highlights'),
+    t: () => ''
+  },
+  INTERIOR_COLOR: {
+    name: 'INTERIOR_COLOR',
+    values: [],
+    options: INTERIOR_COLORS,
+    onChange: action('change interior color'),
+    t: () => ''
+  },
+  INTERIOR_TYPE: {
+    aggregation: {},
+    values: [],
+    options: INTERIOR_TYPES,
+    onChange: action('change interior material'),
+    t: () => ''
+  },
+  MAKE_MODEL: {
+    MMS_GROUPS,
+    BODY_TYPE: {
+      options: BODY_TYPES,
+      values: []
+    },
+    onAddMmsGroup: () => { },
+    onRemoveMmsGroup: (index) => { },
+    onChange: (field, value, index, isSeries) => { },
+    t: () => { }
+  },
+  MILEAGE: {
+    name: 'MILEAGE',
+    values: { from: 0, to: 150000 },
+    controls: { from: '', to: '' },
+    options: MILEAGE_HISTOGRAM,
+    onChange: action('change mileage'),
+    onChangeControls: action('change mileage'),
+    t: () => ''
+  },
+  OWNERS: {
+    value: '',
+    options: OWNERS_OPTIONS,
+    onChange: action('change owner'),
+    t: () => ''
+  },
+  POWER: {
+    name: 'POWER',
+    values: { from: 0, to: 600 },
+    controls: { from: '', to: '' },
+    options: POWER_HISTOGRAM,
+    onChange: action('change power'),
+    onChangeControls: action('change power'),
+    t: () => ''
+  },
+  COST: {
+    COST_TYPE: {
+      options: ['price', 'rate'],
+      values: 'rate'
+    },
+    PRICE: {
+      options: PRICE_HISTOGRAM,
+      values: { from: 0, to: 90000 },
+      controls: { from: '', to: '' }
+    },
+    RATE: {
+      values: { monthlyInstallmentFrom: 'any', monthlyInstallmentTo: 'any', firstInstallment: 0, paybackPeriod: 60 }
+    },
+    onChange: action('change'),
+    onChangeControls: action('change'),
+    getRateSearchPrice: (value) => ({ from: 1000, to: 5000 }),
+    t
+  },
+  PRICE: {
+    name: 'PRICE',
+    values: { from: 0, to: 90000 },
+    controls: { from: '', to: '' },
+    options: PRICE_HISTOGRAM,
+    onChange: action('change price'),
+    onChangeControls: action('change price'),
+    t: () => ''
+  },
+  RATE: {
+    values: { monthlyInstallmentFrom: 'any', monthlyInstallmentTo: 'any', firstInstallment: 0, paybackPeriod: 60 },
+    isRateWidgetOpened: false,
+    onRateWidgetOpen: action('widget open'),
+    onRateWidgetClose: action('widget close'),
+    onRateChange: action('change rate'),
+    t
+  },
+  SEATS: {
+    values: { from: 1, to: 12 },
+    options: [{ from: 1, to: 12 }],
+    onChange: action('change seats'),
+    t: () => ''
+  },
+  STATE_OPTIONS: {
+    fieldValues: [],
+    fieldOptions: STATE_OPTIONS,
+    onChange: action('change state'),
+    t: () => ''
+  },
+  TRANSMISSION: {
+    aggregation: {},
+    values: [],
+    options: TRANSMISSION_TYPES,
+    onChange: action('change transmission type'),
+    t: () => ''
+  }
+};
+
+const containerStyles = {
+  width: '280px'
+};
+
+const filterStyles = {
+  marginTop: '20px',
+  paddingTop: '20px',
+  borderTop: '1px solid #005CCB'
+};
+
+// Stateful container for testing interaction
+class FiltersContainer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeFilter: 'CONSUMPTION'
+    }
+  }
+
+  changeActiveFilter = (filter) => {
+    this.setState(() => ({
+      activeFilter: filter.value
+    }));
+  };
+
+  getOptions = (options) => options.map((option) => ({
+    value: option,
+    label: option
+  }));
+
+  render() {
+    const { activeFilter } = this.state;
+
+    const filterProps = FILTERS[activeFilter];
+    const filters = Object.keys(FILTERS);
+    const component = FiltersFactory[activeFilter](filterProps);
+
+    const ddProps = {
+      options: this.getOptions(filters),
+      onChange: this.changeActiveFilter
+    };
+
+    return (
+      <div>
+        <DropDown {...ddProps} />
+        <div style={filterStyles}>
+          <FilterBlock expand={true}>
+            {component}
+          </FilterBlock>
+        </div>
+      </div>
+    )
+
+  }
+}
+
+storiesOf('FiltersFactory', module)
+  .add('All available filters', () => (
+    <div style={containerStyles}>
+      <FiltersContainer />
+    </div>
+  ));
+
+