Merge branch 'KaleoSoftware-feature/table-edit-enhancements' into dev
* KaleoSoftware-feature/table-edit-enhancements: Small style change Use guard clause instead of conditional Re-apply changes Revert "Fix event value" Revert "Use contentEditable for editable table cells" Fix event value Use contentEditable for editable table cellsold
commit
9406c0b748
|
@ -21,7 +21,20 @@ const factory = (Checkbox) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleInputChange = (index, key, type, event) => {
|
handleInputChange = (index, key, type, event) => {
|
||||||
const value = type === 'checkbox' ? event.target.checked : event.target.value;
|
let value;
|
||||||
|
switch (type) {
|
||||||
|
case 'checkbox':
|
||||||
|
value = event.target.checked;
|
||||||
|
break;
|
||||||
|
// Handle contentEditable
|
||||||
|
case 'text':
|
||||||
|
value = event.target.textContent;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
value = event.target.value;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
const onChange = this.props.model[key].onChange || this.props.onChange;
|
const onChange = this.props.model[key].onChange || this.props.onChange;
|
||||||
onChange(index, key, value);
|
onChange(index, key, value);
|
||||||
};
|
};
|
||||||
|
@ -62,6 +75,18 @@ const factory = (Checkbox) => {
|
||||||
const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
|
const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
|
||||||
const inputValue = utils.prepareValueForInput(value, inputType);
|
const inputValue = utils.prepareValueForInput(value, inputType);
|
||||||
const checked = inputType === 'checkbox' && value ? true : null;
|
const checked = inputType === 'checkbox' && value ? true : null;
|
||||||
|
|
||||||
|
if (inputType === 'text') {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
children={inputValue}
|
||||||
|
contentEditable
|
||||||
|
suppressContentEditableWarning
|
||||||
|
onInput={this.handleInputChange.bind(null, index, key, inputType)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input
|
<input
|
||||||
checked={checked}
|
checked={checked}
|
||||||
|
|
|
@ -44,7 +44,20 @@ var factory = function factory(Checkbox) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
|
||||||
var value = type === 'checkbox' ? event.target.checked : event.target.value;
|
var value = void 0;
|
||||||
|
switch (type) {
|
||||||
|
case 'checkbox':
|
||||||
|
value = event.target.checked;
|
||||||
|
break;
|
||||||
|
// Handle contentEditable
|
||||||
|
case 'text':
|
||||||
|
value = event.target.textContent;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
value = event.target.value;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
var onChange = _this.props.model[key].onChange || _this.props.onChange;
|
var onChange = _this.props.model[key].onChange || _this.props.onChange;
|
||||||
onChange(index, key, value);
|
onChange(index, key, value);
|
||||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||||
|
@ -99,6 +112,16 @@ var factory = function factory(Checkbox) {
|
||||||
var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
|
var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
|
||||||
var inputValue = _utils2.default.prepareValueForInput(value, inputType);
|
var inputValue = _utils2.default.prepareValueForInput(value, inputType);
|
||||||
var checked = inputType === 'checkbox' && value ? true : null;
|
var checked = inputType === 'checkbox' && value ? true : null;
|
||||||
|
|
||||||
|
if (inputType === 'text') {
|
||||||
|
return _react2.default.createElement('div', {
|
||||||
|
children: inputValue,
|
||||||
|
contentEditable: true,
|
||||||
|
suppressContentEditableWarning: true,
|
||||||
|
onInput: this.handleInputChange.bind(null, index, key, inputType)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return _react2.default.createElement('input', {
|
return _react2.default.createElement('input', {
|
||||||
checked: checked,
|
checked: checked,
|
||||||
onChange: this.handleInputChange.bind(null, index, key, inputType),
|
onChange: this.handleInputChange.bind(null, index, key, inputType),
|
||||||
|
|
Loading…
Reference in New Issue