react-editable-json-tree/dist/JsonTree.js

React Editable Json Tree

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.INPUT_USAGE_TYPES = exports.DATA_TYPES = exports.UPDATE_DELTA_TYPE = exports.REMOVE_DELTA_TYPE = exports.ADD_DELTA_TYPE = exports.JsonTree = undefined;

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 _JsonNode = require('./components/JsonNode');

var _JsonNode2 = _interopRequireDefault(_JsonNode);

var _styles = require('./utils/styles');

var _deltaTypes = require('./types/deltaTypes');

var _objectTypes = require('./utils/objectTypes');

var _dataTypes = require('./types/dataTypes');

var _dataTypes2 = _interopRequireDefault(_dataTypes);

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

var _inputUsageTypes2 = _interopRequireDefault(_inputUsageTypes);

var _parse = require('./utils/parse');

var _parse2 = _interopRequireDefault(_parse);

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

/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */
// Prop types
var propTypes = {
    data: _propTypes2.default.any.isRequired,
    rootName: _propTypes2.default.string,
    isCollapsed: _propTypes2.default.func,
    onFullyUpdate: _propTypes2.default.func,
    onDeltaUpdate: _propTypes2.default.func,
    readOnly: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.func]),
    getStyle: _propTypes2.default.func,
    addButtonElement: _propTypes2.default.element,
    cancelButtonElement: _propTypes2.default.element,
    editButtonElement: _propTypes2.default.element,
    inputElement: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
    textareaElement: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
    minusMenuElement: _propTypes2.default.element,
    plusMenuElement: _propTypes2.default.element,
    beforeRemoveAction: _propTypes2.default.func,
    beforeAddAction: _propTypes2.default.func,
    beforeUpdateAction: _propTypes2.default.func,
    logger: _propTypes2.default.object,
    onSubmitValueParser: _propTypes2.default.func,
    allowFunctionEvaluation: _propTypes2.default.bool
};
// Default props
/*
 * Author: Alexandre Havrileck (Oxyno-zeta)
 * Date: 13/10/16
 * Licence: See Readme
 */
/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
var defaultProps = {
    rootName: 'root',
    isCollapsed: function isCollapsed(keyPath, deep) {
        return deep !== -1;
    },
    getStyle: function getStyle(keyName, data, keyPath, deep, dataType) {
        switch (dataType) {
            case 'Object':
            case 'Error':
                return _styles.object;
            case 'Array':
                return _styles.array;
            default:
                return _styles.value;
        }
    },
    /* eslint-disable no-unused-vars */
    readOnly: function readOnly(keyName, data, keyPath, deep, dataType) {
        return false;
    },
    onFullyUpdate: function onFullyUpdate(data) {},
    onDeltaUpdate: function onDeltaUpdate(_ref) {
        var type = _ref.type,
            keyPath = _ref.keyPath,
            deep = _ref.deep,
            key = _ref.key,
            newValue = _ref.newValue,
            oldValue = _ref.oldValue;
    },
    beforeRemoveAction: function beforeRemoveAction(key, keyPath, deep, oldValue) {
        return new _promise2.default(function (resolve) {
            return resolve();
        });
    },
    beforeAddAction: function beforeAddAction(key, keyPath, deep, newValue) {
        return new _promise2.default(function (resolve) {
            return resolve();
        });
    },
    beforeUpdateAction: function beforeUpdateAction(key, keyPath, deep, oldValue, newValue) {
        return new _promise2.default(function (resolve) {
            return resolve();
        });
    },
    logger: { error: function error() {} },
    inputElement: function inputElement(usage, keyPath, deep, keyName, data, dataType) {
        return _react2.default.createElement('input', null);
    },
    textareaElement: function textareaElement(usage, keyPath, deep, keyName, data, dataType) {
        return _react2.default.createElement('textarea', null);
    },
    /* eslint-enable no-unused-vars */
    allowFunctionEvaluation: true
};

var createParsingFunction = function createParsingFunction(allowFunctionEvaluation) {
    return function (isEditMode, keyPath, deep, name, rawValue) {
        return (0, _parse2.default)(rawValue, allowFunctionEvaluation);
    };
};

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

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

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

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

        var onSubmitValueParser = void 0;
        // This WasGenerated value lets us know whether we generated the parsing
        // function, so we can appropriately react to changes of
        // `allowFunctionEvaluation`
        var onSubmitValueParserWasGenerated = void 0;
        if (props.onSubmitValueParser) {
            onSubmitValueParser = props.onSubmitValueParser;
            onSubmitValueParserWasGenerated = false;
        } else {
            onSubmitValueParser = createParsingFunction(props.allowFunctionEvaluation);
            onSubmitValueParserWasGenerated = true;
        }

        _this.state = {
            data: props.data,
            rootName: props.rootName,
            onSubmitValueParser: onSubmitValueParser,
            onSubmitValueParserWasGenerated: onSubmitValueParserWasGenerated
        };
        // Bind
        _this.onUpdate = _this.onUpdate.bind(_this);
        return _this;
    }

    (0, _createClass3.default)(JsonTree, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            this.setState({
                data: nextProps.data,
                rootName: nextProps.rootName
            });

            var onSubmitValueParserWasGenerated = this.state.onSubmitValueParserWasGenerated;
            if (nextProps.onSubmitValueParser && nextProps.onSubmitValueParser !== this.state.onSubmitValueParser) {
                // We just added a new submit value parser, so this is definitely
                // not our default parser anymore
                onSubmitValueParserWasGenerated = false;
                this.setState({
                    onSubmitValueParser: nextProps.onSubmitValueParser,
                    onSubmitValueParserWasGenerated: onSubmitValueParserWasGenerated
                });
            }

            if (onSubmitValueParserWasGenerated && nextProps.allowFunctionEvaluation !== this.props.allowFunctionEvaluation) {
                // Create a new submit value parser that adheres to the new
                // `allowFunctionEvaluation` value as long as we know the parser
                // was generated by us
                this.setState({
                    onSubmitValueParser: createParsingFunction(nextProps.allowFunctionEvaluation)
                });
            }
        }
    }, {
        key: 'onUpdate',
        value: function onUpdate(key, data) {
            this.setState({
                data: data
            });
            // Call on fully update
            var onFullyUpdate = this.props.onFullyUpdate;

            onFullyUpdate(data);
        }
    }, {
        key: 'render',
        value: function render() {
            var _state = this.state,
                data = _state.data,
                rootName = _state.rootName,
                onSubmitValueParser = _state.onSubmitValueParser;
            var _props = this.props,
                isCollapsed = _props.isCollapsed,
                onDeltaUpdate = _props.onDeltaUpdate,
                readOnly = _props.readOnly,
                getStyle = _props.getStyle,
                addButtonElement = _props.addButtonElement,
                cancelButtonElement = _props.cancelButtonElement,
                editButtonElement = _props.editButtonElement,
                inputElement = _props.inputElement,
                textareaElement = _props.textareaElement,
                minusMenuElement = _props.minusMenuElement,
                plusMenuElement = _props.plusMenuElement,
                beforeRemoveAction = _props.beforeRemoveAction,
                beforeAddAction = _props.beforeAddAction,
                beforeUpdateAction = _props.beforeUpdateAction,
                logger = _props.logger;

            // Node type

            var dataType = (0, _objectTypes.getObjectType)(data);
            var node = null;
            var readOnlyFunction = readOnly;
            if ((0, _objectTypes.getObjectType)(readOnly) === 'Boolean') {
                readOnlyFunction = function readOnlyFunction() {
                    return readOnly;
                };
            }
            var inputElementFunction = inputElement;
            if (inputElement && (0, _objectTypes.getObjectType)(inputElement) !== 'Function') {
                inputElementFunction = function inputElementFunction() {
                    return inputElement;
                };
            }
            var textareaElementFunction = textareaElement;
            if (textareaElement && (0, _objectTypes.getObjectType)(textareaElement) !== 'Function') {
                textareaElementFunction = function textareaElementFunction() {
                    return textareaElement;
                };
            }

            if (dataType === 'Object' || dataType === 'Array') {
                node = _react2.default.createElement(_JsonNode2.default, {
                    data: data,
                    name: rootName,
                    collapsed: false,
                    deep: -1,
                    isCollapsed: isCollapsed,
                    onUpdate: this.onUpdate,
                    onDeltaUpdate: onDeltaUpdate,
                    readOnly: readOnlyFunction,
                    getStyle: getStyle,
                    addButtonElement: addButtonElement,
                    cancelButtonElement: cancelButtonElement,
                    editButtonElement: editButtonElement,
                    inputElementGenerator: inputElementFunction,
                    textareaElementGenerator: textareaElementFunction,
                    minusMenuElement: minusMenuElement,
                    plusMenuElement: plusMenuElement,
                    beforeRemoveAction: beforeRemoveAction,
                    beforeAddAction: beforeAddAction,
                    beforeUpdateAction: beforeUpdateAction,
                    logger: logger,
                    onSubmitValueParser: onSubmitValueParser
                });
            } else {
                node = 'Data must be an Array or Object';
            }

            return _react2.default.createElement(
                'div',
                { className: 'rejt-tree' },
                node
            );
        }
    }]);
    return JsonTree;
}(_react.Component);

// Add prop types


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

/* ************************************* */
/* ********       EXPORTS       ******** */
/* ************************************* */
exports.JsonTree = JsonTree;
exports.ADD_DELTA_TYPE = _deltaTypes.ADD_DELTA_TYPE;
exports.REMOVE_DELTA_TYPE = _deltaTypes.REMOVE_DELTA_TYPE;
exports.UPDATE_DELTA_TYPE = _deltaTypes.UPDATE_DELTA_TYPE;
exports.DATA_TYPES = _dataTypes2.default;
exports.INPUT_USAGE_TYPES = _inputUsageTypes2.default;