vms/src/index.js at master · brclarkdev/vms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import React, { Component } from 'react';
import { render } from "react-dom";
import logo from './logo.svg';
import './App.css';
import Wizard from "./Wizard";
import { FieldControl, Validators } from "react-reactive-form";
import styles from "./styles";

const handleSubmit = control => {
  alert(`You submitted \n ${JSON.stringify(control.value, null, 2)}`);
};
const Error = ({ msg }) => (
  <div>
    <span style={styles.error}>{msg}</span>
  </div>
);

const WizardForm = () => (
  <div style={styles.main}>
    <h2>Form Wizard - Multi Step Form</h2>
    <Wizard onSubmit={handleSubmit}>
      <Wizard.Step>
        <h2 style={{ color: "#808080" }}>Step 1</h2>
        <FieldControl
          strict={false}
          name="first_name"
          options={{
            validators: Validators.required
          }}
          render={({ handler, hasError, submitted }) => (
            <div>
              <label>First Name:</label>
              <input style={styles.input} {...handler()} />
              {submitted &&
                hasError("required") && <Error msg="First Name is required" />}
            </div>
          )}
        />
        <FieldControl
          strict={false}
          name="last_name"
          options={{
            validators: Validators.required
          }}
          render={({ handler, hasError, submitted }) => (
            <div>
              <label>Last Name:</label>
              <input style={styles.input} {...handler()} />
              {submitted &&
                hasError("required") && <Error msg="Last Name is required" />}
            </div>
          )}
        />
      </Wizard.Step>
      <Wizard.Step>
        <h2 style={{ color: "#808080" }}>Step 2</h2>
        <FieldControl
          strict={false}
          name="mail"
          options={{
            validators: [Validators.email, Validators.required]
          }}
          render={({ submitted, handler, hasError }) => {
            return (
              <div>
                <label>Email:</label>
                <input style={styles.input} {...handler()} />
                {submitted &&
                  (hasError("required") && <Error msg="Email is required" />)}
                {submitted &&
                  (hasError("email") && <Error msg="Invalid email" />)}
              </div>
            );
          }}
        />
        <FieldControl
          strict={false}
          name="age"
          render={({ handler }) => (
            <div>
              <label>Age:</label>
              <input type="number" style={styles.input} {...handler()} />
            </div>
          )}
        />
      </Wizard.Step>
      <Wizard.Step>
        <h2 style={{ color: "#808080" }}>Step 3</h2>
        <FieldControl
          strict={false}
          name="city"
          render={({ handler }) => (
            <div>
              <label>City:</label>
              <input style={styles.input} {...handler()} />
            </div>
          )}
        />
        <FieldControl
          strict={false}
          name="country"
          render={({ handler }) => (
            <div>
              <label>Country:</label>
              <input style={styles.input} {...handler()} />
            </div>
          )}
        />
      </Wizard.Step>
      <Wizard.Step>
        <h2 style={{ color: "#808080" }}>Step 4</h2>
        <FieldControl
          strict={false}
          name="notes"
          render={({ handler }) => (
            <div style={styles.genderContainer}>
              <div style={styles.genderText}>
                <label>Notes:</label>
              </div>
              <div style={styles.textAreaContainer}>
                <textarea style={styles.textAreaStyles} {...handler()} />
              </div>
            </div>
          )}
        />
        <FieldControl
          strict={false}
          name="terms"
          formState={false}
          options={{ validators: Validators.requiredTrue }}
          render={({ handler, hasError, submitted }) => (
            <div>
              <input {...handler("checkbox")} />
              <label>&nbsp;&nbsp;I agree to the terms and condition.</label>

              {submitted &&
                (hasError("required") && (
                  <Error msg="Please do agree to terms." />
                ))}
            </div>
          )}
        />
      </Wizard.Step>
    </Wizard>
  </div>
);

render(<WizardForm />, document.getElementById("root"));