initializing formik #556

app/components/formik/AuthForm/index.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Form, Errors } from 'react-redux-form/immutable';
+import styled from 'styled-components';
+
+import { omit } from 'lodash/object';
+import { startCase } from 'lodash/string';
+
+import appMessages from 'containers/App/messages';
+
+import ButtonCancel from 'components/buttons/ButtonCancel';
+import ButtonSubmit from 'components/buttons/ButtonSubmit';
+import Clear from 'components/styled/Clear';
+import Main from 'components/EntityView/Main';
+import ViewPanel from 'components/EntityView/ViewPanel';
+import FieldGroupWrapper from 'components/fields/FieldGroupWrapper';
+import Field from 'components/fields/Field';
+
+import ErrorWrapper from '../ErrorWrapper';
+import FormWrapper from '../FormWrapper';
+import FormBody from '../FormBody';
+import FormFooter from '../FormFooter';
+import FormFooterButtons from '../FormFooterButtons';
+import Label from '../Label';
+import Required from '../Required';
+import ControlInput from '../ControlInput';
+
+// These props will be omitted before being passed to the Control component
+const nonControlProps = ['hint', 'label', 'component', 'controlType', 'children', 'errorMessages'];
+
+const StyledForm = styled(Form)`
+  display: table;
+  width: 100%;
+`;
+
+class AuthForm extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  renderField = (field) => {
+    const { id, model, ...props } = omit(field, nonControlProps);
+    return (
+      <ControlInput
+        id={id}
+        model={model || `.${id}`}
+        {...props}
+      />
+    );
+  }
+
+  renderBody = (fields) => (
+    <FormBody>
+      <ViewPanel>
+        <Main bottom>
+          <FieldGroupWrapper>
+            {fields.map((field, i) => (
+              <Field key={i}>
+                { field.label !== false
+                  && (
+                    <Label htmlFor={field.id}>
+                      {`${field.label || startCase(field.id)}`}
+                      { field.validators && field.validators.required
+                      && <Required>*</Required>
+                      }
+                    </Label>
+                  )
+                }
+                {this.renderField(field)}
+                {
+                  field.errorMessages
+                  && (
+                    <ErrorWrapper>
+                      <Errors
+                        className="errors"
+                        model={field.model}
+                        show="touched"
+                        messages={field.errorMessages}
+                      />
+                    </ErrorWrapper>
+                  )
+                }
+              </Field>
+            ))}
+          </FieldGroupWrapper>
+        </Main>
+      </ViewPanel>
+    </FormBody>
+  );
+
+  render() {
+    const {
+      fields, model, handleSubmit, handleCancel, labels,
+    } = this.props;
+    return (
+      <FormWrapper>
+        <StyledForm model={model} onSubmit={handleSubmit}>
+          { fields && this.renderBody(fields) }
+          <FormFooter>
+            <FormFooterButtons>
+              <ButtonCancel type="button" onClick={handleCancel}>
+                <FormattedMessage {...appMessages.buttons.cancel} />
+              </ButtonCancel>
+              <ButtonSubmit type="submit" disabled={this.props.sending}>
+                {labels.submit}
+              </ButtonSubmit>
+            </FormFooterButtons>
+            <Clear />
+          </FormFooter>
+        </StyledForm>
+      </FormWrapper>
+    );
+  }
+}
+
+AuthForm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  handleCancel: PropTypes.func.isRequired,
+  labels: PropTypes.object,
+  model: PropTypes.string,
+  fields: PropTypes.array,
+  sending: PropTypes.bool,
+};
+AuthForm.defaultProps = {
+  sending: false,
+};
+export default AuthForm;

app/components/formik/ControlCheckbox.js

@@ -0,0 +1,8 @@
+import { Control } from 'react-redux-form/immutable';
+import styled from 'styled-components';
+
+const ControlCheckbox = styled(Control.checkbox)`
+  margin-right: 5px;
+`;
+
+export default ControlCheckbox;

app/components/formik/ControlInput.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { palette } from 'styled-theme';
+
+const ControlInput = styled.input`
+  background-color: ${palette('background', 0)};
+  width: 100%;
+  border: 1px solid ${palette('light', 1)};
+  padding: 0.7em;
+  border-radius: 0.5em;
+`;
+
+export default ControlInput;

app/components/formik/ControlLink.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import A from 'components/styled/A';
+
+const ControlMain = styled(A)``;
+
+export default class ControlLink extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  static propTypes = {
+    text: PropTypes.string,
+    path: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return (
+      <ControlMain
+        href={this.props.path}
+        onClick={(evt) => {
+          if (evt !== undefined && evt.preventDefault) evt.preventDefault();
+          this.props.onClick();
+        }}
+      >
+        {this.props.text}
+      </ControlMain>
+    );
+  }
+}

app/components/formik/ControlSelect.js

@@ -0,0 +1,11 @@
+import { Control } from 'react-redux-form/immutable';
+import styled from 'styled-components';
+
+const ControlSelect = styled(Control.select)`
+  background:#ffffff;
+  border:1px solid #E0E1E2;
+  color:#000;
+  padding:5px;
+`;
+
+export default ControlSelect;

app/components/formik/ControlShort.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import ControlInput from './ControlInput';
+
+const ControlShort = styled(ControlInput)`
+  max-width: 120px;
+`;
+export default ControlShort;

app/components/formik/ControlTextArea.js

@@ -0,0 +1,15 @@
+import { Control } from 'react-redux-form/immutable';
+import styled from 'styled-components';
+import { palette } from 'styled-theme';
+
+const ControlTextArea = styled(Control.textarea)`
+  background-color: ${palette('background', 0)};
+  width: 100%;
+  border: 1px solid ${palette('light', 1)};
+  padding: 0.7em;
+  border-radius: 0.5em;
+  min-height: 6em;
+  color: ${palette('text', 0)};
+`;
+
+export default ControlTextArea;

app/components/formik/ControlTextAreaLarge.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import ControlTextArea from './ControlTextArea';
+
+const ControlTextAreaLarge = styled(ControlTextArea)`
+  min-height:14em;
+`;
+
+export default ControlTextAreaLarge;

app/components/formik/ControlTitle.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import ControlInput from './ControlInput';
+
+const ControlTitle = styled(ControlInput)`
+  font-size: 1.3em;
+  @media print {
+    font-size: ${(props) => props.theme.sizes.print.large};
+  }
+`;
+
+export default ControlTitle;

app/components/formik/ControlTitleText.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import ControlTextArea from './ControlTextArea';
+
+const ControlTitleText = styled(ControlTextArea)`
+  min-height: 5em;
+`;
+
+export default ControlTitleText;

app/components/formik/DateControl/InputComponent.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import styled from 'styled-components';
+import { palette } from 'styled-theme';
+
+const StyledInput = styled.input`
+  background-color: ${palette('background', 0)};
+  width: 100%;
+  border: 1px solid ${palette('light', 1)};
+  padding: 0.7em;
+  border-radius: 0.5em;
+`;
+
+class InputComponent extends React.Component {
+  focus = () => {
+    this.input.focus();
+  }
+
+  render() {
+    return (
+      <StyledInput
+        ref={(node) => { this.input = node; }}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default InputComponent;

app/components/formik/DateControl/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Control } from 'react-redux-form/immutable';
+
+import DatePicker from './DatePicker';
+
+export class DateControl extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const { model, ...props } = this.props;
+    return (
+      <Control
+        type="date"
+        component={DatePicker}
+        model={model}
+        mapProps={{
+          onChange: (cprops) => cprops.onChange,
+          error: ({ fieldValue }) => !fieldValue.valid,
+        }}
+        {...props}
+      />
+    );
+  }
+}
+
+DateControl.propTypes = {
+  model: PropTypes.string.isRequired,
+};
+
+export default DateControl;