ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
94 lines (93 loc) • 4.7 kB
JavaScript
/* eslint-disable no-prototype-builtins */
/* eslint-disable consistent-return */
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 __());
};
})();
import React from 'react';
import { UUID, Call } from 'basic-helper';
import classnames from 'classnames';
import FormFilterHelper from './form-filter';
var hrDivide = ['-', 'hr'];
var isInput = function (type) { return ['input', 'password'].indexOf(type) !== -1; };
var FormGenerator = /** @class */ (function (_super) {
__extends(FormGenerator, _super);
function FormGenerator(props) {
var _this = _super.call(this, props) || this;
_this.formItemRefs = {};
_this.showDesc = function (checkRes) {
var ref = checkRes.ref, isPass = checkRes.isPass;
for (var itemRef in _this.formItemRefs) {
if (_this.formItemRefs.hasOwnProperty(itemRef)) {
var currFormItem = _this.formItemRefs[itemRef];
currFormItem.classList.remove('error');
if (itemRef === ref && !isPass) {
_this.formItemRefs[ref].classList.add('error');
}
}
}
};
_this.ID = props.id || UUID();
return _this;
}
FormGenerator.prototype.render = function () {
var _this = this;
var _a = this.props, formOptions = _a.formOptions, children = _a.children, isMobile = _a.isMobile, showInputTitle = _a.showInputTitle, className = _a.className, onSubmit = _a.onSubmit;
var _showInputTitle = typeof showInputTitle == 'undefined' ? !isMobile : showInputTitle;
return formOptions && formOptions.length > 0 ? (React.createElement("form", { onSubmit: function (e) {
e.preventDefault();
Call(onSubmit, _this.value);
}, className: (isMobile ? 'vertical-form' : 'horizontal-form') + " form-container " + className },
formOptions.map(function (option, idx) {
if (!option)
return;
if (typeof option === 'string') {
if (hrDivide.indexOf(option) !== -1) {
return (React.createElement("hr", null));
}
return (React.createElement("h3", { className: "form-group-title", key: idx },
React.createElement("span", { className: "inner-text" }, option)));
}
var isCurrInput = isInput(option.type);
var showFormTitle = !isCurrInput ? true : _showInputTitle;
var _con = _this.wrapConditionTitle(option);
if (isCurrInput && _showInputTitle) {
_con.showTitle = false;
}
var itemClassName = option.className;
var itemRef = _con.ref || (_con.refs ? _con.refs[0] : 'q');
var isRequired = _con.required;
var highlightDOM = isRequired && (React.createElement("span", { className: "form-desc" },
React.createElement("span", { className: "highlight" }, "*")));
var formDescDOM = _con.desc && (React.createElement("span", { className: "form-desc" }, _con.desc));
var classes = classnames('form-group', _con.type, itemClassName, isRequired && 'required');
return (React.createElement("div", { key: itemRef + "_" + _this.ID, ref: function (e) {
if (e)
_this.formItemRefs[itemRef] = e;
}, className: classes },
showFormTitle ? (React.createElement("span", { className: "control-label" },
highlightDOM,
_con.tipsDOM,
_con._title)) : null,
_this.greneratFormDOM(_con),
formDescDOM));
}),
children)) : React.createElement("span", null);
};
FormGenerator.defaultProps = {
onSubmit: function () { },
className: 'animate-input-title',
isMobile: false
};
return FormGenerator;
}(FormFilterHelper));
export default FormGenerator;