@6thquake/react-material/esm/AutoComplete/AutoComplete.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _AsyncAutoComplete = _interopRequireDefault(require("./AsyncAutoComplete"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

/**
 * @ignore - do not document.
 */
var styles = function styles(theme) {
  return {
    root: {
      flexGrow: 1
    },
    nested: {
      paddingLeft: theme.spacing(4)
    }
  };
};

var AutoComplete =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(AutoComplete, _Component);

  function AutoComplete(props) {
    var _this;

    (0, _classCallCheck2.default)(this, AutoComplete);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(AutoComplete).call(this, props));
    _this.state = {
      PaginationProps: {
        page: 0,
        rowsPerPage: 5,
        count: 0
      },
      text: ''
    };
    _this.state.optionsArray = _this.props.showPagination ? [] : _this.menuItems(_this.state.text);
    return _this;
  }

  (0, _createClass2.default)(AutoComplete, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          children = _this$props.children,
          rowsPerPage = _this$props.rowsPerPage;
      this.setState({
        PaginationProps: (0, _extends2.default)({}, this.state.PaginationProps, {
          rowsPerPage: rowsPerPage || 5,
          count: children && children.length
        })
      });
    }
  }, {
    key: "onChangePage",
    value: function onChangePage(i) {
      var _this2 = this;

      this.setState({
        PaginationProps: (0, _extends2.default)({}, this.state.PaginationProps, {
          page: i
        })
      }, function () {
        var op = _this2.menuItems(_this2.state.text);

        var start = _this2.state.PaginationProps.page * _this2.state.PaginationProps.rowsPerPage;
        var end = (_this2.state.PaginationProps.page + 1) * _this2.state.PaginationProps.rowsPerPage > op.length ? undefined : (_this2.state.PaginationProps.page + 1) * _this2.state.PaginationProps.rowsPerPage;

        _this2.setState({
          optionsArray: op.slice(start, end)
        });
      });
    }
  }, {
    key: "onfilter",
    value: function onfilter(e) {
      var _this3 = this;

      var op = this.menuItems(e.target.value);
      this.setState({
        text: e.target.value,
        PaginationProps: (0, _extends2.default)({}, this.state.PaginationProps, {
          page: 0,
          count: op.length
        })
      }, function () {
        var op = _this3.menuItems(_this3.state.text);

        var start = _this3.state.PaginationProps.page * _this3.state.PaginationProps.rowsPerPage;
        var end = (_this3.state.PaginationProps.page + 1) * _this3.state.PaginationProps.rowsPerPage > op.length ? undefined : (_this3.state.PaginationProps.page + 1) * _this3.state.PaginationProps.rowsPerPage;

        _this3.setState({
          optionsArray: op.slice(start, end)
        });
      });
    }
  }, {
    key: "menuItems",
    value: function menuItems(text) {
      var children = this.props.children;
      var filterData = [];

      if (children) {
        filterData = _react.default.Children.toArray(children).filter(function (child) {
          return !text || child.props.children.toLowerCase().indexOf(text.toLowerCase()) !== -1 || child.props.value.toLowerCase().indexOf(text.toLowerCase()) !== -1;
        });
        return filterData;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          classes = _this$props2.classes,
          onChange = _this$props2.onChange,
          value = _this$props2.value,
          others = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "onChange", "value"]);
      var optionsArray = this.state.optionsArray;
      return _react.default.createElement("div", {
        className: classes.root
      }, _react.default.createElement(_AsyncAutoComplete.default, (0, _extends2.default)({}, others, {
        select: true,
        value: value,
        PaginationProps: this.state.PaginationProps,
        onChangePage: this.onChangePage.bind(this),
        onChangeInput: this.onfilter.bind(this),
        onChange: onChange
      }), optionsArray));
    }
  }]);
  return AutoComplete;
}(_react.Component);

AutoComplete.propTypes = {
  /**
   * The option elements to populate the select with.
   * Can be some `MenuItem`.
   */
  children: _propTypes.default.node,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: _propTypes.default.object.isRequired,

  /**
   * decided Synchronize autocomplete is disabled
   */
  disabled: _propTypes.default.bool,

  /**
   * If true, `value` must be an array and the menu will support multiple selections.
   */
  multiple: _propTypes.default.bool,

  /**
   * Callback function fired when a menu item is selected.
   *
   * @param {object} event The event source of the callback.
   * You can pull out the new value by accessing `event.target.value`.
   */
  onChange: _propTypes.default.func,

  /**
   * placeholder
   */
  placeholder: _propTypes.default.string,

  /**
   * page size
   */
  rowsPerPage: _propTypes.default.num,

  /**
   * The input value.
   */
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))])
};
AutoComplete.defaultProps = {
  multiple: false
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMAutoComplete'
})(AutoComplete);

exports.default = _default;