437 lines
13 KiB
JavaScript
437 lines
13 KiB
JavaScript
var INPUT_TYPE, Input;
|
||
import '../select.js';
|
||
import '../datepicker.js';
|
||
import '../contacts.js';
|
||
import '../switchios.js';
|
||
import '../ImagePicker.js';
|
||
import '../PropValues.js';
|
||
import '../ShopItemPropValues.js';
|
||
import '../CategoryChoose.js';
|
||
import '../textarea.js';
|
||
import autoBind from 'react-autobind';
|
||
|
||
window.INPUT_TYPE = INPUT_TYPE = function () {
|
||
class INPUT_TYPE {}
|
||
|
||
;
|
||
INPUT_TYPE.HIDDEN = 1;
|
||
INPUT_TYPE.TEXT = 2;
|
||
INPUT_TYPE.SELECT = 3;
|
||
INPUT_TYPE.DATE = 4;
|
||
INPUT_TYPE.SELECT_SEARCH = 5;
|
||
INPUT_TYPE.SUBMIT = 6;
|
||
INPUT_TYPE.SELECT_MULTI = 7;
|
||
INPUT_TYPE.DATE_RANGE_TIME = 8;
|
||
INPUT_TYPE.DATE_TIME = 9;
|
||
INPUT_TYPE.TEXTAREA = 10;
|
||
INPUT_TYPE.CHECKBOX = 11;
|
||
INPUT_TYPE.YANDEX_COUNTRY_CITY = 12;
|
||
INPUT_TYPE.SWITCH_IOS = 13;
|
||
INPUT_TYPE.COLOR_PICKER = 14;
|
||
INPUT_TYPE.AVATAR_PICKER = 15;
|
||
INPUT_TYPE.SELECT_AJAX = 16;
|
||
INPUT_TYPE.CANCEL = 17;
|
||
INPUT_TYPE.EMAIL = 18;
|
||
INPUT_TYPE.SCRIPT = 19;
|
||
INPUT_TYPE.HTML = 20;
|
||
INPUT_TYPE.IMAGE = 21;
|
||
INPUT_TYPE.RADIO = 22;
|
||
INPUT_TYPE.VIDEO = 23;
|
||
INPUT_TYPE.CONTACTS = 24;
|
||
INPUT_TYPE.SUBMIT_AND_CLOSE = 25;
|
||
INPUT_TYPE.SHOP_ITEM_VALUES = 26;
|
||
INPUT_TYPE.CATEGORY_CHOOSE = 27;
|
||
INPUT_TYPE.PASSWORD = 28;
|
||
INPUT_TYPE.DSEK_FILES = 30;
|
||
INPUT_TYPE.KPTRACKING_FILE = 31;
|
||
INPUT_TYPE.TIME = 34; // Поле ввода выбора вложенных категорий
|
||
|
||
return INPUT_TYPE;
|
||
}.call(this);
|
||
|
||
export default window.Input = Input = function () {
|
||
class Input extends React.Component {
|
||
constructor(props) {
|
||
var ref;
|
||
super(props);
|
||
this.state = {
|
||
data: props.data != null ? props.data : props.data = {},
|
||
value: props.value != null ? props.value : props.value = null,
|
||
show: true,
|
||
name: (ref = props.name) != null ? ref : ''
|
||
};
|
||
this.input = null;
|
||
this.type = null;
|
||
autoBind(this);
|
||
}
|
||
|
||
show() {
|
||
return this.setState({
|
||
show: true
|
||
});
|
||
}
|
||
|
||
hide() {
|
||
return this.setState({
|
||
show: false
|
||
});
|
||
}
|
||
|
||
onChange(x) {
|
||
var base, name;
|
||
({
|
||
name
|
||
} = this.state);
|
||
return typeof (base = this.props).onChange === "function" ? base.onChange(name) : void 0;
|
||
}
|
||
|
||
onKeyUp() {
|
||
var base, name;
|
||
({
|
||
name
|
||
} = this.state);
|
||
return typeof (base = this.props).onKeyUp === "function" ? base.onKeyUp(name) : void 0;
|
||
}
|
||
|
||
getValue() {
|
||
var res;
|
||
res = null;
|
||
|
||
if (this.input != null) {
|
||
if (this.input.getValue != null) {
|
||
res = this.input.getValue();
|
||
} else {
|
||
res = this.input.value;
|
||
}
|
||
}
|
||
|
||
return res;
|
||
}
|
||
|
||
render() {
|
||
var _this = this;
|
||
|
||
var checked, col, controller, css_class, data, isInputWrap, label, name, options, placeholder, ref, ref1, ref10, ref11, ref12, ref13, ref14, ref15, ref16, ref17, ref18, ref2, ref3, ref4, ref5, ref6, ref7, ref8, ref9, res, show, src, style, type, value;
|
||
isInputWrap = true;
|
||
({
|
||
show
|
||
} = this.state);
|
||
data = (ref = this.state.data) != null ? ref : {};
|
||
options = (ref1 = data[Form.INPUT_OPT]) != null ? ref1 : data;
|
||
type = (ref2 = (ref3 = data[Form.TYPE]) != null ? ref3 : options[Input.TYPE]) != null ? ref2 : data[Input.TYPE]; //placeholder = data.placeholder ?= ''
|
||
|
||
placeholder = (ref4 = options[Input.PLACEHOLDER]) != null ? ref4 : '';
|
||
name = (ref5 = (ref6 = options[Input.NAME]) != null ? ref6 : data[Form.KEY_VALUE]) != null ? ref5 : '';
|
||
label = (ref7 = options[Input.LABEL]) != null ? ref7 : '';
|
||
value = (ref8 = options[Input.VALUE]) != null ? ref8 : this.state.value;
|
||
checked = (ref9 = options[Input.CHECKED]) != null ? ref9 : false;
|
||
src = (ref10 = options[Input.SRC]) != null ? ref10 : '';
|
||
controller = (ref11 = options[Input.CONTROLLER]) != null ? ref11 : '';
|
||
css_class = (ref12 = options[Input.CSS_CLASS]) != null ? ref12 : '';
|
||
col = 'c ' + ((ref13 = data[Form.COL_CLASSES]) != null ? ref13 : 'c-100');
|
||
|
||
if (data[Form.COL_CLASSES] != null && data[Form.COL_CLASSES] === '') {
|
||
col = '';
|
||
}
|
||
|
||
style = {};
|
||
|
||
if (!show) {
|
||
style = {
|
||
display: 'none'
|
||
};
|
||
}
|
||
|
||
switch (type) {
|
||
case INPUT_TYPE.TEXT:
|
||
type = 'text';
|
||
break;
|
||
|
||
case INPUT_TYPE.PASSWORD:
|
||
type = 'password';
|
||
break;
|
||
|
||
case INPUT_TYPE.TIME:
|
||
type = 'time';
|
||
}
|
||
|
||
if (type === null) {
|
||
return null;
|
||
}
|
||
|
||
switch (type) {
|
||
case INPUT_TYPE.SCRIPT:
|
||
case INPUT_TYPE.HTML:
|
||
return null;
|
||
|
||
case INPUT_TYPE.SHOP_ITEM_VALUES:
|
||
label = '';
|
||
res = /*#__PURE__*/React.createElement(ShopItemPropValues, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value,
|
||
data: (ref14 = options[Input.OPTIONS]) != null ? ref14 : {}
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.CATEGORY_CHOOSE:
|
||
label = '';
|
||
res = /*#__PURE__*/React.createElement(CategoryChoose, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value,
|
||
data: (ref15 = options[Input.OPTIONS]) != null ? ref15 : {}
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.IMAGE:
|
||
res = /*#__PURE__*/React.createElement(ImagePicker, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value,
|
||
src: src
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.SUBMIT:
|
||
res = /*#__PURE__*/React.createElement("button", {
|
||
className: "btn " + css_class,
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
onClick: this.props.onSubmit,
|
||
type: "button"
|
||
}, label);
|
||
label = '';
|
||
isInputWrap = false;
|
||
col = 'cc';
|
||
break;
|
||
|
||
case INPUT_TYPE.SUBMIT_AND_CLOSE:
|
||
if (this.props.hideSubmitAndClose === true) {
|
||
return null;
|
||
}
|
||
|
||
res = /*#__PURE__*/React.createElement("button", {
|
||
className: "btn " + css_class,
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
onClick: this.props.onSubmitAndClose,
|
||
type: "button"
|
||
}, label);
|
||
label = '';
|
||
isInputWrap = false;
|
||
break;
|
||
|
||
case INPUT_TYPE.DSEK_FILES:
|
||
res = /*#__PURE__*/React.createElement(DsekFiles, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
label: placeholder,
|
||
value: value
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.KPTRACKING_FILE:
|
||
res = /*#__PURE__*/React.createElement(KPTrackingFiles, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
label: placeholder,
|
||
value: value
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.SWITCH_IOS:
|
||
case INPUT_TYPE.CHECKBOX:
|
||
res = /*#__PURE__*/React.createElement(SwitchIOS, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
checked: checked,
|
||
label: placeholder
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.CONTACTS:
|
||
res = /*#__PURE__*/React.createElement(Contacts, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.DATE:
|
||
res = /*#__PURE__*/React.createElement(Datepicker, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value,
|
||
placeholder: placeholder
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.DATE_TIME:
|
||
res = /*#__PURE__*/React.createElement(Datepicker, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value,
|
||
timepicker: true,
|
||
placeholder: placeholder
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.SELECT:
|
||
res = /*#__PURE__*/React.createElement(Select, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
id: value,
|
||
data: (ref16 = options[Input.OPTIONS]) != null ? ref16 : {},
|
||
placeholder: placeholder
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.SELECT_SEARCH:
|
||
res = /*#__PURE__*/React.createElement(Select, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
id: value,
|
||
data: (ref17 = options[Input.OPTIONS]) != null ? ref17 : {},
|
||
placeholder: placeholder,
|
||
search: true
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.SELECT_AJAX:
|
||
res = /*#__PURE__*/React.createElement(Select, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
id: value,
|
||
data: (ref18 = options[Input.OPTIONS]) != null ? ref18 : {},
|
||
ajax: true,
|
||
controller: controller,
|
||
placeholder: placeholder
|
||
});
|
||
break;
|
||
|
||
case INPUT_TYPE.TEXTAREA:
|
||
res = /*#__PURE__*/React.createElement(Textarea, {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
value: value,
|
||
label: label,
|
||
placeholder: placeholder,
|
||
className: "i c-100"
|
||
});
|
||
label = '';
|
||
break;
|
||
|
||
case INPUT_TYPE.HIDDEN:
|
||
label = '';
|
||
isInputWrap = false;
|
||
res = /*#__PURE__*/React.createElement("input", {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
type: "hidden",
|
||
name: name,
|
||
defaultValue: value
|
||
});
|
||
break;
|
||
|
||
default:
|
||
res = /*#__PURE__*/React.createElement("input", {
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
},
|
||
type: type,
|
||
name: name,
|
||
defaultValue: value,
|
||
placeholder: placeholder,
|
||
className: "i c-100",
|
||
autoComplete: "off",
|
||
onKeyUp: this.onKeyUp,
|
||
onChange: this.onChange
|
||
});
|
||
}
|
||
|
||
if (label !== '') {
|
||
label = /*#__PURE__*/React.createElement("div", {
|
||
className: "label",
|
||
dangerouslySetInnerHTML: {
|
||
__html: label
|
||
}
|
||
});
|
||
} else {
|
||
label = null;
|
||
}
|
||
|
||
if (isInputWrap) {
|
||
res = /*#__PURE__*/React.createElement("div", {
|
||
className: "input_wrap"
|
||
}, label, res);
|
||
}
|
||
|
||
if (col !== '') {
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
style: style,
|
||
className: col
|
||
}, res);
|
||
} else {
|
||
return res;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
;
|
||
Input.NAME = 1; // Аттрибут Name поля ввода
|
||
|
||
Input.VALUE = 2; // Значение поля ввода
|
||
|
||
Input.LABEL = 3; // Значение Label для поля ввода
|
||
|
||
Input.PLACEHOLDER = 4; // Значение placeholder для поля ввода
|
||
|
||
Input.OPTIONS = 5; // Заданные значения, для таких типов как например SELECT
|
||
|
||
Input.CONTROLLER = 6; // Название контроллера к которму обращать полю ввода. Изначальано сделано для SELECT_SEARCH
|
||
|
||
Input.CSS_CLASS = 7; // свой класс для поля ввода
|
||
|
||
Input.DATA = 8; // дополнительные данные, который нужно передать полю вводу - выведится в аттрибут data-data в Json формате
|
||
|
||
Input.LINK = 9; // адрес ссылки, изначальано для поля ввода cancel
|
||
|
||
Input.WITHNULLROW = 10; // Параметр для Select , который , если Истинна - Вставляет в Slect строку "Выбрать" с 0 значение
|
||
|
||
Input.ONLY_ADD_VALUE = 11; // Парамерт для SELECT, который показывает только ROW сущности, ID которой передали в форму
|
||
|
||
Input.THEME = 12; // Тема для отображения
|
||
|
||
Input.VALIDATION = 13; // Валидация данных в поле ввода
|
||
|
||
Input.RULES = 14; // Правила для поля ввода. Например отобразить/скрыть
|
||
|
||
Input.CHECKED = 15; // Для поля ввода checkbox
|
||
|
||
Input.DISABLED = 16; // Поле не доступно для редактирования
|
||
|
||
Input.SRC = 17; // Поле не доступно для редактирования
|
||
|
||
Input.TYPE = 18;
|
||
return Input;
|
||
}.call(this);
|
||
//# sourceMappingURL=input.js.map
|