coreui/lib/components/ComboboxInput/ComboboxInput.js

Platform Core UI

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Shared = require('../../Shared');

var _Shared2 = _interopRequireDefault(_Shared);

var _reactWidgets = require('coreui-deps/lib/react-widgets');

var _reactWidgets2 = _interopRequireDefault(_reactWidgets);

var _ComboboxInput = require('../../theme/components/ComboboxInput');

var _ComboboxInput2 = _interopRequireDefault(_ComboboxInput);

var _dedupe = require('classnames/dedupe');

var _dedupe2 = _interopRequireDefault(_dedupe);

var _mapProps = require('recompose/mapProps');

var _mapProps2 = _interopRequireDefault(_mapProps);

var _ramda = require('ramda');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var RWCombobox = _reactWidgets2.default.Combobox;

var systemStyles = {};

var ComboboxInputContainer = (0, _mapProps2.default)(function (_ref) {
  var className = _ref.className,
      sheet = _ref.sheet,
      style = _ref.style,
      theme = _ref.theme,
      rest = _objectWithoutProperties(_ref, ['className', 'sheet', 'style', 'theme']);

  return _extends({
    className: (0, _dedupe2.default)(sheet.classes.comboboxInput, theme.classes.comboboxInput, className),
    style: (0, _ramda.merge)(theme.styles.comboboxInput, style)
  }, rest);
})(RWCombobox);

var StyledComboboxInput = _Shared2.default.injectSheet(systemStyles)(ComboboxInputContainer);

/**
 * Select an item from the list, or input a custom value. The {widgetName} can also make suggestions as you type.
 */
var ComboboxInput = function ComboboxInput(props) {
  return _react2.default.createElement(
    StyledComboboxInput,
    props,
    props.children
  );
};

var classes = _ComboboxInput2.default.classes;
var options = _ComboboxInput2.default.options;
var styles = _ComboboxInput2.default.styles;

ComboboxInput.defaultProps = {
  busy: false,
  caseSensitive: false,
  duration: 250,
  filter: false,
  isRtl: false,
  messages: {
    emptyFilter: 'The filter returned no results',
    emptyList: 'There are no items in this list',
    open: 'Open Combobox'
  },
  minLength: 1,
  suggest: false,
  theme: { classes: classes, options: options, styles: styles }
};

ComboboxInput.displayName = 'ComboboxInput';

ComboboxInput.propTypes = {
  autoFocus: _react.PropTypes.bool,
  /**
   * Mark whether the widget is in a busy or loading state. If `true` the widget will display a spinner gif, useful when loading data via an ajax call.
   */
  busy: _react.PropTypes.bool,
  /**
   * Use in conjunction with the filter prop. Filter the list without regard for case. This only applies to non function values for `filter`
   */
  caseSensitive: _react.PropTypes.bool,
  children: _react.PropTypes.node,
  /**
   * An array of possible values for the {widgetName}. If an array of `objects` is provided you should use the `valueField` and `textField` props, to specify which object properties comprise the value field (such as an id) and the field used to label the item.
   */
  data: _react.PropTypes.array,
  /**
   * Disable the widget, if an `Array` of values is passed in only those values will be disabled.
   */
  disabled: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.bool]),
  dropUp: _react.PropTypes.bool,
  /**
   * The speed, in milliseconds, of the dropdown animation.
   */
  duration: _react.PropTypes.number,
  /**
   * Specify a filtering method used to reduce the items in the dropdown as you type. It can be used in conjunction with the `suggest` prop or instead of it. There are a few built-in filtering methods that can be specified by passing the `String` name. You can explicitly opt out of filtering by setting filter to `false`
   * To handle custom filtering techniques provide a `function` that returns `true` or `false` for each passed in item (analogous to the [array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) builtin)
   * Acceptable values for filter are: `false` `"startsWith"` `"endsWith"` `"contains"` `function(String item)`
   */
  filter: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.func, _react.PropTypes.string]),
  /**
   * This component is used to render each option group, when `groupBy` is specified. By default the `groupBy` value will be used.
   */
  groupComponent: _react.PropTypes.element,
  /**
   * Determines how to group the {widgetName}. Providing a `string` will group the `data` array by that property. You can also provide a function which should return the group value.
   */
  groupBy: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
  /**
   * mark whether the widget should render right-to-left. This property can also be implicitly passed to the widget through a `childContext` prop (`isRtl`) this allows higher level application components to specify the direction.
   */
  isRtl: _react.PropTypes.bool,
  /**
   * This component is used to render each possible item in the ${widgetName}. The default component renders the text of the selected item (specified by `textfield`)
   */
  itemComponent: _react.PropTypes.element,
  listComponent: _react.PropTypes.element,
  /**
   * Object hash containing display text and/or text for screen readers. Use the `messages` object to localize widget text and increase accessibility.
   */
  messages: _react.PropTypes.shape({
    /**
     * text to display when the the current filter does not return any results
     */
    emptyFilter: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
    /**
     * text to display when the `data` prop array is empty
     */
    emptyList: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
    /**
     * {widgetName} button text for screen readers
     */
    open: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string])
  }),
  /**
   * Use in conjunction with the filter prop. Start filtering the list only after the value has reached a minimum length.
   */
  minLength: _react.PropTypes.number,
  name: _react.PropTypes.string,
  /**
   * Called when the value is changed. If the value is one of the `data` members that item will be returned. In the case of a value not being found in the `data` array the string value of the {widgetName} will be returned.
   */
  onChange: _react.PropTypes.func,
  /**
   * This handler fires when an item has been selected from the list. It fires before the `onChange` handler, and fires regardless of whether the value has actually changed.
   */
  onSelect: _react.PropTypes.func,
  /**
   * Called fires when the {widgetName} is about to open or close. `onToggle` should be used when the `open` prop is set otherwise the widget will never open or close.
   */
  onToggle: _react.PropTypes.func,
  /**
   * Whether or not the {widgetName} is open. When unset (`undefined`) the {widgetName} will handle the opening and closing internally. The `defaultOpen` prop can be used to set an initialization value for uncontrolled widgets.
   */
  open: _react.PropTypes.bool,
  placeholder: _react.PropTypes.string,
  /**
   * Place the {widgetName} in a read-only mode, If an `Array` of values is passed in only those values will be read-only.
   */
  readOnly: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.bool]),
  /**
   * When `true` the {widgetName} will suggest, or fill in, values as you type. The suggestions are always "startsWith", meaning it will search from the start of the `textField` property
   */
  suggest: _react.PropTypes.bool,
  /**
   * Specify which data item field to display in the ${widgetName} and selected item. The textField` prop may also also used as to find an item in the list as you type. Providing an accessor function allows for computed text values
   */
  textField: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),

  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object]),
  /**
   * The current value of the {widgetName}. This can be an object (such as a member of the `data` array) or a primitive value, hinted to by the `valueField`. The widget value does not need to be in the `data`, widgets can have values that are not in their list.
   */
  value: _react.PropTypes.any,
  /**
   * A dataItem field name for uniquely identifying items in the `data` list. A `valueField` is required when the `value` prop is not itself a dataItem. A `valueField` is useful when specifying the selected item, by its `id` instead of using the model as the value.
   * When a `valueField` is not provided, the {widgetName} will use strict equality checks (`===`) to locate the `value` in the `data` list.
   */
  valueField: _react.PropTypes.string
};

_Shared2.default.registerComponent('ComboboxInput', ComboboxInput);

exports.default = ComboboxInput;