Merge pull request mac-s-g#205 from cainaleaouk/master

Add a way to set the default value when adding a key to json

Author: mac-s-g

README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/react-json-view.svg)](https://www.npmjs.com/package/react-json-view) [![npm](https://img.shields.io/npm/l/react-json-view.svg)](https://github.com/mac-s-g/react-json-view/blob/master/LISCENSE) [![Build Status](https://travis-ci.org/mac-s-g/react-json-view.svg)](https://travis-ci.org/mac-s-g/react-json-view) [![Coverage Status](https://coveralls.io/repos/github/mac-s-g/react-json-view/badge.svg?branch=master)](https://coveralls.io/github/mac-s-g/react-json-view?branch=master)
 
 # react-json-view
-RJV is a react component for displaying and editing javascript **arrays** and **JSON objects**.
+RJV is a React component for displaying and editing javascript **arrays** and **JSON objects**.
 
 This component provides a responsive interface for displaying arrays or JSON in a web browser.  NPM offers a distribution of the source that's transpiled to ES5; so you can include this component with *any web-based javascript application*.
 
@@ -55,6 +55,7 @@ Name|Type|Default|Description
 `displayDataTypes`|`boolean`|`true`|When set to `true`, data type labels prefix values
 `onEdit`|`(edit)=>{}`|`false`|When a callback function is passed in, `edit` functionality is enabled.  The callback is invoked before edits are completed. Returning `false` from `onEdit` will prevent the change from being made. [see: onEdit docs](#onedit-onadd-and-ondelete-interaction)
 `onAdd`|`(add)=>{}`|`false`|When a callback function is passed in, `add` functionality is enabled.  The callback is invoked before additions are completed. Returning `false` from `onAdd` will prevent the change from being made. [see: onAdd docs](#onedit-onadd-and-ondelete-interaction)
+`defaultValue`|`string \|number \|boolean \|array \|object`|`null`|Sets the default value to be used when adding an item to json
 `onDelete`|`(delete)=>{}`|`false`|When a callback function is passed in, `delete` functionality is enabled.  The callback is invoked before deletions are completed. Returning `false` from `onDelete` will prevent the change from being made. [see: onDelete docs](#onedit-onadd-and-ondelete-interaction)
 `onSelect`|`(select)=>{}`|`false`|When a function is passed in, clicking a value triggers the `onSelect` method to be called.
 `sortKeys`|`boolean`|`false`|set to true to sort object keys

dev-server/src/index.js

@@ -50,6 +50,7 @@ ReactDom.render(
                 }
                 return false
             }}
+            defaultValue=""
         />
 
         <br />

index.d.ts

@@ -129,6 +129,12 @@ export interface ReactJsonViewProps {
    * Default: false
    */
   sortKeys?: boolean;
+  /**
+   * Set to a value to be used as defaultValue when adding new key to json
+   *
+   * Default: null
+   */
+  defaultValue?: TypeDefaultValue | TypeDefaultValue[] | null;
 }
 
 export interface OnCopyProps {
@@ -213,6 +219,8 @@ export interface OnSelectProps {
 
 }
 
+export type TypeDefaultValue = string | number | boolean | object;
+
 export interface ThemeObject {
   base00: string;
   base01: string;

package.json

@@ -1,8 +1,7 @@
 {
     "name": "react-json-view",
-    "description":
-        "Interactive react component for displaying javascript arrays and JSON objects.",
-    "version": "1.18.3",
+    "description": "Interactive react component for displaying javascript arrays and JSON objects.",
+    "version": "1.19.0",
     "main": "dist/main.js",
     "dependencies": {
         "flux": "^3.1.3",

src/js/components/ObjectKeyModal/AddKeyRequest.js

@@ -40,7 +40,7 @@ export default class extends React.PureComponent {
             rjvId, 'action', 'new-key-request'
         );
         request.new_value = {...request.existing_value};
-        request.new_value[input] = null;
+        request.new_value[input] = this.props.defaultValue;
         dispatcher.dispatch({
             name: 'VARIABLE_ADDED',
             rjvId: rjvId,

src/js/index.js

@@ -57,7 +57,8 @@ class ReactJsonView extends React.PureComponent {
         onSelect: false,
         iconStyle: 'triangle',
         style: {},
-        validationMessage: 'Validation Error'
+        validationMessage: 'Validation Error',
+        defaultValue: null,
     }
 
     // will trigger whenever setState() is called, or parent passes in new props.
@@ -178,7 +179,7 @@ class ReactJsonView extends React.PureComponent {
             name
         } = this.state;
 
-        const { style } = this.props;
+        const { style, defaultValue } = this.props;
 
         return (
             <div
@@ -200,7 +201,8 @@ class ReactJsonView extends React.PureComponent {
                 <AddKeyRequest
                     active={addKeyRequest}
                     theme={theme}
-                    rjvId={this.rjvId} />
+                    rjvId={this.rjvId}
+                    defaultValue={defaultValue} />
             </div>
         );
     }