ming-demo3/lib/components/basic/select.js

mdf metaui web

"use strict";

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

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

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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

var _baseui = require("@mdf/baseui");

var _label = _interopRequireDefault(require("./label"));

var _text2 = _interopRequireDefault(require("./text"));

var _extend = require("@mdf/cube/lib/extend");

var Option = _baseui.Select.Option;
var OptGroup = _baseui.Select.OptGroup;

var SelectControl = function (_React$Component) {
  (0, _inherits2["default"])(SelectControl, _React$Component);

  function SelectControl(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, SelectControl);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SelectControl).call(this, props));
    _this.valueField = props.valueField || '';
    _this.textField = props.textField || '';
    var cStyle = props.cStyle;
    var config = {};

    if (cStyle) {
      try {
        config = JSON.parse(cStyle);
      } catch (e) {}
    }

    _this.state = Object.assign({
      bIsNull: props.bIsNull,
      focus: props.focus,
      text: '',
      dataSource: [],
      value: undefined,
      defaultValue: [],
      multiple: false,
      combobox: false,
      allowClear: true,
      filterOption: true,
      tags: false,
      placeholder: null,
      notFoundContent: '未找到',
      dropdownMatchSelectWidth: true,
      optionFilterProp: 'children',
      size: 'default',
      disabled: false,
      showValue: '',
      visible: !props.bHidden,
      err: '',
      msg: '',
      className: props.className || '',
      isInFilterJSX: props.isInFilterJSX
    }, config);
    _this.onChange = _this.onChange.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleBodyClick = _this.handleBodyClick.bind((0, _assertThisInitialized2["default"])(_this));
    return _this;
  }

  (0, _createClass2["default"])(SelectControl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this && this.props && this.props.model) {
        this.props.model.addListener(this);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this && this.props && this.props.model) {
        this.props.model.addListener(this);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this && this.props && this.props.model) {
        this.props.model.removeListener(this);
      }
    }
  }, {
    key: "validate",
    value: function validate(val) {
      this.setState({
        err: 'has-' + val.type,
        msg: val.message
      });
    }
  }, {
    key: "setListenerState",
    value: function setListenerState(params) {
      var valueField = params.valueField,
          textField = params.textField,
          value = params.value;
      this.valueField = valueField;
      this.textField = textField;
      delete params.valueField;
      delete params.textField;
      delete params.value;
      this.setState(params);
      this.setValue(value);
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      var valueField = this.valueField;
      var textField = this.textField;
      var states = {};
      var keys = [];
      var texts = [];

      if (cb.utils.isArray(value)) {
        value.forEach(function (item) {
          if (!item) return;
          keys.push(item[valueField] + '');
          texts.push(item[textField] + '');
        });
      } else {
        if (value) {
          if (!cb.utils.isEmpty(value[valueField])) keys.push(value[valueField] + '');
          if (!cb.utils.isEmpty(value[textField])) texts.push(value[textField] + '');
        }
      }

      states['value'] = keys;
      states['text'] = texts.join(',');
      this.setState(states);
    }
  }, {
    key: "onSelect",
    value: function onSelect(value, option) {}
  }, {
    key: "onDeselect",
    value: function onDeselect(value) {}
  }, {
    key: "onSearch",
    value: function onSearch(value) {}
  }, {
    key: "onChange",
    value: function onChange(value) {
      if (cb.utils.isEmpty(value)) value = null;

      if (this.props.model) {
        this.props.model.select(value);
      }
    }
  }, {
    key: "handleBodyClick",
    value: function handleBodyClick(e) {
      document.body.removeEventListener('click', this.handleBodyClick);
      this.setState({
        focus: false
      });
      if (this.contains(this.refs.div, e.target)) return;
      if (this.props.model) this.props.model.execute('blur');
    }
  }, {
    key: "contains",
    value: function contains(elem, target) {
      if (elem === target) return true;
      if (!elem.children.length) return false;

      for (var i = 0, len = elem.children.length; i < len; i++) {
        if (this.contains(elem.children[i], target)) return true;
      }

      return false;
    }
  }, {
    key: "getOptions",
    value: function getOptions() {
      var valueField = this.valueField;
      var textField = this.textField;
      if (!this.state.dataSource) return;
      var rowStates = this.state.rowStates;
      var options = [];
      this.state.dataSource.forEach(function (item, index) {
        if (item.optGroup) {
          options.push(_react["default"].createElement(OptGroup, {
            key: index,
            label: item.optGroup.label
          }, item.optGroup.options.map(function (opt) {
            return _react["default"].createElement(Option, {
              key: opt.value,
              text: opt.text
            }, opt.text);
          })));
        } else {
          var key = item[valueField];
          var _text = item[textField];
          if (rowStates && rowStates[key] && rowStates[key].visible === false) return;
          options.push(_react["default"].createElement(Option, {
            key: key,
            text: _text
          }, _text));
        }
      });
      return options;
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (this.props.model) this.props.model.execute('blur');
    }
  }, {
    key: "baseControl",
    value: function baseControl() {
      var _this2 = this;

      var _this$state = this.state,
          readOnly = _this$state.readOnly,
          afterPopoverKey = _this$state.afterPopoverKey,
          showValue = _this$state.showValue,
          before = _this$state.before,
          after = _this$state.after,
          bottom = _this$state.bottom;
      var _baseControl = null;

      if (readOnly) {
        _baseControl = showValue ? (0, _text2["default"])(showValue) : (0, _text2["default"])(this.state.text);
      } else {
        var cProps = {
          dropdownClassName: this.props.dropdownClassName || (cb.rest.interMode === 'touch' ? 'select-touch-container' : "select_dropdown_".concat(this.state.cItemName || this.state.itemName)),
          value: showValue || this.state.value,
          defaultValue: this.state.defaultValue,
          multiple: this.state.multiple,
          combobox: this.state.combobox,
          allowClear: this.state.allowClear,
          tags: this.state.tags,
          placeholder: this.state.placeholder,
          notFoundContent: this.state.notFoundContent,
          dropdownMatchSelectWidth: this.state.dropdownMatchSelectWidth,
          size: this.state.size,
          onChange: this.onChange,
          onSelect: this.onSelect,
          onDeselect: this.onDeselect,
          onSearch: this.onSearch,
          optionFilterProp: this.state.optionFilterProp,
          optionLabelProp: this.state.optionLabelProp,
          disabled: this.state.disabled
        };
        var options = this.getOptions();
        _baseControl = _react["default"].createElement(_baseui.Select, (0, _extends2["default"])({}, cProps, {
          onBlur: function onBlur(e) {
            return _this2.handleBlur(e);
          },
          getPopupContainer: function getPopupContainer(triggerNode) {
            return document.getElementById('yxyweb-support-mount-popover') || document.body || triggerNode.parentNode;
          }
        }), options);
      }

      var AfterComName = null;

      if (!afterPopoverKey) {
        return !after && !bottom && !before ? _baseControl : _react["default"].createElement("div", {
          className: "input-bottom"
        }, _react["default"].createElement("div", null, before && _react["default"].createElement("span", {
          className: "input-before"
        }, before), _baseControl, after && _react["default"].createElement("span", {
          className: "input-after"
        }, after)), bottom && _react["default"].createElement("div", {
          className: "input-bottom-text"
        }, bottom));
      } else {
        AfterComName = _extend.extendComp.popover[afterPopoverKey];
        return _react["default"].createElement("div", {
          className: "input-bottom"
        }, _react["default"].createElement("div", {
          className: "control-flex"
        }, _baseControl, _react["default"].createElement(AfterComName, null)));
      }
    }
  }, {
    key: "getControl",
    value: function getControl() {
      var cShowCaption = this.props.cShowCaption;
      var title = !this.state.readOnly && this.state.bIsNull === false && cShowCaption ? _react["default"].createElement("label", null, _react["default"].createElement(_baseui.Icon, {
        type: "star"
      }), cShowCaption) : _react["default"].createElement("label", null, cShowCaption);
      var control = cShowCaption ? _react["default"].createElement(_label["default"], {
        control: this.baseControl(),
        title: title
      }) : this.baseControl();
      return control;
    }
  }, {
    key: "render",
    value: function render() {
      if (this.state.focus) document.body.addEventListener('click', this.handleBodyClick);
      var control = this.getControl();
      var style = this.state.visible ? {} : {
        display: "none"
      };
      var className = this.state.err + ' ' + this.state.className;

      if (this.state.isInFilterJSX) {
        className = className + " isInFilterJSX isInFilterJSX-Select";
      } else {}

      if (this.state.readOnly) className = className + " readonly";
      return _react["default"].createElement("div", {
        ref: "div",
        style: style,
        className: className
      }, control, _react["default"].createElement("div", {
        className: "ant-form-explain"
      }, this.state.msg));
    }
  }]);
  return SelectControl;
}(_react["default"].Component);

exports["default"] = SelectControl;
//# sourceMappingURL=select.js.map