375 lines
8.9 KiB
JavaScript
375 lines
8.9 KiB
JavaScript
var Form,
|
||
indexOf = [].indexOf;
|
||
import Input from './input.js';
|
||
import autoBind from 'react-autobind';
|
||
export default Form = function () {
|
||
class Form extends React.Component {
|
||
constructor(props) {
|
||
var isAjaxFast, ref, ref1;
|
||
super(props);
|
||
isAjaxFast = props.ajaxFast === true;
|
||
this.state = {
|
||
inputs: props.inputs != null ? props.inputs : props.inputs = [],
|
||
values: props.values != null ? props.values : props.values = [],
|
||
//onSubmit : props.onSubmit ?= null
|
||
ajaxFast: isAjaxFast,
|
||
ajaxInitData: (ref = props.ajaxInitData) != null ? ref : {},
|
||
loading: isAjaxFast,
|
||
controller: (ref1 = props.controller) != null ? ref1 : '',
|
||
hideSubmitAndClose: props.hideSubmitAndClose === true
|
||
}; //this.onSubmit = this.onSubmit.bind(this)
|
||
//this.onSubmitAndClose = this.onSubmitAndClose.bind(this)
|
||
//this.onCancel = this.onCancel.bind(this)
|
||
|
||
autoBind(this);
|
||
this.inputs = {};
|
||
this.form = null;
|
||
}
|
||
|
||
componentDidMount() {
|
||
var ajaxFast, ajaxInitData, controller, t;
|
||
t = this;
|
||
({
|
||
ajaxFast,
|
||
controller,
|
||
ajaxInitData
|
||
} = this.state);
|
||
|
||
if (ajaxFast) {
|
||
return API(controller + '/getCardInfo/', {
|
||
id: 0,
|
||
dataType: 'JSON',
|
||
init_data: ajaxInitData
|
||
}, function (data) {
|
||
return t.setState({
|
||
loading: false,
|
||
inputs: data.form
|
||
}, t.checkRules);
|
||
});
|
||
} else {
|
||
return this.checkRules();
|
||
}
|
||
}
|
||
|
||
onCancel() {
|
||
var base;
|
||
return typeof (base = this.props).onCancel === "function" ? base.onCancel() : void 0;
|
||
}
|
||
|
||
getValues() {
|
||
var i, res;
|
||
res = {};
|
||
|
||
for (i in this.inputs) {
|
||
res[i] = this.inputs[i].getValue();
|
||
}
|
||
|
||
return res;
|
||
}
|
||
|
||
onSubmitAndClose(e) {
|
||
var base, values;
|
||
|
||
if (e != null) {
|
||
e.preventDefault();
|
||
}
|
||
|
||
values = this.getValues();
|
||
|
||
if (typeof (base = this.props).onSubmitAndClose === "function") {
|
||
base.onSubmitAndClose({
|
||
form: this.form,
|
||
values
|
||
});
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
onSubmit(e) {
|
||
var base, values;
|
||
|
||
if (e != null) {
|
||
e.preventDefault();
|
||
}
|
||
|
||
values = this.getValues();
|
||
|
||
if (typeof (base = this.props).onSubmit === "function") {
|
||
base.onSubmit({
|
||
form: this.form,
|
||
values
|
||
});
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
onChange() {
|
||
return this.checkRules(name);
|
||
}
|
||
|
||
onKeyUp(name) {
|
||
return this.checkRules(name, 'onkeyup');
|
||
}
|
||
|
||
checkRule() {}
|
||
|
||
doRuleActions(actions, reverse = false) {
|
||
var action, input, name, results, x;
|
||
results = [];
|
||
|
||
for (name in actions) {
|
||
action = actions[name];
|
||
input = this.inputs[name];
|
||
|
||
if (input != null && input !== void 0) {
|
||
console.log('action', action);
|
||
|
||
switch (action.action) {
|
||
case "show":
|
||
if (reverse) {
|
||
input.hide();
|
||
} else {
|
||
input.show();
|
||
}
|
||
|
||
break;
|
||
|
||
case "hide":
|
||
if (reverse) {
|
||
input.show();
|
||
} else {
|
||
input.hide();
|
||
}
|
||
|
||
}
|
||
|
||
console.log('typeof', typeof action.js_function);
|
||
|
||
if (typeof action.js_function === 'string') {
|
||
x = eval(action.js_function);
|
||
console.log('XXXX', x);
|
||
results.push(x({
|
||
values: this.getValues(),
|
||
inputs: this.inputs,
|
||
form: this
|
||
}));
|
||
} else {
|
||
results.push(void 0);
|
||
}
|
||
} else {
|
||
results.push(void 0);
|
||
}
|
||
}
|
||
|
||
return results;
|
||
}
|
||
|
||
checkRules(_name = null, _operator = null) {
|
||
var _rules, name, results, rule, rules, value, values;
|
||
|
||
values = this.getValues();
|
||
|
||
if (this.rules === void 0) {
|
||
return null;
|
||
}
|
||
|
||
_rules = this.rules;
|
||
|
||
if (_name != null && _name !== void 0) {
|
||
_rules = {};
|
||
|
||
if (this.rules[_name] !== void 0) {
|
||
_rules[_name] = this.rules[_name];
|
||
}
|
||
}
|
||
|
||
results = [];
|
||
|
||
for (name in _rules) {
|
||
rules = _rules[name];
|
||
value = values[name];
|
||
results.push(function () {
|
||
var k, len, results1;
|
||
results1 = [];
|
||
|
||
for (k = 0, len = rules.length; k < len; k++) {
|
||
rule = rules[k];
|
||
|
||
if (_operator !== null) {
|
||
if (rule.operator !== _operator) {
|
||
continue;
|
||
}
|
||
}
|
||
|
||
switch (rule.operator) {
|
||
case "in":
|
||
results1.push(this.doRuleActions(rule.actions, indexOf.call(rule.value, value) < 0));
|
||
break;
|
||
|
||
case "onkeyup":
|
||
results1.push(this.doRuleActions(rule.actions));
|
||
break;
|
||
|
||
default:
|
||
results1.push(void 0);
|
||
}
|
||
}
|
||
|
||
return results1;
|
||
}.call(this));
|
||
}
|
||
|
||
return results;
|
||
}
|
||
|
||
addInput(key, data, name, value) {
|
||
var _this = this;
|
||
|
||
var hideSubmitAndClose;
|
||
({
|
||
hideSubmitAndClose
|
||
} = this.state);
|
||
return /*#__PURE__*/React.createElement(Input, {
|
||
key: key,
|
||
data: data,
|
||
value: value,
|
||
name: name,
|
||
ref: function (i) {
|
||
return _this.inputs[name] = i;
|
||
},
|
||
onSubmit: this.onSubmit,
|
||
onSubmitAndClose: this.onSubmitAndClose,
|
||
hideSubmitAndClose: hideSubmitAndClose,
|
||
onChange: this.onChange,
|
||
onKeyUp: this.onKeyUp
|
||
});
|
||
}
|
||
|
||
renderInput(v, index) {
|
||
var input, inputs, isHidden, j, name, options, ref, ref1, ref2, row_classes, value; // Если ничего не передано, то и вернём ничего.
|
||
|
||
if (v === null) {
|
||
return null;
|
||
}
|
||
|
||
row_classes = '';
|
||
inputs = [];
|
||
isHidden = false;
|
||
|
||
if (v[Form.VIEW] === Form.TITLE) {
|
||
return null;
|
||
}
|
||
|
||
if (v[Form.VIEW] === Form.RULES) {
|
||
this.rules = v[Form.RULES];
|
||
return null;
|
||
}
|
||
|
||
if (v[Form.VIEW] === Form.ROW) {
|
||
row_classes = (ref = v[Form.ROW_CLASSES]) != null ? ref : '';
|
||
|
||
if (v[Form.COLS] != null) {
|
||
for (j in v[Form.COLS]) {
|
||
input = v[Form.COLS][j];
|
||
|
||
if (input !== null) {
|
||
if (input[Form.VIEW] === Form.TITLE) {
|
||
inputs.push( /*#__PURE__*/React.createElement("div", {
|
||
class: "c"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
class: "h1"
|
||
}, input[Form.TITLE_TEXT])));
|
||
} else {
|
||
name = input[Form.KEY_VALUE];
|
||
|
||
if (name === void 0) {
|
||
options = input[Form.INPUT_OPT];
|
||
name = options[Input.NAME];
|
||
}
|
||
|
||
value = this.state.values[name];
|
||
inputs.push(this.addInput(j, input, name, value));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
name = (ref1 = (ref2 = v.name) != null ? ref2 : v[Form.KEY_VALUE]) != null ? ref1 : void 0;
|
||
value = v.value;
|
||
|
||
if (name === void 0) {
|
||
console.warn('В форме поле ввода без аттрибута name', v);
|
||
name = "input" + new Date().getTime();
|
||
}
|
||
|
||
if (value === void 0) {
|
||
value = this.state.values[name];
|
||
}
|
||
|
||
isHidden = v[Form.TYPE] === 1; // hidden type
|
||
|
||
inputs.push(this.addInput(index, v, name, value));
|
||
}
|
||
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
className: "row2 " + row_classes
|
||
}, inputs);
|
||
}
|
||
|
||
render() {
|
||
var _this2 = this;
|
||
|
||
var inputs, loading; //console.log('render',this.state.inputs)
|
||
|
||
({
|
||
loading
|
||
} = this.state);
|
||
|
||
if (loading) {
|
||
return /*#__PURE__*/React.createElement("div", null, "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430...");
|
||
}
|
||
|
||
inputs = this.state.inputs.map(this.renderInput.bind(this));
|
||
return /*#__PURE__*/React.createElement("form", {
|
||
onSubmit: this.onSubmit,
|
||
ref: function (i) {
|
||
return _this2.form = i;
|
||
}
|
||
}, inputs, /*#__PURE__*/React.createElement("div", {
|
||
className: "res"
|
||
}));
|
||
}
|
||
|
||
}
|
||
|
||
;
|
||
Form.VALUES = 1;
|
||
Form.INPUTS = 2;
|
||
Form.INPUT = 3;
|
||
Form.KEY_VALUE = 4;
|
||
Form.TYPE = 5;
|
||
Form.LABEL = 6;
|
||
Form.VIEW = 7;
|
||
Form.INPUT_OPT = 8;
|
||
Form.ON_SUBMIT = 9;
|
||
Form.ROW = 10;
|
||
Form.ROW_CLASSES = 11;
|
||
Form.COL_CLASSES = 12;
|
||
Form.COLS = 13;
|
||
Form.CONTROLLER = 14;
|
||
Form.ACTION = 15;
|
||
Form.COL_CLASSES_ALL_FORCE = 16;
|
||
Form.TITLE = 17;
|
||
Form.TITLE_TEXT = 18;
|
||
Form.BUTTONS = 19;
|
||
Form.BUTTON = 20;
|
||
Form.INPUT_ALL_THEME_FORCE = 21;
|
||
Form.FORM_WRAP = 22;
|
||
Form.RULES = 23;
|
||
return Form;
|
||
}.call(this);
|
||
window.Form = Form;
|
||
//# sourceMappingURL=form.js.map
|