react-editable-json-tree
Version:
React Editable Json Tree
313 lines (263 loc) • 10.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _promise = require('babel-runtime/core-js/promise');
var _promise2 = _interopRequireDefault(_promise);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactHotkeys = require('react-hotkeys');
var _objectTypes = require('../utils/objectTypes');
var _inputUsageTypes = require('../types/inputUsageTypes');
var _inputUsageTypes2 = _interopRequireDefault(_inputUsageTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* ************************************* */
/* ******** VARIABLES ******** */
/* ************************************* */
// Prop types
var propTypes = {
name: _propTypes2.default.string.isRequired,
value: _propTypes2.default.any.isRequired,
originalValue: _propTypes2.default.any,
keyPath: _propTypes2.default.array,
deep: _propTypes2.default.number,
handleRemove: _propTypes2.default.func,
handleUpdateValue: _propTypes2.default.func,
readOnly: _propTypes2.default.func.isRequired,
dataType: _propTypes2.default.string,
getStyle: _propTypes2.default.func.isRequired,
editButtonElement: _propTypes2.default.element,
cancelButtonElement: _propTypes2.default.element,
inputElementGenerator: _propTypes2.default.func.isRequired,
minusMenuElement: _propTypes2.default.element,
logger: _propTypes2.default.object.isRequired,
onSubmitValueParser: _propTypes2.default.func.isRequired
};
// Default props
/*
* Author: Alexandre Havrileck (Oxyno-zeta)
* Date: 18/10/16
* Licence: See Readme
*/
/* ************************************* */
/* ******** IMPORTS ******** */
/* ************************************* */
var defaultProps = {
keyPath: [],
deep: 0,
handleUpdateValue: function handleUpdateValue() {
return _promise2.default.resolve();
},
editButtonElement: _react2.default.createElement(
'button',
null,
'e'
),
cancelButtonElement: _react2.default.createElement(
'button',
null,
'c'
),
minusMenuElement: _react2.default.createElement(
'span',
null,
' - '
)
};
/* ************************************* */
/* ******** COMPONENT ******** */
/* ************************************* */
var JsonValue = function (_Component) {
(0, _inherits3.default)(JsonValue, _Component);
function JsonValue(props) {
(0, _classCallCheck3.default)(this, JsonValue);
var _this = (0, _possibleConstructorReturn3.default)(this, (JsonValue.__proto__ || (0, _getPrototypeOf2.default)(JsonValue)).call(this, props));
var keyPath = [].concat((0, _toConsumableArray3.default)(props.keyPath), [props.name]);
_this.state = {
value: props.value,
name: props.name,
keyPath: keyPath,
deep: props.deep,
editEnabled: false,
inputRef: null
};
// Bind
_this.handleEditMode = _this.handleEditMode.bind(_this);
_this.refInput = _this.refInput.bind(_this);
_this.handleCancelEdit = _this.handleCancelEdit.bind(_this);
_this.handleEdit = _this.handleEdit.bind(_this);
return _this;
}
(0, _createClass3.default)(JsonValue, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.setState({
value: nextProps.value
});
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
var _state = this.state,
editEnabled = _state.editEnabled,
inputRef = _state.inputRef,
name = _state.name,
value = _state.value,
keyPath = _state.keyPath,
deep = _state.deep;
var _props = this.props,
readOnly = _props.readOnly,
dataType = _props.dataType;
var readOnlyResult = readOnly(name, value, keyPath, deep, dataType);
if (editEnabled && !readOnlyResult && typeof inputRef.focus === 'function') {
inputRef.focus();
}
}
}, {
key: 'handleEdit',
value: function handleEdit() {
var _this2 = this;
var _props2 = this.props,
handleUpdateValue = _props2.handleUpdateValue,
originalValue = _props2.originalValue,
logger = _props2.logger,
onSubmitValueParser = _props2.onSubmitValueParser,
keyPath = _props2.keyPath;
var _state2 = this.state,
inputRef = _state2.inputRef,
name = _state2.name,
deep = _state2.deep;
var newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value);
var result = {
value: newValue,
key: name
};
// Run update
handleUpdateValue(result).then(function () {
// Cancel edit mode if necessary
if (!(0, _objectTypes.isComponentWillChange)(originalValue, newValue)) {
_this2.handleCancelEdit();
}
}).catch(logger.error);
}
}, {
key: 'handleEditMode',
value: function handleEditMode() {
this.setState({
editEnabled: true
});
}
}, {
key: 'refInput',
value: function refInput(node) {
this.state.inputRef = node;
}
}, {
key: 'handleCancelEdit',
value: function handleCancelEdit() {
this.setState({
editEnabled: false
});
}
}, {
key: 'render',
value: function render() {
var _state3 = this.state,
name = _state3.name,
value = _state3.value,
editEnabled = _state3.editEnabled,
keyPath = _state3.keyPath,
deep = _state3.deep;
var _props3 = this.props,
handleRemove = _props3.handleRemove,
originalValue = _props3.originalValue,
readOnly = _props3.readOnly,
dataType = _props3.dataType,
getStyle = _props3.getStyle,
editButtonElement = _props3.editButtonElement,
cancelButtonElement = _props3.cancelButtonElement,
inputElementGenerator = _props3.inputElementGenerator,
minusMenuElement = _props3.minusMenuElement,
comeFromKeyPath = _props3.keyPath;
var style = getStyle(name, originalValue, keyPath, deep, dataType);
var result = null;
var minusElement = null;
var readOnlyResult = readOnly(name, originalValue, keyPath, deep, dataType);
if (editEnabled && !readOnlyResult) {
var inputElement = inputElementGenerator(_inputUsageTypes2.default.VALUE, comeFromKeyPath, deep, name, originalValue, dataType);
var editButtonElementLayout = _react2.default.cloneElement(editButtonElement, {
onClick: this.handleEdit
});
var cancelButtonElementLayout = _react2.default.cloneElement(cancelButtonElement, {
onClick: this.handleCancelEdit
});
var inputElementLayout = _react2.default.cloneElement(inputElement, {
ref: this.refInput,
defaultValue: originalValue
});
result = _react2.default.createElement(
'span',
{ className: 'rejt-edit-form', style: style.editForm },
inputElementLayout,
' ',
cancelButtonElementLayout,
editButtonElementLayout
);
minusElement = null;
} else {
/* eslint-disable jsx-a11y/no-static-element-interactions */
result = _react2.default.createElement(
'span',
{ className: 'rejt-value', style: style.value, onClick: readOnlyResult ? null : this.handleEditMode },
value
);
/* eslint-enable */
var minusMenuLayout = _react2.default.cloneElement(minusMenuElement, {
onClick: handleRemove,
className: 'rejt-minus-menu',
style: style.minus
});
minusElement = readOnlyResult ? null : minusMenuLayout;
}
var handlers = {
esc: this.handleCancelEdit,
enter: this.handleEdit
};
return _react2.default.createElement(
_reactHotkeys.HotKeys,
{ className: 'rejt-value-node', component: 'li', style: style.li, handlers: handlers },
_react2.default.createElement(
'span',
{ className: 'rejt-name', style: style.name },
name,
' : '
),
result,
minusElement
);
}
}]);
return JsonValue;
}(_react.Component);
// Add prop types
JsonValue.propTypes = propTypes;
// Add default props
JsonValue.defaultProps = defaultProps;
/* ************************************* */
/* ******** EXPORTS ******** */
/* ************************************* */
exports.default = JsonValue;