@bytebrand/fe-ui-core 4.2.73 → 4.2.74

package/common.ts

@@ -30,6 +30,7 @@ export { default as VehicleSliderForSRL } from './source/components/_common/Vehi
 export { default as VehicleSmallCard } from './source/components/VehicleSmallCard/VehicleSmallCard';
 export { default as OfferPanel } from './source/components/OfferPanel/OfferPanel';
 
+export { default as FormTextField } from './source/components/_common/TextField/FormTextField';
 export { default as Tooltip } from './source/components/_common/Tooltip/Tooltip';
 export { default as TextField } from './source/components/_common/TextField/TextField';
 export { default as FormattedNumber } from './source/components/FormattedNumber/FormattedNumber';

package/package.json

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

package/source/components/OfferDetailedSection/partials/PanelConfig.styl

@@ -19,6 +19,10 @@
       width: 1px;
       height: 100%
       background-color $grey-5f;
+ 
+  [class^='OfferCheckboxGroup__labelContent']
+    @media (min-width: 990px) and (max-width: 1073px)
+      max-width: 230px   
 
 .wrapConfigDetails
   box-sizing: border-box

package/source/components/OfferPanel/OfferCheckboxGroup/OfferCheckboxGroup.styl

@@ -73,9 +73,6 @@
 .labelContent
   flex: 1 1 auto
   color: $grey-3;
-  @media (min-width: 990px) and (max-width: 1112px)
-    max-width: 230px
-    padding-right: 10px !important;
     
 .icon
   display: block
@@ -120,4 +117,4 @@
   font-size: 12px;
 
 .hidePlus
-  display: inline-block
+  display: inline-block

package/source/components/OfferPanel/OfferPanel.styl

@@ -167,14 +167,13 @@
   [class*='MuiFormControlLabel-root']
     height: 20px
     min-height: 0
+    margin-left:0
   .labelText
     font-size: 12px;
     font-weight: normal;
 
   [class*='labelContent']
     font-size: 12px
-    +media-phone-up()
-      padding-right: 62px;
 
 
 .checkBoxGroup
@@ -190,3 +189,6 @@
     margin: 0
     justify-content: space-between
     width: 100%
+
+[class*='MuiIconButton-root']
+  padding:5px!important

package/source/components/_common/DropDown/FormDropDown.tsx

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import styles from './FormDropDown.styl';
 
 import DropDown from './DropDown';
-
-type ErrorPositionType = 'TopRight' | 'TopLeft' | 'BottomRight' | 'BottomLeft';
+import { ErrorPositionType } from '../TextField/FormTextField';
 
 interface IFormDropDownProps {
   // mobx form field instance

package/source/components/_common/Radio/FormRadioGroup.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
 
 import RadioGroup from './RadioGroup';
 import styles from './FormRadioGroup.styl';
@@ -7,19 +8,16 @@ import styles from './FormRadioGroup.styl';
 interface IFormRadioGroupProps {
   children: any;
   className?: string;
+
+  // mobx form field instance
   field: any;
+
   containerClassName?: string;
   childClassName?: string;
 }
 
-interface IFormRadioGroupState {
-  field: {
-    name?: string;
-    value?: string;
-  };
-}
-
-class FormRadioGroup extends React.Component<IFormRadioGroupProps, IFormRadioGroupState> {
+@observer
+class FormRadioGroup extends React.Component<IFormRadioGroupProps> {
   static defaultProps = {
     className: '',
     label: false,
@@ -27,39 +25,16 @@ class FormRadioGroup extends React.Component<IFormRadioGroupProps, IFormRadioGro
     childClassName: ''
   };
 
-  constructor(props: IFormRadioGroupProps) {
-    super(props);
-    this.state = {
-      field: {
-        name: '',
-        value: ''
-      }
-    };
-  }
-
-  handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>, value?: any) => {
-    const { name, onChange } = this.props.field;
-    this.setState(() => ({
-      field: {
-        name,
-        value
-      }
-    }));
-    onChange(event, value);
-  };
-
   render() {
-    const { className, containerClassName, childClassName, field } = this.props;
-    const { name, value } = this.state.field;
+    const { field, className, containerClassName, childClassName } = this.props;
+
     const hasError = field.hasError;
     const error = field.error;
 
     const _props = {
-      name,
-      value,
+      ...field.bind(),
       containerClassName,
       childClassName,
-      onChange: this.handleRadioChange,
       error: hasError
     };
 

package/source/components/_common/TextField/FormTextField.story.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import FormTextField from './FormTextField';
+
+
+const field = {
+  error: 'Something went wrong',
+  hasError: true,
+  bind: () => {
+    const { bind, ...rest } = field;
+    return rest;
+  }
+};
+
+storiesOf('_Common_UI', module)
+  .add('FormTextField', () => (
+    <div>
+      <FormTextField errorPosition='BottomRight' field={field}/>
+    </div>
+  ));

package/source/components/_common/TextField/FormTextField.styl

@@ -0,0 +1,35 @@
+.field
+  position: relative
+
+.errorText
+  position: absolute
+  display: block
+  width: 100%
+  z-index: 1
+  font-family: "Arial Standard", Arial
+  font-weight: 400;
+  font-style: normal
+  font-size: 10px
+  color: rgb(204, 51, 51)
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+  box-sizing border-box
+  padding: 0 2px
+
+.errorBottomLeft,
+.errorTopLeft
+  text-align: left
+
+.errorBottomRight,
+.errorTopRight
+  text-align: right
+
+.errorBottomLeft,
+.errorBottomRight
+  bottom: -15px
+
+.errorTopLeft,
+.errorTopRight
+  top: -15px
+

package/source/components/_common/TextField/FormTextField.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+
+import styles from './FormTextField.styl';
+import TextField from './TextField';
+
+export type ErrorPositionType = 'TopRight' | 'TopLeft' | 'BottomRight' | 'BottomLeft';
+
+interface IFormTextFieldProps {
+  errorPosition?: ErrorPositionType;
+  className?: string;
+  // TODO: change this when mobx-react-form supports typescript
+  field: any;
+  type?: string;
+
+  min?: number;
+  step?: number;
+  max?: number;
+
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+
+@observer
+class FormTextField extends React.Component<IFormTextFieldProps, {}> {
+  static defaultProps = {
+    className: '',
+    errorPosition: 'BottomLeft',
+    t: () => ''
+  };
+
+  render() {
+    const { className, errorPosition, field, type, min, step, max, onKeyPress } = this.props;
+    const errorClassName = classnames(styles.errorText, styles[`error${errorPosition}`]);
+
+    const hasError = field.hasError;
+    const error = field.error;
+
+    const props = {
+      ...field.bind(),
+      min, step, max,
+      onKeyPress
+    };
+
+    return (
+      <div className={classnames(styles.field, className)}>
+        <TextField error={hasError && error} {...props} type={type || field.type} />
+        {hasError && error ? (<span className={errorClassName}>{error}</span>) : false}
+      </div>
+    );
+  }
+}
+
+export default FormTextField;