collapse contracts by default
This commit is contained in:
parent
15ebb34931
commit
838757f5e8
GPG Key ID:
606EEEF3C479A91F
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
declare module 'react-collapsed'
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>▼</span>
|
||||
) : (
|
||||
<span>►</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
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue