@beisen/dropdown-list/lib/SearchCheckBoxList/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.resetDate(),
      searchData: _this.setSearchData(),
      viewShow: false,
      viewShowAndHide: false,
      searchValue: ""
    };
    _this.state = _extends({}, defaults, props);
    return _this;
  }

  CheckBoxComponent.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps, nextState) {
    this.setState({ checkboxItems: this.resetDate(nextProps) });
  };

  CheckBoxComponent.prototype.resetDate = function resetDate(nextProps) {
    var _this2 = this;

    var children = nextProps ? nextProps.children : this.props.children;
    children.map(function (item, index) {
      item.isChecked = false;
      var bizDataArr = nextProps ? nextProps.bizDataArr : _this2.props.bizDataArr;
      bizDataArr.map(function (it, i) {
        if (item.value == it.value) {
          item.isChecked = true;
        }
      });
    });
    return children;
  };

  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;
  };
  //处理点击事件 改变当前点击checkbox的isChecked值


  CheckBoxComponent.prototype.handleClick = function handleClick(event, value, val) {
    if (this.props.disabled) {
      return false;
    }
    var checkboxItems = this.state.checkboxItems;
    checkboxItems.map(function (item, index) {
      if (item.value == value) {
        item.isChecked = !item.isChecked;
      }
    });
    this.setState({ checkboxItems: checkboxItems });
  };
  // 搜索框点击事件


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

  CheckBoxComponent.prototype.searchDataChange = function searchDataChange(val) {
    var checkBoxData = this.props.children;
    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 });
    this.setState({ checkboxItems: this.props.children });
  };

  CheckBoxComponent.prototype.onSubmit = function onSubmit() {
    var saveData = this.state.checkboxItems.filter(function (item) {
      return item.isChecked;
    });
    var checkboxItems = this.state.checkboxItems;
    this.props.checkboxClick && this.props.checkboxClick(saveData);
  };

  CheckBoxComponent.prototype.render = function render() {
    var contentView = void 0,
        btnTitle = "",
        self = this;
    var _state = this.state;
    var name = _state.name;
    var searchData = _state.searchData;
    var positionLeft = _state.positionLeft;
    var checkboxItems = _state.checkboxItems;
    var _props = this.props;
    var defaultValue = _props.defaultValue;
    var children = _props.children;

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

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

    contentView = _react2.default.createElement(
      'div',
      { className: 'search-checkbox-content ' + (positionLeft ? ' search-checkbox-position-left ' : ' search-checkbox-position-right ') },
      _react2.default.createElement(
        'div',
        { className: 'search-wrap clearfix' },
        searchShow
      ),
      showContent,
      _react2.default.createElement(
        'div',
        { className: 'search-checkbox-footer' },
        _react2.default.createElement(_ButtonGroup2.default, buttonGroupData)
      )
    );
    return _react2.default.createElement(
      'div',
      { ref: 'feildSearchCheckBox', className: 'feild dropdown-search-checkout' },
      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;