121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { Icon } from '@ohif/ui';
|
|
|
|
const SegmentationTable = ({ title, amount, data }) => {
|
|
const [activeItem, setActiveItem] = useState(null);
|
|
|
|
// TODO: colorLUT should be defined in the application
|
|
const colorLUT = [
|
|
'#932a13',
|
|
'#821393',
|
|
'#2b7fc4',
|
|
'#12c457',
|
|
'#7f7d2e',
|
|
'#7f2e4a',
|
|
'#866943',
|
|
'#65ae7f',
|
|
'#334b5f',
|
|
'#3cb0dc',
|
|
'#292ac9',
|
|
'#629753',
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
|
<span className="text-base font-bold text-white tracking-widest uppercase">
|
|
{title}
|
|
</span>
|
|
<div className="flex">
|
|
<span className="text-base font-bold text-white">{amount}</span>
|
|
<Icon
|
|
name="eye-hidden"
|
|
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
|
|
onClick={() => alert('TBD')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
|
{!!data.length &&
|
|
data.map((e, i) => {
|
|
const itemKey = i;
|
|
const currentItem = i + 1;
|
|
const isActive = !!activeItem && activeItem[title] === i;
|
|
|
|
const handleOnClick = () => {
|
|
setActiveItem((s) => {
|
|
return {
|
|
...s,
|
|
[title]: s && s[title] === itemKey ? null : itemKey,
|
|
};
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={classnames(
|
|
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
|
|
{
|
|
'border-primary-light': isActive,
|
|
}
|
|
)}
|
|
onClick={handleOnClick}
|
|
onKeyDown={handleOnClick}
|
|
role="button"
|
|
tabIndex="0"
|
|
>
|
|
<div
|
|
className={classnames(
|
|
'text-center w-6 py-1 text-base transition duration-300',
|
|
{
|
|
'bg-primary-light text-black': isActive,
|
|
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
|
}
|
|
)}
|
|
>
|
|
{currentItem}
|
|
</div>
|
|
<div className="px-2 py-1 flex flex-1 items-center justify-between">
|
|
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
|
<div
|
|
className="w-3 h-3 rounded-full mr-2"
|
|
style={{ backgroundColor: colorLUT[i] }}
|
|
></div>
|
|
Label short description
|
|
</span>
|
|
<Icon
|
|
className={classnames(
|
|
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
|
|
)}
|
|
name="eye-visible"
|
|
onClick={(e) => {
|
|
// stopPropagation needed to avoid disable the current active item
|
|
e.stopPropagation();
|
|
alert('Toggle');
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SegmentationTable.defaultProps = {
|
|
amount: null,
|
|
data: [],
|
|
};
|
|
|
|
SegmentationTable.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
data: PropTypes.array, // TODO: define better the array structure
|
|
};
|
|
|
|
export default SegmentationTable;
|