@bytebrand/fe-ui-core 4.2.70 → 4.2.72

package/common.ts

@@ -3,7 +3,6 @@ export { default as Accordion } from './source/components/_common/Accordion/Acco
 export { default as Button } from './source/components/_common/Button/Button';
 export { default as ButtonOld } from './source/components/_common/ButtonOld/Button';
 export { default as PSGroup } from './source/components/_common/PropertySelector/PSGroup';
-export { default as FormPSGroup } from './source/components/_common/PropertySelector/FormPSGroup';
 export { default as PropertySelector } from './source/components/_common/PropertySelector/PropertySelector';
 
 export { default as FormRadioGroup } from './source/components/_common/Radio/FormRadioGroup';

package/package.json

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

package/source/components/_common/Checkbox/FormCheckbox.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import { observer } from 'mobx-react';
-
 import Checkbox from './Checkbox';
 import styles from './FormCheckbox.styl';
 
@@ -9,8 +7,6 @@ interface IFormCheckboxProps {
   className?: string;
   errorClassName?: string;
   label?: JSX.Element | string | null;
-
-  // mobx form field instance
   field: any;
   checkboxClassName?: string;
   labelClassName?: string;
@@ -18,34 +14,70 @@ interface IFormCheckboxProps {
   helperText?: string;
 }
 
-@observer
-class FormCheckbox extends React.Component<IFormCheckboxProps> {
+interface IFormCheckboxState {
+  field: {
+    name?: string;
+    value?: boolean;
+    checked?: boolean;
+    error?: boolean;
+    disabled?: boolean
+  }
+}
+
+class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
+  constructor(props: IFormCheckboxProps) {
+    super(props);
+
+    this.state = {
+      field: {
+        value: this.props.field.value,
+        error: this.props.field.error,
+        checked: this.props.field.checked,
+        disabled: this.props.field.disabled,
+        name: this.props.field.name
+      }
+    };
+  }
   static defaultProps = {
     className: '',
     label: false
   };
 
-  render() {
-    const { field, label, className, checkboxClassName, labelClassName, customError } = this.props;
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked?: boolean, value?: any) => {
+    const { name, disabled, onChange, rules } = this.props.field;
+    const customError = (rules.includes('accepted') && !checked);
+    this.setState(() => ({
+      field: {
+        value,
+        name,
+        disabled,
+        checked,
+        error: customError
+      }
+    }));
+    onChange(event, checked, value);
+  }
 
-    // const customHasError = customError;
-    // const hasError = field.hasError;
-    const error = customError ? customError : field.error;
+  render() {
+    const { label, className, checkboxClassName, labelClassName } = this.props;
+    const { name, value, checked, disabled, error } = this.state.field;
+    const customError = error || (this.props.field.error && !checked);
 
     const _props = {
-      ...field.bind(),
-      error, label,
+      value,
+      checked,
+      name,
+      disabled,
+      onChange: this.handleChange,
+      error: customError,
+      label,
       checkboxClassName,
       labelClassName
     };
 
-    // const errorClassNames = classnames(styles.errorText, errorClassName);
-
     return (
       <div className={classnames(styles.field, className)}>
         <Checkbox {..._props} />
-        {/* {hasError && error ? (<span className={errorClassNames}>{error}</span>) : false} */}
-        {/* {customHasError ? (<span className={errorClassNames}>{helperText}</span>) : false} */}
       </div>
     );
   }

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.story.js

@@ -4,7 +4,6 @@ import { action } from '@storybook/addon-actions';
 
 import { ROW_STYLES } from '../../../framework/constants';
 import CheckboxMaterial from './CheckboxMaterial';
-import FormCheckboxMaterial from './FormCheckboxMaterial';
 
 import styles from './CheckboxMaterial.story.styl';
 
@@ -124,13 +123,4 @@ const CheckboxWrap = () => {
 
 storiesOf('_Common_UI', module)
   .add('CheckboxMaterial', () => <CheckboxWrap />)
-  .add('FormCheckboxMaterial', () => (
-    <div>
-      <div style={ROW_STYLES}>
-        <FormCheckboxMaterial {...basePropsForm} />
-      </div>
-      <div style={ROW_STYLES}>
-        <FormCheckboxMaterial {...withErrorForm} />
-      </div>
-    </div>
-  ));
+

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

@@ -3,8 +3,6 @@ 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';
@@ -60,7 +58,6 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   Link?: any;
 }
 
-@observer
 class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
   componentDidMount() {
     this.getFiltersFromQuery();
@@ -89,7 +86,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
       }
 
       clearSearchState(!activeSort);
-      search(toJS(filters), pageNumber || 1, true);
+      search(filters, pageNumber || 1, true);
     }
 
     this.updateFinancingSearchConfig();
@@ -97,7 +94,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
   componentWillUnmount(): void {
     const { location, filters, setLastSearchString, resetFiltersToDefault } = this.props;
-    setLastSearchString(toJS(filters), location.search);
+    setLastSearchString(filters, location.search);
     resetFiltersToDefault();
   }
 
@@ -163,7 +160,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     if (needToRefreshPage) {
       onFilterChange();
       clearSearchState();
-      search(toJS(filters), 1, true);
+      search(filters, 1, true);
     }
   };
 
@@ -243,12 +240,11 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
   getQueryFromFilters = () => {
     const { filters } = this.props;
-    const filtersList = toJS(filters);
-    const filtersKeys = Object.keys(filtersList);
+    const filtersKeys = Object.keys(filters);
     const query: { [key: string]: any } = {};
 
     filtersKeys.forEach((filter: string) => {
-      const filterObj = filtersList[filter];
+      const filterObj = filters[filter];
       const filterValue = filter === MMS_GROUPS_KEY ? getGroupValuesForQuery(filterObj) : filterObj.value;
       const isRangeFilter = typeof filterValue === 'object' && filterObj.isRange;
       const isRateFilter = typeof filterValue === 'object' && filterObj.isRate;
@@ -272,8 +268,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
   getMmsGroupsProps = (filter: string) => {
     const { filters } = this.props;
-    const allFilters = toJS(filters);
-    const mmsGroups = allFilters[filter];
+    const mmsGroups = filters[filter];
 
     return mmsGroups.map((filterGroup: any, index: number) => {
       const group: any = {};
@@ -281,8 +276,8 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
       Object.keys(filterGroup).forEach((fl: string) => {
 
         group[fl] = {
-          values: toJS(allFilters[filter][index][fl].value),
-          options: toJS(allFilters[filter][index][fl].options)
+          values: filters[filter][index][fl].value,
+          options: filters[filter][index][fl].options
         };
       });
 
@@ -292,15 +287,14 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
 
   getDefaultFilterProps = (filter: string) => {
     const { filters, aggregation } = this.props;
-    const allFilters = toJS(filters);
-    const agg: any = toJS(aggregation);
-    const controls = allFilters[filter].controls;
+    const agg: any = aggregation;
+    const controls = filters[filter].controls;
     const controlsType = _get(controls, 'type', '');
-    const filterField = `${allFilters[filter].field}${controlsType}`;
+    const filterField = `${filters[filter].field}${controlsType}`;
     const histograms = agg['HISTOGRAM'] || {};
     const isHistogram = Object.keys(histograms).indexOf(filterField) !== -1;
 
-    const typeOptions = allFilters[filter].typeOptions;
+    const typeOptions = filters[filter].typeOptions;
     let filterProps = {
       ...(controls && Object.keys(controls).length && { controls }),
       ...(typeOptions && Object.keys(typeOptions).length && { typeOptions })
@@ -318,8 +312,8 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
         options: histogramData
       });
     } else {
-      const values = toJS(allFilters[filter].value);
-      const options = toJS(allFilters[filter].options);
+      const values = filters[filter].value;
+      const options = filters[filter].options;
       const optionsWithoutUnknown = removeUnknownOptions(options);
 
       filterProps = Object.assign({}, filterProps, {

package/source/components/_common/CheckboxMaterial/FormCheckboxMaterial.styl

@@ -1,22 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.field
-  position: relative
-  flex: 1 0 100%
-
-.errorText
-  position: absolute
-  left: 0
-  bottom: -15px
-  display: block
-  width: 100%
-  z-index: 1
-  font-family: "Arial Standard", Arial
-  font-weight: 400;
-  font-style: normal
-  font-size: 10px
-  line-height: 15px
-  color: $darkRed
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap

package/source/components/_common/CheckboxMaterial/FormCheckboxMaterial.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { observer } from 'mobx-react';
-
-import CheckboxMaterial from './CheckboxMaterial';
-import styles from './FormCheckboxMaterial.styl';
-
-interface IFormCheckboxProps {
-  className?: string;
-  errorClassName?: string;
-  label?: JSX.Element | string | null;
-
-  // mobx form field instance
-  field: any;
-  checkboxClassName?: string;
-  labelClassName?: string;
-}
-
-@observer
-class FormCheckboxMaterial extends React.Component<IFormCheckboxProps> {
-  static defaultProps = {
-    className: '',
-    label: false
-  };
-
-  render() {
-    const { field, label, className, checkboxClassName, labelClassName, errorClassName } = this.props;
-
-    const hasError = field.hasError;
-    const error = field.error;
-
-    const _props = {
-      ...field.bind(),
-      error, label,
-      checkboxClassName,
-      labelClassName
-    };
-
-    const errorClassNames = classnames(styles.errorText, errorClassName);
-
-    return (
-      <div className={classnames(styles.field, className)}>
-        <CheckboxMaterial {..._props} />
-        {hasError && error ? (<span className={errorClassNames}>{error}</span>) : false}
-      </div>
-    );
-  }
-}
-
-export default FormCheckboxMaterial;

package/source/components/_common/PropertySelector/FormPSGroup.story.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import PropertySelector from './PropertySelector';
-import FormPSGroup from './FormPSGroup';
-import styles from './FormPSGroup.story.styl';
-
-const mockField = {
-  name: 'availability',
-  value: ['always'],
-  error: 'Something went wrong',
-  hasError: true,
-  onChange: action('FormRadioGroup change'),
-  bind: () => {
-    const { bind, ...rest } = mockField;
-    return rest;
-  }
-};
-
-storiesOf('_Common_UI', module)
-.add('FormPSGroup', () => (
-  <div>
-    <FormPSGroup field={mockField} childClassName={styles.child}>
-      <PropertySelector label='Available always' value='always'/>
-      <PropertySelector label='Available from' value='fromDate'/>
-      <PropertySelector label='Unknown' value='unknown' disabled={true} />
-    </FormPSGroup>
-
-    <FormPSGroup field={mockField} containerClassName={styles.vertical}>
-      <PropertySelector label='Available always' value='always'/>
-      <PropertySelector label='Available from' value='fromDate'/>
-      <PropertySelector label='Unknown' value='unknown' disabled={true} />
-    </FormPSGroup>
-  </div>
-));

package/source/components/_common/PropertySelector/FormPSGroup.story.styl

@@ -1,5 +0,0 @@
-.vertical
-  display: flex
-  flex-direction: row
-  align-items: center
-

package/source/components/_common/PropertySelector/FormPSGroup.styl

@@ -1,22 +0,0 @@
-@import '../../../theme/theme.styl'
-
-.field
-  position: relative
-  display: inline-block
-
-.errorText
-  position: absolute
-  left: 0
-  bottom: -15px
-  display: block
-  width: 100%
-  z-index: 1
-  font-family: $font-style-arial
-  font-weight: $font-weight-default
-  font-style: normal
-  font-size: 10px
-  line-height: 15px
-  color: $darkRed
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap

package/source/components/_common/PropertySelector/FormPSGroup.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { observer } from 'mobx-react';
-
-import PSGroup from './PSGroup';
-import styles from './FormPSGroup.styl';
-
-interface IFormRadioGroupProps {
-  children: any;
-  className?: string;
-  behavior?: string;
-
-  // mobx form field instance
-  field: any;
-
-  containerClassName?: string;
-  childClassName?: string;
-}
-
-@observer
-class FormPSGroup extends React.Component<IFormRadioGroupProps> {
-  static defaultProps = {
-    className: '',
-    label: false,
-    containerClassName: '',
-    childClassName: ''
-  };
-
-  render() {
-    const { field, className, behavior, containerClassName, childClassName } = this.props;
-
-    const hasError = field.hasError;
-    const error = field.error;
-
-    const _props = {
-      ...field.bind(),
-      behavior,
-      containerClassName,
-      childClassName,
-      error: hasError
-    };
-
-    return (
-      <div className={classnames(styles.field, className)}>
-        <PSGroup {..._props} >
-          {this.props.children}
-        </PSGroup>
-        {hasError && error ? (<span className={styles.errorText}>{error}</span>) : false}
-      </div>
-    );
-  }
-}
-
-export default FormPSGroup;