52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
import React, { useCallback, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { NoContent, IconButton, Popup } from 'UI';
|
|
import withToggle from 'HOCs/withToggle';
|
|
import MetadataItem from './MetadataItem';
|
|
import stl from './metadata.css';
|
|
|
|
export default connect(state => ({
|
|
metadata: state.getIn([ 'sessions', 'current', 'metadata' ]),
|
|
}))(function Metadata ({ metadata }) {
|
|
const [ visible, setVisible ] = useState(false);
|
|
const toggle = useCallback(() => metadata.size > 0 && setVisible(v => !v), []);
|
|
return (
|
|
<>
|
|
<Popup
|
|
trigger={
|
|
<IconButton
|
|
className="w-full"
|
|
onClick={ toggle }
|
|
icon="id-card"
|
|
plain
|
|
label="Metadata"
|
|
primaryText
|
|
active={ visible }
|
|
id="metadata-button"
|
|
/>
|
|
}
|
|
content={
|
|
<div className="p-2">
|
|
Metadata must be explicitly specified from the dashboard from <a href="/client/metadata" className="link">Preferences > Metadata</a>.
|
|
</div>
|
|
}
|
|
on="click"
|
|
disabled={metadata.length > 0}
|
|
size="tiny"
|
|
inverted
|
|
position="top center"
|
|
/>
|
|
{ visible &&
|
|
<div className={ stl.modal } >
|
|
<NoContent show={ metadata.size === 0 } size="small" >
|
|
{ metadata.map((i) => {
|
|
const key = Object.keys(i)[0]
|
|
const value = i[key]
|
|
return <MetadataItem item={ { value, key } } key={ key } />
|
|
}) }
|
|
</NoContent>
|
|
</div>
|
|
}
|
|
</>
|
|
);
|
|
});
|