224 lines
6.7 KiB
JavaScript
224 lines
6.7 KiB
JavaScript
|
|
var Tr, eRowClick;
|
|||
|
|
import '../card/card.js';
|
|||
|
|
import Checkbox from "../form/checkbox";
|
|||
|
|
import autoBind from 'react-autobind';
|
|||
|
|
|
|||
|
|
eRowClick = function () {
|
|||
|
|
class eRowClick {}
|
|||
|
|
|
|||
|
|
;
|
|||
|
|
eRowClick.NONE = -1;
|
|||
|
|
eRowClick.LINK = 1;
|
|||
|
|
eRowClick.CARD = 2;
|
|||
|
|
eRowClick.OPEN_UADD = 3;
|
|||
|
|
return eRowClick;
|
|||
|
|
}.call(this);
|
|||
|
|
|
|||
|
|
export default window.Tr = Tr = class Tr extends React.Component {
|
|||
|
|
constructor(props) {
|
|||
|
|
super(props);
|
|||
|
|
this.state = this.prepareProps(props); //this.renderTd = this.renderTd.bind(this)
|
|||
|
|
//this.onClickLink = this.onClickLink.bind(this)
|
|||
|
|
//this.trClick = this.trClick.bind(this)
|
|||
|
|
//this.onTdInputChange = this.onTdInputChange.bind(this)
|
|||
|
|
|
|||
|
|
autoBind(this);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onTdInputChange(x) {
|
|||
|
|
return console.warn('onTdInputChange ДОДЕЛАТЬ!!!!', x);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
trClick(e) {
|
|||
|
|
var base, controller, id, row_click;
|
|||
|
|
({
|
|||
|
|
row_click,
|
|||
|
|
controller,
|
|||
|
|
id
|
|||
|
|
} = this.state);
|
|||
|
|
|
|||
|
|
switch (row_click) {
|
|||
|
|
case eRowClick.CARD:
|
|||
|
|
e.preventDefault();
|
|||
|
|
return Modals.openCard(controller, id);
|
|||
|
|
|
|||
|
|
case eRowClick.OPEN_UADD:
|
|||
|
|
e.preventDefault();
|
|||
|
|
return typeof (base = this.props).openUadd === "function" ? base.openUadd() : void 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
prepareProps(props) {
|
|||
|
|
var ref, ref1, ref2, ref3, s;
|
|||
|
|
return s = {
|
|||
|
|
id: (ref = props.id) != null ? ref : 0,
|
|||
|
|
data: props.data,
|
|||
|
|
controller: (ref1 = props.controller) != null ? ref1 : '',
|
|||
|
|
column_render: (ref2 = props.column_render) != null ? ref2 : {},
|
|||
|
|
row_click: (ref3 = props.row_click) != null ? ref3 : eRowClick.NONE,
|
|||
|
|
sortable: props.sortable === true
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillReceiveProps(props) {
|
|||
|
|
var i, needUpdate, v1, v2;
|
|||
|
|
needUpdate = false;
|
|||
|
|
|
|||
|
|
if (props.id !== this.props.id) {
|
|||
|
|
needUpdate = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (i in props.data) {
|
|||
|
|
v1 = props.data[i];
|
|||
|
|
v2 = this.props.data[i];
|
|||
|
|
|
|||
|
|
if ((v1 != null ? v1.value : void 0) !== (v2 != null ? v2.value : void 0)) {
|
|||
|
|
needUpdate = true;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (needUpdate) {
|
|||
|
|
return this.setState(this.prepareProps(props));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onClickLink(e, item, cr) {
|
|||
|
|
if (cr.COLUMN_RENDER_CARD_CONTROLLER !== void 0) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
e.stopPropagation(); //console.log 'card',cr.COLUMN_RENDER_CARD_CONTROLLER,this.state.id,cr.COLUMN_RENDER_CARD_FORM_METHOD
|
|||
|
|
|
|||
|
|
return Modals.openCard(cr.COLUMN_RENDER_CARD_CONTROLLER, this.state.id, {
|
|||
|
|
controller_method: cr.COLUMN_RENDER_CARD_FORM_METHOD
|
|||
|
|
});
|
|||
|
|
} else if (cr.COLUMN_RENDER_LINK_MODAL === true) {
|
|||
|
|
e.preventDefault(); //console.log 'card',this.state.controller,this.state.id
|
|||
|
|
|
|||
|
|
return Modals.openCard(this.state.controller, this.state.id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onSelect(x) {
|
|||
|
|
return this.setState({
|
|||
|
|
selected: x
|
|||
|
|
}, this.props.onSelect);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setSelect(x) {
|
|||
|
|
return this.setState({
|
|||
|
|
selected: x === true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderTd(item) {
|
|||
|
|
var column_id, cr, data, id, isBlank, j, len, link, prop, ref, ref1, ref2, t, td_class, v, value;
|
|||
|
|
t = this;
|
|||
|
|
value = item.value;
|
|||
|
|
({
|
|||
|
|
id,
|
|||
|
|
data
|
|||
|
|
} = this.state);
|
|||
|
|
cr = this.state.column_render[item.column];
|
|||
|
|
|
|||
|
|
if (item.input !== null) {
|
|||
|
|
value = /*#__PURE__*/React.createElement(Input, {
|
|||
|
|
key: item.column + this.state.id,
|
|||
|
|
data: item.input,
|
|||
|
|
value: item.data,
|
|||
|
|
onChange: this.onTdInputChange.bind(this, item.column)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (cr != null) {
|
|||
|
|
// Тут начинается самое интересное. В зависимости от правил отрисовку генерируем контент
|
|||
|
|
// Если надо вставить как html, то так и вставляем, остальное игнорируем
|
|||
|
|
if ((prop = cr.COLUMN_RENDER_AS_HTML) === true) {
|
|||
|
|
value = /*#__PURE__*/React.createElement("span", {
|
|||
|
|
dangerouslySetInnerHTML: {
|
|||
|
|
__html: value
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// Обрамляем в картинку
|
|||
|
|
if ((prop = cr.COLUMN_RENDER_IMAGE_WRAP) === true) {
|
|||
|
|
value = /*#__PURE__*/React.createElement("img", {
|
|||
|
|
src: value
|
|||
|
|
});
|
|||
|
|
} // Обрамляем в ссылку.
|
|||
|
|
|
|||
|
|
|
|||
|
|
if ((prop = cr.COLUMN_RENDER_LINK_ID) !== void 0 && prop !== '') {
|
|||
|
|
column_id = id;
|
|||
|
|
link = prop + column_id + '/';
|
|||
|
|
|
|||
|
|
if (cr.COLUMN_RENDER_LINK_COLUMN_ID !== void 0) {
|
|||
|
|
for (j = 0, len = data.length; j < len; j++) {
|
|||
|
|
v = data[j];
|
|||
|
|
|
|||
|
|
if (v.column === cr.COLUMN_RENDER_LINK_COLUMN_ID) {
|
|||
|
|
//console.log('cr.COLUMN_RENDER_LINK_COLUMN_ID',cr.COLUMN_RENDER_LINK_COLUMN_ID,item)
|
|||
|
|
if (v._value !== 0 && v._value !== "0") {
|
|||
|
|
column_id = v._value;
|
|||
|
|
link = prop + column_id + '/';
|
|||
|
|
} else {
|
|||
|
|
link = '#';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('cr.COLUMN_RENDER_LINK_BLANK', cr.COLUMN_RENDER_LINK_BLANK, cr.COLUMN_RENDER_LINK_BLANK === true);
|
|||
|
|
isBlank = cr.COLUMN_RENDER_LINK_BLANK === true;
|
|||
|
|
value = /*#__PURE__*/React.createElement("a", {
|
|||
|
|
href: link,
|
|||
|
|
className: (ref = cr.COLUMN_RENDER_LINK_CSS_CLASS) != null ? ref : '',
|
|||
|
|
onClick: function (e) {
|
|||
|
|
return t.onClickLink(e, item, cr);
|
|||
|
|
},
|
|||
|
|
"data-modal": cr.COLUMN_RENDER_LINK_MODAL === true,
|
|||
|
|
target: isBlank ? '_blank' : ''
|
|||
|
|
}, value);
|
|||
|
|
} else if (cr.COLUMN_RENDER_LINK_MODAL === true) {
|
|||
|
|
value = /*#__PURE__*/React.createElement("div", {
|
|||
|
|
className: (ref1 = cr.COLUMN_RENDER_LINK_CSS_CLASS) != null ? ref1 : '',
|
|||
|
|
onClick: function (e) {
|
|||
|
|
return t.onClickLink(e, item, cr);
|
|||
|
|
},
|
|||
|
|
"data-modal": cr.COLUMN_RENDER_LINK_MODAL === true
|
|||
|
|
}, value);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
td_class = (ref2 = item.td_class) != null ? ref2 : '';
|
|||
|
|
return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
|
|||
|
|
className: "td_cont " + td_class
|
|||
|
|
}, value));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render() {
|
|||
|
|
var data, id, selected, sortable;
|
|||
|
|
({
|
|||
|
|
data,
|
|||
|
|
id,
|
|||
|
|
sortable,
|
|||
|
|
selected
|
|||
|
|
} = this.state);
|
|||
|
|
return /*#__PURE__*/React.createElement("tr", {
|
|||
|
|
onClick: this.trClick,
|
|||
|
|
"data-id": id
|
|||
|
|
}, sortable ? /*#__PURE__*/React.createElement("td", {
|
|||
|
|
class: "c-1"
|
|||
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|||
|
|
class: "icon up_down small pointer"
|
|||
|
|
})) : null, /*#__PURE__*/React.createElement("td", {
|
|||
|
|
class: "c-1"
|
|||
|
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|||
|
|
onChange: this.onSelect.bind(this),
|
|||
|
|
checked: selected
|
|||
|
|
})), data.map(this.renderTd));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
//# sourceMappingURL=tr.js.map
|