react-mapfilter/esm/ReportView/DetailsTable.js

These components are designed for viewing data in Mapeo. They share a common interface:

import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
// @flow
import * as React from 'react';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import AutoSizer from 'react-virtualized-auto-sizer';
import FormattedValue from '../internal/FormattedValue';
import FormattedFieldname from '../internal/FormattedFieldname';
import { get } from '../utils/get_set';
/*:: import type { Field, JSONObject, Primitive } from '../types'*/

const styles = {
  root: {
    overflow: 'auto'
  },
  row: {
    verticalAlign: 'top',
    position: 'relative'
  },
  col1: {// padding: '14px 12px 14px 24px'
  },
  col1Text: {
    fontWeight: 500,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    direction: 'rtl'
  },
  col2: {
    // padding: '14px 24px 14px 12px !important',
    width: '100%',
    maxWidth: 0,
    whiteSpace: 'initial',
    fontSize: '0.875rem'
  },
  col2Edit: {
    paddingTop: '9px !important',
    paddingBottom: '9px !important'
  },
  col2TextEdit: {
    paddingTop: 5,
    paddingBottom: 5
  },
  col2Text: {
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  },
  input: {
    fontSize: 'inherit'
  }
};
const useStyles = makeStyles(styles); // function coerceValue(
//   value: Primitive | Array<Primitive>,
//   type: $Values<typeof valueTypes>
// ) {
//   try {
//     return throwableCoerceValue(value, type)
//   } catch (e) {}
// }
// const shouldNotWrap = {
//   [FIELD_TYPES.UUID]: true,
//   [FIELD_TYPES.IMAGE_URL]: true,
//   [FIELD_TYPES.VIDEO_URL]: true,
//   [FIELD_TYPES.MEDIA_URL]: true,
//   [FIELD_TYPES.AUDIO_URL]: true
// }
// const ValueCellEdit = makePure(
//   ({
//     value,
//     type,
//     rowKey,
//     coordFormat,
//     fieldMetadata = {},
//     onChange,
//     classes
//   }) => {
//     const suggestions =
//       Array.isArray(fieldMetadata.values) &&
//       fieldMetadata.values.map(d => d.value)
//     const isDiscreteField =
//       type === FIELD_TYPES.STRING &&
//       fieldMetadata.values &&
//       fieldMetadata.values.length / fieldMetadata.count < 0.8
//     if (isDiscreteField) {
//       return (
//         <Select
//           value={value}
//           onChange={(e, { newValue, type }) => onChange(rowKey, newValue)}
//           suggestions={suggestions}
//           style={styles.selectField}
//         />
//       )
//     }
//     if (type === FIELD_TYPES.BOOLEAN) {
//       return (
//         <MUISelect
//           MenuProps={{ MenuListProps: { dense: true } }}
//           fullWidth
//           autoWidth
//           value={value + ''}
//           onChange={e => {
//             const newValue =
//               e.target.value === 'true'
//                 ? true
//                 : e.target.value === 'false'
//                   ? false
//                   : undefined
//             onChange(rowKey, newValue)
//           }}
//           input={<Input className={classes.input} />}
//           style={styles.muiSelect}>
//           <MenuItem value="undefined" />
//           <MenuItem value="true">Yes</MenuItem>
//           <MenuItem value="false">No</MenuItem>
//         </MUISelect>
//       )
//     }
//     if (type === FIELD_TYPES.STRING) {
//       return (
//         <TextField
//           InputClassName={classes.input}
//           fullWidth
//           multiline
//           value={value}
//           onChange={e => onChange(rowKey, e.target.value)}
//           style={styles.textField}
//         />
//       )
//     }
//     if (type === FIELD_TYPES.ARRAY) {
//       return (
//         <MultiSelect
//           value={value}
//           onChange={(e, { newValue, type }) => onChange(rowKey, newValue)}
//           suggestions={suggestions}
//           style={styles.selectField}
//         />
//       )
//     }
//     return (
//       <ValueCell
//         value={value}
//         type={type}
//         coordFormat={coordFormat}
//         editMode
//         classes={classes}
//       />
//     )
//   }
// )

const Label = ({
  style,
  field
}
/*: { style: {}, field: Field }*/
) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(TableCell, {
    className: classes.col1,
    style: style
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.col1Text
  }, /*#__PURE__*/React.createElement(FormattedFieldname, {
    field: field
  })));
};
/*:: type ValueProps = {
  value: Primitive | Array<Primitive>,
  field: Field
}*/


const Value = (props
/*: ValueProps*/
) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(TableCell, {
    className: classes.col2
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.col2Text
  }, /*#__PURE__*/React.createElement(FormattedValue, props)));
};
/*:: type Props = {|
  tags?: JSONObject,
  editMode?: boolean,
  fields?: Array<Field>,
  onChange?: (newTags: {}) => any,
  width?: number
|}*/


const DetailsTable = ({
  fields = [],
  tags = {},
  width
}
/*: Props*/
) => {
  const classes = useStyles();

  function renderTable(width) {
    var _context;

    return /*#__PURE__*/React.createElement(Table, {
      className: classes.root,
      style: {
        width: width
      },
      size: "small"
    }, /*#__PURE__*/React.createElement(TableBody, null, _filterInstanceProperty(_context = _mapInstanceProperty(fields).call(fields, (field, i) => {
      const value
      /*: Primitive | Array<Primitive>*/
      = get(tags, field.key);
      if (isEmptyValue(value)) return null;
      return /*#__PURE__*/React.createElement(TableRow, {
        key: i,
        className: classes.row,
        style: {
          zIndex: fields.length - i
        }
      }, /*#__PURE__*/React.createElement(Label, {
        field: field,
        style: {
          maxWidth: width / 3 - 36
        }
      }), /*#__PURE__*/React.createElement(Value, {
        value: value,
        field: field
      }));
    })).call(_context, Boolean)));
  }

  if (typeof width === 'number') return renderTable(width);
  return /*#__PURE__*/React.createElement(AutoSizer, {
    disableHeight: true
  }, ({
    width
  }) => {
    return renderTable(width);
  });
};

function isEmptyValue(value) {
  return typeof value === 'string' && value.length === 0 || value === undefined || value === null;
}

export default DetailsTable;
//# sourceMappingURL=DetailsTable.js.map