react-key-value-bootstrap
Version:
Key value visualizer/editor written in React
278 lines (250 loc) • 10.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var c = 'key-value';
var KeyValue = function (_React$Component) {
_inherits(KeyValue, _React$Component);
function KeyValue(props) {
_classCallCheck(this, KeyValue);
var _this = _possibleConstructorReturn(this, (KeyValue.__proto__ || Object.getPrototypeOf(KeyValue)).call(this, props));
_this.handleAddNew = function () {
_this.setState({
rows: [].concat(_toConsumableArray(_this.state.rows), [{
keyItem: '',
valueItem: ''
}])
}, function () {
_this.props.onChange([].concat(_toConsumableArray(_this.state.rows)));
});
};
_this.state = {
rows: _this.props.rows
};
return _this;
}
_createClass(KeyValue, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps, nextContext) {
this.setState({
rows: nextProps.rows
});
console.log(nextProps.rows, this.state);
}
}, {
key: 'handleKeyItemChange',
value: function handleKeyItemChange(index, value) {
var _this2 = this;
this.setState({
rows: this.state.rows.map(function (row, i) {
if (index !== i) {
return row;
}
return _extends({}, row, {
keyItem: value
});
})
}, function () {
_this2.props.onChange([].concat(_toConsumableArray(_this2.state.rows)));
});
}
}, {
key: 'handleValueItemChange',
value: function handleValueItemChange(index, value) {
var _this3 = this;
this.setState({
rows: this.state.rows.map(function (row, i) {
if (index !== i) {
return row;
}
return _extends({}, row, {
valueItem: value
});
})
}, function () {
_this3.props.onChange([].concat(_toConsumableArray(_this3.state.rows)));
});
}
}, {
key: 'handleRemove',
value: function handleRemove(index) {
var _this4 = this;
this.setState({
rows: this.state.rows.filter(function (row, i) {
return i !== index;
})
}, function () {
_this4.props.onChange([].concat(_toConsumableArray(_this4.state.rows)));
});
}
}, {
key: 'toJSON',
value: function toJSON() {
var _state$rows = this.state.rows,
rows = _state$rows === undefined ? [] : _state$rows;
return rows.reduce(function (acc, row) {
acc[row.keyItem] = row.valueItem;
return acc;
}, {});
}
}, {
key: 'renderLabelText',
value: function renderLabelText(text) {
if (this.props.hideLabels === true) {
return null;
}
return _react2.default.createElement(
'label',
{ className: 'col-sm-2 col-form-label' },
text
);
}
}, {
key: 'renderKeyItem',
value: function renderKeyItem(index, value) {
var _this5 = this;
return _react2.default.createElement(
'div',
{ className: 'form-group row' },
this.renderLabelText(this.props.keyLabel),
_react2.default.createElement('input', {
type: 'text',
className: 'form-control col-8',
value: value,
placeholder: this.props.keyInputPlaceholder,
onChange: function onChange(e) {
return _this5.handleKeyItemChange(index, e.currentTarget.value);
}
})
);
}
}, {
key: 'renderValueItem',
value: function renderValueItem(index, value) {
var _this6 = this;
return _react2.default.createElement(
'div',
{ className: 'form-group row' },
this.renderLabelText(this.props.valueLabel),
_react2.default.createElement('input', {
type: 'text',
value: value,
className: 'form-control col-8',
placeholder: this.props.valueInputPlaceholder,
onChange: function onChange(e) {
return _this6.handleValueItemChange(index, e.currentTarget.value);
}
})
);
}
}, {
key: 'renderRows',
value: function renderRows() {
var _this7 = this;
return this.state.rows.map(function (row, i) {
return _react2.default.createElement(
'div',
{
key: 'key-value-row-' + i,
className: 'row'
},
_react2.default.createElement(
'div',
{ className: 'col-5' },
_this7.renderKeyItem(i, row.keyItem)
),
_react2.default.createElement(
'div',
{ className: 'col-5' },
_this7.renderValueItem(i, row.valueItem)
),
_react2.default.createElement(
'div',
{ className: 'col-2' },
_react2.default.createElement(
'button',
{
className: 'btn btn-danger',
onClick: function onClick() {
return _this7.handleRemove(i);
}
},
'-'
)
)
);
});
}
}, {
key: 'renderAddButton',
value: function renderAddButton() {
if (typeof this.props.customAddButtonRenderer === 'function') {
return this.props.customAddButtonRenderer(this.handleAddNew);
}
return _react2.default.createElement(
'button',
{
className: 'btn btn-primary btn-sm',
onClick: this.handleAddNew
},
this.props.addNewLabel
);
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
{ className: c },
_react2.default.createElement(
'div',
{ className: c + '-rows' },
this.renderRows()
),
_react2.default.createElement(
'div',
{ className: c + '-add-new' },
this.renderAddButton()
)
);
}
}]);
return KeyValue;
}(_react2.default.Component);
KeyValue.displayName = 'KeyValue';
KeyValue.propTypes = {
rows: _propTypes2.default.arrayOf(_propTypes2.default.shape({
keyItem: _propTypes2.default.string,
valueItem: _propTypes2.default.string
})),
onChange: _propTypes2.default.func,
customAddButtonRenderer: _propTypes2.default.func,
keyInputPlaceholder: _propTypes2.default.string,
valueInputPlaceholder: _propTypes2.default.string,
hideLabels: _propTypes2.default.bool,
addNewLabel: _propTypes2.default.string,
keyLabel: _propTypes2.default.string,
valueLabel: _propTypes2.default.string
};
KeyValue.defaultProps = {
rows: [],
onChange: function onChange() {},
keyInputPlaceholder: '',
valueInputPlaceholder: '',
hideLabels: false,
addNewLabel: 'Hinzufügen',
keyLabel: 'Name',
valueLabel: 'Wert'
};
exports.default = KeyValue;