@jbrowse/core
Version:
JBrowse 2 core libraries used by plugins
42 lines (41 loc) • 2.38 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import Attributes from "./Attributes.js";
import BasicValue from "./BasicValue.js";
import FieldName from "./FieldName.js";
import { isObject } from "../../util/index.js";
import { makeStyles } from "../../util/tss-react/index.js";
const MAX_ARRAY_LENGTH = 100;
const useStyles = makeStyles()(theme => ({
field: {
display: 'flex',
flexWrap: 'wrap',
},
fieldSubvalue: {
wordBreak: 'break-word',
maxHeight: 300,
padding: theme.spacing(0.5),
border: `1px solid ${theme.palette.action.selected}`,
boxSizing: 'border-box',
overflow: 'auto',
},
}));
export default function ArrayValue({ name, value, description, formatter, prefix = [], }) {
const { classes } = useStyles();
const [showAll, setShowAll] = useState(false);
const needsTruncation = value.length > MAX_ARRAY_LENGTH;
const displayedValues = needsTruncation && !showAll ? value.slice(0, MAX_ARRAY_LENGTH) : value;
if (value.length === 1) {
return isObject(value[0]) ? (_jsx(Attributes, { formatter: formatter, attributes: value[0], prefix: [...prefix, name] })) : (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), _jsx(BasicValue, { value: formatter ? formatter(value[0], name) : value[0] })] }));
}
else if (value.every(val => isObject(val))) {
return (_jsx(_Fragment, { children: value.map((val, i) => (_jsx(Attributes, { formatter: formatter, attributes: val, prefix: [...prefix, `${name}-${i}`] }, `${JSON.stringify(val)}-${i}`))) }));
}
else {
return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), displayedValues.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name) : val }) }, `${JSON.stringify(val)}-${i}`))), needsTruncation ? (_jsx("button", { type: "button", onClick: () => {
setShowAll(val => !val);
}, children: showAll
? 'Show less'
: `Showing ${MAX_ARRAY_LENGTH} of ${value.length}. Show all...` })) : null] }));
}
}