298 lines
8.1 KiB
JavaScript
298 lines
8.1 KiB
JavaScript
var PropValues, ePropertyType;
|
||
|
||
ePropertyType = function () {
|
||
class ePropertyType {}
|
||
|
||
;
|
||
ePropertyType.TEXT = 1;
|
||
ePropertyType.NUMBER = 2;
|
||
ePropertyType.VALUES_ONE = 3;
|
||
ePropertyType.VALUES_MANY = 4;
|
||
return ePropertyType;
|
||
}.call(this);
|
||
|
||
export default window.PropValues = PropValues = class PropValues extends React.Component {
|
||
constructor(props) {
|
||
var data, ref, ref1, selected;
|
||
super(props);
|
||
data = (ref = props.data) != null ? ref : [];
|
||
selected = null;
|
||
|
||
if (data.length > 0) {
|
||
selected = data[0];
|
||
}
|
||
|
||
this.state = {
|
||
data: data,
|
||
value: (ref1 = props.value) != null ? ref1 : {},
|
||
selected: selected
|
||
};
|
||
this.onSelect = this.onSelect.bind(this);
|
||
this.enterTextValue = this.enterTextValue.bind(this);
|
||
this.onChangeMany = this.onChangeMany.bind(this);
|
||
this.onChangeOne = this.onChangeOne.bind(this);
|
||
this.input = null;
|
||
this.properties = {};
|
||
}
|
||
|
||
getValue() {
|
||
return this.state.value;
|
||
}
|
||
|
||
onSelect(x) {
|
||
return this.setState({
|
||
selected: x
|
||
});
|
||
}
|
||
|
||
onChangeMany(id, val, checked) {
|
||
var i, v, value;
|
||
({
|
||
value
|
||
} = this.state);
|
||
|
||
if (value[id] === void 0) {
|
||
value[id] = [];
|
||
}
|
||
|
||
console.log(id, val, checked); // Если у нас выделен, то нам надо просто добавить в конец
|
||
|
||
if (checked) {
|
||
value[id].push({
|
||
value: val.id,
|
||
title: val.title
|
||
});
|
||
} else {
|
||
// Если нет, то делаем цикл по свойствам
|
||
for (i in value[id]) {
|
||
v = value[id][i];
|
||
|
||
if (v.value === val.id) {
|
||
value[id].splice(i, 1);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
return this.setState({
|
||
value
|
||
});
|
||
}
|
||
|
||
onChangeOne(id, val, checked) {
|
||
var i, value;
|
||
({
|
||
value
|
||
} = this.state);
|
||
|
||
if (value[id] === void 0) {
|
||
value[id] = [];
|
||
}
|
||
|
||
if (checked) {
|
||
value[id] = [{
|
||
value: val.id,
|
||
title: val.title
|
||
}];
|
||
|
||
for (i in this.properties[id]) {
|
||
this.properties[id][i].setValueSilence(i === val.id);
|
||
}
|
||
} else {
|
||
value[id] = [];
|
||
|
||
for (i in this.properties[id]) {
|
||
this.properties[id][i].setValueSilence(false);
|
||
}
|
||
}
|
||
|
||
return this.setState({
|
||
value
|
||
});
|
||
}
|
||
|
||
enterTextValue() {
|
||
var id, selected, val, value;
|
||
({
|
||
selected,
|
||
value
|
||
} = this.state);
|
||
val = this.input.value;
|
||
id = parseInt(selected.id);
|
||
|
||
if (val === '') {
|
||
value[id] = [];
|
||
} else {
|
||
value[id] = [{
|
||
title: val,
|
||
value: val
|
||
}];
|
||
}
|
||
|
||
return this.setState({
|
||
value
|
||
});
|
||
}
|
||
|
||
render() {
|
||
var _this = this;
|
||
|
||
var checked, data, defValue, i, j, k, l, len, len1, len2, len3, len4, len5, m, n, o, prop, ref, ref1, ref2, ref3, ref4, ref5, ref6, selected, t, v, vals, value, values, variants;
|
||
({
|
||
data,
|
||
value,
|
||
selected
|
||
} = this.state); //console.log(data,value)
|
||
|
||
t = this;
|
||
values = [];
|
||
|
||
for (j = 0, len = data.length; j < len; j++) {
|
||
prop = data[j];
|
||
|
||
if (value[prop.id]) {
|
||
vals = [];
|
||
ref = value[prop.id];
|
||
|
||
for (k = 0, len1 = ref.length; k < len1; k++) {
|
||
v = ref[k];
|
||
vals.push( /*#__PURE__*/React.createElement("div", {
|
||
className: "sub_color"
|
||
}, v.title));
|
||
}
|
||
|
||
if (vals.length > 0) {
|
||
values.push( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
||
className: "h2 " + (values.length > 0 ? "mt-20" : "")
|
||
}, prop.title), vals));
|
||
}
|
||
}
|
||
}
|
||
|
||
variants = [];
|
||
|
||
if (selected !== null) {
|
||
switch (parseInt(selected.type)) {
|
||
case ePropertyType.TEXT:
|
||
case ePropertyType.NUMBER:
|
||
defValue = '';
|
||
|
||
if (value[selected.id] !== void 0) {
|
||
defValue = (ref1 = (ref2 = value[selected.id][0]) != null ? ref2.title : void 0) != null ? ref1 : '';
|
||
}
|
||
|
||
variants.push( /*#__PURE__*/React.createElement("div", {
|
||
class: "input_wrap",
|
||
key: "prop" + selected.id
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
class: "label"
|
||
}, "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435"), /*#__PURE__*/React.createElement("input", {
|
||
placeholder: "Введите значение",
|
||
defaultValue: defValue,
|
||
className: "i",
|
||
onKeyUp: this.enterTextValue,
|
||
ref: function (i) {
|
||
return _this.input = i;
|
||
}
|
||
})));
|
||
break;
|
||
|
||
case ePropertyType.TEXT:
|
||
case ePropertyType.VALUES_MANY:
|
||
checked = {};
|
||
|
||
if (value[selected.id] !== void 0) {
|
||
ref3 = value[selected.id];
|
||
|
||
for (l = 0, len2 = ref3.length; l < len2; l++) {
|
||
i = ref3[l];
|
||
checked[i.value] = true;
|
||
}
|
||
}
|
||
|
||
this.properties[selected.id] = {};
|
||
variants.push( /*#__PURE__*/React.createElement("div", {
|
||
class: "label",
|
||
key: "prop" + selected.id
|
||
}, "\u041C\u043E\u0436\u043D\u043E \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439"));
|
||
ref4 = selected.values;
|
||
|
||
for (m = 0, len3 = ref4.length; m < len3; m++) {
|
||
i = ref4[m];
|
||
variants.push( /*#__PURE__*/React.createElement("div", {
|
||
key: "prop" + selected.id + "value" + i.id,
|
||
className: "" + (variants.length > 0 ? "mt-20" : '')
|
||
}, /*#__PURE__*/React.createElement(SwitchIOS, {
|
||
label: i.title,
|
||
checked: checked[i.id] === true,
|
||
onChange: this.onChangeMany.bind(null, selected.id, i)
|
||
})));
|
||
}
|
||
|
||
break;
|
||
|
||
case ePropertyType.TEXT:
|
||
case ePropertyType.VALUES_ONE:
|
||
checked = {};
|
||
|
||
if (value[selected.id] !== void 0) {
|
||
ref5 = value[selected.id];
|
||
|
||
for (n = 0, len4 = ref5.length; n < len4; n++) {
|
||
i = ref5[n];
|
||
checked[i.value] = true;
|
||
}
|
||
}
|
||
|
||
this.properties[selected.id] = {};
|
||
variants.push( /*#__PURE__*/React.createElement("div", {
|
||
class: "label",
|
||
key: "prop" + selected.id
|
||
}, "\u041C\u043E\u0436\u043D\u043E \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u043E\u0434\u043D\u043E \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435"));
|
||
ref6 = selected.values;
|
||
|
||
for (o = 0, len5 = ref6.length; o < len5; o++) {
|
||
i = ref6[o];
|
||
|
||
(function (i, selected) {
|
||
return variants.push( /*#__PURE__*/React.createElement("div", {
|
||
key: "prop" + selected.id + "value" + i.id,
|
||
className: "" + (variants.length > 0 ? "mt-20" : '')
|
||
}, /*#__PURE__*/React.createElement(SwitchIOS, {
|
||
label: i.title,
|
||
checked: checked[i.id] === true,
|
||
ref: function (r) {
|
||
return t.properties[selected.id][i.id] = r;
|
||
},
|
||
onChange: t.onChangeOne.bind(null, selected.id, i)
|
||
})));
|
||
})(i, selected);
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
return /*#__PURE__*/React.createElement("div", {
|
||
className: "mt-20"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "row2"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "c c-50"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "h1"
|
||
}, "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440"), /*#__PURE__*/React.createElement(Select, {
|
||
data: data,
|
||
onSelect: this.onSelect,
|
||
search: true
|
||
}), /*#__PURE__*/React.createElement("div", {
|
||
className: "mt-20"
|
||
}, variants)), /*#__PURE__*/React.createElement("div", {
|
||
className: "c c-50"
|
||
}, /*#__PURE__*/React.createElement("div", {
|
||
className: "h1"
|
||
}, "\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F"), values)));
|
||
}
|
||
|
||
};
|
||
//# sourceMappingURL=PropValues.js.map
|