react-mapfilter/esm/ObservationDialog/Select.js

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

import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
// @flow
import * as React from 'react';
import TextField from './TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles } from '@material-ui/core/styles';
import { primitiveToString } from '../utils/strings';
/*:: import type {
  SelectableFieldValue,
  LabeledSelectOption,
  SelectOptions
} from '../types'*/

const useStyles = makeStyles(theme => ({
  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) {
  const {
    InputProps,
    classes,
    ref
  } = inputProps,
        other = _objectWithoutPropertiesLoose(inputProps, ["InputProps", "classes", "ref"]);

  return /*#__PURE__*/React.createElement(TextField, _extends({
    InputProps: _Object$assign({
      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: (label
    /*: string | null*/
    ) =>
    /*: SelectableFieldValue | void*/
    {
      if (label === null) return;

      var opts = _findInstanceProperty(options).call(options, ops => ops.label === label);

      return opts && typeof opts.value !== 'undefined' ? opts.value : label;
    },
    toLabel: (value
    /*: SelectableFieldValue*/
    ) =>
    /*: string*/
    {
      var opts = _findInstanceProperty(options).call(options, ops => ops.value === value);

      return opts && opts.label || 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 _mapInstanceProperty(options).call(options, opt => isSelectableFieldValue(opt) ? // $FlowFixMe
  {
    label: 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
 */


export const SelectOne = (_ref) => {
  let {
    id,
    value,
    label,
    options,
    placeholder,
    onChange
  }
  /*: SelectOneProps*/
  = _ref,
      props = _objectWithoutPropertiesLoose(_ref, ["id", "value", "label", "options", "placeholder", "onChange"]);

  const classes = useStyles();
  const labeledOptions = getLabeledSelectOptions(options);
  const encoder = Encoder(labeledOptions);
  return /*#__PURE__*/React.createElement(Autocomplete, _extends({
    id: id,
    value: encoder.toLabel(value),
    onChange: (e, v
    /*: string*/
    ) => onChange(encoder.toValue(v)),
    options: _mapInstanceProperty(labeledOptions).call(labeledOptions, opt => opt.label),
    renderInput: params => renderInput(_Object$assign({}, params, {
      classes,
      label,
      placeholder
    }))
  }, props));
};
export const SelectMultiple = (_ref2) => {
  let {
    id,
    value,
    label,
    options,
    placeholder,
    onChange
  }
  /*: SelectMultipleProps*/
  = _ref2,
      props = _objectWithoutPropertiesLoose(_ref2, ["id", "value", "label", "options", "placeholder", "onChange"]);

  const classes = useStyles();
  const labeledOptions = getLabeledSelectOptions(options);
  const encoder = Encoder(labeledOptions);
  let arrayValue = [];
  if (!_Array$isArray(value)) arrayValue = [value];else if (value) arrayValue = value;
  return /*#__PURE__*/React.createElement(Autocomplete, _extends({
    id: id,
    multiple: true,
    freeSolo: true,
    value: _mapInstanceProperty(arrayValue).call(arrayValue, encoder.toLabel),
    onChange: (e, v) => onChange(_mapInstanceProperty(v).call(v, encoder.toValue)),
    options: _mapInstanceProperty(labeledOptions).call(labeledOptions, opt => opt.label),
    renderInput: params => renderInput(_Object$assign({}, params, {
      classes,
      label,
      placeholder
    }))
  }, props));
};
//# sourceMappingURL=Select.js.map