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

simplify options authoring

This commit is contained in:
Matthias Kretschmann 2019-02-08 11:18:42 +01:00
parent ad9720850a
commit a7cdbd59d7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 54 additions and 102 deletions

5
package-lock.json generated
View File

@ -18746,6 +18746,11 @@
"is-fullwidth-code-point": "^2.0.0"
}
},
"slugify": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
"integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
},
"snapdragon": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

View File

@ -22,6 +22,7 @@
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-router-dom": "^4.3.1",
"slugify": "^1.3.4",
"web3": "^1.0.0-beta.43"
},
"devDependencies": {

View File

@ -1,16 +1,12 @@
import cx from 'classnames'
import React, { PureComponent } from 'react'
import slugify from 'slugify'
import { ReactComponent as SearchIcon } from '../../../img/search.svg'
import Help from './Help'
import styles from './Input.module.scss'
import Label from './Label'
import Row from './Row'
interface OptionProps {
value: string
label: string
}
interface InputProps {
name: string
label: string
@ -19,7 +15,7 @@ interface InputProps {
help?: string
tag?: string
type?: string
options?: OptionProps[]
options?: string[]
additionalComponent?: void
value?: string
onChange?: any
@ -55,11 +51,18 @@ export default class Input extends PureComponent<InputProps, InputState> {
<div className={this.inputWrapClasses()}>
<select className={styles.select} {...props}>
{props.options &&
props.options.map((option: any, index: number) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
props.options.map(
(option: string, index: number) => (
<option
key={index}
value={slugify(option, {
lower: true
})}
>
{option}
</option>
)
)}
</select>
</div>
)
@ -73,20 +76,26 @@ export default class Input extends PureComponent<InputProps, InputState> {
return (
<div className={styles.radioGroup}>
{props.options &&
props.options.map((option: any, index: number) => (
props.options.map((option: string, index: number) => (
<div className={styles.radioWrap} key={index}>
<input
className={styles.radio}
type={this.props.type}
id={option.value}
id={slugify(option, {
lower: true
})}
name={this.props.name}
value={option.value}
value={slugify(option, {
lower: true
})}
/>
<label
className={styles.radioLabel}
htmlFor={option.value}
htmlFor={slugify(option, {
lower: true
})}
>
{option.label}
{option}
</label>
</div>
))}

View File

@ -39,30 +39,12 @@
"type": "select",
"required": true,
"options": [
{
"value": "",
"label": "---"
},
{
"value": "dataset",
"label": "Data set"
},
{
"value": "algorithm",
"label": "Algorithm"
},
{
"value": "container",
"label": "Container"
},
{
"value": "workflow",
"label": "Workflow"
},
{
"value": "other",
"label": "Other"
}
"---",
"Data set",
"Algorithm",
"Container",
"Workflow",
"Other"
]
},
"license": {
@ -70,38 +52,14 @@
"type": "select",
"required": true,
"options": [
{
"value": "none",
"label": "No License Specified"
},
{
"value": "public-domain",
"label": "Public Domain"
},
{
"value": "cc-by",
"label": "CC BY: Attribution"
},
{
"value": "cc-by-sa",
"label": "CC BY-SA: Attribution ShareAlike"
},
{
"value": "cc-by-nd",
"label": "CC BY-ND: Attribution-NoDerivs"
},
{
"value": "cc-by-nc",
"label": "CC BY-NC: Attribution-NonCommercial"
},
{
"value": "cc-by-nc-sa",
"label": "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike"
},
{
"value": "cc-by-nc-nd",
"label": "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
}
"No License Specified",
"Public Domain",
"CC BY: Attribution",
"CC BY-SA: Attribution ShareAlike",
"CC BY-ND: Attribution-NoDerivs",
"CC BY-NC: Attribution-NonCommercial",
"CC BY-NC-SA: Attribution-NonCommercial-ShareAlike",
"CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
]
},
"copyrightHolder": {
@ -109,6 +67,12 @@
"placeholder": "i.e. fwhfiw",
"type": "text",
"required": true
},
"categories": {
"label": "Categories",
"type": "select",
"required": true,
"options": ["No Category Specified"]
}
}
}

View File

@ -25,46 +25,19 @@
"label": "About you",
"type": "radio",
"required": true,
"options": [
{
"value": "provider",
"label": "I can provide data"
},
{
"value": "consumer",
"label": "I want to use data"
}
]
"options": ["I can provide more data", "I want to use more 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"
}
]
"options": ["I can provide data", "I want to use data"]
},
"industry": {
"label": "Industry",
"type": "select",
"required": true,
"options": [
{
"value": "automotive",
"label": "Automotive"
},
{
"value": "technology",
"label": "Technology"
}
]
"options": ["Automotive", "Technology"]
}
}
}