Fixing problems with react 16. Updating behavior of simple edit page.…

… Adding dirty and active state and CSS styles to common form fields.
ReCodEx · Dec 10, 2017 · 237c252 · 237c252
1 parent d175e9f
commit 237c252
Show file tree

Hide file tree

Showing 18 changed files with 363 additions and 343 deletions.
diff --git a/package.json b/package.json
@@ -75,7 +75,6 @@
     "react-router": "3.2.0",
     "react-router-bootstrap": "^0.23.3",
     "react-router-redux": "^4.0.8",
-    "react-throttle": "^0.3.0",
     "react-toggle": "4.0.2",
     "redux": "^3.5.1",
     "redux-actions": "^2.0.3",

diff --git a/src/components/forms/EditSimpleLimitsForm/EditSimpleLimitsForm.js b/src/components/forms/EditSimpleLimitsForm/EditSimpleLimitsForm.js
@@ -10,7 +10,10 @@ import FormBox from '../../widgets/FormBox';
 import Button from '../../widgets/FlatButton';
 import { RefreshIcon } from '../../icons';
 
-import { encodeEnvironmentId } from '../../../redux/modules/simpleLimits';
+import {
+  encodeTestId,
+  encodeEnvironmentId
+} from '../../../redux/modules/simpleLimits';
 import prettyMs from 'pretty-ms';
 
 import styles from './styles.less';
@@ -126,7 +129,10 @@ const EditSimpleLimitsForm = ({
             </th>
 
             {environments.map(environment => {
-              const id = test.id + '.' + encodeEnvironmentId(environment.id);
+              const id =
+                encodeTestId(test.id) +
+                '.' +
+                encodeEnvironmentId(environment.id);
               return (
                 <td
                   key={`td.${id}`}

diff --git a/src/components/forms/EditUserProfileForm/EditUserProfileForm.js b/src/components/forms/EditUserProfileForm/EditUserProfileForm.js
@@ -5,7 +5,7 @@ import { reduxForm, Field, change } from 'redux-form';
 import { Alert } from 'react-bootstrap';
 import FormBox from '../../widgets/FormBox';
 import SubmitButton from '../SubmitButton';
-import { Throttle } from 'react-throttle';
+
 import { validateRegistrationData } from '../../../redux/modules/users';
 
 import { TextField, PasswordField, PasswordStrength } from '../Fields';
@@ -167,21 +167,18 @@ const EditUserProfileForm = ({
           }
         />
 
-        <Throttle time={500} handler="onKeyDown">
-          <Field
-            name="password"
-            component={PasswordField}
-            autoComplete="off"
-            tabIndex={7}
-            onKeyDown={() => asyncValidate()}
-            label={
-              <FormattedMessage
-                id="app.changePasswordForm.password"
-                defaultMessage="New password:"
-              />
-            }
-          />
-        </Throttle>
+        <Field
+          name="password"
+          component={PasswordField}
+          autoComplete="off"
+          tabIndex={7}
+          label={
+            <FormattedMessage
+              id="app.changePasswordForm.password"
+              defaultMessage="New password:"
+            />
+          }
+        />
 
         <Field
           name="passwordStrength"

diff --git a/src/components/forms/Fields/CheckboxField.js b/src/components/forms/Fields/CheckboxField.js
@@ -6,18 +6,22 @@ import { FormGroup, HelpBlock, Checkbox } from 'react-bootstrap';
 
 import OnOffCheckbox from '../OnOffCheckbox';
 
+import styles from './commonStyles.less';
+
 const CheckboxField = ({
   input,
   onOff = false,
-  meta: { dirty, error },
+  meta: { dirty, error, warning },
   label,
   ...props
 }) => {
   const Component = onOff ? OnOffCheckbox : Checkbox;
   /* eslint-disable no-unneeded-ternary */
   return (
     <FormGroup
-      validationState={error ? 'error' : dirty ? 'warning' : undefined}
+      validationState={
+        error ? 'error' : warning ? 'warning' : dirty ? 'success' : undefined
+      }
       controlId={input.name}
     >
       <Component {...props} {...input} checked={input.value ? true : false}>
@@ -27,6 +31,11 @@ const CheckboxField = ({
         <HelpBlock>
           {' '}{error}{' '}
         </HelpBlock>}
+      {!error &&
+        warning &&
+        <HelpBlock>
+          {' '}{warning}{' '}
+        </HelpBlock>}
     </FormGroup>
   );
 };
@@ -36,7 +45,11 @@ CheckboxField.propTypes = {
     name: PropTypes.string.isRequired,
     value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
   }).isRequired,
-  meta: PropTypes.object.isRequired,
+  meta: PropTypes.shape({
+    dirty: PropTypes.bool,
+    error: PropTypes.oneOfType([PropTypes.string, FormattedMessage]),
+    warning: PropTypes.oneOfType([PropTypes.string, FormattedMessage])
+  }).isRequired,
   type: PropTypes.string,
   onOff: PropTypes.bool,
   label: PropTypes.oneOfType([

diff --git a/src/components/forms/Fields/DatetimeField.js b/src/components/forms/Fields/DatetimeField.js
@@ -5,9 +5,12 @@ import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 
 import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
+import classNames from 'classnames';
 
 import withLinks from '../../../hoc/withLinks';
 
+import styles from './commonStyles.less';
+
 class DatetimeField extends Component {
   /**
    * This hack forces redux-form to open the calendar each time
@@ -24,9 +27,10 @@ class DatetimeField extends Component {
   render() {
     const {
       input,
-      meta: { touched, error },
+      meta: { active, dirty, error, warning },
       disabled,
       label,
+      ignoreDirty = false,
       ...props
     } = this.props;
 
@@ -35,7 +39,7 @@ class DatetimeField extends Component {
     return (
       <FormGroup
         controlId={input.name}
-        validationState={error ? (touched ? 'error' : 'warning') : undefined}
+        validationState={error ? 'error' : warning ? 'warning' : undefined}
       >
         <ControlLabel>{label}</ControlLabel>
         <Datetime
@@ -44,15 +48,20 @@ class DatetimeField extends Component {
           locale={lang}
           onFocus={() => this.onFocus()}
           inputProps={{ disabled }}
+          bsClass={classNames({
+            'form-control': true,
+            [styles.dirty]: dirty && !ignoreDirty && !error && !warning,
+            [styles.active]: active
+          })}
         />{' '}
         {error &&
           <HelpBlock>
-            {' '}{touched
-              ? error
-              : <FormattedMessage
-                  defaultMessage="This field is required."
-                  id="app.field.isRequired"
-                />}{' '}
+            {' '}{error}{' '}
+          </HelpBlock>}
+        {!error &&
+          warning &&
+          <HelpBlock>
+            {' '}{warning}{' '}
           </HelpBlock>}
       </FormGroup>
     );
@@ -75,10 +84,13 @@ DatetimeField.propTypes = {
     ])
   }).isRequired,
   meta: PropTypes.shape({
-    touched: PropTypes.bool,
-    error: PropTypes.any
+    active: PropTypes.bool,
+    dirty: PropTypes.bool,
+    error: PropTypes.any,
+    warning: PropTypes.any
   }).isRequired,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  ignoreDirty: PropTypes.bool
 };
 
 export default withLinks(DatetimeField);
diff --git a/src/components/forms/Fields/ExpandingInputFilesField.js b/src/components/forms/Fields/ExpandingInputFilesField.js
@@ -9,6 +9,9 @@ import {
   HelpBlock,
   ControlLabel
 } from 'react-bootstrap';
+import classNames from 'classnames';
+
+import styles from './commonStyles.less';
 
 const EMPTY_VALUE = { first: '', second: '' };
 
@@ -60,18 +63,19 @@ class ExpandingInputFilesField extends Component {
     const {
       leftLabel = '',
       rightLabel = '',
-      input: { onChange, ...input },
-      meta: { dirty, error },
+      input: { onChange, onFocus, onBlur, ...input },
+      meta: { active, dirty, error, warning },
       style = {},
       options,
+      ignoreDirty = false,
       ...props
     } = this.props;
     const { texts } = this.state;
 
     return (
       <FormGroup
         controlId={input.name}
-        validationState={error ? 'error' : dirty ? 'warning' : undefined}
+        validationState={error ? 'error' : warning ? 'warning' : undefined}
       >
         <Row>
           <Col sm={6}>
@@ -84,9 +88,23 @@ class ExpandingInputFilesField extends Component {
                   key={i}
                   onChange={e =>
                     this.changeText(i, e.target.value, true, onChange)}
-                  onBlur={() => this.removeIfEmpty(i, onChange)}
+                  onFocus={onFocus}
+                  onBlur={e => {
+                    onBlur(e);
+                    this.removeIfEmpty(i, onChange);
+                  }}
                   value={text.first}
                   componentClass="select"
+                  bsClass={classNames({
+                    'form-control': true,
+                    [styles.dirty]:
+                      i < texts.length - 1 &&
+                      dirty &&
+                      !ignoreDirty &&
+                      !error &&
+                      !warning,
+                    [styles.active]: active
+                  })}
                   {...props}
                 >
                   {options.map(({ key, name }, o) =>
@@ -109,8 +127,22 @@ class ExpandingInputFilesField extends Component {
                   componentClass="input"
                   onChange={e =>
                     this.changeText(i, e.target.value, false, onChange)}
-                  onBlur={() => this.removeIfEmpty(i, onChange)}
+                  onFocus={onFocus}
+                  onBlur={e => {
+                    onBlur(e);
+                    this.removeIfEmpty(i, onChange);
+                  }}
                   value={text.second}
+                  bsClass={classNames({
+                    'form-control': true,
+                    [styles.dirty]:
+                      i < texts.length - 1 &&
+                      dirty &&
+                      !ignoreDirty &&
+                      !error &&
+                      !warning,
+                    [styles.active]: active
+                  })}
                   {...props}
                 />
               )}
@@ -121,14 +153,24 @@ class ExpandingInputFilesField extends Component {
           <HelpBlock>
             {' '}{error}{' '}
           </HelpBlock>}
+        {!error &&
+          warning &&
+          <HelpBlock>
+            {' '}{warning}{' '}
+          </HelpBlock>}
       </FormGroup>
     );
   }
 }
 
 ExpandingInputFilesField.propTypes = {
   input: PropTypes.object,
-  meta: PropTypes.object,
+  meta: PropTypes.shape({
+    active: PropTypes.bool,
+    dirty: PropTypes.bool,
+    error: PropTypes.any,
+    warning: PropTypes.any
+  }).isRequired,
   leftLabel: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage]) })
@@ -138,7 +180,8 @@ ExpandingInputFilesField.propTypes = {
     PropTypes.shape({ type: PropTypes.oneOf([FormattedMessage]) })
   ]).isRequired,
   style: PropTypes.object,
-  options: PropTypes.array
+  options: PropTypes.array,
+  ignoreDirty: PropTypes.bool
 };
 
 export default ExpandingInputFilesField;