coreui/lib/components/MultiselectInput/MultiselectInput.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 _MultiselectInput = require('../../theme/components/MultiselectInput');

var _MultiselectInput2 = _interopRequireDefault(_MultiselectInput);

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 RWMultiselect = _reactWidgets2.default.Multiselect;

var systemStyles = {};

var MultiselectInputContainer = (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.multiselectInput, theme.classes.multiselectInput, className),
    style: (0, _ramda.merge)(theme.styles.multiselectInput, style)
  }, rest);
})(RWMultiselect);

var StyledMultiselectInput = _Shared2.default.injectSheet(systemStyles)(MultiselectInputContainer);

/**
 * A select listbox alternative
 */
var MultiselectInput = function MultiselectInput(props) {
  return _react2.default.createElement(
    StyledMultiselectInput,
    props,
    props.children
  );
};

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

MultiselectInput.defaultProps = {
  busy: false,
  caseSensitive: false,
  duration: 250,
  filter: 'startsWith',
  isRtl: false,
  messages: {
    createNew: '(create new tag)',
    emptyFilter: 'The filter returned no results',
    emptyList: 'There are no items in this list'
  },
  minLength: 1,
  theme: { classes: classes, options: options, styles: styles }
};

MultiselectInput.displayName = 'MultiselectInput';

MultiselectInput.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,
  createComponent: _react.PropTypes.element,
  /**
   * provide an array of possible values for the MultiselectInput. 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 the tags specified 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. 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]),
  /**
   * Determines how to group the MultiselectInput values. 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]),
  /**
   * 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,
  /**
   * 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 list. 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({
    /**
     * The text label for creating new tags
     */
    createNew: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
    /**
     * 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])
  }),
  /**
   * Use in conjunction with the filter prop. Start filtering the list only after the value has reached a minimum length.
   */
  minLength: _react.PropTypes.number,
  /**
   * change event Handler that is called when the value is changed. The handler is called with an array of values
   */
  onChange: _react.PropTypes.func,
  /**
   * This handler fires when the user chooses to create a new tag, not in the data list. It is up to the widget parent to implement creation logic, a common implementation is shown below, where the new tag is selected and added to the data list.
   */
  onCreate: _react.PropTypes.func,
  /**
   * Called when the value of the text box changes either from typing or a pasted value. `onSearch` should be used when the `searchTerm` prop is set.
   */
  onSearch: _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 when the MultiselectInput 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 MultiselectInput is open. When unset (`undefined`) the MultiselectInput 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,
  /**
   * The same as an input placeholder, only works in browsers that support the placeholder attribute for inputs
   */
  placeholder: _react.PropTypes.string,
  /**
   * Place the widget in a readonly mode, If an `Array` of values is passed in only the tags specified will be readonly.
   */
  readOnly: _react.PropTypes.oneOfType([_react.PropTypes.array, _react.PropTypes.bool]),
  /**
   * The string value of the current search being typed into the MultiselectInput. When unset (`undefined`) the MultiselectInput will handle the filtering internally. The `defaultSearchTerm` prop can be used to set an initialization value for uncontrolled widgets.
   */
  searchTerm: _react.PropTypes.string,
  /**
   * This component is used to render each selected item. The default component renders the text of the selected item (specified by `textfield`)
   */
  tagComponent: _react.PropTypes.element,
  /**
   * Specify which data item field to display in the $MultiselectInput 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 values of the MultiselectInput. The value should can `null`, or an array of `valueField` values, or an array of objects (such as a few items in the `data` array)
   */
  value: _react.PropTypes.array,
  /**
   * 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 MultiselectInput will use strict equality checks (`===`) to locate the `value` in the `data` list.
   */
  valueField: _react.PropTypes.string
};

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

exports.default = MultiselectInput;