ming-demo3
Version:
mdf metaui web
260 lines (233 loc) • 9.22 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactDom = require("react-dom");
var _baseui = require("@mdf/baseui");
var _label = _interopRequireDefault(require("./label"));
var _text = _interopRequireDefault(require("./text"));
var CascaderControl = function (_React$Component) {
(0, _inherits2["default"])(CascaderControl, _React$Component);
function CascaderControl(props) {
var _this;
(0, _classCallCheck2["default"])(this, CascaderControl);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(CascaderControl).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBodyClick", function (e) {
document.body.removeEventListener('click', _this.handleBodyClick);
if (_this.contains(_this.refs.div, e.target)) return;
if (e.target && cb.dom((0, _reactDom.findDOMNode)(e.target)).parents('.ant-cascader-menus').length) return;
_this.props.model.execute('blur');
});
_this.keyField = props.keyField || '';
_this.titleField = props.titleField || '';
_this.state = {
bIsNull: props.bIsNull,
options: props.options,
defaultValue: props.defaultValue,
value: props.value,
style: props.style || {},
className: props.className || '',
popupClassName: props.popupClassName || '',
popupPlacement: props.popupPlacement || 'bottomLeft',
placeholder: props.placeholder || '',
size: props.size || 'default',
disabled: props.disabled || false,
allowClear: props.allowClear || true,
expandTrigger: props.expandTrigger || 'hover',
changeOnSelect: props.changeOnSelect || false,
showSearch: props.showSearch || false,
notFoundContent: props.notFoundContent || '暂无数据！',
dataSource: props.dataSource || []
};
_this.CascaderOnChange = _this.CascaderOnChange.bind((0, _assertThisInitialized2["default"])(_this));
_this.displayRender = _this.displayRender.bind((0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(CascaderControl, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.model) this.props.model.addListener(this);
}
}, {
key: "setListenerState",
value: function setListenerState(params) {
var keyField = params.keyField,
titleField = params.titleField,
childrenField = params.childrenField,
value = params.value;
this.keyField = keyField;
this.titleField = titleField;
this.childrenField = childrenField;
delete params.keyField;
delete params.titleField;
delete params.childrenField;
delete params.value;
this.setState(params);
if (value) this.setValue(value);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (this.props.model) this.props.model.addListener(this);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.props.model) this.props.model.removeListener(this);
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (nextProps.model) {
if (!this.props.model) {
nextProps.model.addListener(this);
}
} else {
if (this.props.model) {
this.props.model.removeListener(this);
} else {
this.keyField = nextProps.keyField;
this.titleField = nextProps.titleField;
this.setState({
value: nextProps.value,
dataSource: nextProps.dataSource
});
}
}
}
}, {
key: "CascaderOnChange",
value: function CascaderOnChange(value, selectedOptions) {
if (this.props.model) this.props.model.select(value);
if (this.props.onSelect) this.props.onSelect(value, selectedOptions);
}
}, {
key: "displayRender",
value: function displayRender(label, selectedOptions) {
return label.join('/');
}
}, {
key: "setDataSource",
value: function setDataSource(dataSource) {
this.setState({
dataSource: dataSource
});
}
}, {
key: "setValue",
value: function setValue(value) {
var keyField = this.keyField;
var titleField = this.titleField;
var states = {};
var keys = [];
var texts = [];
value.forEach(function (item) {
if (!item) return;
keys.push(item[keyField]);
texts.push(item[titleField]);
});
states['value'] = keys;
states['text'] = texts.join('/');
this.setState(states);
}
}, {
key: "contains",
value: function contains(elem, target) {
if (elem === target) return true;
if (!elem || !elem.children || !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: "recursive",
value: function recursive(dataSource, options, keyField, titleField, childrenField) {
var _this2 = this;
dataSource.forEach(function (item) {
var option = {
value: item[keyField],
label: item[titleField]
};
if (item[childrenField]) {
option.children = [];
_this2.recursive(item[childrenField], option.children, keyField, titleField, childrenField);
}
options.push(option);
});
}
}, {
key: "baseControl",
value: function baseControl() {
var _this3 = this;
if (this.state.readOnly) return (0, _text["default"])(this.state.text);
var options = [];
var dataSource = this.state.dataSource;
if (dataSource && dataSource.length) this.recursive(dataSource, options, this.keyField, this.titleField, this.childrenField);
return _react["default"].createElement(_baseui.Cascader, {
getPopupContainer: function getPopupContainer(triggerNode) {
return document.getElementById('yxyweb-support-mount-popover') || document.body || triggerNode.parentNode;
},
options: options,
defaultValue: this.state.defaultValue,
value: this.state.value,
style: this.state.style,
className: this.state.className,
popupClassName: this.state.popupClassName,
popupPlacement: this.state.popupPlacement,
placeholder: this.state.placeholder,
size: this.state.size,
disabled: this.state.disabled,
allowClear: this.state.allowClear,
expandTrigger: this.state.expandTrigger,
changeOnSelect: this.state.changeOnSelect,
showSearch: this.state.showSearch,
notFoundContent: this.state.notFoundContent,
onChange: function onChange(value, selectedOptions) {
return _this3.CascaderOnChange(value, selectedOptions);
},
displayRender: function displayRender(label, selectedOptions) {
return _this3.displayRender(label, selectedOptions);
}
});
}
}, {
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() {
document.body.addEventListener('click', this.handleBodyClick);
var control = this.getControl();
return _react["default"].createElement("div", {
ref: "div",
className: this.state.err
}, control, _react["default"].createElement("div", {
className: "ant-form-explain"
}, this.state.msg));
}
}]);
return CascaderControl;
}(_react["default"].Component);
exports["default"] = CascaderControl;
//# sourceMappingURL=cascader.js.map