feat: add className prop

Fixes: mac-s-g/react-json-view#377
Yell0wflash · Aug 11, 2022 · bed6c7e · bed6c7e
1 parent 211c7da
commit bed6c7e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ const Component = () => (<ReactJson src={json}/>)
 | `src`                        | `JSON Object`             | None               | This property contains your input JSON                                                                                                                                                                                                                                    |
 | `name`                       | `string` or `false`       | "root"             | Contains the name of your root node. Use `null` or `false` for no name.                                                                                                                                                                                                   |
 | `theme`                      | `string`                  | "rjv-default"      | RJV supports base-16 themes. Check out the list of supported themes [in the demo](https://mac-s-g.github.io/react-json-view/demo/dist/). A custom "rjv-default" theme applies by default.                                                                                 |
+| `className`                  | `string`                  | `undefined`        | Additional `className` string to append to the `className` of react-json-view's container.                                                                                                                                                                                |
 | `style`                      | `object`                  | `{}`               | Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme.                                                                                                                                                   |
 | `iconStyle`                  | `string`                  | "circle"           | Style of expand/collapse icons. Accepted values are "circle", triangle" or "square".                                                                                                                                                                                      |
 | `indentWidth`                | `integer`                 | 4                  | Set the indent-width for nested objects                                                                                                                                                                                                                                   |

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,21 +1,21 @@
 import React from 'react'
 import { polyfill } from 'react-lifecycles-compat'
+
 import JsonViewer from './components/JsonViewer'
 import AddKeyRequest from './components/ObjectKeyModal/AddKeyRequest'
 import ValidationFailure from './components/ValidationFailure'
-import { toType, isTheme } from './helpers/util'
+import { isTheme, toType } from './helpers/util'
 import ObjectAttributes from './stores/ObjectAttributes'
-
-//global theme
+// global theme
 import Theme from './themes/getStyle'
 import type { ReactJsonViewProps } from './type'
 
-//forward src through to JsonObject component
+// forward src through to JsonObject component
 class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
   constructor (props: ReactJsonViewProps) {
     super(props)
     this.state = {
-      //listen to request to add/edit a key to an object
+      // listen to request to add/edit a key to an object
       addKeyRequest: false,
       editKeyRequest: false,
       validationFailure: false,
@@ -31,10 +31,10 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
     }
   }
 
-  //reference id for this instance
+  // reference id for this instance
   rjvId = Date.now().toString()
 
-  //all acceptable props and default values
+  // all acceptable props and default values
   static defaultProps = {
     src: {},
     name: 'root',
@@ -91,15 +91,15 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
       // @ts-ignore
       ObjectAttributes.on(i + '-' + this.rjvId, listeners[i])
     }
-    //reset key request to false once it's observed
+    // reset key request to false once it's observed
     this.setState({
       addKeyRequest: false,
       editKeyRequest: false
     })
   }
 
   override componentDidUpdate (prevProps: any, prevState: any) {
-    //reset key request to false once it's observed
+    // reset key request to false once it's observed
     if (prevState.addKeyRequest !== false) {
       this.setState({
         addKeyRequest: false
@@ -130,10 +130,11 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
       'add-key-request': this.addKeyRequest
     }
   }
-  //make sure props are passed in as expected
+
+  // make sure props are passed in as expected
   static validateState = (state: any) => {
     const validatedState = {}
-    //make sure theme is valid
+    // make sure theme is valid
     if (toType(state.theme) === 'object' && !isTheme(state.theme)) {
       console.error(
         'react-json-view error:',
@@ -143,7 +144,7 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
       // @ts-ignore
       validatedState.theme = 'rjv-default'
     }
-    //make sure `src` prop is valid
+    // make sure `src` prop is valid
     if (toType(state.src) !== 'object' && toType(state.src) !== 'array') {
       console.error(
         'react-json-view error:',
@@ -174,11 +175,11 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
       name
     } = this.state
 
-    const { style, defaultValue } = this.props
+    const { className, style, defaultValue } = this.props
 
     return (
       <div
-        className="react-json-view"
+        className={'react-json-view' + `${className ? ' ' : ''}${className ?? ''}`}
         // @ts-ignore
         style={{ ...Theme(theme, 'app-container').style, ...style }}
       >
@@ -212,7 +213,6 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
       namespace,
       new_value,
       existing_value,
-      variable_removed,
       updated_src,
       type
     } = ObjectAttributes.get(this.rjvId, 'action', 'variable-update')
@@ -224,11 +224,11 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
 
     const on_edit_payload = {
       existing_src: src,
-      new_value: new_value,
-      updated_src: updated_src,
-      name: name,
-      namespace: namespace,
-      existing_value: existing_value
+      new_value,
+      updated_src,
+      name,
+      namespace,
+      existing_value
     }
 
     switch (type) {

diff --git a/src/type.d.ts b/src/type.d.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
 
 export interface ReactJsonViewProps {
   /**
@@ -20,6 +20,13 @@ export interface ReactJsonViewProps {
    * Default: "rjv-default"
    */
   theme?: ThemeKeys | ThemeObject;
+
+  /**
+   * Additional `className` string to append to the `className` of react-json-view's container.
+   *
+   * @default undefined
+   */
+  className?: string
   /**
    * Style attributes for react-json-view container.
    * Explicit style attributes will override attributes provided by a theme.
@@ -285,5 +292,5 @@ export type ThemeKeys =
   | 'tube'
   | 'twilight';
 
-declare const JsonViewer: React.ComponentType<ReactJsonViewProps>;
-export default JsonViewer;
+declare const JsonViewer: React.ComponentType<ReactJsonViewProps>
+export default JsonViewer