react-mapfilter/commonjs/internal/FormattedValue.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");

require("core-js/modules/es.string.link");

_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 _reactIntl = require("react-intl");

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

var _value_types = require("../lib/data_analysis/value_types");

var fieldTypes = _interopRequireWildcard(require("../constants/field_types"));

var valueTypes = _interopRequireWildcard(require("../constants/value_types"));

// @flow
var useStyles = (0, _styles.makeStyles)({
  link: {
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap'
  }
});
/*:: type Props = {
  value: Primitive | Array<Primitive>,
  field: Field
}*/

var defaultTextField
/*: Field*/
= {
  id: 'default_text_field',
  key: [],
  type: fieldTypes.TEXT
};
/**
 * Format a value from a form, either by guessing the type or trying to coerce
 * the value to a type specified by `fieldType`.
 */

var FormattedValue = function FormattedValue(_ref) {
  var _context;

  var value = _ref.value,
      field = _ref.field;
  var classes = useStyles();
  if (value === undefined || value === null) return null;

  try {
    switch (field.type) {
      case fieldTypes.SELECT_MULTIPLE:
        var valueAsArray = (0, _filter.default)(_context = (0, _value_types.coerceValue)(value, valueTypes.ARRAY)).call(_context, function (v) {
          return v != null;
        });
        var values = (0, _map.default)(valueAsArray).call(valueAsArray, function (v, i) {
          return /*#__PURE__*/React.createElement(FormattedValue, {
            key: i,
            value: v,
            field: defaultTextField
          });
        });
        return joinReactChildren(values, ', ');

      case fieldTypes.NUMBER:
        var valueAsNumber = (0, _value_types.coerceValue)(value, valueTypes.NUMBER);
        return valueAsNumber + '';

      case fieldTypes.TEXT:
      case fieldTypes.TEXTAREA:
      case fieldTypes.SELECT_ONE:
        if (typeof value === 'boolean') return value ? 'yes' : 'no';
        var valueAsString = (0, _value_types.coerceValue)(value, valueTypes.STRING);
        return valueAsString;

      case fieldTypes.DATE:
        var valueAsDate = (0, _value_types.coerceValue)(value, valueTypes.DATE);
        return /*#__PURE__*/React.createElement(_reactIntl.FormattedDate, {
          value: valueAsDate,
          year: "numeric",
          month: "long",
          day: "2-digit"
        });

      case fieldTypes.DATETIME:
        var valueAsDatetime = (0, _value_types.coerceValue)(value, valueTypes.DATETIME);
        return /*#__PURE__*/React.createElement(_reactIntl.FormattedTime, {
          value: valueAsDatetime,
          year: "numeric",
          month: "long",
          day: "2-digit"
        });

      case fieldTypes.LINK:
        var valueAsUrl = (0, _value_types.coerceValue)(value, valueTypes.URL);
        return /*#__PURE__*/React.createElement("a", {
          href: valueAsUrl,
          target: "_blank",
          rel: "noopener noreferrer",
          className: classes.link
        }, valueAsUrl);
    }

    return null;
  } catch (e) {
    var _valueAsString = (0, _value_types.coerceValue)(value, valueTypes.STRING);

    return _valueAsString || null;
  }
};

var _default = FormattedValue;
exports.default = _default;

function joinReactChildren(children
/*: Array<React.Node>*/
, separator
/*: React.Node*/
)
/*: Array<React.Node>*/
{
  var joinedChildren = [];

  for (var i = 0; i < children.length; i++) {
    joinedChildren.push(children[i]);
    if (i < children.length - 1) joinedChildren.push(separator);
  }

  return joinedChildren;
}
//# sourceMappingURL=FormattedValue.js.map