Merge pull request #31 from indec-it/refactor/components

Refactor/components
indec-it · Jun 19, 2019 · 09c5317 · 09c5317
2 parents 055a38b + 4d13339
commit 09c5317
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 45 deletions.
diff --git a/src/components/DateField.js b/src/components/DateField.js
@@ -3,8 +3,10 @@ import PropTypes from 'prop-types';
 import {Label, FormGroup} from 'reactstrap';
 import DatePicker from 'react-datepicker';
 
+import {DateUtilsService} from '../services';
+
 const handleChange = (date, onChange, currentValue, control) => {
-    const value = date.toISOString();
+    const value = DateUtilsService.formatToISOString(date);
     if (currentValue === value) {
         return;
     }
@@ -38,10 +40,10 @@ const DateField = ({
 );
 
 DateField.propTypes = {
+    onChange: PropTypes.func.isRequired,
     control: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
     dateFormat: PropTypes.string,
     maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
     minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
@@ -1,12 +1,21 @@
-/* global document */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Label, FormGroup} from 'reactstrap';
 import Select from 'react-select';
 import {find, isNil} from 'lodash';
 
 const Dropdown = ({
-    value, control, label, getOptionValue, getOptionLabel, disabled, placeholder, options, onChange, isClearable
+    value,
+    control,
+    label,
+    getOptionValue,
+    getOptionLabel,
+    disabled,
+    placeholder,
+    options,
+    onChange,
+    isClearable,
+    ...props
 }) => (
     <FormGroup controlId={control}>
         {label && (
@@ -25,7 +34,7 @@ const Dropdown = ({
             {...{
                 options, getOptionValue, getOptionLabel, isClearable, placeholder
             }}
-            menuPortalTarget={document.querySelector('body')}
+            {...props}
         />
     </FormGroup>
 );

diff --git a/src/components/EmailField.js b/src/components/EmailField.js
@@ -1,47 +1,46 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
-    Label,
-    Input,
-    FormGroup,
-    FormFeedback
+    Label, Input, FormGroup, FormFeedback
 } from 'reactstrap';
 
-import ValidatorService from '../services/validator';
+import {ValidatorService} from '../services';
 
 class EmailField extends PureComponent {
     static propTypes = {
+        onChange: PropTypes.func.isRequired,
         control: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
         value: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
+        feedBackLabel: PropTypes.string,
         disabled: PropTypes.bool
     };
 
     static defaultProps = {
-        disabled: false
+        disabled: false,
+        feedBackLabel: 'Email invalido'
     };
 
     constructor(props) {
         super(props);
         this.state = {valid: undefined};
     }
 
-    validateInput = (value, callback) => {
+    validateInput(value, onChange) {
         const valid = ValidatorService.validateEmail(value);
-        this.setState(() => ({valid}), callback());
-    };
+        this.setState(() => ({valid}), onChange());
+    }
 
-    handleChange = ({target}, onChange) => {
+    handleChange({target}, onChange) {
         if (this.props.value === target.value) {
             return;
         }
         this.validateInput(target.value, onChange({target}));
-    };
+    }
 
     render() {
         const {
-            control, label, value, disabled, onChange
+            control, label, value, disabled, onChange, feedBackLabel
         } = this.props;
         const {valid} = this.state;
         return (
@@ -58,7 +57,7 @@ class EmailField extends PureComponent {
                     name={control}
                 />
                 <FormFeedback tooltip>
-                    Email invalido
+                    {feedBackLabel}
                 </FormFeedback>
             </FormGroup>
         );

diff --git a/src/components/LoadingButton.js b/src/components/LoadingButton.js
@@ -5,7 +5,7 @@ import {faSpinner} from '@fortawesome/free-solid-svg-icons';
 import IconButton from './IconButton';
 
 const LoadingButton = ({label, bsSize}) => (
-    <IconButton bsStyle="primary" bsSize={bsSize} className="btn-group-justified" disabled icon={faSpinner} pulse>
+    <IconButton color="primary" bsSize={bsSize} className="btn-group-justified" disabled icon={faSpinner} pulse>
         {label}
     </IconButton>
 );

diff --git a/src/components/NumberField.js b/src/components/NumberField.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import ValidatorService from '../services/validator';
+import {ValidatorService} from '../services';
 import TextField from './TextField';
 
 const handleKeyPress = e => {
@@ -14,15 +14,10 @@ const NumberField = ({
     control, label, value, maxLength, minLength, disabled, onBlur, onChange
 }) => (
     <TextField
-        control={control}
-        label={label}
-        value={value}
-        maxLength={maxLength}
-        minLength={minLength}
-        disabled={disabled}
-        onBlur={onBlur}
+        {...{
+            control, label, value, maxLength, minLength, disabled, onBlur, onChange
+        }}
         handleKeyPress={handleKeyPress}
-        onChange={onChange}
     />
 );
 

diff --git a/src/components/PasswordField.js b/src/components/PasswordField.js
@@ -4,7 +4,7 @@ import {
     Label, Input, FormGroup, FormFeedback
 } from 'reactstrap';
 
-import {ValidatorService} from '../services';
+import {DateUtilsService, ValidatorService} from '../services';
 
 class PasswordField extends PureComponent {
     static propTypes = {
@@ -47,18 +47,18 @@ class PasswordField extends PureComponent {
         this.state = {valid: undefined};
     }
 
-    validateInput = (value, callback) => {
+    validateInput(value, onChange) {
         if (this.props.validateInput) {
-            callback();
+            onChange();
             return this.props.validateInput;
         }
         const {maxLength, minLength} = this.props;
         const valid = ValidatorService.validatePassword(value, maxLength, minLength);
-        return this.setState(() => ({valid}), callback);
-    };
+        return this.setState(() => ({valid}), onChange());
+    }
 
     handleChange(date) {
-        const value = date.toISOString();
+        const value = DateUtilsService.formatToISOString(date);
         if (this.props.value === value) {
             return;
         }

diff --git a/src/components/SaveButton.js b/src/components/SaveButton.js
@@ -12,7 +12,7 @@ const SaveButton = ({disabled, onClick, saving}) => (
         <ActionIndicator saving={saving}/>
         <Button
             type="submit"
-            bsStyle="primary"
+            color="primary"
             className="ta-save"
             {...{disabled, onClick}}
         >

diff --git a/src/components/TextField.js b/src/components/TextField.js
@@ -4,7 +4,7 @@ import {
     Label, Input, FormGroup, FormFeedback
 } from 'reactstrap';
 
-import ValidatorService from '../services/validator';
+import {DateUtilsService, ValidatorService} from '../services';
 
 class TextField extends PureComponent {
     static propTypes = {
@@ -47,23 +47,21 @@ class TextField extends PureComponent {
         this.state = {valid: undefined};
     }
 
-    validateInput = (value, callback) => {
+    validateInput(value, callback) {
         if (this.props.validateInput) {
             callback();
             return this.props.validateInput;
         }
-
         const {maxLength, minLength} = this.props;
         const valid = ValidatorService.validateText(value, maxLength, minLength);
         return this.setState(() => ({valid}), callback);
-    };
+    }
 
     handleChange(date) {
-        const value = date.toISOString();
+        const value = DateUtilsService.formatToISOString(date);
         if (this.props.value === value) {
             return;
         }
-
         this.validateInput(value, this.props.onChange({target: {value, id: this.props.control}}));
     }
 

diff --git a/src/components/TextareaField.js b/src/components/TextareaField.js
@@ -34,11 +34,11 @@ class TextareaField extends PureComponent {
         this.state = {valid: undefined};
     }
 
-    validateInput = (value, callback) => {
+    validateInput(value, onChange) {
         const {maxLength, minLength} = this.props;
         const valid = ValidatorService.validateText(value, maxLength, minLength);
-        this.setState(() => ({valid}), callback());
-    };
+        this.setState(() => ({valid}), onChange());
+    }
 
     handleChange({target}) {
         if (this.props.value === target.value) {

diff --git a/src/services/dateUtils.js b/src/services/dateUtils.js
@@ -23,4 +23,8 @@ export default class DateUtilsService {
     static formatDateTime(input) {
         return `${DateUtilsService.formatDate(input)} ${DateUtilsService.formatTime(input)}`;
     }
+
+    static formatToISOString(input = new Date()) {
+        return input.toISOString();
+    }
 }