ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
157 lines (156 loc) • 7.19 kB
JavaScript
/**
* 组件名 form 通用布局文件
* 作者 Alex
* 创建日期 2017-03-30
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { DebounceClass } from 'basic-helper';
import { Button } from '../button';
import Alert from '../alert/alert';
import Toast from '../toast/toast';
import FormGenerator from './form-generator';
import { UkeComponent } from '../utils/uke-component';
var delayExec = (new DebounceClass()).exec;
var FormLayout = /** @class */ (function (_super) {
__extends(FormLayout, _super);
function FormLayout() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._handleClickBtn = function (formBtns) {
var actingRef = formBtns.actingRef, _a = formBtns.preCheck, preCheck = _a === void 0 ? true : _a, action = formBtns.action;
_this.__changedDesc = false;
var _action = function () {
action(_this.formHelper, actingRef);
};
if (preCheck) {
if (_this.preCheck()) {
_action();
}
}
else {
_action();
}
};
_this.saveFormRef = function (e) {
if (!e)
return;
_this.formHelper = e;
_this.clearValue = e.clearValue;
};
_this.getDefaultBtn = function () {
var _a = _this.props, onSubmit = _a.onSubmit, _b = _a.btnText, btnText = _b === void 0 ? _this.$T_UKE('确定') : _b;
return {
action: onSubmit,
text: btnText,
color: 'theme',
type: 'button',
className: ''
};
};
return _this;
}
FormLayout.prototype.shouldComponentUpdate = function (nextProps, nextState, nextContext) {
var resDesc = nextProps.resDesc;
if (!this.__changedDesc && resDesc && this.props.resDesc !== resDesc) {
this.__changedDesc = true;
this.showResDesc(nextProps);
}
return true;
};
FormLayout.prototype.showResDesc = function (resInfo) {
!!resInfo.resDesc && this.toast && this.toast.show(resInfo.resDesc, resInfo.hasErr ? 'error' : 'success');
};
FormLayout.prototype.showDesc = function (resInfo) {
this.showResDesc(resInfo);
};
FormLayout.prototype.preCheck = function () {
if (!this.formHelper)
return false;
var _a = this.formHelper.checkForm(), isPass = _a.isPass, desc = _a.desc;
if (!isPass) {
this.showResDesc({
resDesc: desc + this.$T_UKE('必填|选'),
hasErr: true
});
}
return isPass;
};
FormLayout.prototype.render = function () {
var _this = this;
var _a = this.props, tipInfo = _a.tipInfo, btnConfig = _a.btnConfig, formBtns = _a.formBtns, childrenBeforeForm = _a.childrenBeforeForm, childrenAfterForm = _a.childrenAfterForm, childrenBeforeBtn = _a.childrenBeforeBtn, onSubmit = _a.onSubmit, other = __rest(_a, ["tipInfo", "btnConfig", "formBtns", "childrenBeforeForm", "childrenAfterForm", "childrenBeforeBtn", "onSubmit"]);
var formClassName = this.props.className;
var formType = '';
var onSubmitForGen;
if (btnConfig) {
delayExec(function () {
console.warn('请将 btnConfig 改为 formBtns');
}, 300);
}
var _btnConfig = formBtns || btnConfig || [this.getDefaultBtn()];
var tipDOM = tipInfo ? (React.createElement(Alert, __assign({}, tipInfo))) : null;
var btnGroup = _btnConfig.map(function (btn, idx) {
var action = btn.action, text = btn.text, _a = btn.className, className = _a === void 0 ? 'mr5' : _a, color = btn.color, _b = btn.actingRef, actingRef = _b === void 0 ? 'loading' : _b, _c = btn.type, type = _c === void 0 ? 'button' : _c, preCheck = btn.preCheck, otherForBtn = __rest(btn, ["action", "text", "className", "color", "actingRef", "type", "preCheck"]);
var isBtnLoading = _this.props[actingRef];
var isActive = !!action && !isBtnLoading;
var key = text + actingRef;
var isSubmit = type === 'submit';
if (isSubmit) {
if (formType === 'submit')
console.warn('定义了多个 type 为 submit 的按钮');
formType = 'submit';
onSubmitForGen = function (e) {
_this._handleClickBtn(btn);
};
}
return (React.createElement(Button, __assign({}, otherForBtn, { key: key, disabled: !isActive, text: isBtnLoading ? text + _this.$T_UKE('中') + "..." : text, loading: isBtnLoading, type: type, color: color, className: className, onClick: function (e) { return !isSubmit && _this._handleClickBtn(btn); } })));
});
return (React.createElement("div", { className: "form-layout" + (formClassName ? " " + formClassName : '') },
React.createElement(Toast, { ref: function (e) { _this.toast = e; } }),
tipDOM,
childrenBeforeForm,
React.createElement(FormGenerator, __assign({}, other, {
// type={formType}
onSubmit: onSubmitForGen, ref: this.saveFormRef }),
childrenBeforeBtn,
React.createElement("div", { className: "form-group" },
React.createElement("span", { className: "control-label" }),
React.createElement("div", { className: "form-btn-group" }, btnGroup)),
childrenAfterForm)));
};
return FormLayout;
}(UkeComponent));
export default FormLayout;