react-mapfilter/commonjs/ObservationDialog/Select.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.SelectMultiple = exports.SelectOne = void 0;

var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));

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

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

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

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

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

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

var _TextField = _interopRequireDefault(require("./TextField"));

var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));

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

var _strings = require("../utils/strings");

// @flow
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    root: {
      flexGrow: 1,
      height: 250
    },
    container: {
      width: '100%'
    },
    paper: {
      position: 'absolute',
      zIndex: 1,
      marginTop: theme.spacing(1),
      left: 0,
      right: 0
    },
    chip: {
      margin: theme.spacing(0.5, 0.25)
    },
    inputRoot: {
      flexWrap: 'wrap'
    },
    inputInput: {
      width: 'auto',
      flexGrow: 1
    },
    divider: {
      height: theme.spacing(2)
    }
  };
});

function _renderInput(inputProps) {
  var InputProps = inputProps.InputProps,
      classes = inputProps.classes,
      ref = inputProps.ref,
      other = (0, _objectWithoutProperties2.default)(inputProps, ["InputProps", "classes", "ref"]);
  return /*#__PURE__*/React.createElement(_TextField.default, (0, _extends2.default)({
    InputProps: (0, _assign.default)({
      inputRef: ref,
      classes: {
        root: classes.inputRoot,
        input: classes.inputInput
      }
    }, InputProps)
  }, other));
}
/*:: type SelectOneProps = {
  id?: string,
  label: string | React.Element<any>,
  value: SelectableFieldValue,
  placeholder?: string,
  onChange: (value: SelectableFieldValue | void) => any,
  options: SelectOptions
}*/

/*:: type SelectMultipleProps = {
  ...$Exact<SelectOneProps>,
  value: Array<SelectableFieldValue>
}*/


function Encoder(options
/*: Array<LabeledSelectOption>*/
) {
  return {
    toValue: function toValue(label
    /*: string | null*/
    )
    /*: SelectableFieldValue | void*/
    {
      if (label === null) return;
      var opts = (0, _find.default)(options).call(options, function (ops) {
        return ops.label === label;
      });
      return opts && typeof opts.value !== 'undefined' ? opts.value : label;
    },
    toLabel: function toLabel(value
    /*: SelectableFieldValue*/
    )
    /*: string*/
    {
      var opts = (0, _find.default)(options).call(options, function (ops) {
        return ops.value === value;
      });
      return opts && opts.label || (0, _strings.primitiveToString)(value);
    }
  };
}

function isSelectableFieldValue(v
/*: SelectableFieldValue | LabeledSelectOption*/
)
/*: boolean*/
{
  return typeof v === 'string' || typeof v === 'boolean' || typeof v === 'number' || v === null;
}

function getLabeledSelectOptions(options
/*: SelectOptions*/
)
/*: Array<LabeledSelectOption>*/
{
  return (0, _map.default)(options).call(options, function (opt) {
    return isSelectableFieldValue(opt) ? // $FlowFixMe
    {
      label: (0, _strings.primitiveToString)(opt),
      value: opt
    } : // $FlowFixMe
    opt;
  });
}
/**
 * A multi-select field that allows the user to enter a value that is not on the
 * list. Allows the selection of non-string values from a list, but the labels
 * for each item must be unique for this to work reliably
 */


var SelectOne = function SelectOne(_ref) {
  var id = _ref.id,
      value = _ref.value,
      label = _ref.label,
      options = _ref.options,
      placeholder = _ref.placeholder,
      _onChange = _ref.onChange,
      props = (0, _objectWithoutProperties2.default)(_ref, ["id", "value", "label", "options", "placeholder", "onChange"]);
  var classes = useStyles();
  var labeledOptions = getLabeledSelectOptions(options);
  var encoder = Encoder(labeledOptions);
  return /*#__PURE__*/React.createElement(_Autocomplete.default, (0, _extends2.default)({
    id: id,
    value: encoder.toLabel(value),
    onChange: function onChange(e, v
    /*: string*/
    ) {
      return _onChange(encoder.toValue(v));
    },
    options: (0, _map.default)(labeledOptions).call(labeledOptions, function (opt) {
      return opt.label;
    }),
    renderInput: function renderInput(params) {
      return _renderInput((0, _assign.default)({}, params, {
        classes: classes,
        label: label,
        placeholder: placeholder
      }));
    }
  }, props));
};

exports.SelectOne = SelectOne;

var SelectMultiple = function SelectMultiple(_ref2) {
  var id = _ref2.id,
      value = _ref2.value,
      label = _ref2.label,
      options = _ref2.options,
      placeholder = _ref2.placeholder,
      _onChange2 = _ref2.onChange,
      props = (0, _objectWithoutProperties2.default)(_ref2, ["id", "value", "label", "options", "placeholder", "onChange"]);
  var classes = useStyles();
  var labeledOptions = getLabeledSelectOptions(options);
  var encoder = Encoder(labeledOptions);
  var arrayValue = [];
  if (!(0, _isArray.default)(value)) arrayValue = [value];else if (value) arrayValue = value;
  return /*#__PURE__*/React.createElement(_Autocomplete.default, (0, _extends2.default)({
    id: id,
    multiple: true,
    freeSolo: true,
    value: (0, _map.default)(arrayValue).call(arrayValue, encoder.toLabel),
    onChange: function onChange(e, v) {
      return _onChange2((0, _map.default)(v).call(v, encoder.toValue));
    },
    options: (0, _map.default)(labeledOptions).call(labeledOptions, function (opt) {
      return opt.label;
    }),
    renderInput: function renderInput(params) {
      return _renderInput((0, _assign.default)({}, params, {
        classes: classes,
        label: label,
        placeholder: placeholder
      }));
    }
  }, props));
};

exports.SelectMultiple = SelectMultiple;
//# sourceMappingURL=Select.js.map