@beisen/dropdown-list/lib/SearchCheckBoxList/CheckBox/CheckBoxComponent.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 _CheckBoxList = require('./CheckBoxList');

var _CheckBoxList2 = _interopRequireDefault(_CheckBoxList);

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

var _Search2 = _interopRequireDefault(_Search);

var _ButtonGroup = require('@beisen/ButtonGroup');

var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);

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 CheckBoxComponent = function (_Component) {
  _inherits(CheckBoxComponent, _Component);

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

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

    var defaults = {
      titleData: [],
      positionLeft: false,
      checkboxItems: _this.props.checkboxItems,
      searchData: _this.setSearchData(),
      viewShow: false,
      viewShowAndHide: false,
      searchValue: ""
    };
    _this.state = _extends({}, defaults, props);
    _this.onClose = _this.onClose.bind(_this);
    return _this;
  }

  CheckBoxComponent.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;
  };

  //搜索框点击事件


  CheckBoxComponent.prototype.titleClick = function titleClick() {
    if (!this.state.viewShowAndHide) {
      this.setState({
        viewShow: true,
        viewShowAndHide: true,
        checkboxItems: this.props.checkboxItems
      });
    } else {
      this.setState({
        viewShow: false,
        viewShowAndHide: false
      });
    }
    document.removeEventListener('click', this.onClose);
    document.addEventListener('click', this.onClose);
  };

  CheckBoxComponent.prototype.searchDataChange = function searchDataChange(val) {
    var checkBoxData = this.props.checkboxItems;
    var filterData = checkBoxData.filter(function (item) {
      return item.text.includes(val.value);
    });
    filterData.length > 0 ? this.setState({ checkboxItems: filterData, searchValue: val.value }) : this.setState({ checkboxItems: [], searchValue: val.value });
  };

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

  CheckBoxComponent.prototype.onClose = function onClose(event) {
    var self = this;
    var area = this.refs.feildSearchCheckBox;
    if (!area.contains(event.target) && !event.target.className.includes("icon-close")) {
      self.setState({
        viewShow: false,
        viewShowAndHide: false
      });
      document.removeEventListener('click', self.onClose);
    }
  };

  CheckBoxComponent.prototype.onSubmit = function onSubmit() {
    var saveData = this.state.checkboxItems.filter(function (item) {
      return item.isChecked;
    });
    this.props.onClick && this.props.onClick(saveData);
    this.setState({
      viewShow: false,
      viewShowAndHide: false,
      titleData: saveData
    });
    document.removeEventListener('click', this.onClose);
  };

  CheckBoxComponent.prototype.render = function render() {
    var that = this;
    var stateData = this.state,
        contentView = void 0,
        btnTitle = "",
        self = this;
    var buttonGroupData = {
      "children": [{
        "buttonName": "BaseButton",
        "bsStyle": "default",
        "bsSize": "default",
        "active": false,
        "disabled": false,
        "href": "" /**如果该字段有定义且非空，return（<a/>）,否则return（</button>）**/
        , "title": "确定" /**显示文本(string)**/
        , "onClick": function onClick(val) {
          self.onSubmit();
        } /**点击后事件回调**/
        , "hidden": false //是否显示按钮
      }]
    };
    btnTitle = this.props.defaultValue || [];
    btnTitle = btnTitle.length > 0 ? btnTitle : stateData.name;

    var showContent = this.state.checkboxItems.length > 0 ? _react2.default.createElement(_CheckBoxList2.default, this.state) : _react2.default.createElement(
      'div',
      { className: 'us-no-data' },
      _react2.default.createElement('span', { className: 'pc-sys-no-data-svg' })
    );

    if (stateData.viewShow) {
      contentView = _react2.default.createElement(
        'div',
        { className: 'search-checkbox-content ' + (stateData.positionLeft ? ' search-checkbox-position-left ' : ' search-checkbox-position-right ') },
        _react2.default.createElement(_Search2.default, stateData.searchData),
        showContent,
        _react2.default.createElement(
          'div',
          { className: 'search-checkbox-footer' },
          _react2.default.createElement(_ButtonGroup2.default, buttonGroupData)
        )
      );
    }
    //    else
    //    {
    //    	contentView =  <div className={'search-checkbox-contentHide '+(stateData.positionLeft?' search-checkbox-position-left ':' search-checkbox-position-right ')}>
    //                      <Search {...stateData.searchData} />
    //                      <CheckboxList {...this.state} />
    //                      <div className='search-checkbox-footer'>
    //                        <ButtonGroup data={buttonGroupData} />
    //                      </div>
    //                    </div>
    //    }

    return _react2.default.createElement(
      'div',
      { ref: 'feildSearchCheckBox', className: 'feild search-checkbox-view' },
      contentView
    );
  };

  return CheckBoxComponent;
}(_react.Component);

CheckBoxComponent.PropTypes = {
  positionLeft: _react2.default.PropTypes.bool.isRequired,
  titleData: _react2.default.PropTypes.array.isRequired,
  checkboxItems: _react2.default.PropTypes.array.isRequired,
  searchData: _react2.default.PropTypes.object.isRequired,
  viewShow: _react2.default.PropTypes.bool.isRequired
};
exports.default = CheckBoxComponent;