xchain-components/src/components/XForm/index.js

Xchain Components

/* flow */
/* eslint react/jsx-filename-extension: 0 */
import * as React from 'react';
import { Grid, Form } from 'semantic-ui-react';
import XButton from 'components/XButton';

type Props = {
  formFields: Array<{groupOf?: number | string, element: React.Node | Array<React.Node>}>,
  submitButtonText?: string,
  onFormSubmit: () => void,
  onFormClear: ()=>void,
  width?: string,
  disabled?: boolean,
  type?:string,
  fontWeight?: string,
  fontSize?: string,
  fontStyle?: string,
  fontStretch?: string,
  lineHeight?: string,
  letterSpacing?: string,
  color?: string,
  clearButton?:boolean,
};

const XForm = (props: Props) => {
  const {
    formFields, submitButtonText, onFormSubmit, clearButton, onFormClear,
  } = props;
  let formElement = null;
  const buttonElement = (clearButton === null || clearButton === false)
    ? (
      <XButton
        text={submitButtonText}
        onButtonClick={onFormSubmit}
        backgroundColor="#B0C4DE"
        borderColor="#B0C4DE"
      />) : (
        <React.Fragment>
          <Grid divided="vertically">
            <Grid.Row>
              <Grid.Column width={2}>
                <XButton
                  text={submitButtonText}
                  onButtonClick={onFormSubmit}
                  backgroundColor="#B0C4DE"
                  borderColor="#B0C4DE"
                />
              </Grid.Column>

              <Grid.Column width={2}>
                <XButton
                  text="CLEAR"
                  onButtonClick={onFormClear}
                  backgroundColor="#B0C4DE"
                  borderColor="#B0C4DE"
                />
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </React.Fragment>
    );
  if (formFields !== undefined && formFields !== null) {
    formElement = (
      <Form>
        {
          formFields.map((formField, index) => {
            const noOfChildren = formField.groupOf === undefined || formField.groupOf === null
              ? 1 : formField.groupOf;
            const formFieldElement = noOfChildren === 1
              ? (
                <Form.Field key={index}>
                  {
                    formField.element
                  }
                </Form.Field>
              ) : (
                <Form.Group widths={noOfChildren} key={index}>
                  {
                    formField.element.map((element, idx) => (
                      <Form.Field key={idx}>
                        {
                         element
                        }
                      </Form.Field>
                    ))
                  }
                </Form.Group>
              );
            return formFieldElement;
          })
        }
        {buttonElement}
      </Form>
    );
  }
  return formElement;
};

XForm.defaultProps = {
  placeholder: '',
  width: '100px',
  type: 'text',
  disabled: false,
  fontWeight: 'normal',
  fontSize: '16px',
  fontStyle: 'normal',
  fontStretch: 'normal',
  lineHeight: 'normal',
  letterSpacing: 'normal',
  color: '#3b485c',
  submitButtonText: 'Submit',
  clearButton: false,
};

export default XForm;