@aliretail/react-materials-components
Version:
306 lines (240 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _treeSelect = _interopRequireDefault(require("@alifd/next/lib/tree-select"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = _interopRequireDefault(require("lodash"));
var _reactUniversalRequest = _interopRequireDefault(require("@aliretail/react-universal-request"));
var _FormHelpExtra = _interopRequireDefault(require("../FormHelpExtra"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var TreeSelector = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(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' && !_lodash["default"].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 (0, _reactUniversalRequest["default"])({
appCode: appCode,
apiCode: apiCode,
url: url,
data: (0, _extends2["default"])({}, 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 (0, _extends2["default"])({
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 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(node) {
var _node$props, pos, value, childNodeDs, item;
return _regenerator["default"].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 = _lodash["default"].omit(this.props, Object.keys(TreeSelector.defaultProps));
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_treeSelect["default"], (0, _extends2["default"])({}, TreeSelectOwnerProps, {
className: (0, _classnames["default"])(this.COM_PREFIX, className),
style: (0, _extends2["default"])({
width: 200
}, style),
treeLoadData: this.onLoadData.bind(this),
dataSource: this.getHandledDataSource(dataSource),
followTrigger: followTrigger
})), errorMsg && /*#__PURE__*/React.createElement(_FormHelpExtra["default"].Error, null, errorMsg));
};
return TreeSelector;
}(React.Component);
exports["default"] = TreeSelector;
TreeSelector.defaultProps = {
dataSource: [],
primaryValueKey: 'value',
primaryLabelKey: 'label',
style: {},
appCode: '',
apiCode: '',
url: '',
className: '',
extRequestParams: {},
isGetAllDataSource: false,
followTrigger: true
};