react-editable-json-tree/dist/components/JsonAddValue.js

React Editable Json Tree

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactHotkeys = require('react-hotkeys');

var _inputUsageTypes = require('../types/inputUsageTypes');

var _inputUsageTypes2 = _interopRequireDefault(_inputUsageTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */
// Prop types
/*
 * Author: Alexandre Havrileck (Oxyno-zeta)
 * Date: 22/10/16
 * Licence: See Readme
 */
/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
var propTypes = {
    handleAdd: _propTypes2.default.func.isRequired,
    handleCancel: _propTypes2.default.func.isRequired,
    onlyValue: _propTypes2.default.bool,
    addButtonElement: _propTypes2.default.element,
    cancelButtonElement: _propTypes2.default.element,
    inputElementGenerator: _propTypes2.default.func.isRequired,
    keyPath: _propTypes2.default.array,
    deep: _propTypes2.default.number,
    onSubmitValueParser: _propTypes2.default.func.isRequired
};
// Default props
var defaultProps = {
    onlyValue: false,
    addButtonElement: _react2.default.createElement(
        'button',
        null,
        '+'
    ),
    cancelButtonElement: _react2.default.createElement(
        'button',
        null,
        'c'
    )
};

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */

var JsonAddValue = function (_Component) {
    (0, _inherits3.default)(JsonAddValue, _Component);

    function JsonAddValue(props) {
        (0, _classCallCheck3.default)(this, JsonAddValue);

        var _this = (0, _possibleConstructorReturn3.default)(this, (JsonAddValue.__proto__ || (0, _getPrototypeOf2.default)(JsonAddValue)).call(this, props));

        _this.state = {
            inputRefKey: null,
            inputRefValue: null
        };
        // Bind
        _this.refInputValue = _this.refInputValue.bind(_this);
        _this.refInputKey = _this.refInputKey.bind(_this);
        _this.onSubmit = _this.onSubmit.bind(_this);
        return _this;
    }

    (0, _createClass3.default)(JsonAddValue, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            var _state = this.state,
                inputRefKey = _state.inputRefKey,
                inputRefValue = _state.inputRefValue;
            var onlyValue = this.props.onlyValue;


            if (inputRefKey && typeof inputRefKey.focus === 'function') {
                inputRefKey.focus();
            }

            if (onlyValue && inputRefValue && typeof inputRefValue.focus === 'function') {
                inputRefValue.focus();
            }
        }
    }, {
        key: 'onSubmit',
        value: function onSubmit() {
            var _props = this.props,
                handleAdd = _props.handleAdd,
                onlyValue = _props.onlyValue,
                onSubmitValueParser = _props.onSubmitValueParser,
                keyPath = _props.keyPath,
                deep = _props.deep;
            var _state2 = this.state,
                inputRefKey = _state2.inputRefKey,
                inputRefValue = _state2.inputRefValue;

            var result = {};
            // Check if we have the key
            if (!onlyValue) {
                // Check that there is a key
                if (!inputRefKey.value) {
                    // Empty key => Not authorized
                    return;
                }

                result.key = inputRefKey.value;
            }
            result.newValue = onSubmitValueParser(false, keyPath, deep, result.key, inputRefValue.value);
            handleAdd(result);
        }
    }, {
        key: 'refInputKey',
        value: function refInputKey(node) {
            this.state.inputRefKey = node;
        }
    }, {
        key: 'refInputValue',
        value: function refInputValue(node) {
            this.state.inputRefValue = node;
        }
    }, {
        key: 'render',
        value: function render() {
            var _props2 = this.props,
                handleCancel = _props2.handleCancel,
                onlyValue = _props2.onlyValue,
                addButtonElement = _props2.addButtonElement,
                cancelButtonElement = _props2.cancelButtonElement,
                inputElementGenerator = _props2.inputElementGenerator,
                keyPath = _props2.keyPath,
                deep = _props2.deep;

            var addButtonElementLayout = _react2.default.cloneElement(addButtonElement, {
                onClick: this.onSubmit
            });
            var cancelButtonElementLayout = _react2.default.cloneElement(cancelButtonElement, {
                onClick: handleCancel
            });
            var inputElementValue = inputElementGenerator(_inputUsageTypes2.default.VALUE, keyPath, deep);
            var inputElementValueLayout = _react2.default.cloneElement(inputElementValue, {
                placeholder: 'Value',
                ref: this.refInputValue
            });
            var inputElementKeyLayout = null;
            var separatorElement = null;

            if (!onlyValue) {
                var inputElementKey = inputElementGenerator(_inputUsageTypes2.default.KEY, keyPath, deep);
                inputElementKeyLayout = _react2.default.cloneElement(inputElementKey, {
                    placeholder: 'Key',
                    ref: this.refInputKey
                });
                separatorElement = ':';
            }

            var handlers = {
                esc: handleCancel,
                enter: this.onSubmit
            };

            return _react2.default.createElement(
                _reactHotkeys.HotKeys,
                { className: 'rejt-add-value-node', component: 'span', handlers: handlers },
                inputElementKeyLayout,
                ' ',
                separatorElement,
                ' ',
                inputElementValueLayout,
                ' ',
                cancelButtonElementLayout,
                addButtonElementLayout
            );
        }
    }]);
    return JsonAddValue;
}(_react.Component);

// Add prop types


JsonAddValue.propTypes = propTypes;
// Add default props
JsonAddValue.defaultProps = defaultProps;

/* ************************************* */
/* ********       EXPORTS       ******** */
/* ************************************* */
exports.default = JsonAddValue;