Function HeaderItem

data-browser/src/components/Table.tsx:81–138

({ subject }: HeaderItemProps)

};

function HeaderItem({ subject }: HeaderItemProps) {
  const [sortBy, setSortBy] = useSubjectParam('sort_by');
  const [sortDesc, setSortDesc] = useSubjectParam('sort_desc');
  const property = useProperty(subject);

  function handleToggleSort() {
    if (sortBy == subject) {
      if (sortDesc == 'true') {
        setSortDesc(null);
      } else {
        setSortDesc('true');
      }
    } else {
      setSortBy(subject);
    }
  }

  const thisPropIsSorted = sortBy == subject;

  let minWidth = '6rem';
  switch (property.datatype) {
    case Datatype.STRING:
    case Datatype.RESOURCEARRAY:
      minWidth = '15rem';
      break;
    case Datatype.MARKDOWN:
      minWidth = '25rem';
      break;
    case Datatype.BOOLEAN:
    case Datatype.INTEGER:
      minWidth = '6rem';
      break;
    default:
      break;
  }

  return (
    <CellHeaderStyled style={{ minWidth }}>
      <ResourceInline subject={subject} />{' '}
      <Button
        onClick={handleToggleSort}
        subtle={!thisPropIsSorted}
        icon
        data-test={`sort-${subject}`}
      >
        {thisPropIsSorted ? (
          sortDesc == 'true' ? (
            <FaSortDown />
          ) : (
            <FaSortUp />
          )
        ) : (
          <FaSort />
        )}
      </Button>
    </CellHeaderStyled>
  );
}