simplify options authoring
This commit is contained in:
parent
ad9720850a
commit
a7cdbd59d7
GPG Key ID:
606EEEF3C479A91F
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue