react-mapfilter/commonjs/ReportView/DetailsTable.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));

var React = _interopRequireWildcard(require("react"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _styles = require("@material-ui/core/styles");

var _Table = _interopRequireDefault(require("@material-ui/core/Table"));

var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));

var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));

var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));

var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));

var _FormattedValue = _interopRequireDefault(require("../internal/FormattedValue"));

var _FormattedFieldname = _interopRequireDefault(require("../internal/FormattedFieldname"));

var _get_set = require("../utils/get_set");

// @flow
var 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'
  }
};
var useStyles = (0, _styles.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}
//       />
//     )
//   }
// )

var Label = function Label(_ref) {
  var style = _ref.style,
      field = _ref.field;
  var classes = useStyles();
  return /*#__PURE__*/React.createElement(_TableCell.default, {
    className: classes.col1,
    style: style
  }, /*#__PURE__*/React.createElement(_Typography.default, {
    className: classes.col1Text
  }, /*#__PURE__*/React.createElement(_FormattedFieldname.default, {
    field: field
  })));
};
/*:: type ValueProps = {
  value: Primitive | Array<Primitive>,
  field: Field
}*/


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


var DetailsTable = function DetailsTable(_ref2) {
  var _ref2$fields = _ref2.fields,
      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
      _ref2$tags = _ref2.tags,
      tags = _ref2$tags === void 0 ? {} : _ref2$tags,
      width = _ref2.width;
  var classes = useStyles();

  function renderTable(width) {
    var _context;

    return /*#__PURE__*/React.createElement(_Table.default, {
      className: classes.root,
      style: {
        width: width
      },
      size: "small"
    }, /*#__PURE__*/React.createElement(_TableBody.default, null, (0, _filter.default)(_context = (0, _map.default)(fields).call(fields, function (field, i) {
      var value
      /*: Primitive | Array<Primitive>*/
      = (0, _get_set.get)(tags, field.key);
      if (isEmptyValue(value)) return null;
      return /*#__PURE__*/React.createElement(_TableRow.default, {
        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(_reactVirtualizedAutoSizer.default, {
    disableHeight: true
  }, function (_ref3) {
    var width = _ref3.width;
    return renderTable(width);
  });
};

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

var _default = DetailsTable;
exports.default = _default;
//# sourceMappingURL=DetailsTable.js.map