react-mapfilter/es5/components/Shared/FeatureTable.js

A React Component for viewing and filtering GeoJSON

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _shouldNotWrap;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reselect = require('reselect');

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

var _Typography2 = _interopRequireDefault(_Typography);

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

var _AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');

var _AutoSizer2 = _interopRequireDefault(_AutoSizer);

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

var _Table2 = _interopRequireDefault(_Table);

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

var _TableBody2 = _interopRequireDefault(_TableBody);

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

var _TableCell2 = _interopRequireDefault(_TableCell);

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

var _TableRow2 = _interopRequireDefault(_TableRow);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _FormattedValue = require('../Shared/FormattedValue');

var _FormattedValue2 = _interopRequireDefault(_FormattedValue);

var _FormattedFieldname = require('../Shared/FormattedFieldname');

var _FormattedFieldname2 = _interopRequireDefault(_FormattedFieldname);

var _TextField = require('@material-ui/core/TextField');

var _TextField2 = _interopRequireDefault(_TextField);

var _Input = require('@material-ui/core/Input');

var _Input2 = _interopRequireDefault(_Input);

var _MenuItem = require('@material-ui/core/MenuItem');

var _MenuItem2 = _interopRequireDefault(_MenuItem);

var _Select = require('@material-ui/core/Select');

var _Select2 = _interopRequireDefault(_Select);

var _Select3 = require('../Shared/Select');

var _Select4 = _interopRequireDefault(_Select3);

var _MultiSelect = require('../Shared/MultiSelect');

var _MultiSelect2 = _interopRequireDefault(_MultiSelect);

var _pure = require('recompose/pure');

var _pure2 = _interopRequireDefault(_pure);

var _constants = require('../../constants');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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
  },
  col2TextNoWrap: {
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis'
  },
  input: {
    fontSize: 'inherit'
  }
};

var shouldNotWrap = (_shouldNotWrap = {}, (0, _defineProperty3.default)(_shouldNotWrap, _constants.FIELD_TYPE_UUID, true), (0, _defineProperty3.default)(_shouldNotWrap, _constants.FIELD_TYPE_MIXED, true), (0, _defineProperty3.default)(_shouldNotWrap, _constants.FIELD_TYPE_IMAGE, true), (0, _defineProperty3.default)(_shouldNotWrap, _constants.FIELD_TYPE_VIDEO, true), (0, _defineProperty3.default)(_shouldNotWrap, _constants.FIELD_TYPE_MEDIA, true), (0, _defineProperty3.default)(_shouldNotWrap, _constants.FIELD_TYPE_AUDIO, true), _shouldNotWrap);

var ValueCell = function ValueCell(_ref) {
  var _classNames;

  var value = _ref.value,
      type = _ref.type,
      coordFormat = _ref.coordFormat,
      editMode = _ref.editMode,
      classes = _ref.classes;
  return _react2.default.createElement(
    _Typography2.default,
    { className: (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.col2TextEdit, editMode), (0, _defineProperty3.default)(_classNames, classes.col2TextNoWrap, shouldNotWrap[type]), _classNames)) },
    _react2.default.createElement(_FormattedValue2.default, { value: value, type: type, coordFormat: coordFormat })
  );
};

var ValueCellEdit = (0, _pure2.default)(function (_ref2) {
  var value = _ref2.value,
      type = _ref2.type,
      rowKey = _ref2.rowKey,
      coordFormat = _ref2.coordFormat,
      _ref2$fieldMetadata = _ref2.fieldMetadata,
      fieldMetadata = _ref2$fieldMetadata === undefined ? {} : _ref2$fieldMetadata,
      _onChange = _ref2.onChange,
      classes = _ref2.classes;

  var suggestions = Array.isArray(fieldMetadata.values) && fieldMetadata.values.map(function (d) {
    return d.value;
  });
  var isDiscreteField = type === _constants.FIELD_TYPE_STRING && fieldMetadata.values && fieldMetadata.values.length / fieldMetadata.count < 0.8;
  if (isDiscreteField) {
    return _react2.default.createElement(_Select4.default, {
      value: value,
      onChange: function onChange(e, _ref3) {
        var newValue = _ref3.newValue,
            type = _ref3.type;
        return _onChange(rowKey, newValue);
      },
      suggestions: suggestions,
      style: styles.selectField });
  }
  if (type === _constants.FIELD_TYPE_BOOLEAN) {
    return _react2.default.createElement(
      _Select2.default,
      {
        MenuProps: { MenuListProps: { dense: true } },
        fullWidth: true,
        autoWidth: true,
        value: value + '',
        onChange: function onChange(e) {
          var newValue = e.target.value === 'true' ? true : e.target.value === 'false' ? false : undefined;
          _onChange(rowKey, newValue);
        },
        input: _react2.default.createElement(_Input2.default, { className: classes.input }),
        style: styles.muiSelect },
      _react2.default.createElement(_MenuItem2.default, { value: 'undefined' }),
      _react2.default.createElement(
        _MenuItem2.default,
        { value: 'true' },
        'Yes'
      ),
      _react2.default.createElement(
        _MenuItem2.default,
        { value: 'false' },
        'No'
      )
    );
  }
  if (type === _constants.FIELD_TYPE_STRING || type === _constants.FIELD_TYPE_MIXED) {
    return _react2.default.createElement(_TextField2.default, {
      InputClassName: classes.input,
      fullWidth: true,
      multiline: true,
      value: value,
      onChange: function onChange(e) {
        return _onChange(rowKey, e.target.value);
      },
      style: styles.textField });
  }
  if (type === _constants.FIELD_TYPE_ARRAY) {
    return _react2.default.createElement(_MultiSelect2.default, {
      value: value,
      onChange: function onChange(e, _ref4) {
        var newValue = _ref4.newValue,
            type = _ref4.type;
        return _onChange(rowKey, newValue);
      },
      suggestions: suggestions,
      style: styles.selectField });
  }
  return _react2.default.createElement(ValueCell, { value: value, type: type, coordFormat: coordFormat, editMode: true, classes: classes });
});

var FeatureTable = function FeatureTable(props) {
  var editMode = props.editMode,
      classes = props.classes,
      coordFormat = props.coordFormat,
      fieldAnalysis = props.fieldAnalysis,
      onValueChange = props.onValueChange;

  var rows = getRows(props);
  return _react2.default.createElement(
    _AutoSizer2.default,
    { disableHeight: true },
    function (_ref5) {
      var width = _ref5.width;
      return _react2.default.createElement(
        _Table2.default,
        { className: classes.root, style: { width: width } },
        _react2.default.createElement(
          _TableBody2.default,
          null,
          rows.map(function (row, i) {
            return _react2.default.createElement(
              _TableRow2.default,
              { key: i, className: classes.row, style: { zIndex: rows.length - i } },
              _react2.default.createElement(
                _TableCell2.default,
                { padding: 'dense', className: classes.col1, style: { maxWidth: width / 3 - 36 } },
                _react2.default.createElement(
                  _Typography2.default,
                  { className: classes.col1Text },
                  _react2.default.createElement(_FormattedFieldname2.default, { fieldname: row.key })
                )
              ),
              _react2.default.createElement(
                _TableCell2.default,
                { padding: 'dense', className: (0, _classnames2.default)(classes.col2, (0, _defineProperty3.default)({}, classes.col2Edit, editMode)) },
                editMode ? _react2.default.createElement(ValueCellEdit, {
                  value: row.value,
                  type: row.type,
                  rowKey: row.key,
                  coordFormat: coordFormat,
                  classes: classes,
                  onChange: onValueChange,
                  fieldMetadata: fieldAnalysis.properties[row.key] }) : _react2.default.createElement(ValueCell, { value: row.value, type: row.type, coordFormat: coordFormat, classes: classes })
              )
            );
          })
        )
      );
    }
  );
};

FeatureTable.propTypes = {
  hiddenFields: _propTypes2.default.object.isRequired,
  fieldOrder: _propTypes2.default.object.isRequired
};

FeatureTable.defaultProps = {
  hiddenFields: {},
  fieldOrder: {}

  // TODO: Does not actually work and memoize anything because props.feature
  // changes every edit
};var getRows = (0, _reselect.createSelector)(function (props) {
  return props.feature;
}, function (props) {
  return props.fieldAnalysis;
}, function (props) {
  return props.hiddenFields;
}, function (props) {
  return props.fieldOrder;
}, function (props) {
  return props.editMode;
}, function (feature, fieldAnalysis, hiddenFields, fieldOrder, editMode) {
  var rows = (0, _keys2.default)(fieldAnalysis.properties).map(function (key) {
    return {
      key: key,
      value: feature.properties[key],
      type: fieldAnalysis.properties[key].type,
      visible: !hiddenFields[key]
    };
  }).filter(function (row) {
    return editMode || !hiddenFields[row.key] && (typeof row.value !== 'string' || row.value.length) && typeof row.value !== 'undefined' && row.value !== _constants.UNDEFINED_KEY;
  });

  if (feature.geometry) {
    rows.unshift({
      key: 'location',
      value: feature.geometry && feature.geometry.coordinates,
      type: _constants.FIELD_TYPE_LOCATION,
      visible: !hiddenFields.location
    });
  }

  // Sort rows by `fieldOrder` from state, if an order is set, if not then sort lexically.
  return rows.sort(function (a, b) {
    var orderA = typeof fieldOrder[a.key] !== 'undefined' ? fieldOrder[a.key] : Infinity;
    var orderB = typeof fieldOrder[b.key] !== 'undefined' ? fieldOrder[b.key] : Infinity;
    if (orderA === Infinity && orderB === Infinity) {
      return lexicalSort(a, b);
    } else {
      return orderA - orderB;
    }
  });
});

function lexicalSort(a, b) {
  var nameA = a.key.toUpperCase(); // ignore upper and lowercase
  var nameB = b.key.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  // names must be equal
  return 0;
}

exports.default = (0, _styles.withStyles)(styles)(FeatureTable);
//# sourceMappingURL=FeatureTable.js.map