@beisen/dropdown-list/lib/DropDownListComponent.js

DropDownList

'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 _reactDom = require('react-dom');

var _DataList = require('./DataList');

var _DataList2 = _interopRequireDefault(_DataList);

var _Search = require('@beisen/Search');

var _Search2 = _interopRequireDefault(_Search);

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

function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }

var DropDownListComponent = function (_Component) {
  _inherits(DropDownListComponent, _Component);

  function DropDownListComponent(props) {
    _classCallCheck(this, DropDownListComponent);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    var defaults = {
      children: _this.props.listData, //下拉菜单中的数据
      searchData: _this.setSearchData(), //搜索框中的参数
      viewShow: false,
      viewShowAndHide: false,
      searchValue: ""
    };
    _this.state = _extends({}, defaults, props);
    return _this;
  }

  DropDownListComponent.prototype.setSearchData = function setSearchData() {
    var self = this;
    var data = {
      "placeholder": this.props.placeholder || "请输入" /**没有值的时候显示的内容(string)**/
      , "iconName": "sys-icon-sousuo" /**IconName 文字前面的图标**/
      , "active": true //input框激活
      , "hidden": false //隐藏搜索框
      , "readonly": false //搜索框只读
      , "disabled": false //搜索框禁用
      , "onChange": function onChange(val) {
        self.searchDataChange(val);
      }
    };
    return data;
  };
  //搜索框点击事件


  DropDownListComponent.prototype.titleClick = function titleClick() {
    if (!this.state.viewShowAndHide) {
      this.setState({
        viewShow: true,
        viewShowAndHide: true,
        checkboxItems: this.props.children
      });
    } else {
      this.setState({
        viewShow: false,
        viewShowAndHide: false
      });
    }
  };

  DropDownListComponent.prototype.searchDataChange = function searchDataChange(val) {
    var radioData = this.props.listData;
    var filterData = radioData.filter(function (item) {
      return item.text.includes(val.value);
    });
    filterData.length > 0 ? this.setState({ children: filterData, hasSearch: true, searchValue: val.value }) : this.setState({ children: [], hasSearch: false, searchValue: val.value });
  };

  DropDownListComponent.prototype.componentDidMount = function componentDidMount() {
    var target = this.refs.feildSearchDropDownList;
    if (target) {
      window.document.body.clientWidth / 2 > target.getBoundingClientRect()['left'] ? this.setState({ positionLeft: true }) : this.setState({ positionLeft: false });
    }
  };

  DropDownListComponent.prototype.render = function render() {
    var _props = this.props;
    var listData = _props.listData;
    var listActive = _props.listActive;
    var itemClick = _props.itemClick;
    var _state = this.state;
    var children = _state.children;
    var searchValue = _state.searchValue;
    var positionLeft = _state.positionLeft;
    var searchData = _state.searchData;
    var hidden = _state.hidden;

    var contentView = void 0;
    var showContent = children.length > 0 ? _react2.default.createElement(_DataList2.default, { listData: children, listActive: listActive, searchValue: searchValue, itemClick: itemClick }) : _react2.default.createElement(
      'div',
      { className: 'drop-search-no-data' },
      _react2.default.createElement('span', { className: 'pc-sys-no-data-svg' })
    );
    //如果没有数据则显示暂无数据的图片
    var searchShow = listData.length > 10 ? _react2.default.createElement(
      'div',
      { className: 'dropdown-search' },
      _react2.default.createElement(_Search2.default, searchData)
    ) : '';

    if (hidden) {
      return _react2.default.createElement('div', null);
    } else {
      return _react2.default.createElement(
        'div',
        { ref: 'feildSearchDropDownList', className: 'feild dropdown-search-wrap' },
        _react2.default.createElement(
          'div',
          { className: 'field-drop-list-content drop-list-real' + (positionLeft ? ' search-drop-list-position-left ' : ' search-drop-list-position-right ') },
          searchShow,
          showContent
        )
      );
    }
  };

  return DropDownListComponent;
}(_react.Component);

DropDownListComponent.PropTypes = {
  positionLeft: _react2.default.PropTypes.bool.isRequired,
  children: _react2.default.PropTypes.array.isRequired,
  searchData: _react2.default.PropTypes.object.isRequired
};
exports.default = DropDownListComponent;