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

React components that implement Google's Material Design.

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";

/**
 * @ignore - do not document.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AsyncAutoComplete from './AsyncAutoComplete';
import withStyles from '../styles/withStyles';

const styles = theme => ({
  root: {
    flexGrow: 1
  },
  nested: {
    paddingLeft: theme.spacing(4)
  }
});

class AutoComplete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      PaginationProps: {
        page: 0,
        rowsPerPage: 5,
        count: 0
      },
      text: ''
    };
    this.state.optionsArray = this.props.showPagination ? [] : this.menuItems(this.state.text);
  }

  componentDidMount() {
    const {
      children,
      rowsPerPage
    } = this.props;
    this.setState({
      PaginationProps: _extends({}, this.state.PaginationProps, {
        rowsPerPage: rowsPerPage || 5,
        count: children && children.length
      })
    });
  }

  onChangePage(i) {
    this.setState({
      PaginationProps: _extends({}, this.state.PaginationProps, {
        page: i
      })
    }, () => {
      const op = this.menuItems(this.state.text);
      const start = this.state.PaginationProps.page * this.state.PaginationProps.rowsPerPage;
      const end = (this.state.PaginationProps.page + 1) * this.state.PaginationProps.rowsPerPage > op.length ? undefined : (this.state.PaginationProps.page + 1) * this.state.PaginationProps.rowsPerPage;
      this.setState({
        optionsArray: op.slice(start, end)
      });
    });
  }

  onfilter(e) {
    const op = this.menuItems(e.target.value);
    this.setState({
      text: e.target.value,
      PaginationProps: _extends({}, this.state.PaginationProps, {
        page: 0,
        count: op.length
      })
    }, () => {
      const op = this.menuItems(this.state.text);
      const start = this.state.PaginationProps.page * this.state.PaginationProps.rowsPerPage;
      const end = (this.state.PaginationProps.page + 1) * this.state.PaginationProps.rowsPerPage > op.length ? undefined : (this.state.PaginationProps.page + 1) * this.state.PaginationProps.rowsPerPage;
      this.setState({
        optionsArray: op.slice(start, end)
      });
    });
  }

  menuItems(text) {
    const {
      children
    } = this.props;
    let filterData = [];

    if (children) {
      filterData = React.Children.toArray(children).filter(child => {
        return !text || child.props.children.toLowerCase().indexOf(text.toLowerCase()) !== -1 || child.props.value.toLowerCase().indexOf(text.toLowerCase()) !== -1;
      });
      return filterData;
    }
  }

  render() {
    const _this$props = this.props,
          {
      classes,
      onChange,
      value
    } = _this$props,
          others = _objectWithoutPropertiesLoose(_this$props, ["classes", "onChange", "value"]);

    const {
      optionsArray
    } = this.state;
    return React.createElement("div", {
      className: classes.root
    }, React.createElement(AsyncAutoComplete, _extends({}, others, {
      select: true,
      value: value,
      PaginationProps: this.state.PaginationProps,
      onChangePage: this.onChangePage.bind(this),
      onChangeInput: this.onfilter.bind(this),
      onChange: onChange
    }), optionsArray));
  }

}

process.env.NODE_ENV !== "production" ? AutoComplete.propTypes = {
  /**
   * The option elements to populate the select with.
   * Can be some `MenuItem`.
   */
  children: PropTypes.node,

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

  /**
   * decided Synchronize autocomplete is disabled
   */
  disabled: PropTypes.bool,

  /**
   * If true, `value` must be an array and the menu will support multiple selections.
   */
  multiple: PropTypes.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.func,

  /**
   * placeholder
   */
  placeholder: PropTypes.string,

  /**
   * page size
   */
  rowsPerPage: PropTypes.num,

  /**
   * The input value.
   */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))])
} : void 0;
AutoComplete.defaultProps = {
  multiple: false
};
export default withStyles(styles, {
  name: 'RMAutoComplete'
})(AutoComplete);