@maif/react-forms 1.0.56 → 1.0.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -1
- package/lib/esm/index.js +104 -374
- package/lib/index.css +360 -0
- package/lib/index.js +105 -374
- package/package.json +4 -6
package/README.md
CHANGED
|
@@ -19,11 +19,13 @@ yarn add @maif/react-forms
|
|
|
19
19
|
|
|
20
20
|
# Usage
|
|
21
21
|
You must define a form flow (this is just a javascript array which represents the rendering order of the form fields) and a schema (that defines all fields of your form with types or constraints for example)
|
|
22
|
+
You can import the default stylesheet or use your own style by using default classname or passing a classname in your schema.
|
|
22
23
|
|
|
23
24
|
## example
|
|
24
25
|
|
|
25
26
|
```javascript
|
|
26
27
|
import { Form, type, format, constraints } from '@maif/react-forms'
|
|
28
|
+
import '@maif/react-forms/lib/index.css'
|
|
27
29
|
|
|
28
30
|
export const Example = () => {
|
|
29
31
|
const schema = {
|
|
@@ -32,6 +34,7 @@ export const Example = () => {
|
|
|
32
34
|
label: 'age',
|
|
33
35
|
placeholder: 'Your age',
|
|
34
36
|
help: "Just your age",
|
|
37
|
+
className: "input-number",
|
|
35
38
|
constraints: [
|
|
36
39
|
constraints.required("your age is required"),
|
|
37
40
|
constraints.min(18, 'You must be an adult'),
|
|
@@ -138,7 +141,7 @@ export const Example = () => {
|
|
|
138
141
|
switch: [
|
|
139
142
|
{
|
|
140
143
|
default: true,
|
|
141
|
-
condition: ({
|
|
144
|
+
condition: ({rawValues, ref}) => ref === "mammal",
|
|
142
145
|
schema: {
|
|
143
146
|
continent: {
|
|
144
147
|
type: type.string,
|