ukelli-ui
Version:
[](https://travis-ci.org/ukelli/ukelli-ui) [](https://packagephobia.now.sh/result?p=ukelli-ui)
242 lines (189 loc) • 9.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _buttonNormal = _interopRequireDefault(require("../button/button-normal"));
var _tipPanel = _interopRequireDefault(require("../tip-panel/tip-panel"));
var _toast = _interopRequireDefault(require("../toast/toast"));
var _formGenerator = _interopRequireDefault(require("./form-generator"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
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 _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 _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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
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; }
/**
* 默认一个按钮，可以配置多个按钮，
* btnConfig: [{
* action: func,
* text: string,
* className: string
* }]
* 一旦设定 btnConfig, onSubmit btnText className 将会失效
*/
var FormLayout =
/*#__PURE__*/
function (_Component) {
_inherits(FormLayout, _Component);
function FormLayout() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, FormLayout);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(FormLayout)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "gm", window.$UKE.getUkeKeyMap);
return _this;
}
_createClass(FormLayout, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var resDesc = nextProps.resDesc;
if (resDesc && this.props.resDesc !== resDesc) {
this.showResDesc(nextProps);
}
}
}, {
key: "showResDesc",
value: function showResDesc(resInfo) {
!!resInfo.resDesc && this.toast && this.toast.show(resInfo.resDesc, resInfo.hasErr ? 'error' : 'success');
}
}, {
key: "checkForm",
value: function checkForm() {
var _this$formHelper$chec = this.formHelper.checkForm(),
isPass = _this$formHelper$chec.isPass,
desc = _this$formHelper$chec.desc,
ref = _this$formHelper$chec.ref;
if (!isPass) {
this.showResDesc({
resDesc: desc + this.gm('必须'),
hasErr: true
});
}
return isPass;
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
tipInfo = _this$props.tipInfo,
btnConfig = _this$props.btnConfig,
_this$props$className = _this$props.className,
className = _this$props$className === void 0 ? '' : _this$props$className,
isVertical = _this$props.isVertical,
isMobile = _this$props.isMobile,
showInputTitle = _this$props.showInputTitle,
childrenBeforeForm = _this$props.childrenBeforeForm,
childrenAfterForm = _this$props.childrenAfterForm,
childrenBeforeBtn = _this$props.childrenBeforeBtn,
_this$props$formOptio = _this$props.formOptions,
formOptions = _this$props$formOptio === void 0 ? [] : _this$props$formOptio,
_this$props$btnText = _this$props.btnText,
btnText = _this$props$btnText === void 0 ? this.gm('确定提交') : _this$props$btnText,
onSubmit = _this$props.onSubmit,
onChange = _this$props.onChange;
var _btnConfig = btnConfig ? btnConfig : [{
action: onSubmit,
text: btnText,
className: 'theme'
}];
var tipDOM = tipInfo ? _react.default.createElement(_tipPanel.default, tipInfo) : null;
var btnGroup = _btnConfig.map(function (btn, idx) {
var action = btn.action,
text = btn.text,
className = btn.className,
_btn$actingRef = btn.actingRef,
actingRef = _btn$actingRef === void 0 ? 'loading' : _btn$actingRef;
var isBtnLoading = _this2.props[actingRef];
var isActive = !!action && !isBtnLoading;
return _react.default.createElement("span", {
className: "mr5",
key: idx
}, _react.default.createElement(_buttonNormal.default, {
disabled: !isActive,
text: isBtnLoading ? text + _this2.gm('中') + '...' : text,
loading: isBtnLoading,
className: className,
onClick: function onClick(e) {
if (_this2.checkForm()) {
action(_this2.formHelper, actingRef);
}
}
}));
});
return _react.default.createElement("div", {
className: "form-layout" + (className ? ' ' + className : '')
}, _react.default.createElement(_toast.default, {
ref: function ref(toast) {
return _this2.toast = toast;
}
}), tipDOM, childrenBeforeForm, _react.default.createElement(_formGenerator.default, {
onChange: onChange,
isVertical: isVertical,
isMobile: isMobile,
showInputTitle: showInputTitle,
formOptions: formOptions,
ref: function ref(e) {
return _this2.formHelper = e;
}
}, childrenBeforeBtn, _react.default.createElement("div", {
className: "form-group"
}, _react.default.createElement("span", {
className: "control-label"
}), btnGroup), childrenAfterForm));
}
}]);
return FormLayout;
}(_react.Component);
exports.default = FormLayout;
_defineProperty(FormLayout, "propTypes", {
/** FormGenerator 的配置 */
formOptions: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
/** 只有一个操作按钮的 sumbit 回调 */
onSubmit: _propTypes.default.func,
/** FormGenerator 的变化回调 */
onChange: _propTypes.default.func,
/** 只有一个按钮时传入的按钮 text */
btnText: _propTypes.default.string,
/** FormLayout 的 className */
className: _propTypes.default.string,
/** 是否已准备好渲染 */
ready: _propTypes.default.bool,
/** 传入 TipPanel 控件的参数 */
tipInfo: _propTypes.default.shape({
text: _propTypes.default.any,
texts: _propTypes.default.array,
title: _propTypes.default.any
}),
/** 可以配置一个或多个操作按钮 */
btnConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
action: _propTypes.default.func,
text: _propTypes.default.string,
/** 记录该按钮的状态 */
actingRef: _propTypes.default.string
})),
/** 是否竖立显示 */
isVertical: _propTypes.default.bool,
/** 是否移动端 */
isMobile: _propTypes.default.bool,
/** 操作的返回是否有错误 */
hasErr: _propTypes.default.bool,
/** 操作返回的消息 */
resDesc: _propTypes.default.string,
/** 在 form 之前插入的 children */
childrenBeforeForm: _propTypes.default.any,
/** 在 form 之后插入的 children */
childrenAfterForm: _propTypes.default.any
});