ukelli-ui
Version:
ukelli-ui 是基于 React 的 UI 库，提供简约和功能齐全的组件，可高度定制的组件接口，灵活的配置，提供给开发者另一种开发思路，也致力于尝试不同的组件使用和开发方向。
327 lines (274 loc) • 13.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _basicHelper = require("basic-helper");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var rewiteMsg = {
checkResIsSuccess: 'rewrite this.checkResIsSuccess',
defaultStateAfterPost: 'rewrite this.defaultStateAfterPost',
wrapDataFilter: 'rewrite this.wrapDataFilter',
request: "\n rewrite this async this.request:\n\n class A extends ActionBasic {\n async request(sendData) {\n return $request.send(reqObj);\n }\n }\n "
};
/**
* 提供基础的 react state 管理方式
* 与业务分离，提供一些 hook 接口，把每一步都拆分为可处理的流程，便于根据不同以为定制
* 提供 log 在开发环境时提示的功能
*/
var StateManager =
/*#__PURE__*/
function (_Component) {
_inherits(StateManager, _Component);
function StateManager() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, StateManager);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StateManager)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "defaultPaging", {});
_defineProperty(_assertThisInitialized(_this), "state", {
loading: false,
// 是否加载中
submiting: false,
// 是否提交中
querying: false,
// 是否查询中
ready: true,
// 组件是否已经准备，主要是用于需要异步获取查询条件或表单数据的表单与表格
hasErr: false,
// 是否有错误
resDesc: '',
// 返回的描述
pagingInfo: {},
// 分页信息
resData: {} // 返回的数据
});
return _this;
}
_createClass(StateManager, [{
key: "log",
value: function log() {
var _console;
process.env.NODE_ENV == 'development' ? (_console = console).log.apply(_console, arguments) : '';
}
}, {
key: "setModal",
value: function setModal(modalSetting) {
var onNavigate = this.props.onNavigate;
onNavigate && onNavigate({
type: 'MODAL',
modalSetting: modalSetting
});
}
}, {
key: "toBasicUnitMoney",
value: function toBasicUnitMoney(money) {
return $GH.ToBasicUnitMoney(money);
}
}, {
key: "closeModal",
value: function closeModal() {
var onNavigate = this.props.onNavigate;
onNavigate && onNavigate({
type: 'CLOSE_MODAL'
});
}
}, {
key: "getStateBeforePost",
value: function getStateBeforePost(params, actingRef) {
var _objectSpread2;
return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, actingRef, true), _defineProperty(_objectSpread2, "hasErr", false), _defineProperty(_objectSpread2, "resDesc", ''), _objectSpread2), params);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.__unmount = true;
}
}, {
key: "basicUnitFilter",
value: function basicUnitFilter(data) {
var _this2 = this;
var listRefs = ['TransAmount'];
listRefs.forEach(function (ref) {
if (data[ref]) {
data[ref] = _this2.toBasicUnitMoney(data.TransAmount);
}
});
return data;
}
}, {
key: "delayExec",
value: function delayExec() {
var _this$_delayExec;
if (!this._delayExec) this._delayExec = new _basicHelper.DebounceClass();
return (_this$_delayExec = this._delayExec).exec.apply(_this$_delayExec, arguments);
}
}, {
key: "defaultStateAfterPost",
value: function defaultStateAfterPost(res, sendOptions) {
this.log(rewiteMsg.defaultStateAfterPost);
return {};
}
}, {
key: "stateSetter",
value: function stateSetter(state) {
if (!this.__unmount) this.setState(state);
}
}, {
key: "request",
value: function () {
var _request = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee2() {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
// const sendDataRes = await $MN.$request.send({sendData});
this.log(rewiteMsg.request);
return _context2.abrupt("return", _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
return _context.abrupt("return");
case 1:
case "end":
return _context.stop();
}
}
}, _callee);
}))());
case 2:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function request() {
return _request.apply(this, arguments);
}
return request;
}()
}, {
key: "checkResIsSuccess",
value: function checkResIsSuccess() {
this.log(rewiteMsg.checkResIsSuccess);
return true;
}
}, {
key: "_checkResIsSuccess",
value: function _checkResIsSuccess(res, onSuccessCallback) {
// return res.Header.ErrCode.Code == '0';
var _this$checkResIsSucce = this.checkResIsSuccess(res),
success = _this$checkResIsSucce.success,
data = _this$checkResIsSucce.data;
if (success) (0, _basicHelper.Call)(onSuccessCallback, data);
return success;
}
}, {
key: "wrapDataFilter",
value: function wrapDataFilter(sendData) {
this.log(rewiteMsg.wrapDataFilter);
return sendData;
}
}, {
key: "_sendData",
value: function () {
var _sendData2 = _asyncToGenerator(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee3(options) {
var method, _options$data, data, _options$stateBeforeP, stateBeforePost, _options$stateAfterPo, stateAfterPostHook, _options$actingRef, actingRef, onSuccess, onRes, sendData, sendDataRes;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
/**
* 参数说明
* method@String 请求的接口
* ---------------------------------
* data@Object 请求的 Data，一般由继承 Helper 组件包装成功后传入，
* 参见 action-form-basic || action-report-basic
* action-form-basic 处理大部分表单的统一验证
* action-report-basic 处理大部分报表的查询条件业务
* ---------------------------------
* stateBeforePost@Object 追加 state 到请求发起前的 setState
* stateAfterPostHook@func 追加 state 到请求完成后的 setState，必须返回一个 Object
* actingRef@String 请求状态的标记为，默认是 loading，兼容记录多个接口的请求状态
* onSuccess@Func 业务请求成功的 callback
* onRes@Func 发起的请求成功，包括业务错误
*/
method = options.method, _options$data = options.data, data = _options$data === void 0 ? {} : _options$data, _options$stateBeforeP = options.stateBeforePost, stateBeforePost = _options$stateBeforeP === void 0 ? {} : _options$stateBeforeP, _options$stateAfterPo = options.stateAfterPostHook, stateAfterPostHook = _options$stateAfterPo === void 0 ? function (res) {} : _options$stateAfterPo, _options$actingRef = options.actingRef, actingRef = _options$actingRef === void 0 ? 'loading' : _options$actingRef, onSuccess = options.onSuccess, onRes = options.onRes;
/**
* 第一步
* 设置对应的 loading state
*/
this.stateSetter(this.getStateBeforePost(stateBeforePost, actingRef));
/**
* 第二步
* 包装成 uke request 的 sendData
*/
sendData = _objectSpread({}, method ? {
method: method
} : {}, {
data: this.wrapDataFilter(data)
});
/**
* 第三步
* 通过自身接口发送数据
*/
_context3.next = 5;
return this.request({
sendData: sendData
});
case 5:
sendDataRes = _context3.sent;
/**
* 第四步
* 发送成功后的回调处理
* 在 setState 之前执行 stateAfterPostHook
*
*/
(0, _basicHelper.Call)(onRes, sendDataRes);
this._checkResIsSuccess(sendDataRes, onSuccess);
this.stateSetter(_objectSpread({}, this.defaultStateAfterPost(sendDataRes, options), (0, _basicHelper.Call)(stateAfterPostHook, sendDataRes)));
case 9:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
}));
function _sendData(_x) {
return _sendData2.apply(this, arguments);
}
return _sendData;
}()
}]);
return StateManager;
}(_react.Component);
exports["default"] = StateManager;
_defineProperty(StateManager, "propTypes", {
onNavigate: _propTypes["default"].func
});