quave:forms

Quickly create a form by only passing it's definition. The definition object has to be created using our definitions meteor package. This package serves practicity. If you wish to standardize the forms of your application or quickly make an admin dashboard, this is the package for you.

Dependencies

This package has these npm depencies. They're not enforced because this could cause some problems .

• formik
• react
• simpl-schema

Also, it depends on the meteor package quave:definitions. Installation instructions here.

Installation

meteor add quave:forms

Quickstart

Pass a handler to onSubmit prop, the initial values to the initialValues prop and a definition to the definition prop. Voilà! You got yourself a form.

1// Import
2import { Form } from 'meteor/quave:forms';
3
4// Use the Form component
5<Form
6  onSubmit={handleSubmit}
7  initialValues={initialValues}
8  definition={PlayerDefinition}
9/>

The Form component can accept any of the properties of the Formik component, plus these:

• definition: object definition from our definitions package.
• submitLabel: defaults to SUBMIT. It's used as child of the submit button.
• buttonComponent: defaults to <button />. The component used for buttons. type="submit" is passed as prop.
• definitionToComponent: a function that receives (fieldDefinition, fieldName) as arguments and return a Formik compatible component to be used for that field. fieldDefinition is the content of the fields property of the definition passed as prop (definition.fields).
• actionButtons: an array of objects with label and handler properties. label will be passed as a child of the button component and handler is a function to be called when the onClick event is triggered. It calls e.preventDefault() before calling the handler.
• autoValidate: defaults to false. Defines if Form should try to validate the inputs automatically based on the schema. It has some limitations with custom objects at the moment. It will work fine for simple definitions.
• autoClean: defaults to true. Defines if we should call Simple Schema's clean method before passing the values to the onSubmit handler.
• isDebug: defaults to false. When true, draws the form state bellow it for debugging purposes.
• fieldContainerStyle: style passed to a div that encloses each field.
• fieldContainerClassName: class passed to a div that encloses each field.
• buttonsContainerStyle: style passed to a div that encloses all buttons.
• buttonsContainerClassName: class passed to a div that encloses all buttons.

If you pass style or className, it will be forwarded to the form component, working as the container for all fields and the buttons' container.

Layout

If you want to layout your form I recommend using grid and flex on the available styles/classNames. This is not yet optimized to be an easy task, but you can do this once and apply to all your forms. Bellow is an example of how the props will look in the final HTML document.

1<form class="className" style="style">
2  <div class="fieldContainerClassName" style="fieldContainerStyle">
3    <label>Name</label>
4    <input name="name" type="text" label="Name"></div>
5  <div class="fieldContainerClassName" style="fieldContainerStyle">
6    <label>Birthday</label>
7    <input name="birthday" type="text" label="Birthday">
8  </div>
9  <div class="fieldContainerClassName" style="fieldContainerStyle">
10    <label>Position</label>
11    <select name="position" label="Position">
12      <option value="">Choose one Position</option>
13      <option value="GOLEIRO">GOLEIRO</option>
14      <option value="LATERAL_DIREITO">LATERAL_DIREITO</option>
15      <option value="LATERAL_ESQUERDO">LATERAL_ESQUERDO</option>
16      <option value="ZAGUEIRO">ZAGUEIRO</option>
17      <option value="VOLANTE">VOLANTE</option>
18      <option value="MEIA">MEIA</option>
19      <option value="ATACANTE">ATACANTE</option>
20      <option value="PONTA_DIREITA">PONTA_DIREITA</option>
21      <option value="PONTA_ESQUERDA">PONTA_ESQUERDA</option>
22    </select></div>
23  <div class="buttonsContainerClassName" style="buttonsContainerStyle">
24    <button class="quaveform">ERASE</button>
25    <button class="quaveform">CANCEL</button>
26    <button class="quaveform-submit-button" type="submit">SAVE</button>
27  </div>
28</form>

Default Layout

Our default layout is decent (I think). You may take a look at the defaultStyles object at the top of the definitionToComponent.js file.