Function PropVal

data-browser/src/components/PropVal.tsx:43–97

* A single Property / Value renderer that shows a label on the left, and the * value on the right. The value is editable.

({
  propertyURL,
  resource,
  editable,
  columns,
}: Props)

 * value on the right. The value is editable.
 */
function PropVal({
  propertyURL,
  resource,
  editable,
  columns,
}: Props): JSX.Element {
  const property = useProperty(propertyURL);
  const truncated = truncateUrl(propertyURL, 10, true);

  if (property.loading) {
    return (
      <PropValRow columns={columns}>
        <PropertyLabel title={propertyURL + ' is loading'}>
          loading...
        </PropertyLabel>
      </PropValRow>
    );
  }

  if (property.error) {
    return (
      <PropValRow columns={columns}>
        <PropertyLabel title={propertyURL + ' could not be loaded'}>
          <AtomicLink subject={propertyURL}>
            <ErrorLook>{truncated}</ErrorLook>
          </AtomicLink>
        </PropertyLabel>
        <code>{JSON.stringify(resource.get(propertyURL))}</code>
      </PropValRow>
    );
  }

  return (
    <PropValRow columns={columns}>
      <AtomicLink subject={propertyURL}>
        <PropertyLabel title={property.description}>
          {property.error ? (
            <ErrorLook>{truncated}</ErrorLook>
          ) : (
            property.shortname || truncated
          )}
          :
        </PropertyLabel>
      </AtomicLink>
      {editable ? (
        <ValueForm resource={resource} propertyURL={propertyURL} noMargin />
      ) : (
        <ValueComp
          datatype={property.datatype}
          value={resource.get(propertyURL)}
        />
      )}
    </PropValRow>
  );
}

export default PropVal;