diff --git a/src/data/form-publish.json b/src/data/form-publish.json index 7ea3aba..3097165 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -16,18 +16,6 @@ "required": true, "rows": 5 }, - "price": { - "label": "Price", - "placeholder": "i.e. 1000", - "type": "number", - "required": true - }, - "author": { - "label": "Author", - "placeholder": "i.e. Jelly McJellyfish", - "type": "text", - "required": true - }, "files": { "label": "Files", "placeholder": "i.e. https://file.com/file.json", @@ -41,6 +29,12 @@ "required": true, "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"] }, + "author": { + "label": "Author", + "placeholder": "i.e. Jelly McJellyfish", + "type": "text", + "required": true + }, "license": { "label": "License", "type": "select", diff --git a/src/routes/Publish/Files/Item.module.scss b/src/routes/Publish/Files/Item.module.scss index a624022..59e2f81 100644 --- a/src/routes/Publish/Files/Item.module.scss +++ b/src/routes/Publish/Files/Item.module.scss @@ -1,10 +1,5 @@ @import '../../../styles/variables'; -.linkType { - margin-left: $spacer / 4; - font-size: $font-size-small; -} - .linkUrl { font-size: $font-size-mini; display: block; diff --git a/src/routes/Publish/Files/ItemForm.module.scss b/src/routes/Publish/Files/ItemForm.module.scss index d034914..468718b 100644 --- a/src/routes/Publish/Files/ItemForm.module.scss +++ b/src/routes/Publish/Files/ItemForm.module.scss @@ -5,25 +5,6 @@ margin-bottom: $spacer / 1.5; padding-left: $spacer / 2; - > div { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - } - - :global(.input-wrap) { - flex: 1 1 100%; - } - - :global(.form__group) { - margin-bottom: $spacer / 2; - flex: 1 1 100%; - - @media (min-width: $break-point--small) { - flex: 0 0 48%; - } - } - label, input, select, diff --git a/src/routes/Publish/Files/ItemForm.tsx b/src/routes/Publish/Files/ItemForm.tsx index eeb00c9..e758a07 100644 --- a/src/routes/Publish/Files/ItemForm.tsx +++ b/src/routes/Publish/Files/ItemForm.tsx @@ -6,6 +6,7 @@ import styles from './ItemForm.module.scss' interface ItemFormProps { addItem: any + placeholder: string } interface ItemFormStates { @@ -44,8 +45,8 @@ export default class ItemForm extends PureComponent< this.props.addItem(url) } - public onChangeUrl = (e: Event) => { - // this.setState({ url: e.target.value }) + public onChangeUrl = (e: React.FormEvent) => { + this.setState({ url: e.currentTarget.value }) this.clearErrors() } @@ -64,13 +65,13 @@ export default class ItemForm extends PureComponent< name="url" required type="url" - placeholder="e.g. https://url.com/info" + placeholder={this.props.placeholder} value={url} onChange={this.onChangeUrl} /> {hasError && ( diff --git a/src/routes/Publish/Files/index.module.scss b/src/routes/Publish/Files/index.module.scss index ca8ee01..33fd7f5 100644 --- a/src/routes/Publish/Files/index.module.scss +++ b/src/routes/Publish/Files/index.module.scss @@ -2,7 +2,6 @@ .newItems { margin-top: $spacer / 2; - border-top: 1px solid $brand-grey-lighter; } .itemsList { diff --git a/src/routes/Publish/Files/index.tsx b/src/routes/Publish/Files/index.tsx index d99600f..932857d 100644 --- a/src/routes/Publish/Files/index.tsx +++ b/src/routes/Publish/Files/index.tsx @@ -1,12 +1,15 @@ import React, { PureComponent } from 'react' import { CSSTransition, TransitionGroup } from 'react-transition-group' import Button from '../../../components/atoms/Button' +import Help from '../../../components/atoms/Form/Help' import ItemForm from './ItemForm' import Item from './Item' import styles from './index.module.scss' interface FilesProps { files: any + placeholder: string + help: string // resetForm: any } @@ -37,41 +40,51 @@ export default class Files extends PureComponent { const { isFormShown } = this.state return ( -
- {this.props.files && ( - + {this.props.help} +
+ {this.props.files.length > 1 && ( + + {this.props.files.map( + (item: string, index: number) => ( + + + this.removeItem(index) + } + /> + + ) + )} + + )} + + + + this.setState({ isFormShown: false })} > - {this.props.files.map((item: string, index: number) => ( - - this.removeItem(index)} - /> - - ))} - - )} - - - - this.setState({ isFormShown: false })} - > - - -
+ + +
+ ) } } diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 82db5ac..868cb4b 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -4,6 +4,8 @@ import Route from '../../components/templates/Route' import Button from '../../components/atoms/Button' import Form from '../../components/atoms/Form/Form' import Input from '../../components/atoms/Form/Input' +import Label from '../../components/atoms/Form/Label' +import Row from '../../components/atoms/Form/Row' import { User } from '../../context/User' import AssetModel from '../../models/AssetModel' import Web3message from '../../components/Web3message' @@ -57,6 +59,21 @@ class Publish extends Component<{}, PublishState> { onChange = this.inputToArrayChange } + if (key === 'files') { + return ( + + + + + ) + } + return ( { onChange={onChange} rows={value.rows} value={(this.state as any)[key]} - additionalComponent={ - key === 'files' && - } /> ) })