prototype adding multiple files UI
This commit is contained in:
parent
ce9a362b4a
commit
5dd0d7f070
GPG Key ID:
606EEEF3C479A91F
|
|
@ -1164,6 +1164,11 @@
|
|||
"integrity": "sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/is-url": {
|
||||
"version": "1.2.28",
|
||||
"resolved": "https://registry.npmjs.org/@types/is-url/-/is-url-1.2.28.tgz",
|
||||
"integrity": "sha1-kU2r1QVG2bAUKAbkLHK8fCt+B4c="
|
||||
},
|
||||
"@types/jest": {
|
||||
"version": "24.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.0.0.tgz",
|
||||
|
|
@ -1247,6 +1252,14 @@
|
|||
"@types/react-router": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "2.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz",
|
||||
"integrity": "sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/tapable": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
|
||||
|
|
@ -5616,6 +5629,14 @@
|
|||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
|
||||
"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
|
||||
|
|
@ -9865,6 +9886,11 @@
|
|||
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
|
||||
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
|
||||
},
|
||||
"is-url": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
|
||||
"integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
|
||||
},
|
||||
"is-utf8": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
|
||||
|
|
@ -16571,6 +16597,11 @@
|
|||
"react-side-effect": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
|
||||
|
|
@ -16938,6 +16969,17 @@
|
|||
"shallowequal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",
|
||||
"integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==",
|
||||
"requires": {
|
||||
"dom-helpers": "^3.3.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -17,14 +17,18 @@
|
|||
"dependencies": {
|
||||
"@oceanprotocol/art": "^2.2.0",
|
||||
"@oceanprotocol/squid": "^0.2.8",
|
||||
"@types/is-url": "^1.2.28",
|
||||
"@types/react-helmet": "^5.0.8",
|
||||
"@types/react-transition-group": "^2.0.15",
|
||||
"classnames": "^2.2.6",
|
||||
"eslint": "^5.6.0",
|
||||
"is-url": "^1.2.4",
|
||||
"query-string": "^6.2.0",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-transition-group": "^2.5.3",
|
||||
"slugify": "^1.3.4",
|
||||
"web3": "^1.0.0-beta.43"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import About from './routes/About'
|
|||
import Details from './routes/Details'
|
||||
import Home from './routes/Home'
|
||||
import NotFound from './routes/NotFound'
|
||||
import Publish from './routes/Publish'
|
||||
import Publish from './routes/Publish/'
|
||||
import Search from './routes/Search'
|
||||
import Styleguide from './routes/Styleguide'
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ interface InputProps {
|
|||
onChange?: any
|
||||
rows?: number
|
||||
group?: any
|
||||
multiple?: boolean
|
||||
}
|
||||
|
||||
interface InputState {
|
||||
|
|
@ -150,7 +151,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
|
|||
}
|
||||
|
||||
public render() {
|
||||
const { name, label, required, help, additionalComponent } = this.props
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
required,
|
||||
help,
|
||||
additionalComponent,
|
||||
multiple
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Row>
|
||||
|
|
@ -162,6 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
|
|||
|
||||
{help && <Help>{help}</Help>}
|
||||
|
||||
{multiple && 'hello'}
|
||||
|
||||
{additionalComponent && additionalComponent}
|
||||
</Row>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@
|
|||
"label": "Files",
|
||||
"placeholder": "i.e. https://file.com/file.json",
|
||||
"type": "text",
|
||||
"required": true
|
||||
"required": true,
|
||||
"help": "Provide one or multiple links to your data asset(s)."
|
||||
},
|
||||
"type": {
|
||||
"label": "Type",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
@import '../../../styles/variables';
|
||||
|
||||
.linkType {
|
||||
margin-left: $spacer / 4;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.linkUrl {
|
||||
font-size: $font-size-mini;
|
||||
display: block;
|
||||
font-family: $font-family-base;
|
||||
|
||||
// TODO: truncate long urls with ellipsis
|
||||
}
|
||||
|
||||
.remove {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-family: $font-family-button;
|
||||
font-size: $font-size-h4;
|
||||
color: $brand-grey-light;
|
||||
line-height: $line-height;
|
||||
cursor: pointer;
|
||||
margin-left: $spacer / 2;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: $spacer / 4;
|
||||
right: 0;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import styles from './Item.module.scss'
|
||||
|
||||
const Item = ({ item, removeItem }: { item: string; removeItem: any }) => (
|
||||
<li>
|
||||
<a href={item}>{item}</a>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.remove}
|
||||
title="Remove item"
|
||||
onClick={removeItem}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</li>
|
||||
)
|
||||
|
||||
export default Item
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
@import '../../../styles/variables';
|
||||
|
||||
.itemForm {
|
||||
margin-top: $spacer / 2;
|
||||
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,
|
||||
textarea,
|
||||
input::placeholder,
|
||||
button {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: $spacer / 8;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
height: 37px;
|
||||
min-height: 37px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0 $spacer / 2;
|
||||
margin-top: $spacer / 8;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: $font-size-small;
|
||||
color: $red;
|
||||
margin-left: $spacer / 4;
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import isUrl from 'is-url'
|
||||
import Input from '../../../components/atoms/Form/Input'
|
||||
import Button from '../../../components/atoms/Button'
|
||||
import styles from './ItemForm.module.scss'
|
||||
|
||||
interface ItemFormProps {
|
||||
addItem: any
|
||||
}
|
||||
|
||||
interface ItemFormStates {
|
||||
url: string
|
||||
hasError: boolean
|
||||
noUrl: boolean
|
||||
}
|
||||
|
||||
export default class ItemForm extends PureComponent<
|
||||
ItemFormProps,
|
||||
ItemFormStates
|
||||
> {
|
||||
public state: ItemFormStates = {
|
||||
url: '',
|
||||
hasError: false,
|
||||
noUrl: false
|
||||
}
|
||||
|
||||
public handleSubmit = (e: Event) => {
|
||||
e.preventDefault()
|
||||
|
||||
const { url } = this.state
|
||||
|
||||
// return when required fields are empty, and url value is no url
|
||||
// Can't use browser validation cause we are in a form within a form
|
||||
if (!url) {
|
||||
this.setState({ hasError: true })
|
||||
return
|
||||
}
|
||||
|
||||
if (url && !isUrl(url)) {
|
||||
this.setState({ noUrl: true })
|
||||
return
|
||||
}
|
||||
|
||||
this.props.addItem(url)
|
||||
}
|
||||
|
||||
public onChangeUrl = (e: Event) => {
|
||||
// this.setState({ url: e.target.value })
|
||||
this.clearErrors()
|
||||
}
|
||||
|
||||
public clearErrors() {
|
||||
if (this.state.hasError) this.setState({ hasError: false })
|
||||
if (this.state.noUrl) this.setState({ noUrl: true })
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { url, hasError, noUrl } = this.state
|
||||
|
||||
return (
|
||||
<fieldset className={styles.itemForm}>
|
||||
<Input
|
||||
label="Url"
|
||||
name="url"
|
||||
required
|
||||
type="url"
|
||||
placeholder="e.g. https://url.com/info"
|
||||
value={url}
|
||||
onChange={this.onChangeUrl}
|
||||
/>
|
||||
|
||||
<Button onClick={(e: Event) => this.handleSubmit(e)}>
|
||||
Add Link
|
||||
</Button>
|
||||
|
||||
{hasError && (
|
||||
<span className={styles.error}>
|
||||
Please fill in all required fields.
|
||||
</span>
|
||||
)}
|
||||
{noUrl && (
|
||||
<span className={styles.error}>
|
||||
Please enter a valid URL.
|
||||
</span>
|
||||
)}
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@import '../../../styles/variables';
|
||||
|
||||
.newItems {
|
||||
margin-top: $spacer / 2;
|
||||
border-top: 1px solid $brand-grey-lighter;
|
||||
}
|
||||
|
||||
.itemsList {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: $spacer / 2;
|
||||
font-family: $font-family-button;
|
||||
color: $brand-grey-light;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid $brand-grey-lighter;
|
||||
padding: $spacer / 3 $spacer / 2 $spacer / 3 $spacer / 2;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $brand-grey;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import { CSSTransition, TransitionGroup } from 'react-transition-group'
|
||||
import Button from '../../../components/atoms/Button'
|
||||
import ItemForm from './ItemForm'
|
||||
import Item from './Item'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface FilesProps {
|
||||
files: any
|
||||
// resetForm: any
|
||||
}
|
||||
|
||||
interface FilesStates {
|
||||
isFormShown: boolean
|
||||
}
|
||||
|
||||
export default class Files extends PureComponent<FilesProps, FilesStates> {
|
||||
public state: FilesStates = { isFormShown: false }
|
||||
|
||||
public toggleForm = (e: Event) => {
|
||||
e.preventDefault()
|
||||
|
||||
this.setState({ isFormShown: !this.state.isFormShown })
|
||||
}
|
||||
|
||||
public addItem = (value: string) => {
|
||||
this.props.files.push(value)
|
||||
// this.props.resetForm()
|
||||
this.setState({ isFormShown: !this.state.isFormShown })
|
||||
}
|
||||
|
||||
public removeItem = (index: number) => {
|
||||
this.props.files.remove(index)
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { isFormShown } = this.state
|
||||
|
||||
return (
|
||||
<div className={styles.newItems}>
|
||||
{this.props.files && (
|
||||
<TransitionGroup
|
||||
component="ul"
|
||||
className={styles.itemsList}
|
||||
>
|
||||
{this.props.files.map((item: string, index: number) => (
|
||||
<CSSTransition
|
||||
key={index}
|
||||
timeout={400}
|
||||
classNames="fade"
|
||||
>
|
||||
<Item
|
||||
item={item}
|
||||
removeItem={() => this.removeItem(index)}
|
||||
/>
|
||||
</CSSTransition>
|
||||
))}
|
||||
</TransitionGroup>
|
||||
)}
|
||||
|
||||
<Button link onClick={this.toggleForm}>
|
||||
{isFormShown ? '- Cancel' : '+ Add a file'}
|
||||
</Button>
|
||||
|
||||
<CSSTransition
|
||||
classNames="grow"
|
||||
in={isFormShown}
|
||||
timeout={200}
|
||||
unmountOnExit
|
||||
onExit={() => this.setState({ isFormShown: false })}
|
||||
>
|
||||
<ItemForm addItem={this.addItem} />
|
||||
</CSSTransition>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
import React, { ChangeEvent, Component, FormEvent } from 'react'
|
||||
import { Logger } from '@oceanprotocol/squid'
|
||||
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 { User } from '../context/User'
|
||||
import AssetModel from '../models/AssetModel'
|
||||
import Web3message from '../components/Web3message'
|
||||
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 { User } from '../../context/User'
|
||||
import AssetModel from '../../models/AssetModel'
|
||||
import Web3message from '../../components/Web3message'
|
||||
import Files from './Files/'
|
||||
|
||||
import form from '../data/form-publish.json'
|
||||
import form from '../../data/form-publish.json'
|
||||
|
||||
type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
|
||||
|
||||
|
|
@ -69,6 +70,9 @@ class Publish extends Component<{}, PublishState> {
|
|||
onChange={onChange}
|
||||
rows={value.rows}
|
||||
value={(this.state as any)[key]}
|
||||
additionalComponent={
|
||||
key === 'files' && <Files files={this.state.files} />
|
||||
}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
|
@ -143,6 +147,7 @@ class Publish extends Component<{}, PublishState> {
|
|||
AssetModel.additionalInformation
|
||||
)
|
||||
}
|
||||
|
||||
try {
|
||||
const asset = await this.context.ocean.registerAsset(
|
||||
newAsset,
|
||||
Loading…
Reference in New Issue