-
-
Notifications
You must be signed in to change notification settings - Fork 11
/
overview.tsx
55 lines (53 loc) · 2.13 KB
/
overview.tsx
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
import { render } from 'ink';
import { Form } from '../Form.js';
import React from 'react';
const options = [
{label: 'Millenium Falcon', value: 'falcon'},
{label: 'TIE Advanced X1', value: 'tieadv'},
{label: 'X-Wing', value: 'xwing'},
{label: 'Raizorcrest', value: 'mando'},
];
render(
<Form
onSubmit={value => console.log(`Submitted: `, value)}
form={{
title: "Form title",
sections: [
{
title: "Text fields",
fields: [
{ type: 'string', name: 'field1', label: 'Input with initial value', initialValue: 'Initial value' },
{ type: 'string', name: 'field2', label: 'Masked input', mask: '*' },
{ type: 'string', name: 'field3', label: 'Input with placeholder, description and required flag', placeholder: 'Placeholder', required: true, description: 'Hello I am a description' },
{ type: 'string', name: 'field4-nolabel' },
{ type: 'string', name: 'field5', label: 'Regex, must be an url', regex: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/ },
]
},
{
title: "Numerical fields",
fields: [
{ type: 'integer', name: 'field10', label: 'Integer' },
{ type: 'integer', name: 'field11', label: 'Integer between -5 and 8, stepsize 2', min: -5, max: 8, step: 2 },
{ type: 'float', name: 'field12', label: 'Float' },
{ type: 'float', name: 'field13', label: 'Float between 0 and 5, stepsize 0.1', min: 0, max: 5, step: .1 },
]
},
{
title: "Selection fields",
fields: [
{ type: 'select', name: 'field20', label: 'Select', options },
]
},
{
title: 'Help Section',
description: [
'You can use a section without any fields and just a description attribute for additional documentation sections.',
'This section for example can help as a help page.',
'You could also add a "About", "Readme" or different pages.',
],
fields: [],
}
]
}}
/>
);