@aliretail/react-materials-components
Version:
286 lines (234 loc) • 8.81 kB
JavaScript
import _TreeSelect from "@alifd/next/es/tree-select";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as React from 'react';
import cls from 'classnames';
import _ from 'lodash';
import Request from '@aliretail/react-universal-request';
import FormHelpExtra from "../FormHelpExtra";
var TreeSelector = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(TreeSelector, _React$Component);
function TreeSelector(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.COM_PREFIX = 'aliretail-tree-select';
_this.DEFAULT_LABEL_KEY = 'label';
_this.DEFAULT_VALUE_KEY = 'value';
_this.validate = function (isRequired) {
if (isRequired === void 0) {
isRequired = true;
}
var isEmptyValue = _this.isEmptyValue(); // 如果不是必填项并且内容为空则不做校验
if (!isRequired && isEmptyValue) {
_this.clearErrors();
return true;
}
var errorMsg = '';
if (isEmptyValue) errorMsg = '该字段不能为空'; // 进行除了判空以外的错误判断
if (errorMsg) {
_this.setErrors(errorMsg);
if (errorMsg) return errorMsg;
}
_this.clearErrors();
return true;
};
_this.state = {
dataSource: props.dataSource
};
if (_this.isSetRequest()) {
_this.setDSByApi();
}
return _this;
}
var _proto = TreeSelector.prototype;
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var requestConfigList = ['appCode', 'apiCode', 'url', 'extRequestParams'];
if (this.isSetRequest()) {
for (var i = 0; i < requestConfigList.length; i++) {
var key = requestConfigList[i];
if (key !== 'extRequestParams' && prevProps[key] !== this.props[key] || key === 'extRequestParams' && !_.eq(prevProps[key], this.props[key])) {
this.setDSByApi();
break;
}
}
}
if (prevProps.dataSource !== this.props.dataSource) {
this.setState({
dataSource: this.props.dataSource
});
}
}
/**
* 校验规则，提供外部使用 ref 方式调用
* @param isRequired 是否是必填项
*/
;
_proto.setErrors = function setErrors(error) {
if (!error) {
this.clearErrors();
return;
}
this.setState({
errorMsg: typeof error === 'string' ? error : typeof error === 'object' && JSON.stringify(error)
});
};
_proto.isEmptyValue = function isEmptyValue() {
var value = this.props.value;
return Array.isArray(value) && !value.length || !value;
};
_proto.clearErrors = function clearErrors() {
this.setState({
errorMsg: ''
});
};
_proto.isSetRequest = function isSetRequest() {
var _this$props = this.props,
appCode = _this$props.appCode,
apiCode = _this$props.apiCode,
url = _this$props.url;
return !!(appCode || apiCode || url);
};
_proto.setDSByApi = function setDSByApi(primaryValue) {
var _this2 = this;
return this.getDSByApi(primaryValue).then(function (res) {
_this2.setState({
dataSource: res
});
});
};
_proto.getDSByApi = function getDSByApi(primaryValue) {
var _ref;
if (!this.isSetRequest()) {
return Promise.reject('error: aliretail TreeSelector 未设置正确的请求参数');
}
var _this$props2 = this.props,
apiCode = _this$props2.apiCode,
appCode = _this$props2.appCode,
url = _this$props2.url,
extRequestParams = _this$props2.extRequestParams,
primaryValueKey = _this$props2.primaryValueKey;
return Request({
appCode: appCode,
apiCode: apiCode,
url: url,
data: _extends({}, primaryValue ? (_ref = {}, _ref[primaryValueKey] = primaryValue, _ref) : {}, extRequestParams),
method: 'POST',
type: 'json',
autoShowErrorMessage: true
}).then(function (data) {
return (data === null || data === void 0 ? void 0 : data.result) || [];
});
} // 将目标对象转换成组件需要的格式
;
_proto.getHandledDataSource = function getHandledDataSource(ds) {
var _this3 = this;
var deepFor = function deepFor(_ds) {
if (Array.isArray(_ds)) {
return _ds.map(function (item) {
return deepFor(item);
});
} else if (typeof _ds === 'object') {
return _extends({
children: _ds.children ? deepFor(_ds.children) : []
}, _this3.getItemDefault(_ds));
}
};
return deepFor(ds);
};
_proto.getItemDefault = function getItemDefault(ds) {
var _ds$children, _ref2;
var _this$props3 = this.props,
primaryLabelKey = _this$props3.primaryLabelKey,
primaryValueKey = _this$props3.primaryValueKey,
isGetAllDataSource = _this$props3.isGetAllDataSource;
return _ref2 = {}, _ref2[this.DEFAULT_VALUE_KEY] = ds === null || ds === void 0 ? void 0 : ds[primaryValueKey], _ref2[this.DEFAULT_LABEL_KEY] = ds === null || ds === void 0 ? void 0 : ds[primaryLabelKey], _ref2.disabled = (ds === null || ds === void 0 ? void 0 : ds.disabled) || false, _ref2.checkboxDisabled = (ds === null || ds === void 0 ? void 0 : ds.checkboxDisabled) || false, _ref2.isLeaf = typeof (ds === null || ds === void 0 ? void 0 : ds.isLeaf) !== 'undefined' ? ds.isLeaf : !(isGetAllDataSource && (_ds$children = ds.children) !== null && _ds$children !== void 0 && _ds$children.length) || false, _ref2;
};
_proto.onLoadData = /*#__PURE__*/function () {
var _onLoadData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
var _node$props, pos, value, childNodeDs, item;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (!(this.props.isGetAllDataSource && this.isSetRequest())) {
_context.next = 2;
break;
}
return _context.abrupt("return", Promise.resolve());
case 2:
if (!node.props.isLeaf) {
_context.next = 4;
break;
}
return _context.abrupt("return", Promise.resolve());
case 4:
_node$props = node.props, pos = _node$props.pos, value = _node$props.value;
_context.next = 7;
return this.getDSByApi(value);
case 7:
childNodeDs = _context.sent;
item = this.getItemByPos(pos);
item.children = childNodeDs;
this.setState(function (_ref3) {
var dataSource = _ref3.dataSource;
return {
dataSource: [].concat(dataSource)
};
});
return _context.abrupt("return", Promise.resolve());
case 12:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function onLoadData(_x) {
return _onLoadData.apply(this, arguments);
}
return onLoadData;
}();
_proto.getItemByPos = function getItemByPos(pos) {
return pos.split('-').slice(1).reduce(function (ret, num) {
return ret.children[num];
}, {
children: this.state.dataSource
});
};
_proto.render = function render() {
var _this$props4 = this.props,
className = _this$props4.className,
style = _this$props4.style,
followTrigger = _this$props4.followTrigger;
var _this$state = this.state,
dataSource = _this$state.dataSource,
errorMsg = _this$state.errorMsg;
var TreeSelectOwnerProps = _.omit(this.props, Object.keys(TreeSelector.defaultProps));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_TreeSelect, _extends({}, TreeSelectOwnerProps, {
className: cls(this.COM_PREFIX, className),
style: _extends({
width: 200
}, style),
treeLoadData: this.onLoadData.bind(this),
dataSource: this.getHandledDataSource(dataSource),
followTrigger: followTrigger
})), errorMsg && /*#__PURE__*/React.createElement(FormHelpExtra.Error, null, errorMsg));
};
return TreeSelector;
}(React.Component);
TreeSelector.defaultProps = {
dataSource: [],
primaryValueKey: 'value',
primaryLabelKey: 'label',
style: {},
appCode: '',
apiCode: '',
url: '',
className: '',
extRequestParams: {},
isGetAllDataSource: false,
followTrigger: true
};
export { TreeSelector as default };