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

collapse contracts by default

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-06-18 14:35:18 +02:00
parent 15ebb34931
commit 838757f5e8
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 120 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/package-lock.json generated
View File

@ -12982,6 +12982,15 @@
}
}
},
"react-collapsed": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-2.0.1.tgz",
"integrity": "sha512-ullymRST/C5iy0szhxpYmIaLUhi+IC8EpFySmUjttoc+ErotaKAx+z1ff0d2PCJF7ksW8crTiOrIwGtFqYw3Tg==",
"requires": {
"@babel/runtime": "^7.3.1",
"raf": "^3.4.0"
}
},
"react-datepicker": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.6.0.tgz",

1
client/package.json
View File

@ -25,6 +25,7 @@
"moment": "^2.24.0",
"query-string": "^6.5.0",
"react": "^16.8.6",
"react-collapsed": "^2.0.1",
"react-datepicker": "^2.5.0",
"react-dom": "^16.8.6",
"react-dotdotdot": "^1.3.0",

1
client/src/@types/react-collapsed/index.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'react-collapsed'

17
client/src/components/molecules/VersionNumbers/VersionTable.module.scss
View File

@ -10,6 +10,10 @@
display: table;
border-top: 1px solid $brand-grey-lighter;
tr {
position: relative;
}
table {
display: table;
margin-left: $spacer;
@ -57,3 +61,16 @@
composes: spinner, small from '../../atoms/Spinner.module.scss';
margin-right: $spacer;
}
.handle {
display: inline-block;
border: 0;
background: none;
box-shadow: none;
padding: 0;
margin: 0;
margin-left: -1rem;
padding-right: .5rem;
cursor: pointer;
color: $brand-grey-light;
}

119
client/src/components/molecules/VersionNumbers/VersionTable.tsx
View File

@ -1,8 +1,9 @@
import React, { Fragment } from 'react'
import React, { Fragment, useState } from 'react'
import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
import slugify from '@sindresorhus/slugify'
import useCollapse from 'react-collapsed'
import { VersionNumbersState } from '.'
import styles from './VersionTable.module.scss'
import slugify from '@sindresorhus/slugify'
const VersionTableContracts = ({
contracts,
@ -71,48 +72,78 @@ const VersionNumber = ({
<span>{status || 'Could not get version'}</span>
)
const VersionTable = ({ data }: { data: VersionNumbersState }) => (
<div className={styles.tableWrap}>
<table className={styles.table}>
<tbody>
{Object.entries(data)
.filter(([key, value]) => key !== 'status')
.map(([key, value]) => (
<Fragment key={key}>
<tr>
<td>
<a
href={`https://github.com/oceanprotocol/${slugify(
value.name || value.software
)}`}
>
<strong>{value.name}</strong>
</a>
</td>
<td>
<VersionNumber
name={value.name || value.software}
version={value.version}
status={value.status}
network={value.network}
/>
</td>
</tr>
{value.contracts && (
<tr>
<td colSpan={2}>
<VersionTableContracts
contracts={value.contracts}
network={value.network || ''}
/>
</td>
</tr>
const VersionRow = ({ value }: { value: any }) => {
const collapseStyles = {
transitionDuration: '0.1s'
}
const expandStyles = {
transitionDuration: '0.1s'
}
const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
collapseStyles,
expandStyles
})
return (
<>
<tr>
<td>
{value.contracts && (
<button className={styles.handle} {...getToggleProps()}>
{isOpen ? (
<span>&#9660;</span>
) : (
<span>&#9658;</span>
)}
</Fragment>
))}
</tbody>
</table>
</div>
)
</button>
)}
<a
href={`https://github.com/oceanprotocol/${slugify(
value.name || value.software
)}`}
>
<strong>{value.name}</strong>
</a>
</td>
<td>
<VersionNumber
name={value.name || value.software}
version={value.version}
status={value.status}
network={value.network}
/>
</td>
</tr>
{value.contracts && (
<tr {...getCollapseProps()}>
<td colSpan={2}>
<VersionTableContracts
contracts={value.contracts}
network={value.network || ''}
/>
</td>
</tr>
)}
</>
)
}
const VersionTable = ({ data }: { data: VersionNumbersState }) => {
return (
<div className={styles.tableWrap}>
<table className={styles.table}>
<tbody>
{Object.entries(data)
.filter(([key, value]) => key !== 'status')
.map(([key, value]) => (
<VersionRow key={key} value={value} />
))}
</tbody>
</table>
</div>
)
}
export default VersionTable

26
client/src/components/molecules/VersionNumbers/index.tsx
View File

@ -120,20 +120,28 @@ export default class VersionNumbers extends PureComponent<
}
}
public render() {
const { minimal } = this.props
private MinimalOutput = () => {
const { commons, squid, brizo, aquarius } = this.state
const mimimalOutput = `${squid.name} v${squid.version}\n${
brizo.name
} v${brizo.version}\n${aquarius.name} v${aquarius.version}`
return minimal ? (
return (
<p className={styles.versionsMinimal}>
<a title={mimimalOutput} href={'/about'}>
v{commons.version} {brizo.network && `(${brizo.network})`}
<a
title={`${squid.name} v${squid.version}\n${brizo.name} v${
brizo.version
}\n${aquarius.name} v${aquarius.version}`}
href={'/about'}
>
v{commons.version} {squid.network && `(${squid.network})`}
</a>
</p>
)
}
public render() {
const { minimal } = this.props
return minimal ? (
<this.MinimalOutput />
) : (
<div className={styles.versions} id="#oceanversions">
<h2 className={styles.versionsTitle}>