react-json-pretty - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="2.2.0"></a>
+# [2.2.0](https://github.com/chenckang/react-json-pretty/compare/v2.1.0...v2.2.0) (2019-10-14)
+
+
+### Features
+
+* add typeStyle and fix typings of ts and so on ([974ab1b](https://github.com/chenckang/react-json-pretty/commit/974ab1b))
+
+
+
 <a name="2.1.0"></a>
@@ -7,0 +17,0 @@ # [2.1.0](https://github.com/chenckang/react-json-pretty/compare/v2.0.1...v2.1.0) (2019-03-14)

dist/1337.js

 "use strict";
 module.exports = {
     main: 'line-height:1.3;color:#f8f8f2;background:#1e1e1e;overflow:auto;',
+    error: 'line-height:1.3;color:#f8f8f2;background:#1e1e1e;overflow:auto;',
     key: 'color:#ff5e5e;',
@@ -5,0 +6,0 @@ string: 'color:#e9fdac;',

dist/acai.js

 "use strict";
 module.exports = {
     main: 'line-height:1.3;color:#748096;background:#1e1e1e;overflow:auto;',
+    error: 'line-height:1.3;color:#748096;background:#1e1e1e;overflow:auto;',
     key: 'color:#b553bf;',
@@ -5,0 +6,0 @@ string: 'color:#fba856;',

dist/adventure_time.js

 "use strict";
 module.exports = {
     main: 'line-height:1.3;color:#f5bb12;background:#1e1e1e;overflow:auto;',
+    error: 'line-height:1.3;color:#f5bb12;background:#1e1e1e;overflow:auto;',
     key: 'color:#d3422e;',
@@ -5,0 +6,0 @@ string: 'color:#7fd6fa;',

dist/JSONPretty.js

@@ -44,7 +44,9 @@ "use strict";
 var React = __importStar(require("react"));
-function getStyleValue(name, theme) {
-    return theme ? theme[name] || '' : '';
+function getStyleValue(name, theme, styles) {
+    var extra = styles[name + 'Style'] || '';
+    var style = theme ? theme[name] || '' : '';
+    return extra ? extra + ";" + style : style;
 }
-function getStyle(name, theme) {
-    var value = getStyleValue(name, theme);
+function getStyle(name, theme, styles) {
+    var value = getStyleValue(name, theme, styles);
     return value ? " style=\"" + value + "\"" : '';
@@ -73,3 +75,11 @@ }
     JSONPretty.prototype.render = function () {
-        var _a = this.props, json = _a.json, data = _a.data, replacer = _a.replacer, space = _a.space, themeClassName = _a.themeClassName, theme = _a.theme, onError = _a.onError, silent = _a.silent, rest = __rest(_a, ["json", "data", "replacer", "space", "themeClassName", "theme", "onError", "silent"]);
+        var _a = this.props, json = _a.json, data = _a.data, replacer = _a.replacer, space = _a.space, themeClassName = _a.themeClassName, theme = _a.theme, onJSONPrettyError = _a.onJSONPrettyError, onError = _a.onError, silent = _a.silent, mainStyle = _a.mainStyle, keyStyle = _a.keyStyle, valueStyle = _a.valueStyle, stringStyle = _a.stringStyle, booleanStyle = _a.booleanStyle, errorStyle = _a.errorStyle, rest = __rest(_a, ["json", "data", "replacer", "space", "themeClassName", "theme", "onJSONPrettyError", "onError", "silent", "mainStyle", "keyStyle", "valueStyle", "stringStyle", "booleanStyle", "errorStyle"]);
+        var styles = {
+            mainStyle: mainStyle,
+            keyStyle: keyStyle,
+            valueStyle: valueStyle,
+            stringStyle: stringStyle,
+            booleanStyle: booleanStyle,
+            errorStyle: errorStyle
+        };
         var obj = data || json;
@@ -85,14 +95,18 @@ // See https://facebook.github.io/react/warnings/unknown-prop.html
                 }
-                if (onError) {
+                if (onJSONPrettyError) {
+                    onJSONPrettyError(e);
+                }
+                if (!onJSONPrettyError && onError) {
                     onError(e);
+                    console.warn('JSONPretty#onError is deprecated, please use JSONPretty#onJSONPrettyError instead');
                 }
-                return (React.createElement("div", __assign({}, rest, { dangerouslySetInnerHTML: { __html: "<pre class=" + themeClassName + getStyle('main', theme) + ">" + xss(obj) + "</pre>"
+                return (React.createElement("div", __assign({}, rest, { dangerouslySetInnerHTML: { __html: "<pre class=\"__json-pretty-error__\"" + getStyle('error', theme, styles) + ">" + xss(obj) + "</pre>"
                     } })));
             }
         }
-        return (React.createElement("div", __assign({}, rest, { dangerouslySetInnerHTML: { __html: "<pre class=" + themeClassName + getStyle('main', theme) + ">" + this._pretty.call(this, theme, obj, replacer, +space) + "</pre>"
+        return (React.createElement("div", __assign({}, rest, { dangerouslySetInnerHTML: { __html: "<pre class=\"" + themeClassName + "\"" + getStyle('main', theme, styles) + ">" + this._pretty(theme, obj, replacer, +space, styles) + "</pre>"
             } })));
     };
     // JSON =》 HTML转换器
-    JSONPretty.prototype._pretty = function (theme, obj, replacer, space) {
+    JSONPretty.prototype._pretty = function (theme, obj, replacer, space, styles) {
         // 逐行匹配，列举：“key”: "value" | "key": value | "key": [ | "key": { | "key": [],| "Key": {},
@@ -107,11 +121,11 @@ var regLine = /^( *)("[^"]+": )?("[^"]*"|[\w.+-]*)?([,[{]|\[\s*\],?|\{\s*\},?)?$/mg;
             .replace(/</g, '&lt;').replace(/>/g, '&gt;')
-            .replace(regLine, this._replace.bind(null, theme));
+            .replace(regLine, this._replace.bind(null, theme, styles));
     };
     // 格式化函数
-    JSONPretty.prototype._replace = function (theme, match, ind, key, val, tra) {
+    JSONPretty.prototype._replace = function (theme, styles, match, ind, key, val, tra) {
         var spanEnd = '</span>';
-        var keySpan = "<span class=__json-key__" + getStyle('key', theme) + ">";
-        var valSpan = "<span class=__json-value__" + getStyle('value', theme) + ">";
-        var strSpan = "<span class=__json-string__" + getStyle('string', theme) + ">";
-        var booSpan = "<span class=__json-boolean__" + getStyle('boolean', theme) + ">";
+        var keySpan = "<span class=\"__json-key__\"" + getStyle('key', theme, styles) + ">";
+        var valSpan = "<span class=\"__json-value__\"" + getStyle('value', theme, styles) + ">";
+        var strSpan = "<span class=\"__json-string__\"" + getStyle('string', theme, styles) + ">";
+        var booSpan = "<span class=\"__json-boolean__\"" + getStyle('boolean', theme, styles) + ">";
         var sps = ind || '';
@@ -139,3 +153,3 @@ if (key) {
         themeClassName: PropTypes.string,
-        onError: PropTypes.func
+        onJSONPrettyError: PropTypes.func
     };
@@ -142,0 +156,0 @@ JSONPretty.defaultProps = {

dist/monikai.js

 "use strict";
 module.exports = {
     main: 'line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;',
+    error: 'line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;',
     key: 'color:#f92672;',
@@ -5,0 +6,0 @@ string: 'color:#fd971f;',

package.json

 {
   "name": "react-json-pretty",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A code formatting tool for raw json data",
   "main": "dist/JSONPretty.js",
+  "typings": "types/JSONPretty.d.ts",
   "files": [
@@ -7,0 +8,0 @@ "dist",

README.md

@@ -81,6 +81,6 @@ # React JSON Pretty
 
-Use `onError` function property to get `JSON.parse` errors.
+Use `onJSONPrettyError` function property to get `JSON.parse` errors.
 
 ```jsx
-<JSONPretty data={invalid} onError={e => console.error(e)}></JSONPretty>
+<JSONPretty data={invalid} onJSONPrettyError={e => console.error(e)}></JSONPretty>
 ```
@@ -125,3 +125,3 @@
 
-### Themes
+### Custom Themes
 
@@ -138,5 +138,24 @@ There are some default themes provided including `"Adventure Time"`, `acai` and `1337`, to provide users more ready-made options.
 
+#### Using ***type***Style property
+
+This can make control the extra styles of the specific type of value: 
+
+```
+mainStyle?: string;
+keyStyle?: string;
+valueStyle?: string;
+booleanStyle?: string;
+stringStyle?: string;
+errorStyle: string;
+```
+
+For example: set padding of the main area and the font size the normal value
+
+```jsx
+<JSONPretty id="json-pretty" style={{fontSize: "1.1em"}} data={youJSON} mainStyle="padding:1em" valueStyle="font-size:1.5em"></JSONPretty>
+```
+
 #### Using `themes` property
 
-Here is the schema:
+Here is the property schema:
 
@@ -146,2 +165,3 @@ ```
   main?: string,
+  error?: string,
   key?: string,
@@ -159,2 +179,3 @@ string?: string,
   main: 'line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;',
+  error: 'line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;',
   key: 'color:#f92672;',
@@ -189,2 +210,8 @@ string: 'color:#fd971f;',
     color rgba(102,153,204,1)
+
+.__json-pretty-error__
+  line-height 1.3
+  color rgba(248,248,242,1)
+  background #1e1e1e
+  overflow auto
 ```
@@ -191,0 +218,0 @@

types/1337.d.ts

 declare const _default: {
     main: string;
+    error: string;
     key: string;
@@ -4,0 +5,0 @@ string: string;

types/acai.d.ts

 declare const _default: {
     main: string;
+    error: string;
     key: string;
@@ -4,0 +5,0 @@ string: string;

types/adventure_time.d.ts

 declare const _default: {
     main: string;
+    error: string;
     key: string;
@@ -4,0 +5,0 @@ string: string;

types/JSONPretty.d.ts

@@ -6,3 +6,3 @@ import * as PropTypes from 'prop-types';
 }
-interface IProps {
+interface IProps extends React.HTMLAttributes<HTMLElement> {
     json?: any;
@@ -15,3 +15,9 @@ data?: any;
     silent?: boolean;
-    onError?: (e: Error) => void;
+    onJSONPrettyError?: (e: Error) => void;
+    mainStyle?: string;
+    keyStyle?: string;
+    stringStyle?: string;
+    valueStyle?: string;
+    booleanStyle?: string;
+    errorStyle?: string;
 }
@@ -27,3 +33,3 @@ declare class JSONPretty extends React.Component<IProps, {}> {
         themeClassName: PropTypes.Requireable<string>;
-        onError: PropTypes.Requireable<(...args: any[]) => any>;
+        onJSONPrettyError: PropTypes.Requireable<(...args: any[]) => any>;
     };
@@ -30,0 +36,0 @@ static defaultProps: {

types/monikai.d.ts

 declare const _default: {
     main: string;
+    error: string;
     key: string;
@@ -4,0 +5,0 @@ string: string;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24130

increased by14.15%

Lines of code

318

increased by10.03%

Number of lines in readme file

216

increased by14.29%

No dependency changes