@bytebrand/fe-ui-core 4.2.72 → 4.2.73

package/common.ts

@@ -3,6 +3,7 @@ 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';
@@ -29,7 +30,6 @@ 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.72",
+  "version": "4.2.73",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
+
 import Checkbox from './Checkbox';
 import styles from './FormCheckbox.styl';
 
@@ -7,6 +9,8 @@ interface IFormCheckboxProps {
   className?: string;
   errorClassName?: string;
   label?: JSX.Element | string | null;
+
+  // mobx form field instance
   field: any;
   checkboxClassName?: string;
   labelClassName?: string;
@@ -14,70 +18,34 @@ interface IFormCheckboxProps {
   helperText?: string;
 }
 
-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
-      }
-    };
-  }
+@observer
+class FormCheckbox extends React.Component<IFormCheckboxProps> {
   static defaultProps = {
     className: '',
     label: false
   };
 
-  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);
-  }
-
   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 { field, label, className, checkboxClassName, labelClassName, customError } = this.props;
+
+    // const customHasError = customError;
+    // const hasError = field.hasError;
+    const error = customError ? customError : field.error;
 
     const _props = {
-      value,
-      checked,
-      name,
-      disabled,
-      onChange: this.handleChange,
-      error: customError,
-      label,
+      ...field.bind(),
+      error, 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,6 +4,7 @@ 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';
 
@@ -123,4 +124,13 @@ 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/_common/{TextField/FormTextField.styl → CheckboxMaterial/FormCheckboxMaterial.styl}

@@ -1,8 +1,13 @@
+@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
@@ -10,26 +15,8 @@
   font-weight: 400;
   font-style: normal
   font-size: 10px
-  color: rgb(204, 51, 51)
+  line-height: 15px
+  color: $darkRed
   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/CheckboxMaterial/FormCheckboxMaterial.tsx

@@ -0,0 +1,50 @@
+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/DropDown/FormDropDown.tsx

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

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

@@ -0,0 +1,36 @@
+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

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

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

@@ -0,0 +1,22 @@
+@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

@@ -0,0 +1,54 @@
+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;

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

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

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

@@ -1,21 +0,0 @@
-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.tsx

@@ -1,54 +0,0 @@
-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;