oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

prototype form generation based on data files

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-01-29 11:15:15 +01:00
parent a30a8f0316
commit 5ea73443bb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 99 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/atoms/Form/Input.tsx
View File

@ -107,12 +107,19 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
name={name}
required={required}
type={type}
tag={tag}
{...props}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
>
{children}
{/* tslint:disable-next-line:jsx-no-multiline-js */}
{tag === 'select'
? options &&
options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))
: children}
</Tag>
{type === 'search' && <SearchIcon />}
</div>

71
src/data/form-styleguide.json Normal file
View File

@ -0,0 +1,71 @@
{
"title": "A cool form title",
"description": "A cool form description",
"fields": [
{
"name": {
"label": "Your name",
"placeholder": "i.e. Jelly McJellyfish",
"type": "text",
"required": true
},
"email": {
"label": "Your email",
"placeholder": "i.e. jelly@mcjellyfish.com",
"type": "email",
"required": true
},
"message": {
"label": "Your message",
"placeholder": "i.e. jelly@mcjellyfish.com",
"tag": "textarea",
"required": true
},
"about": {
"label": "About you",
"type": "radio",
"required": true,
"options": [
{
"value": "provider",
"label": "I can provide data"
},
{
"value": "consumer",
"label": "I want to use data"
}
]
},
"about2": {
"label": "About you",
"type": "checkbox",
"required": true,
"options": [
{
"value": "provider2",
"label": "I can provide data"
},
{
"value": "consumer2",
"label": "I want to use data"
}
]
},
"industry": {
"label": "Industry",
"tag": "select",
"required": true,
"options": [
{
"value": "automotive",
"label": "Automotive"
},
{
"value": "technology",
"label": "Technology"
}
]
}
}
]
}

10
src/pages/Styleguide.module.scss
View File

@ -5,13 +5,3 @@
max-width: 40rem;
padding: $spacer;
}
.form {
width: 100%;
margin-top: 4rem;
fieldset {
border: 0;
padding: 0;
}
}

93
src/pages/Styleguide.tsx
View File

@ -1,32 +1,26 @@
import React, { Component } from 'react'
import Button from '../components/atoms/Button'
import Form from '../components/atoms/Form/Form'
import Input from '../components/atoms/Form/Input'
import InputRadioCheckbox from '../components/atoms/Form/InputRadioCheckbox'
import styles from './Styleguide.module.scss'
const radioOptions = [
{
value: 'provider',
label: 'I can provide data'
},
{
value: 'consumer',
label: 'I want to use data'
}
]
const checkboxOptions = [
{
value: 'provider2',
label: 'I can provide data'
},
{
value: 'consumer2',
label: 'I want to use data'
}
]
import form from '../data/form-styleguide.json'
class Styleguide extends Component {
public formFields = () =>
Object.entries(form.fields).map(([key, value]) => (
<Input
key={key}
name={key}
label={value.label}
placeholder={value.placeholder}
required={value.required}
tag={value.tag}
type={value.type}
help={value.help}
/>
))
public render() {
return (
<div className={styles.page}>
@ -38,58 +32,9 @@ class Styleguide extends Component {
I am a link disguised as a button
</Button>
<form className={styles.form}>
<fieldset>
<Input
name="hellotext"
label="Hello Text"
placeholder="Hello placeholder"
type="text"
required={true}
/>
<Input
name="hellotextwithhelp"
label="Hello Text with Help"
placeholder="Hello placeholder"
type="text"
required={true}
help="Help me Obiwan."
/>
<Input
name="hellosearch"
label="Hello Search"
placeholder="Hello placeholder"
type="search"
/>
<Input
name="helloselect"
label="Hello Select"
tag="select"
>
<option value="0">---</option>
<option value="1">Hello Option</option>
<option value="2">Hello Option</option>
</Input>
<Input
name="hellotextarea"
label="Hello Textarea"
placeholder="Hello placeholder"
tag="textarea"
/>
<InputRadioCheckbox
name="helloradio"
label="Hello Radios"
type="radio"
options={radioOptions}
/>
<InputRadioCheckbox
name="hellocheckbox"
label="Hello Checkboxes"
type="checkbox"
options={checkboxOptions}
/>
</fieldset>
</form>
<Form title={form.title} description={form.description}>
{this.formFields}
</Form>
</div>
)
}