Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@redheadphone/react-json-grid
Advanced tools
@redheadphone/react-json-grid - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
@@ -1,2 +0,2 @@ | ||
| import React, { useState, useEffect, useRef, Fragment } from 'react'; | ||
| import React, { useState, Fragment, useEffect, useRef } from 'react'; | ||
@@ -30,7 +30,743 @@ function styleInject(css, ref) { | ||
| var css = ".styles_json-grid-container__1do2c {\r\n display: inline-block;\r\n margin: 0;\r\n font-family: \"Lato\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\r\n \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\r\n \"Segoe UI Symbol\";\r\n font-size: 0.9375rem;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n color: #fff;\r\n text-align: left;\r\n background-color: #222;\r\n}\r\n\r\n.styles_json-grid-table__3KxDK {\r\n border-collapse: separate !important;\r\n border-spacing: 0;\r\n border: solid #b5b5b5 1px;\r\n -moz-border-radius: 3px;\r\n -webkit-border-radius: 3px;\r\n border-radius: 3px;\r\n -webkit-box-shadow: 0 1px 1px #ccc;\r\n -moz-box-shadow: 0 1px 1px #ccc;\r\n box-shadow: 0 1px 1px #ccc;\r\n}\r\n.styles_highlight__1bpMD {\r\n background-color: #3b3b3b;\r\n font-weight: bold;\r\n}\r\n.styles_obj__dFKgt {\r\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #474747;\r\n padding: 3px 10px 3px 10px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n.styles_obj__dFKgt .styles_name__13yyl {\r\n color: white;\r\n}\r\n.styles_obj__dFKgt .styles_index__2HDDg {\r\n color: #949494;\r\n}\r\n.styles_obj__dFKgt .styles_string__rq61g {\r\n color: #a5c261;\r\n}\r\n.styles_obj__dFKgt .styles_number__2AHSW {\r\n color: #6c99bb;\r\n}\r\n.styles_obj__dFKgt .styles_boolean__1BANa {\r\n color: #6c99bb;\r\n}\r\n.styles_obj__dFKgt .styles_object__3BV4k {\r\n color: white;\r\n}\r\n.styles_order__3lWKM {\r\n background-color: #444;\r\n color: White;\r\n}\r\n.styles_key__2l8qn {\r\n vertical-align: top;\r\n}\r\n.styles_title__1cca0 {\r\n font-weight: bold;\r\n}\r\n.styles_plusminus__3UVy2 {\r\n font-size: 15px;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n}\r\n.styles_search-highlight__PcqVt {\r\n background-color: #565a36;\r\n padding: 1px 5px 1px 5px;\r\n border-radius: 2px;\r\n}\r\n.styles_glyphicon__3VdjK {\r\n position: relative;\r\n top: 3px;\r\n display: inline-block;\r\n font-family: \"Glyphicons Halflings\";\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n"; | ||
| var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "string": "styles_string__rq61g", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" }; | ||
| var css = ".styles_json-grid-container__1do2c {\r\n --jg-bg-color: #222;\r\n --jg-table-border-color: #b5b5b5;\r\n --jg-highlight-bg-color: #3b3b3b;\r\n --jg-cell-border-color: #474747;\r\n\r\n --jg-key-name-color: #ffffff;\r\n --jg-index-color: #949494;\r\n --jg-number-color: #6c99bb;\r\n --jg-boolean-color: #6c99bb;\r\n --jg-string-color: #a5c261;\r\n --jg-object-color: #ffffff;\r\n\r\n --jg-table-header-bg-color: #444;\r\n --jg-table-header-color: #ffffff;\r\n\r\n --jg-search-highlight-bg-color: #565a36;\r\n\r\n display: inline-block;\r\n margin: 0;\r\n font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\r\n line-height: 1.5;\r\n text-align: left;\r\n background-color: var(--jg-bg-color);\r\n}\r\n\r\n.styles_json-grid-table__3KxDK {\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n border: solid var(--jg-table-border-color) 1px;\r\n}\r\n\r\n.styles_json-grid-container__1do2c, .styles_json-grid-table__3KxDK{\r\n border-radius: 3px;\r\n overflow: hidden;\r\n}\r\n\r\n.styles_highlight__1bpMD {\r\n background-color: var(--jg-highlight-bg-color);\r\n font-weight: bold;\r\n}\r\n\r\n.styles_obj__dFKgt {\r\n border: 1px solid var(--jg-cell-border-color);\r\n padding: 3px 10px;\r\n padding-bottom: 4px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n\r\n.styles_obj__dFKgt, .styles_obj__dFKgt .styles_name__13yyl {\r\n color: var(--jg-key-name-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_index__2HDDg {\r\n color: var(--jg-index-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_number__2AHSW{\r\n color: var(--jg-number-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_boolean__1BANa {\r\n color: var(--jg-boolean-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_string__rq61g {\r\n color: var(--jg-string-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_object__3BV4k {\r\n color: var(--jg-object-color);\r\n}\r\n\r\n.styles_order__3lWKM {\r\n background-color: var(--jg-table-header-bg-color);\r\n color: var(--jg-table-header-color);\r\n}\r\n\r\n.styles_key__2l8qn {\r\n vertical-align: top;\r\n}\r\n\r\n.styles_title__1cca0 {\r\n font-weight: bold;\r\n}\r\n\r\n.styles_plusminus__3UVy2 {\r\n font-size: 15px;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n}\r\n\r\n.styles_search-highlight__PcqVt {\r\n background-color: var(--jg-search-highlight-bg-color);\r\n padding: 1px 5px;\r\n padding-top: 0px;\r\n border-radius: 2px;\r\n}\r\n\r\n.styles_glyphicon__3VdjK {\r\n position: relative;\r\n top: 3px;\r\n display: inline-block;\r\n}\r\n"; | ||
| var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "string": "styles_string__rq61g", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" }; | ||
| styleInject(css); | ||
| var menuIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20%20%20%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032z%22%20%20%2F%3E%3C%2Fsvg%3E"; | ||
| var themes = { | ||
| default: { | ||
| bgColor: "#222", | ||
| tableBorderColor: "#b5b5b5", | ||
| highlightBgColor: "#3b3b3b", | ||
| cellBorderColor: "#474747", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#949494", | ||
| numberColor: "#6c99bb", | ||
| booleanColor: "#6c99bb", | ||
| stringColor: "#a5c261", | ||
| objectColor: "#ffffff", | ||
| tableHeaderBgColor: "#444", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightColor: "#565a36" | ||
| }, | ||
| radical: { | ||
| bgColor: "#1e1e3f", | ||
| tableBorderColor: "#3a3a5e", | ||
| highlightBgColor: "#452a4e", | ||
| cellBorderColor: "#ff79c6", | ||
| keyNameColor: "#e1efff", | ||
| indexColor: "#b7b7ce", | ||
| numberColor: "#ffcc66", | ||
| booleanColor: "#f18e4f", | ||
| stringColor: "#a8ff60", | ||
| objectColor: "#ffcc66", | ||
| tableHeaderBgColor: "#2b265c", | ||
| tableHeaderColor: "#e1efff", | ||
| searchHighlightColor: "#b77ee0" | ||
| }, | ||
| cobalt: { | ||
| bgColor: "#002240", | ||
| tableBorderColor: "#003c60", | ||
| highlightBgColor: "#003c60", | ||
| cellBorderColor: "#007acc", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#007acc", | ||
| numberColor: "#8be9fd", | ||
| booleanColor: "#ff79c6", | ||
| stringColor: "#ff79c6", | ||
| objectColor: "#8be9fd", | ||
| tableHeaderBgColor: "#003c60", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#0f5078" | ||
| }, | ||
| dracula: { | ||
| bgColor: "#282a36", | ||
| tableBorderColor: "#44475a", | ||
| highlightBgColor: "#44475a", | ||
| cellBorderColor: "#6272a4", | ||
| keyNameColor: "#bd93f9", | ||
| indexColor: "#6272a4", | ||
| numberColor: "#8be9fd", | ||
| booleanColor: "#ff79c6", | ||
| stringColor: "#f1fa8c", | ||
| objectColor: "#ff79c6", | ||
| tableHeaderBgColor: "#44475a", | ||
| tableHeaderColor: "#f8f8f2", | ||
| searchHighlightBgColor: "#ff96d2" | ||
| }, | ||
| monokai: { | ||
| bgColor: "#272822", | ||
| tableBorderColor: "#49483e", | ||
| highlightBgColor: "#49483e", | ||
| cellBorderColor: "#75715e", | ||
| keyNameColor: "#f92672", | ||
| indexColor: "#75715e", | ||
| numberColor: "#ae81ff", | ||
| booleanColor: "#ae81ff", | ||
| stringColor: "#e6db74", | ||
| objectColor: "#a6e22e", | ||
| tableHeaderBgColor: "#414434", | ||
| tableHeaderColor: "#f8f8f2", | ||
| searchHighlightBgColor: "#797760" | ||
| }, | ||
| solarizedLight: { | ||
| bgColor: "#fdf6e3", | ||
| tableBorderColor: "#839496", | ||
| highlightBgColor: "#eee8d5", | ||
| cellBorderColor: "#d0d0d0", | ||
| keyNameColor: "#268bd2", | ||
| indexColor: "#657b83", | ||
| numberColor: "#2aa198", | ||
| booleanColor: "#2aa198", | ||
| stringColor: "#859900", | ||
| objectColor: "#2aa198", | ||
| tableHeaderBgColor: "#eee8d5", | ||
| tableHeaderColor: "#657b83", | ||
| searchHighlightBgColor: "#ddd1ab" | ||
| }, | ||
| solarizedDark: { | ||
| bgColor: "#002b36", | ||
| tableBorderColor: "#586e75", | ||
| highlightBgColor: "#073642", | ||
| cellBorderColor: "#073642", | ||
| keyNameColor: "#268bd2", | ||
| indexColor: "#839496", | ||
| numberColor: "#b58900", | ||
| booleanColor: "#b58900", | ||
| stringColor: "#859900", | ||
| objectColor: "#b58900", | ||
| tableHeaderBgColor: "#073642", | ||
| tableHeaderColor: "#93a1a1", | ||
| searchHighlightBgColor: "#185e70" | ||
| }, | ||
| materialDark: { | ||
| bgColor: "#263238", | ||
| tableBorderColor: "#37474f", | ||
| highlightBgColor: "#37474f", | ||
| cellBorderColor: "#546e7a", | ||
| keyNameColor: "#80cbc4", | ||
| indexColor: "#90a4ae", | ||
| numberColor: "#82b1ff", | ||
| booleanColor: "#82b1ff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#455a64", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| oceanicNext: { | ||
| bgColor: "#1b2b34", | ||
| tableBorderColor: "#2c3e50", | ||
| highlightBgColor: "#343d46", | ||
| cellBorderColor: "#34495e", | ||
| keyNameColor: "#82b1ff", | ||
| indexColor: "#546e7a", | ||
| numberColor: "#89ddff", | ||
| booleanColor: "#89ddff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#2c3e50", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| panda: { | ||
| bgColor: "#292a2b", | ||
| tableBorderColor: "#4d4e50", | ||
| highlightBgColor: "#434547", | ||
| cellBorderColor: "#5f6062", | ||
| keyNameColor: "#ff6b72", | ||
| indexColor: "#9aedfe", | ||
| numberColor: "#f5d76e", | ||
| booleanColor: "#f5d76e", | ||
| stringColor: "#a5ef63", | ||
| objectColor: "#ff6b72", | ||
| tableHeaderBgColor: "#3b3c3d", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| gruvboxMaterial: { | ||
| bgColor: "#282828", | ||
| tableBorderColor: "#3c3836", | ||
| highlightBgColor: "#3c3836", | ||
| cellBorderColor: "#504945", | ||
| keyNameColor: "#d3869b", | ||
| indexColor: "#bdae93", | ||
| numberColor: "#8ec07c", | ||
| booleanColor: "#8ec07c", | ||
| stringColor: "#ebdbb2", | ||
| objectColor: "#d3869b", | ||
| tableHeaderBgColor: "#3c3836", | ||
| tableHeaderColor: "#ebdbb2", | ||
| searchHighlightBgColor: "#62564f" | ||
| }, | ||
| merko: { | ||
| bgColor: "#f6f8fa", | ||
| tableBorderColor: "#e1e4e8", | ||
| highlightBgColor: "#e1e4e8", | ||
| cellBorderColor: "#c9d1d9", | ||
| keyNameColor: "#0366d6", | ||
| indexColor: "#586069", | ||
| numberColor: "#22863a", | ||
| booleanColor: "#22863a", | ||
| stringColor: "#cb2431", | ||
| objectColor: "#0366d6", | ||
| tableHeaderBgColor: "#e1e4e8", | ||
| tableHeaderColor: "#0366d6", | ||
| searchHighlightBgColor: "#ffd33d" | ||
| }, | ||
| tokyoNight: { | ||
| bgColor: "#1a1b26", | ||
| tableBorderColor: "#272a36", | ||
| highlightBgColor: "#34374c", | ||
| cellBorderColor: "#272a36", | ||
| keyNameColor: "#9d88f5", | ||
| indexColor: "#89b8ff", | ||
| numberColor: "#46d9ff", | ||
| booleanColor: "#46d9ff", | ||
| stringColor: "#ff75b5", | ||
| objectColor: "#9d88f5", | ||
| tableHeaderBgColor: "#3a3e54", | ||
| tableHeaderColor: "#f3f3f3", | ||
| searchHighlightBgColor: "#53577b" | ||
| }, | ||
| remedy: { | ||
| bgColor: "#ffffff", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#f5f5f5", | ||
| cellBorderColor: "#eaeaea", | ||
| keyNameColor: "#6e5494", | ||
| indexColor: "#4d4d4d", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2c8ebb", | ||
| objectColor: "#6e5494", | ||
| tableHeaderBgColor: "#f5f5f5", | ||
| tableHeaderColor: "#6e5494", | ||
| searchHighlightBgColor: "#e2cd8f" | ||
| }, | ||
| minimal: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#eeeeee", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#333333", | ||
| indexColor: "#666666", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2ca22c", | ||
| objectColor: "#333333", | ||
| tableHeaderBgColor: "#f0f0f0", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#e0e073" | ||
| }, | ||
| auroraX: { | ||
| bgColor: "#2b313a", | ||
| tableBorderColor: "#343c47", | ||
| highlightBgColor: "#343c47", | ||
| cellBorderColor: "#3d4752", | ||
| keyNameColor: "#b4be82", | ||
| indexColor: "#5c6773", | ||
| numberColor: "#7aa2f7", | ||
| booleanColor: "#7aa2f7", | ||
| stringColor: "#c3a6ff", | ||
| objectColor: "#b4be82", | ||
| tableHeaderBgColor: "#343c47", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| atlanticNight: { | ||
| bgColor: "#2a394f", | ||
| tableBorderColor: "#344b63", | ||
| highlightBgColor: "#344b63", | ||
| cellBorderColor: "#4d5c71", | ||
| keyNameColor: "#6cb6ff", | ||
| indexColor: "#6cb6ff", | ||
| numberColor: "#a2d6ff", | ||
| booleanColor: "#a2d6ff", | ||
| stringColor: "#e2e9fd", | ||
| objectColor: "#6cb6ff", | ||
| tableHeaderBgColor: "#344b63", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff8f40" | ||
| }, | ||
| aTouchOfLilac: { | ||
| bgColor: "#f3f0ff", | ||
| tableBorderColor: "#d2cef4", | ||
| highlightBgColor: "#e1dcff", | ||
| cellBorderColor: "#b8b0e8", | ||
| keyNameColor: "#a26bff", | ||
| indexColor: "#8664b3", | ||
| numberColor: "#6772e5", | ||
| booleanColor: "#6772e5", | ||
| stringColor: "#528bff", | ||
| objectColor: "#a26bff", | ||
| tableHeaderBgColor: "#d2cef4", | ||
| tableHeaderColor: "#44337a", | ||
| searchHighlightBgColor: "#edc8bc" | ||
| }, | ||
| glassUI: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#e0e0e0", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#333333", | ||
| indexColor: "#666666", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2ca22c", | ||
| objectColor: "#333333", | ||
| tableHeaderBgColor: "#dddddd", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#e2e29c" | ||
| }, | ||
| fireflyPro: { | ||
| bgColor: "#292d3e", | ||
| tableBorderColor: "#414863", | ||
| highlightBgColor: "#414863", | ||
| cellBorderColor: "#252938", | ||
| keyNameColor: "#c3a6ff", | ||
| indexColor: "#b8bdff", | ||
| numberColor: "#ffd580", | ||
| booleanColor: "#ffd580", | ||
| stringColor: "#9ece6a", | ||
| objectColor: "#ff9e64", | ||
| tableHeaderBgColor: "#414863", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff7272" | ||
| }, | ||
| reUI: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#f0f0f0", | ||
| cellBorderColor: "#c7c7c7", | ||
| keyNameColor: "#4caf50", | ||
| indexColor: "#757575", | ||
| numberColor: "#2196f3", | ||
| booleanColor: "#2196f3", | ||
| stringColor: "#ff9800", | ||
| objectColor: "#4caf50", | ||
| tableHeaderBgColor: "#e0e0e0", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffeb3b" | ||
| }, | ||
| slime: { | ||
| bgColor: "#222222", | ||
| tableBorderColor: "#333333", | ||
| highlightBgColor: "#333333", | ||
| cellBorderColor: "#444444", | ||
| keyNameColor: "#5fd7ff", | ||
| indexColor: "#999999", | ||
| numberColor: "#b8d68c", | ||
| booleanColor: "#b8d68c", | ||
| stringColor: "#ce9178", | ||
| objectColor: "#dcdcaa", | ||
| tableHeaderBgColor: "#333333", | ||
| tableHeaderColor: "#cccccc", | ||
| searchHighlightBgColor: "#fa4949" | ||
| }, | ||
| signedDarkPro: { | ||
| bgColor: "#1e1e1e", | ||
| tableBorderColor: "#2a2a2a", | ||
| highlightBgColor: "#2a2a2a", | ||
| cellBorderColor: "#3a3a3a", | ||
| keyNameColor: "#8da6ce", | ||
| indexColor: "#848484", | ||
| numberColor: "#b5bd68", | ||
| booleanColor: "#b5bd68", | ||
| stringColor: "#cc7832", | ||
| objectColor: "#b294bb", | ||
| tableHeaderBgColor: "#2a2a2a", | ||
| tableHeaderColor: "#d4d4d4", | ||
| searchHighlightBgColor: "#eab09e" | ||
| }, | ||
| ariakeDark: { | ||
| bgColor: "#1c1e26", | ||
| tableBorderColor: "#2a2c33", | ||
| highlightBgColor: "#2a2c33", | ||
| cellBorderColor: "#3a3c47", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#6b7089", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#2a2c33", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#efd096" | ||
| }, | ||
| snazzyLight: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#d0d0d0", | ||
| highlightBgColor: "#f0f0f0", | ||
| cellBorderColor: "#b0b0b0", | ||
| keyNameColor: "#6ab0f3", | ||
| indexColor: "#787878", | ||
| numberColor: "#bd93f9", | ||
| booleanColor: "#bd93f9", | ||
| stringColor: "#50fa7b", | ||
| objectColor: "#ffb86c", | ||
| tableHeaderBgColor: "#d0d0d0", | ||
| tableHeaderColor: "#2e2e2e", | ||
| searchHighlightBgColor: "#ff5555" | ||
| }, | ||
| spacegray: { | ||
| bgColor: "#202328", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#394147", | ||
| keyNameColor: "#a9b1d6", | ||
| indexColor: "#768390", | ||
| numberColor: "#f29718", | ||
| booleanColor: "#f29718", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#e0e0e0", | ||
| searchHighlightBgColor: "#ff6c6b" | ||
| }, | ||
| celestial: { | ||
| bgColor: "#0f1419", | ||
| tableBorderColor: "#1c232b", | ||
| highlightBgColor: "#1c232b", | ||
| cellBorderColor: "#2c3848", | ||
| keyNameColor: "#79b8ff", | ||
| indexColor: "#abb2bf", | ||
| numberColor: "#56d364", | ||
| booleanColor: "#56d364", | ||
| stringColor: "#d19a66", | ||
| objectColor: "#c678dd", | ||
| tableHeaderBgColor: "#1c232b", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#30435a" | ||
| }, | ||
| blueberryDark: { | ||
| bgColor: "#242b38", | ||
| tableBorderColor: "#343d4a", | ||
| highlightBgColor: "#343d4a", | ||
| cellBorderColor: "#444f5c", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#8c98a6", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#343d4a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#30435a" | ||
| }, | ||
| bear: { | ||
| bgColor: "#e6e6e6", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#d5d5d5", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| }, | ||
| oneDarkPro: { | ||
| bgColor: "#282c34", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#3e4451", | ||
| keyNameColor: "#abb2bf", | ||
| indexColor: "#5c6370", | ||
| numberColor: "#d19a66", | ||
| booleanColor: "#d19a66", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| nord: { | ||
| bgColor: "#2e3440", | ||
| tableBorderColor: "#3b4252", | ||
| highlightBgColor: "#3b4252", | ||
| cellBorderColor: "#434c5e", | ||
| keyNameColor: "#81a1c1", | ||
| indexColor: "#a3be8c", | ||
| numberColor: "#8fbcbb", | ||
| booleanColor: "#8fbcbb", | ||
| stringColor: "#ebcb8b", | ||
| objectColor: "#b48ead", | ||
| tableHeaderBgColor: "#3b4252", | ||
| tableHeaderColor: "#e5e9f0", | ||
| searchHighlightBgColor: "#bf616a" | ||
| }, | ||
| palenight: { | ||
| bgColor: "#292d3e", | ||
| tableBorderColor: "#414863", | ||
| highlightBgColor: "#414863", | ||
| cellBorderColor: "#2c3042", | ||
| keyNameColor: "#c3a6ff", | ||
| indexColor: "#b8bdff", | ||
| numberColor: "#ffd580", | ||
| booleanColor: "#ffd580", | ||
| stringColor: "#9ece6a", | ||
| objectColor: "#ff9e64", | ||
| tableHeaderBgColor: "#414863", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff8b8b" | ||
| }, | ||
| nightOwl: { | ||
| bgColor: "#011627", | ||
| tableBorderColor: "#02233d", | ||
| highlightBgColor: "#02233d", | ||
| cellBorderColor: "#03314b", | ||
| keyNameColor: "#addb67", | ||
| indexColor: "#dcdcaa", | ||
| numberColor: "#82aaff", | ||
| booleanColor: "#82aaff", | ||
| stringColor: "#c792ea", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#02233d", | ||
| tableHeaderColor: "#e0e0e0", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| andromeda: { | ||
| bgColor: "#282c34", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#3e4451", | ||
| keyNameColor: "#abb2bf", | ||
| indexColor: "#5c6370", | ||
| numberColor: "#d19a66", | ||
| booleanColor: "#d19a66", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| horizon: { | ||
| bgColor: "#1c1e26", | ||
| tableBorderColor: "#2a2c33", | ||
| highlightBgColor: "#2a2c33", | ||
| cellBorderColor: "#3a3c47", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#6b7089", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#2a2c33", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#f2d6a3" | ||
| }, | ||
| cobalt2: { | ||
| bgColor: "#193549", | ||
| tableBorderColor: "#234666", | ||
| highlightBgColor: "#234666", | ||
| cellBorderColor: "#29546a", | ||
| keyNameColor: "#6699cc", | ||
| indexColor: "#9cdcfe", | ||
| numberColor: "#b5cea8", | ||
| booleanColor: "#b5cea8", | ||
| stringColor: "#ce9178", | ||
| objectColor: "#d1d2d3", | ||
| tableHeaderBgColor: "#234666", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| atomOneLight: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#f5f5f5", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| }, | ||
| ysgrifennwr: { | ||
| bgColor: "#f8f8f8", | ||
| tableBorderColor: "#eaeaea", | ||
| highlightBgColor: "#f2f2f2", | ||
| cellBorderColor: "#d9d9d9", | ||
| keyNameColor: "#2b91af", | ||
| indexColor: "#888888", | ||
| numberColor: "#6a5acd", | ||
| booleanColor: "#6a5acd", | ||
| stringColor: "#cd5c5c", | ||
| objectColor: "#008b8b", | ||
| tableHeaderBgColor: "#eaeaea", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ff9900" | ||
| }, | ||
| notepadPlusPlusRemixed: { | ||
| bgColor: "#262626", | ||
| tableBorderColor: "#333333", | ||
| highlightBgColor: "#333333", | ||
| cellBorderColor: "#4d4d4d", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#aaaaaa", | ||
| numberColor: "#ffcc66", | ||
| booleanColor: "#ffcc66", | ||
| stringColor: "#a6e22e", | ||
| objectColor: "#66d9ef", | ||
| tableHeaderBgColor: "#333333", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff6666" | ||
| }, | ||
| githubLight: { | ||
| bgColor: "#ffffff", | ||
| tableBorderColor: "#eaecef", | ||
| highlightBgColor: "#f6f8fa", | ||
| cellBorderColor: "#d1d5da", | ||
| keyNameColor: "#0366d6", | ||
| indexColor: "#6a737d", | ||
| numberColor: "#0366d6", | ||
| booleanColor: "#0366d6", | ||
| stringColor: "#032f62", | ||
| objectColor: "#6f42c1", | ||
| tableHeaderBgColor: "#f6f8fa", | ||
| tableHeaderColor: "#24292e", | ||
| searchHighlightBgColor: "#fffbdd" | ||
| }, | ||
| shadesOfPurple: { | ||
| bgColor: "#2d2b55", | ||
| tableBorderColor: "#463d69", | ||
| highlightBgColor: "#463d69", | ||
| cellBorderColor: "#54496b", | ||
| keyNameColor: "#fad000", | ||
| indexColor: "#a599e9", | ||
| numberColor: "#ff6188", | ||
| booleanColor: "#ff6188", | ||
| stringColor: "#a9b9ce", | ||
| objectColor: "#fad000", | ||
| tableHeaderBgColor: "#463d69", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff6188" | ||
| }, | ||
| synthWave: { | ||
| bgColor: "#2a2139", | ||
| tableBorderColor: "#3c3359", | ||
| highlightBgColor: "#3c3359", | ||
| cellBorderColor: "#524772", | ||
| keyNameColor: "#f92aad", | ||
| indexColor: "#4df0ff", | ||
| numberColor: "#fff", | ||
| booleanColor: "#fff", | ||
| stringColor: "#00f9f9", | ||
| objectColor: "#ff8d00", | ||
| tableHeaderBgColor: "#3c3359", | ||
| tableHeaderColor: "#fff", | ||
| searchHighlightBgColor: "#ff8d00" | ||
| }, | ||
| codeBlue: { | ||
| bgColor: "#0e1b29", | ||
| tableBorderColor: "#233544", | ||
| highlightBgColor: "#233544", | ||
| cellBorderColor: "#345a7d", | ||
| keyNameColor: "#5a9bcf", | ||
| indexColor: "#96b5b4", | ||
| numberColor: "#99cc99", | ||
| booleanColor: "#99cc99", | ||
| stringColor: "#d2cd87", | ||
| objectColor: "#ff8d00", | ||
| tableHeaderBgColor: "#233544", | ||
| tableHeaderColor: "#fff", | ||
| searchHighlightBgColor: "#233544" | ||
| }, | ||
| cyberpunk: { | ||
| bgColor: "#1b2b34", | ||
| tableBorderColor: "#405c79", | ||
| highlightBgColor: "#405c79", | ||
| cellBorderColor: "#52676d", | ||
| keyNameColor: "#82b1ff", | ||
| indexColor: "#c792ea", | ||
| numberColor: "#89ddff", | ||
| booleanColor: "#89ddff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#405c79", | ||
| tableHeaderColor: "#d8dee9", | ||
| searchHighlightBgColor: "#405c79" | ||
| }, | ||
| laserWave: { | ||
| bgColor: "#0a1e24", | ||
| tableBorderColor: "#0f2a35", | ||
| highlightBgColor: "#0f2a35", | ||
| cellBorderColor: "#153e50", | ||
| keyNameColor: "#f5ef19", | ||
| indexColor: "#33ccff", | ||
| numberColor: "#19f9d8", | ||
| booleanColor: "#19f9d8", | ||
| stringColor: "#f4eeff", | ||
| objectColor: "#ff66d8", | ||
| tableHeaderBgColor: "#0f2a35", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#f76d47" | ||
| }, | ||
| hipster: { | ||
| bgColor: "#0f0f0f", | ||
| tableBorderColor: "#181818", | ||
| highlightBgColor: "#181818", | ||
| cellBorderColor: "#303030", | ||
| keyNameColor: "#74b0df", | ||
| indexColor: "#999999", | ||
| numberColor: "#8cdcfe", | ||
| booleanColor: "#8cdcfe", | ||
| stringColor: "#ff8a65", | ||
| objectColor: "#b0bec5", | ||
| tableHeaderBgColor: "#181818", | ||
| tableHeaderColor: "#f8f8f0", | ||
| searchHighlightBgColor: "#d2cd87" | ||
| }, | ||
| wildberry: { | ||
| bgColor: "#1b1725", | ||
| tableBorderColor: "#272030", | ||
| highlightBgColor: "#272030", | ||
| cellBorderColor: "#312742", | ||
| keyNameColor: "#ee82ee", | ||
| indexColor: "#ff79c6", | ||
| numberColor: "#bd93f9", | ||
| booleanColor: "#bd93f9", | ||
| stringColor: "#ff5555", | ||
| objectColor: "#f8f8f2", | ||
| tableHeaderBgColor: "#272030", | ||
| tableHeaderColor: "#ffb86c", | ||
| searchHighlightBgColor: "#f1fa8c" | ||
| }, | ||
| qiita: { | ||
| bgColor: "#f6f6f6", | ||
| tableBorderColor: "#d1d1d1", | ||
| highlightBgColor: "#f9f9f9", | ||
| cellBorderColor: "#e6e6e6", | ||
| keyNameColor: "#55c5db", | ||
| indexColor: "#666666", | ||
| numberColor: "#55c5db", | ||
| booleanColor: "#55c5db", | ||
| stringColor: "#d54e53", | ||
| objectColor: "#55c5db", | ||
| tableHeaderBgColor: "#e6e6e6", | ||
| tableHeaderColor: "#24292e", | ||
| searchHighlightBgColor: "#ffc107" | ||
| }, | ||
| softEra: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#eaeaea", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| } | ||
| }; | ||
@@ -170,65 +906,2 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
| var JSONGrid = function JSONGrid(props) { | ||
| var data = props.data, | ||
| defaultExpandDepth = props.defaultExpandDepth, | ||
| defaultExpandKeyTree = props.defaultExpandKeyTree, | ||
| searchText = props.searchText; | ||
| var _useState = useState(null), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| highlightedElement = _useState2[0], | ||
| setHighlightedElement = _useState2[1]; | ||
| var wrapperRef = useRef(null); | ||
| useEffect(function () { | ||
| function handleClickOutside(event) { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| if (highlightedElement != null) highlightedElement.classList.remove(styles.highlight); | ||
| setHighlightedElement(null); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return function () { | ||
| return document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [wrapperRef, highlightedElement]); | ||
| if (data == null) throw new Error("JSONGrid: data prop cannot be null or undefined"); | ||
| if ((typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") throw new Error("JSONGrid: data prop must be an object or an array"); | ||
| if (defaultExpandDepth != null) { | ||
| if (typeof defaultExpandDepth !== "number") throw new Error("JSONGrid: defaultExpandDepth prop must be a number"); | ||
| if (defaultExpandDepth < 0) throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number"); | ||
| } else { | ||
| defaultExpandDepth = 0; | ||
| } | ||
| if (defaultExpandKeyTree != null) { | ||
| if ((typeof defaultExpandKeyTree === "undefined" ? "undefined" : _typeof(defaultExpandKeyTree)) !== "object") throw new Error("JSONGrid: defaultExpandKeyTree prop must be an object"); | ||
| if (Array.isArray(defaultExpandKeyTree)) throw new Error("JSONGrid: defaultExpandKeyTree prop must not be an array"); | ||
| } | ||
| if (searchText != null) { | ||
| if (typeof searchText !== "string") throw new Error("JSONGrid: searchText prop must be a string"); | ||
| var searchKeyTree = lookup(data, searchText); | ||
| defaultExpandKeyTree = mergeKeyTrees(defaultExpandKeyTree, searchKeyTree); | ||
| } | ||
| return React.createElement( | ||
| "div", | ||
| { className: styles["json-grid-container"], ref: wrapperRef }, | ||
| React.createElement(NestedJSONGrid, { | ||
| level: 0, | ||
| data: data, | ||
| highlightedElement: highlightedElement, | ||
| setHighlightedElement: setHighlightedElement, | ||
| defaultExpandDepth: defaultExpandDepth, | ||
| defaultExpandKeyTree: defaultExpandKeyTree, | ||
| searchText: searchText | ||
| }) | ||
| ); | ||
| }; | ||
| var NestedJSONGrid = function NestedJSONGrid(props) { | ||
@@ -326,7 +999,16 @@ var level = props.level, | ||
| }, | ||
| React.createElement("img", { | ||
| className: styles.glyphicon, | ||
| src: menuIcon, | ||
| clickable: "true" | ||
| }) | ||
| React.createElement( | ||
| "svg", | ||
| { | ||
| className: styles.glyphicon, | ||
| clickable: "true", | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
| height: "1em", | ||
| viewBox: "0 0 448 512" | ||
| }, | ||
| React.createElement("path", { | ||
| fill: "currentColor", | ||
| d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" | ||
| }) | ||
| ) | ||
| ), | ||
@@ -345,3 +1027,5 @@ keys.map(function (k) { | ||
| "span", | ||
| { className: matchesText(k, searchText) ? styles["search-highlight"] : undefined }, | ||
| { | ||
| className: matchesText(k, searchText) ? styles["search-highlight"] : undefined | ||
| }, | ||
| k.replace(/_/g, " ") | ||
@@ -379,3 +1063,5 @@ ) | ||
| "span", | ||
| { className: matchesText(k, searchText) ? styles["search-highlight"] : undefined }, | ||
| { | ||
| className: matchesText(k, searchText) ? styles["search-highlight"] : undefined | ||
| }, | ||
| k.replace(/_/g, " ") | ||
@@ -398,6 +1084,6 @@ ) | ||
| if (level !== 0) { | ||
| var _useState3 = useState(level <= defaultExpandDepth || defaultExpandKeyTree), | ||
| _useState4 = slicedToArray(_useState3, 2), | ||
| open = _useState4[0], | ||
| setOpen = _useState4[1]; | ||
| var _useState = useState(level <= defaultExpandDepth || defaultExpandKeyTree), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| open = _useState2[0], | ||
| setOpen = _useState2[1]; | ||
@@ -432,3 +1118,89 @@ return React.createElement( | ||
| export { JSONGrid }; | ||
| var JSONGrid = function JSONGrid(_ref) { | ||
| var data = _ref.data, | ||
| _ref$defaultExpandDep = _ref.defaultExpandDepth, | ||
| defaultExpandDepth = _ref$defaultExpandDep === undefined ? 0 : _ref$defaultExpandDep, | ||
| _ref$defaultExpandKey = _ref.defaultExpandKeyTree, | ||
| defaultExpandKeyTree = _ref$defaultExpandKey === undefined ? {} : _ref$defaultExpandKey, | ||
| searchText = _ref.searchText, | ||
| _ref$theme = _ref.theme, | ||
| theme = _ref$theme === undefined ? "default" : _ref$theme, | ||
| _ref$customTheme = _ref.customTheme, | ||
| customTheme = _ref$customTheme === undefined ? {} : _ref$customTheme; | ||
| var _useState = useState(null), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| highlightedElement = _useState2[0], | ||
| setHighlightedElement = _useState2[1]; | ||
| var wrapperRef = useRef(null); | ||
| useEffect(function () { | ||
| function handleClickOutside(event) { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| if (highlightedElement !== null) highlightedElement.classList.remove(styles.highlight); | ||
| setHighlightedElement(null); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return function () { | ||
| return document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [highlightedElement]); | ||
| if (!data) { | ||
| throw new Error("JSONGrid: data prop cannot be null or undefined"); | ||
| } | ||
| if (!Array.isArray(data) && (typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") { | ||
| throw new Error("JSONGrid: data prop must be an object or an array"); | ||
| } | ||
| if (defaultExpandDepth < 0) { | ||
| throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number"); | ||
| } | ||
| if (searchText && typeof searchText !== "string") { | ||
| throw new Error("JSONGrid: searchText prop must be a string"); | ||
| } | ||
| if (!themes[theme]) { | ||
| throw new Error("JSONGrid: theme prop must be one of " + Object.keys(themes).join(", ")); | ||
| } | ||
| var themeDetails = themes[theme]; | ||
| var themeStyles = { | ||
| "--jg-bg-color": customTheme.bgColor || themeDetails.bgColor, | ||
| "--jg-table-border-color": customTheme.tableBorderColor || themeDetails.tableBorderColor, | ||
| "--jg-highlight-bg-color": customTheme.highlightBgColor || themeDetails.highlightBgColor, | ||
| "--jg-cell-border-color": customTheme.cellBorderColor || themeDetails.cellBorderColor, | ||
| "--jg-key-name-color": customTheme.keyNameColor || themeDetails.keyNameColor, | ||
| "--jg-index-color": customTheme.indexColor || themeDetails.indexColor, | ||
| "--jg-number-color": customTheme.numberColor || themeDetails.numberColor, | ||
| "--jg-boolean-color": customTheme.booleanColor || themeDetails.booleanColor, | ||
| "--jg-string-color": customTheme.stringColor || themeDetails.stringColor, | ||
| "--jg-object-color": customTheme.objectColor || themeDetails.objectColor, | ||
| "--jg-table-header-bg-color": customTheme.tableHeaderBgColor || themeDetails.tableHeaderBgColor, | ||
| "--jg-table-header-color": customTheme.tableHeaderColor || themeDetails.tableHeaderColor, | ||
| "--jg-search-highlight-bg-color": customTheme.searchHighlightBgColor || themeDetails.searchHighlightBgColor | ||
| }; | ||
| var mergedKeyTree = searchText ? mergeKeyTrees(defaultExpandKeyTree, lookup(data, searchText)) : defaultExpandKeyTree; | ||
| return React.createElement( | ||
| "div", | ||
| { className: styles["json-grid-container"], style: themeStyles, ref: wrapperRef }, | ||
| React.createElement(NestedJSONGrid, { | ||
| level: 0, | ||
| data: data, | ||
| highlightedElement: highlightedElement, | ||
| setHighlightedElement: setHighlightedElement, | ||
| defaultExpandDepth: defaultExpandDepth, | ||
| defaultExpandKeyTree: mergedKeyTree, | ||
| searchText: searchText | ||
| }) | ||
| ); | ||
| }; | ||
| export default JSONGrid; | ||
| //# sourceMappingURL=index.es.js.map |
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
@@ -37,7 +35,743 @@ | ||
| var css = ".styles_json-grid-container__1do2c {\r\n display: inline-block;\r\n margin: 0;\r\n font-family: \"Lato\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\r\n \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\r\n \"Segoe UI Symbol\";\r\n font-size: 0.9375rem;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n color: #fff;\r\n text-align: left;\r\n background-color: #222;\r\n}\r\n\r\n.styles_json-grid-table__3KxDK {\r\n border-collapse: separate !important;\r\n border-spacing: 0;\r\n border: solid #b5b5b5 1px;\r\n -moz-border-radius: 3px;\r\n -webkit-border-radius: 3px;\r\n border-radius: 3px;\r\n -webkit-box-shadow: 0 1px 1px #ccc;\r\n -moz-box-shadow: 0 1px 1px #ccc;\r\n box-shadow: 0 1px 1px #ccc;\r\n}\r\n.styles_highlight__1bpMD {\r\n background-color: #3b3b3b;\r\n font-weight: bold;\r\n}\r\n.styles_obj__dFKgt {\r\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #474747;\r\n padding: 3px 10px 3px 10px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n.styles_obj__dFKgt .styles_name__13yyl {\r\n color: white;\r\n}\r\n.styles_obj__dFKgt .styles_index__2HDDg {\r\n color: #949494;\r\n}\r\n.styles_obj__dFKgt .styles_string__rq61g {\r\n color: #a5c261;\r\n}\r\n.styles_obj__dFKgt .styles_number__2AHSW {\r\n color: #6c99bb;\r\n}\r\n.styles_obj__dFKgt .styles_boolean__1BANa {\r\n color: #6c99bb;\r\n}\r\n.styles_obj__dFKgt .styles_object__3BV4k {\r\n color: white;\r\n}\r\n.styles_order__3lWKM {\r\n background-color: #444;\r\n color: White;\r\n}\r\n.styles_key__2l8qn {\r\n vertical-align: top;\r\n}\r\n.styles_title__1cca0 {\r\n font-weight: bold;\r\n}\r\n.styles_plusminus__3UVy2 {\r\n font-size: 15px;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n}\r\n.styles_search-highlight__PcqVt {\r\n background-color: #565a36;\r\n padding: 1px 5px 1px 5px;\r\n border-radius: 2px;\r\n}\r\n.styles_glyphicon__3VdjK {\r\n position: relative;\r\n top: 3px;\r\n display: inline-block;\r\n font-family: \"Glyphicons Halflings\";\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n"; | ||
| var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "string": "styles_string__rq61g", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" }; | ||
| var css = ".styles_json-grid-container__1do2c {\r\n --jg-bg-color: #222;\r\n --jg-table-border-color: #b5b5b5;\r\n --jg-highlight-bg-color: #3b3b3b;\r\n --jg-cell-border-color: #474747;\r\n\r\n --jg-key-name-color: #ffffff;\r\n --jg-index-color: #949494;\r\n --jg-number-color: #6c99bb;\r\n --jg-boolean-color: #6c99bb;\r\n --jg-string-color: #a5c261;\r\n --jg-object-color: #ffffff;\r\n\r\n --jg-table-header-bg-color: #444;\r\n --jg-table-header-color: #ffffff;\r\n\r\n --jg-search-highlight-bg-color: #565a36;\r\n\r\n display: inline-block;\r\n margin: 0;\r\n font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\r\n line-height: 1.5;\r\n text-align: left;\r\n background-color: var(--jg-bg-color);\r\n}\r\n\r\n.styles_json-grid-table__3KxDK {\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n border: solid var(--jg-table-border-color) 1px;\r\n}\r\n\r\n.styles_json-grid-container__1do2c, .styles_json-grid-table__3KxDK{\r\n border-radius: 3px;\r\n overflow: hidden;\r\n}\r\n\r\n.styles_highlight__1bpMD {\r\n background-color: var(--jg-highlight-bg-color);\r\n font-weight: bold;\r\n}\r\n\r\n.styles_obj__dFKgt {\r\n border: 1px solid var(--jg-cell-border-color);\r\n padding: 3px 10px;\r\n padding-bottom: 4px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n\r\n.styles_obj__dFKgt, .styles_obj__dFKgt .styles_name__13yyl {\r\n color: var(--jg-key-name-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_index__2HDDg {\r\n color: var(--jg-index-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_number__2AHSW{\r\n color: var(--jg-number-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_boolean__1BANa {\r\n color: var(--jg-boolean-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_string__rq61g {\r\n color: var(--jg-string-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_object__3BV4k {\r\n color: var(--jg-object-color);\r\n}\r\n\r\n.styles_order__3lWKM {\r\n background-color: var(--jg-table-header-bg-color);\r\n color: var(--jg-table-header-color);\r\n}\r\n\r\n.styles_key__2l8qn {\r\n vertical-align: top;\r\n}\r\n\r\n.styles_title__1cca0 {\r\n font-weight: bold;\r\n}\r\n\r\n.styles_plusminus__3UVy2 {\r\n font-size: 15px;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n}\r\n\r\n.styles_search-highlight__PcqVt {\r\n background-color: var(--jg-search-highlight-bg-color);\r\n padding: 1px 5px;\r\n padding-top: 0px;\r\n border-radius: 2px;\r\n}\r\n\r\n.styles_glyphicon__3VdjK {\r\n position: relative;\r\n top: 3px;\r\n display: inline-block;\r\n}\r\n"; | ||
| var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "string": "styles_string__rq61g", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" }; | ||
| styleInject(css); | ||
| var menuIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20%20%20%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032z%22%20%20%2F%3E%3C%2Fsvg%3E"; | ||
| var themes = { | ||
| default: { | ||
| bgColor: "#222", | ||
| tableBorderColor: "#b5b5b5", | ||
| highlightBgColor: "#3b3b3b", | ||
| cellBorderColor: "#474747", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#949494", | ||
| numberColor: "#6c99bb", | ||
| booleanColor: "#6c99bb", | ||
| stringColor: "#a5c261", | ||
| objectColor: "#ffffff", | ||
| tableHeaderBgColor: "#444", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightColor: "#565a36" | ||
| }, | ||
| radical: { | ||
| bgColor: "#1e1e3f", | ||
| tableBorderColor: "#3a3a5e", | ||
| highlightBgColor: "#452a4e", | ||
| cellBorderColor: "#ff79c6", | ||
| keyNameColor: "#e1efff", | ||
| indexColor: "#b7b7ce", | ||
| numberColor: "#ffcc66", | ||
| booleanColor: "#f18e4f", | ||
| stringColor: "#a8ff60", | ||
| objectColor: "#ffcc66", | ||
| tableHeaderBgColor: "#2b265c", | ||
| tableHeaderColor: "#e1efff", | ||
| searchHighlightColor: "#b77ee0" | ||
| }, | ||
| cobalt: { | ||
| bgColor: "#002240", | ||
| tableBorderColor: "#003c60", | ||
| highlightBgColor: "#003c60", | ||
| cellBorderColor: "#007acc", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#007acc", | ||
| numberColor: "#8be9fd", | ||
| booleanColor: "#ff79c6", | ||
| stringColor: "#ff79c6", | ||
| objectColor: "#8be9fd", | ||
| tableHeaderBgColor: "#003c60", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#0f5078" | ||
| }, | ||
| dracula: { | ||
| bgColor: "#282a36", | ||
| tableBorderColor: "#44475a", | ||
| highlightBgColor: "#44475a", | ||
| cellBorderColor: "#6272a4", | ||
| keyNameColor: "#bd93f9", | ||
| indexColor: "#6272a4", | ||
| numberColor: "#8be9fd", | ||
| booleanColor: "#ff79c6", | ||
| stringColor: "#f1fa8c", | ||
| objectColor: "#ff79c6", | ||
| tableHeaderBgColor: "#44475a", | ||
| tableHeaderColor: "#f8f8f2", | ||
| searchHighlightBgColor: "#ff96d2" | ||
| }, | ||
| monokai: { | ||
| bgColor: "#272822", | ||
| tableBorderColor: "#49483e", | ||
| highlightBgColor: "#49483e", | ||
| cellBorderColor: "#75715e", | ||
| keyNameColor: "#f92672", | ||
| indexColor: "#75715e", | ||
| numberColor: "#ae81ff", | ||
| booleanColor: "#ae81ff", | ||
| stringColor: "#e6db74", | ||
| objectColor: "#a6e22e", | ||
| tableHeaderBgColor: "#414434", | ||
| tableHeaderColor: "#f8f8f2", | ||
| searchHighlightBgColor: "#797760" | ||
| }, | ||
| solarizedLight: { | ||
| bgColor: "#fdf6e3", | ||
| tableBorderColor: "#839496", | ||
| highlightBgColor: "#eee8d5", | ||
| cellBorderColor: "#d0d0d0", | ||
| keyNameColor: "#268bd2", | ||
| indexColor: "#657b83", | ||
| numberColor: "#2aa198", | ||
| booleanColor: "#2aa198", | ||
| stringColor: "#859900", | ||
| objectColor: "#2aa198", | ||
| tableHeaderBgColor: "#eee8d5", | ||
| tableHeaderColor: "#657b83", | ||
| searchHighlightBgColor: "#ddd1ab" | ||
| }, | ||
| solarizedDark: { | ||
| bgColor: "#002b36", | ||
| tableBorderColor: "#586e75", | ||
| highlightBgColor: "#073642", | ||
| cellBorderColor: "#073642", | ||
| keyNameColor: "#268bd2", | ||
| indexColor: "#839496", | ||
| numberColor: "#b58900", | ||
| booleanColor: "#b58900", | ||
| stringColor: "#859900", | ||
| objectColor: "#b58900", | ||
| tableHeaderBgColor: "#073642", | ||
| tableHeaderColor: "#93a1a1", | ||
| searchHighlightBgColor: "#185e70" | ||
| }, | ||
| materialDark: { | ||
| bgColor: "#263238", | ||
| tableBorderColor: "#37474f", | ||
| highlightBgColor: "#37474f", | ||
| cellBorderColor: "#546e7a", | ||
| keyNameColor: "#80cbc4", | ||
| indexColor: "#90a4ae", | ||
| numberColor: "#82b1ff", | ||
| booleanColor: "#82b1ff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#455a64", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| oceanicNext: { | ||
| bgColor: "#1b2b34", | ||
| tableBorderColor: "#2c3e50", | ||
| highlightBgColor: "#343d46", | ||
| cellBorderColor: "#34495e", | ||
| keyNameColor: "#82b1ff", | ||
| indexColor: "#546e7a", | ||
| numberColor: "#89ddff", | ||
| booleanColor: "#89ddff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#2c3e50", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| panda: { | ||
| bgColor: "#292a2b", | ||
| tableBorderColor: "#4d4e50", | ||
| highlightBgColor: "#434547", | ||
| cellBorderColor: "#5f6062", | ||
| keyNameColor: "#ff6b72", | ||
| indexColor: "#9aedfe", | ||
| numberColor: "#f5d76e", | ||
| booleanColor: "#f5d76e", | ||
| stringColor: "#a5ef63", | ||
| objectColor: "#ff6b72", | ||
| tableHeaderBgColor: "#3b3c3d", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| gruvboxMaterial: { | ||
| bgColor: "#282828", | ||
| tableBorderColor: "#3c3836", | ||
| highlightBgColor: "#3c3836", | ||
| cellBorderColor: "#504945", | ||
| keyNameColor: "#d3869b", | ||
| indexColor: "#bdae93", | ||
| numberColor: "#8ec07c", | ||
| booleanColor: "#8ec07c", | ||
| stringColor: "#ebdbb2", | ||
| objectColor: "#d3869b", | ||
| tableHeaderBgColor: "#3c3836", | ||
| tableHeaderColor: "#ebdbb2", | ||
| searchHighlightBgColor: "#62564f" | ||
| }, | ||
| merko: { | ||
| bgColor: "#f6f8fa", | ||
| tableBorderColor: "#e1e4e8", | ||
| highlightBgColor: "#e1e4e8", | ||
| cellBorderColor: "#c9d1d9", | ||
| keyNameColor: "#0366d6", | ||
| indexColor: "#586069", | ||
| numberColor: "#22863a", | ||
| booleanColor: "#22863a", | ||
| stringColor: "#cb2431", | ||
| objectColor: "#0366d6", | ||
| tableHeaderBgColor: "#e1e4e8", | ||
| tableHeaderColor: "#0366d6", | ||
| searchHighlightBgColor: "#ffd33d" | ||
| }, | ||
| tokyoNight: { | ||
| bgColor: "#1a1b26", | ||
| tableBorderColor: "#272a36", | ||
| highlightBgColor: "#34374c", | ||
| cellBorderColor: "#272a36", | ||
| keyNameColor: "#9d88f5", | ||
| indexColor: "#89b8ff", | ||
| numberColor: "#46d9ff", | ||
| booleanColor: "#46d9ff", | ||
| stringColor: "#ff75b5", | ||
| objectColor: "#9d88f5", | ||
| tableHeaderBgColor: "#3a3e54", | ||
| tableHeaderColor: "#f3f3f3", | ||
| searchHighlightBgColor: "#53577b" | ||
| }, | ||
| remedy: { | ||
| bgColor: "#ffffff", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#f5f5f5", | ||
| cellBorderColor: "#eaeaea", | ||
| keyNameColor: "#6e5494", | ||
| indexColor: "#4d4d4d", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2c8ebb", | ||
| objectColor: "#6e5494", | ||
| tableHeaderBgColor: "#f5f5f5", | ||
| tableHeaderColor: "#6e5494", | ||
| searchHighlightBgColor: "#e2cd8f" | ||
| }, | ||
| minimal: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#eeeeee", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#333333", | ||
| indexColor: "#666666", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2ca22c", | ||
| objectColor: "#333333", | ||
| tableHeaderBgColor: "#f0f0f0", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#e0e073" | ||
| }, | ||
| auroraX: { | ||
| bgColor: "#2b313a", | ||
| tableBorderColor: "#343c47", | ||
| highlightBgColor: "#343c47", | ||
| cellBorderColor: "#3d4752", | ||
| keyNameColor: "#b4be82", | ||
| indexColor: "#5c6773", | ||
| numberColor: "#7aa2f7", | ||
| booleanColor: "#7aa2f7", | ||
| stringColor: "#c3a6ff", | ||
| objectColor: "#b4be82", | ||
| tableHeaderBgColor: "#343c47", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| atlanticNight: { | ||
| bgColor: "#2a394f", | ||
| tableBorderColor: "#344b63", | ||
| highlightBgColor: "#344b63", | ||
| cellBorderColor: "#4d5c71", | ||
| keyNameColor: "#6cb6ff", | ||
| indexColor: "#6cb6ff", | ||
| numberColor: "#a2d6ff", | ||
| booleanColor: "#a2d6ff", | ||
| stringColor: "#e2e9fd", | ||
| objectColor: "#6cb6ff", | ||
| tableHeaderBgColor: "#344b63", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff8f40" | ||
| }, | ||
| aTouchOfLilac: { | ||
| bgColor: "#f3f0ff", | ||
| tableBorderColor: "#d2cef4", | ||
| highlightBgColor: "#e1dcff", | ||
| cellBorderColor: "#b8b0e8", | ||
| keyNameColor: "#a26bff", | ||
| indexColor: "#8664b3", | ||
| numberColor: "#6772e5", | ||
| booleanColor: "#6772e5", | ||
| stringColor: "#528bff", | ||
| objectColor: "#a26bff", | ||
| tableHeaderBgColor: "#d2cef4", | ||
| tableHeaderColor: "#44337a", | ||
| searchHighlightBgColor: "#edc8bc" | ||
| }, | ||
| glassUI: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#e0e0e0", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#333333", | ||
| indexColor: "#666666", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2ca22c", | ||
| objectColor: "#333333", | ||
| tableHeaderBgColor: "#dddddd", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#e2e29c" | ||
| }, | ||
| fireflyPro: { | ||
| bgColor: "#292d3e", | ||
| tableBorderColor: "#414863", | ||
| highlightBgColor: "#414863", | ||
| cellBorderColor: "#252938", | ||
| keyNameColor: "#c3a6ff", | ||
| indexColor: "#b8bdff", | ||
| numberColor: "#ffd580", | ||
| booleanColor: "#ffd580", | ||
| stringColor: "#9ece6a", | ||
| objectColor: "#ff9e64", | ||
| tableHeaderBgColor: "#414863", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff7272" | ||
| }, | ||
| reUI: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#f0f0f0", | ||
| cellBorderColor: "#c7c7c7", | ||
| keyNameColor: "#4caf50", | ||
| indexColor: "#757575", | ||
| numberColor: "#2196f3", | ||
| booleanColor: "#2196f3", | ||
| stringColor: "#ff9800", | ||
| objectColor: "#4caf50", | ||
| tableHeaderBgColor: "#e0e0e0", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffeb3b" | ||
| }, | ||
| slime: { | ||
| bgColor: "#222222", | ||
| tableBorderColor: "#333333", | ||
| highlightBgColor: "#333333", | ||
| cellBorderColor: "#444444", | ||
| keyNameColor: "#5fd7ff", | ||
| indexColor: "#999999", | ||
| numberColor: "#b8d68c", | ||
| booleanColor: "#b8d68c", | ||
| stringColor: "#ce9178", | ||
| objectColor: "#dcdcaa", | ||
| tableHeaderBgColor: "#333333", | ||
| tableHeaderColor: "#cccccc", | ||
| searchHighlightBgColor: "#fa4949" | ||
| }, | ||
| signedDarkPro: { | ||
| bgColor: "#1e1e1e", | ||
| tableBorderColor: "#2a2a2a", | ||
| highlightBgColor: "#2a2a2a", | ||
| cellBorderColor: "#3a3a3a", | ||
| keyNameColor: "#8da6ce", | ||
| indexColor: "#848484", | ||
| numberColor: "#b5bd68", | ||
| booleanColor: "#b5bd68", | ||
| stringColor: "#cc7832", | ||
| objectColor: "#b294bb", | ||
| tableHeaderBgColor: "#2a2a2a", | ||
| tableHeaderColor: "#d4d4d4", | ||
| searchHighlightBgColor: "#eab09e" | ||
| }, | ||
| ariakeDark: { | ||
| bgColor: "#1c1e26", | ||
| tableBorderColor: "#2a2c33", | ||
| highlightBgColor: "#2a2c33", | ||
| cellBorderColor: "#3a3c47", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#6b7089", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#2a2c33", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#efd096" | ||
| }, | ||
| snazzyLight: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#d0d0d0", | ||
| highlightBgColor: "#f0f0f0", | ||
| cellBorderColor: "#b0b0b0", | ||
| keyNameColor: "#6ab0f3", | ||
| indexColor: "#787878", | ||
| numberColor: "#bd93f9", | ||
| booleanColor: "#bd93f9", | ||
| stringColor: "#50fa7b", | ||
| objectColor: "#ffb86c", | ||
| tableHeaderBgColor: "#d0d0d0", | ||
| tableHeaderColor: "#2e2e2e", | ||
| searchHighlightBgColor: "#ff5555" | ||
| }, | ||
| spacegray: { | ||
| bgColor: "#202328", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#394147", | ||
| keyNameColor: "#a9b1d6", | ||
| indexColor: "#768390", | ||
| numberColor: "#f29718", | ||
| booleanColor: "#f29718", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#e0e0e0", | ||
| searchHighlightBgColor: "#ff6c6b" | ||
| }, | ||
| celestial: { | ||
| bgColor: "#0f1419", | ||
| tableBorderColor: "#1c232b", | ||
| highlightBgColor: "#1c232b", | ||
| cellBorderColor: "#2c3848", | ||
| keyNameColor: "#79b8ff", | ||
| indexColor: "#abb2bf", | ||
| numberColor: "#56d364", | ||
| booleanColor: "#56d364", | ||
| stringColor: "#d19a66", | ||
| objectColor: "#c678dd", | ||
| tableHeaderBgColor: "#1c232b", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#30435a" | ||
| }, | ||
| blueberryDark: { | ||
| bgColor: "#242b38", | ||
| tableBorderColor: "#343d4a", | ||
| highlightBgColor: "#343d4a", | ||
| cellBorderColor: "#444f5c", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#8c98a6", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#343d4a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#30435a" | ||
| }, | ||
| bear: { | ||
| bgColor: "#e6e6e6", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#d5d5d5", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| }, | ||
| oneDarkPro: { | ||
| bgColor: "#282c34", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#3e4451", | ||
| keyNameColor: "#abb2bf", | ||
| indexColor: "#5c6370", | ||
| numberColor: "#d19a66", | ||
| booleanColor: "#d19a66", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| nord: { | ||
| bgColor: "#2e3440", | ||
| tableBorderColor: "#3b4252", | ||
| highlightBgColor: "#3b4252", | ||
| cellBorderColor: "#434c5e", | ||
| keyNameColor: "#81a1c1", | ||
| indexColor: "#a3be8c", | ||
| numberColor: "#8fbcbb", | ||
| booleanColor: "#8fbcbb", | ||
| stringColor: "#ebcb8b", | ||
| objectColor: "#b48ead", | ||
| tableHeaderBgColor: "#3b4252", | ||
| tableHeaderColor: "#e5e9f0", | ||
| searchHighlightBgColor: "#bf616a" | ||
| }, | ||
| palenight: { | ||
| bgColor: "#292d3e", | ||
| tableBorderColor: "#414863", | ||
| highlightBgColor: "#414863", | ||
| cellBorderColor: "#2c3042", | ||
| keyNameColor: "#c3a6ff", | ||
| indexColor: "#b8bdff", | ||
| numberColor: "#ffd580", | ||
| booleanColor: "#ffd580", | ||
| stringColor: "#9ece6a", | ||
| objectColor: "#ff9e64", | ||
| tableHeaderBgColor: "#414863", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff8b8b" | ||
| }, | ||
| nightOwl: { | ||
| bgColor: "#011627", | ||
| tableBorderColor: "#02233d", | ||
| highlightBgColor: "#02233d", | ||
| cellBorderColor: "#03314b", | ||
| keyNameColor: "#addb67", | ||
| indexColor: "#dcdcaa", | ||
| numberColor: "#82aaff", | ||
| booleanColor: "#82aaff", | ||
| stringColor: "#c792ea", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#02233d", | ||
| tableHeaderColor: "#e0e0e0", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| andromeda: { | ||
| bgColor: "#282c34", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#3e4451", | ||
| keyNameColor: "#abb2bf", | ||
| indexColor: "#5c6370", | ||
| numberColor: "#d19a66", | ||
| booleanColor: "#d19a66", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| horizon: { | ||
| bgColor: "#1c1e26", | ||
| tableBorderColor: "#2a2c33", | ||
| highlightBgColor: "#2a2c33", | ||
| cellBorderColor: "#3a3c47", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#6b7089", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#2a2c33", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#f2d6a3" | ||
| }, | ||
| cobalt2: { | ||
| bgColor: "#193549", | ||
| tableBorderColor: "#234666", | ||
| highlightBgColor: "#234666", | ||
| cellBorderColor: "#29546a", | ||
| keyNameColor: "#6699cc", | ||
| indexColor: "#9cdcfe", | ||
| numberColor: "#b5cea8", | ||
| booleanColor: "#b5cea8", | ||
| stringColor: "#ce9178", | ||
| objectColor: "#d1d2d3", | ||
| tableHeaderBgColor: "#234666", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| atomOneLight: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#f5f5f5", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| }, | ||
| ysgrifennwr: { | ||
| bgColor: "#f8f8f8", | ||
| tableBorderColor: "#eaeaea", | ||
| highlightBgColor: "#f2f2f2", | ||
| cellBorderColor: "#d9d9d9", | ||
| keyNameColor: "#2b91af", | ||
| indexColor: "#888888", | ||
| numberColor: "#6a5acd", | ||
| booleanColor: "#6a5acd", | ||
| stringColor: "#cd5c5c", | ||
| objectColor: "#008b8b", | ||
| tableHeaderBgColor: "#eaeaea", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ff9900" | ||
| }, | ||
| notepadPlusPlusRemixed: { | ||
| bgColor: "#262626", | ||
| tableBorderColor: "#333333", | ||
| highlightBgColor: "#333333", | ||
| cellBorderColor: "#4d4d4d", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#aaaaaa", | ||
| numberColor: "#ffcc66", | ||
| booleanColor: "#ffcc66", | ||
| stringColor: "#a6e22e", | ||
| objectColor: "#66d9ef", | ||
| tableHeaderBgColor: "#333333", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff6666" | ||
| }, | ||
| githubLight: { | ||
| bgColor: "#ffffff", | ||
| tableBorderColor: "#eaecef", | ||
| highlightBgColor: "#f6f8fa", | ||
| cellBorderColor: "#d1d5da", | ||
| keyNameColor: "#0366d6", | ||
| indexColor: "#6a737d", | ||
| numberColor: "#0366d6", | ||
| booleanColor: "#0366d6", | ||
| stringColor: "#032f62", | ||
| objectColor: "#6f42c1", | ||
| tableHeaderBgColor: "#f6f8fa", | ||
| tableHeaderColor: "#24292e", | ||
| searchHighlightBgColor: "#fffbdd" | ||
| }, | ||
| shadesOfPurple: { | ||
| bgColor: "#2d2b55", | ||
| tableBorderColor: "#463d69", | ||
| highlightBgColor: "#463d69", | ||
| cellBorderColor: "#54496b", | ||
| keyNameColor: "#fad000", | ||
| indexColor: "#a599e9", | ||
| numberColor: "#ff6188", | ||
| booleanColor: "#ff6188", | ||
| stringColor: "#a9b9ce", | ||
| objectColor: "#fad000", | ||
| tableHeaderBgColor: "#463d69", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff6188" | ||
| }, | ||
| synthWave: { | ||
| bgColor: "#2a2139", | ||
| tableBorderColor: "#3c3359", | ||
| highlightBgColor: "#3c3359", | ||
| cellBorderColor: "#524772", | ||
| keyNameColor: "#f92aad", | ||
| indexColor: "#4df0ff", | ||
| numberColor: "#fff", | ||
| booleanColor: "#fff", | ||
| stringColor: "#00f9f9", | ||
| objectColor: "#ff8d00", | ||
| tableHeaderBgColor: "#3c3359", | ||
| tableHeaderColor: "#fff", | ||
| searchHighlightBgColor: "#ff8d00" | ||
| }, | ||
| codeBlue: { | ||
| bgColor: "#0e1b29", | ||
| tableBorderColor: "#233544", | ||
| highlightBgColor: "#233544", | ||
| cellBorderColor: "#345a7d", | ||
| keyNameColor: "#5a9bcf", | ||
| indexColor: "#96b5b4", | ||
| numberColor: "#99cc99", | ||
| booleanColor: "#99cc99", | ||
| stringColor: "#d2cd87", | ||
| objectColor: "#ff8d00", | ||
| tableHeaderBgColor: "#233544", | ||
| tableHeaderColor: "#fff", | ||
| searchHighlightBgColor: "#233544" | ||
| }, | ||
| cyberpunk: { | ||
| bgColor: "#1b2b34", | ||
| tableBorderColor: "#405c79", | ||
| highlightBgColor: "#405c79", | ||
| cellBorderColor: "#52676d", | ||
| keyNameColor: "#82b1ff", | ||
| indexColor: "#c792ea", | ||
| numberColor: "#89ddff", | ||
| booleanColor: "#89ddff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#405c79", | ||
| tableHeaderColor: "#d8dee9", | ||
| searchHighlightBgColor: "#405c79" | ||
| }, | ||
| laserWave: { | ||
| bgColor: "#0a1e24", | ||
| tableBorderColor: "#0f2a35", | ||
| highlightBgColor: "#0f2a35", | ||
| cellBorderColor: "#153e50", | ||
| keyNameColor: "#f5ef19", | ||
| indexColor: "#33ccff", | ||
| numberColor: "#19f9d8", | ||
| booleanColor: "#19f9d8", | ||
| stringColor: "#f4eeff", | ||
| objectColor: "#ff66d8", | ||
| tableHeaderBgColor: "#0f2a35", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#f76d47" | ||
| }, | ||
| hipster: { | ||
| bgColor: "#0f0f0f", | ||
| tableBorderColor: "#181818", | ||
| highlightBgColor: "#181818", | ||
| cellBorderColor: "#303030", | ||
| keyNameColor: "#74b0df", | ||
| indexColor: "#999999", | ||
| numberColor: "#8cdcfe", | ||
| booleanColor: "#8cdcfe", | ||
| stringColor: "#ff8a65", | ||
| objectColor: "#b0bec5", | ||
| tableHeaderBgColor: "#181818", | ||
| tableHeaderColor: "#f8f8f0", | ||
| searchHighlightBgColor: "#d2cd87" | ||
| }, | ||
| wildberry: { | ||
| bgColor: "#1b1725", | ||
| tableBorderColor: "#272030", | ||
| highlightBgColor: "#272030", | ||
| cellBorderColor: "#312742", | ||
| keyNameColor: "#ee82ee", | ||
| indexColor: "#ff79c6", | ||
| numberColor: "#bd93f9", | ||
| booleanColor: "#bd93f9", | ||
| stringColor: "#ff5555", | ||
| objectColor: "#f8f8f2", | ||
| tableHeaderBgColor: "#272030", | ||
| tableHeaderColor: "#ffb86c", | ||
| searchHighlightBgColor: "#f1fa8c" | ||
| }, | ||
| qiita: { | ||
| bgColor: "#f6f6f6", | ||
| tableBorderColor: "#d1d1d1", | ||
| highlightBgColor: "#f9f9f9", | ||
| cellBorderColor: "#e6e6e6", | ||
| keyNameColor: "#55c5db", | ||
| indexColor: "#666666", | ||
| numberColor: "#55c5db", | ||
| booleanColor: "#55c5db", | ||
| stringColor: "#d54e53", | ||
| objectColor: "#55c5db", | ||
| tableHeaderBgColor: "#e6e6e6", | ||
| tableHeaderColor: "#24292e", | ||
| searchHighlightBgColor: "#ffc107" | ||
| }, | ||
| softEra: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#eaeaea", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| } | ||
| }; | ||
@@ -177,65 +911,2 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
| var JSONGrid = function JSONGrid(props) { | ||
| var data = props.data, | ||
| defaultExpandDepth = props.defaultExpandDepth, | ||
| defaultExpandKeyTree = props.defaultExpandKeyTree, | ||
| searchText = props.searchText; | ||
| var _useState = React.useState(null), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| highlightedElement = _useState2[0], | ||
| setHighlightedElement = _useState2[1]; | ||
| var wrapperRef = React.useRef(null); | ||
| React.useEffect(function () { | ||
| function handleClickOutside(event) { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| if (highlightedElement != null) highlightedElement.classList.remove(styles.highlight); | ||
| setHighlightedElement(null); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return function () { | ||
| return document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [wrapperRef, highlightedElement]); | ||
| if (data == null) throw new Error("JSONGrid: data prop cannot be null or undefined"); | ||
| if ((typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") throw new Error("JSONGrid: data prop must be an object or an array"); | ||
| if (defaultExpandDepth != null) { | ||
| if (typeof defaultExpandDepth !== "number") throw new Error("JSONGrid: defaultExpandDepth prop must be a number"); | ||
| if (defaultExpandDepth < 0) throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number"); | ||
| } else { | ||
| defaultExpandDepth = 0; | ||
| } | ||
| if (defaultExpandKeyTree != null) { | ||
| if ((typeof defaultExpandKeyTree === "undefined" ? "undefined" : _typeof(defaultExpandKeyTree)) !== "object") throw new Error("JSONGrid: defaultExpandKeyTree prop must be an object"); | ||
| if (Array.isArray(defaultExpandKeyTree)) throw new Error("JSONGrid: defaultExpandKeyTree prop must not be an array"); | ||
| } | ||
| if (searchText != null) { | ||
| if (typeof searchText !== "string") throw new Error("JSONGrid: searchText prop must be a string"); | ||
| var searchKeyTree = lookup(data, searchText); | ||
| defaultExpandKeyTree = mergeKeyTrees(defaultExpandKeyTree, searchKeyTree); | ||
| } | ||
| return React__default.createElement( | ||
| "div", | ||
| { className: styles["json-grid-container"], ref: wrapperRef }, | ||
| React__default.createElement(NestedJSONGrid, { | ||
| level: 0, | ||
| data: data, | ||
| highlightedElement: highlightedElement, | ||
| setHighlightedElement: setHighlightedElement, | ||
| defaultExpandDepth: defaultExpandDepth, | ||
| defaultExpandKeyTree: defaultExpandKeyTree, | ||
| searchText: searchText | ||
| }) | ||
| ); | ||
| }; | ||
| var NestedJSONGrid = function NestedJSONGrid(props) { | ||
@@ -333,7 +1004,16 @@ var level = props.level, | ||
| }, | ||
| React__default.createElement("img", { | ||
| className: styles.glyphicon, | ||
| src: menuIcon, | ||
| clickable: "true" | ||
| }) | ||
| React__default.createElement( | ||
| "svg", | ||
| { | ||
| className: styles.glyphicon, | ||
| clickable: "true", | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
| height: "1em", | ||
| viewBox: "0 0 448 512" | ||
| }, | ||
| React__default.createElement("path", { | ||
| fill: "currentColor", | ||
| d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" | ||
| }) | ||
| ) | ||
| ), | ||
@@ -352,3 +1032,5 @@ keys.map(function (k) { | ||
| "span", | ||
| { className: matchesText(k, searchText) ? styles["search-highlight"] : undefined }, | ||
| { | ||
| className: matchesText(k, searchText) ? styles["search-highlight"] : undefined | ||
| }, | ||
| k.replace(/_/g, " ") | ||
@@ -386,3 +1068,5 @@ ) | ||
| "span", | ||
| { className: matchesText(k, searchText) ? styles["search-highlight"] : undefined }, | ||
| { | ||
| className: matchesText(k, searchText) ? styles["search-highlight"] : undefined | ||
| }, | ||
| k.replace(/_/g, " ") | ||
@@ -405,6 +1089,6 @@ ) | ||
| if (level !== 0) { | ||
| var _useState3 = React.useState(level <= defaultExpandDepth || defaultExpandKeyTree), | ||
| _useState4 = slicedToArray(_useState3, 2), | ||
| open = _useState4[0], | ||
| setOpen = _useState4[1]; | ||
| var _useState = React.useState(level <= defaultExpandDepth || defaultExpandKeyTree), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| open = _useState2[0], | ||
| setOpen = _useState2[1]; | ||
@@ -439,3 +1123,89 @@ return React__default.createElement( | ||
| exports.JSONGrid = JSONGrid; | ||
| var JSONGrid = function JSONGrid(_ref) { | ||
| var data = _ref.data, | ||
| _ref$defaultExpandDep = _ref.defaultExpandDepth, | ||
| defaultExpandDepth = _ref$defaultExpandDep === undefined ? 0 : _ref$defaultExpandDep, | ||
| _ref$defaultExpandKey = _ref.defaultExpandKeyTree, | ||
| defaultExpandKeyTree = _ref$defaultExpandKey === undefined ? {} : _ref$defaultExpandKey, | ||
| searchText = _ref.searchText, | ||
| _ref$theme = _ref.theme, | ||
| theme = _ref$theme === undefined ? "default" : _ref$theme, | ||
| _ref$customTheme = _ref.customTheme, | ||
| customTheme = _ref$customTheme === undefined ? {} : _ref$customTheme; | ||
| var _useState = React.useState(null), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| highlightedElement = _useState2[0], | ||
| setHighlightedElement = _useState2[1]; | ||
| var wrapperRef = React.useRef(null); | ||
| React.useEffect(function () { | ||
| function handleClickOutside(event) { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| if (highlightedElement !== null) highlightedElement.classList.remove(styles.highlight); | ||
| setHighlightedElement(null); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return function () { | ||
| return document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [highlightedElement]); | ||
| if (!data) { | ||
| throw new Error("JSONGrid: data prop cannot be null or undefined"); | ||
| } | ||
| if (!Array.isArray(data) && (typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") { | ||
| throw new Error("JSONGrid: data prop must be an object or an array"); | ||
| } | ||
| if (defaultExpandDepth < 0) { | ||
| throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number"); | ||
| } | ||
| if (searchText && typeof searchText !== "string") { | ||
| throw new Error("JSONGrid: searchText prop must be a string"); | ||
| } | ||
| if (!themes[theme]) { | ||
| throw new Error("JSONGrid: theme prop must be one of " + Object.keys(themes).join(", ")); | ||
| } | ||
| var themeDetails = themes[theme]; | ||
| var themeStyles = { | ||
| "--jg-bg-color": customTheme.bgColor || themeDetails.bgColor, | ||
| "--jg-table-border-color": customTheme.tableBorderColor || themeDetails.tableBorderColor, | ||
| "--jg-highlight-bg-color": customTheme.highlightBgColor || themeDetails.highlightBgColor, | ||
| "--jg-cell-border-color": customTheme.cellBorderColor || themeDetails.cellBorderColor, | ||
| "--jg-key-name-color": customTheme.keyNameColor || themeDetails.keyNameColor, | ||
| "--jg-index-color": customTheme.indexColor || themeDetails.indexColor, | ||
| "--jg-number-color": customTheme.numberColor || themeDetails.numberColor, | ||
| "--jg-boolean-color": customTheme.booleanColor || themeDetails.booleanColor, | ||
| "--jg-string-color": customTheme.stringColor || themeDetails.stringColor, | ||
| "--jg-object-color": customTheme.objectColor || themeDetails.objectColor, | ||
| "--jg-table-header-bg-color": customTheme.tableHeaderBgColor || themeDetails.tableHeaderBgColor, | ||
| "--jg-table-header-color": customTheme.tableHeaderColor || themeDetails.tableHeaderColor, | ||
| "--jg-search-highlight-bg-color": customTheme.searchHighlightBgColor || themeDetails.searchHighlightBgColor | ||
| }; | ||
| var mergedKeyTree = searchText ? mergeKeyTrees(defaultExpandKeyTree, lookup(data, searchText)) : defaultExpandKeyTree; | ||
| return React__default.createElement( | ||
| "div", | ||
| { className: styles["json-grid-container"], style: themeStyles, ref: wrapperRef }, | ||
| React__default.createElement(NestedJSONGrid, { | ||
| level: 0, | ||
| data: data, | ||
| highlightedElement: highlightedElement, | ||
| setHighlightedElement: setHighlightedElement, | ||
| defaultExpandDepth: defaultExpandDepth, | ||
| defaultExpandKeyTree: mergedKeyTree, | ||
| searchText: searchText | ||
| }) | ||
| ); | ||
| }; | ||
| module.exports = JSONGrid; | ||
| //# sourceMappingURL=index.js.map |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) : | ||
| (factory((global['react-json-grid'] = {}),global.React)); | ||
| }(this, (function (exports,React) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) : | ||
| typeof define === 'function' && define.amd ? define(['react'], factory) : | ||
| (global['react-json-grid'] = factory(global.React)); | ||
| }(this, (function (React) { 'use strict'; | ||
@@ -36,7 +36,743 @@ var React__default = 'default' in React ? React['default'] : React; | ||
| var css = ".styles_json-grid-container__1do2c {\r\n display: inline-block;\r\n margin: 0;\r\n font-family: \"Lato\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\r\n \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\r\n \"Segoe UI Symbol\";\r\n font-size: 0.9375rem;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n color: #fff;\r\n text-align: left;\r\n background-color: #222;\r\n}\r\n\r\n.styles_json-grid-table__3KxDK {\r\n border-collapse: separate !important;\r\n border-spacing: 0;\r\n border: solid #b5b5b5 1px;\r\n -moz-border-radius: 3px;\r\n -webkit-border-radius: 3px;\r\n border-radius: 3px;\r\n -webkit-box-shadow: 0 1px 1px #ccc;\r\n -moz-box-shadow: 0 1px 1px #ccc;\r\n box-shadow: 0 1px 1px #ccc;\r\n}\r\n.styles_highlight__1bpMD {\r\n background-color: #3b3b3b;\r\n font-weight: bold;\r\n}\r\n.styles_obj__dFKgt {\r\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #474747;\r\n padding: 3px 10px 3px 10px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n.styles_obj__dFKgt .styles_name__13yyl {\r\n color: white;\r\n}\r\n.styles_obj__dFKgt .styles_index__2HDDg {\r\n color: #949494;\r\n}\r\n.styles_obj__dFKgt .styles_string__rq61g {\r\n color: #a5c261;\r\n}\r\n.styles_obj__dFKgt .styles_number__2AHSW {\r\n color: #6c99bb;\r\n}\r\n.styles_obj__dFKgt .styles_boolean__1BANa {\r\n color: #6c99bb;\r\n}\r\n.styles_obj__dFKgt .styles_object__3BV4k {\r\n color: white;\r\n}\r\n.styles_order__3lWKM {\r\n background-color: #444;\r\n color: White;\r\n}\r\n.styles_key__2l8qn {\r\n vertical-align: top;\r\n}\r\n.styles_title__1cca0 {\r\n font-weight: bold;\r\n}\r\n.styles_plusminus__3UVy2 {\r\n font-size: 15px;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n}\r\n.styles_search-highlight__PcqVt {\r\n background-color: #565a36;\r\n padding: 1px 5px 1px 5px;\r\n border-radius: 2px;\r\n}\r\n.styles_glyphicon__3VdjK {\r\n position: relative;\r\n top: 3px;\r\n display: inline-block;\r\n font-family: \"Glyphicons Halflings\";\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n"; | ||
| var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "string": "styles_string__rq61g", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" }; | ||
| var css = ".styles_json-grid-container__1do2c {\r\n --jg-bg-color: #222;\r\n --jg-table-border-color: #b5b5b5;\r\n --jg-highlight-bg-color: #3b3b3b;\r\n --jg-cell-border-color: #474747;\r\n\r\n --jg-key-name-color: #ffffff;\r\n --jg-index-color: #949494;\r\n --jg-number-color: #6c99bb;\r\n --jg-boolean-color: #6c99bb;\r\n --jg-string-color: #a5c261;\r\n --jg-object-color: #ffffff;\r\n\r\n --jg-table-header-bg-color: #444;\r\n --jg-table-header-color: #ffffff;\r\n\r\n --jg-search-highlight-bg-color: #565a36;\r\n\r\n display: inline-block;\r\n margin: 0;\r\n font-family: \"Segoe UI\", Roboto, Arial, sans-serif;\r\n line-height: 1.5;\r\n text-align: left;\r\n background-color: var(--jg-bg-color);\r\n}\r\n\r\n.styles_json-grid-table__3KxDK {\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n border: solid var(--jg-table-border-color) 1px;\r\n}\r\n\r\n.styles_json-grid-container__1do2c, .styles_json-grid-table__3KxDK{\r\n border-radius: 3px;\r\n overflow: hidden;\r\n}\r\n\r\n.styles_highlight__1bpMD {\r\n background-color: var(--jg-highlight-bg-color);\r\n font-weight: bold;\r\n}\r\n\r\n.styles_obj__dFKgt {\r\n border: 1px solid var(--jg-cell-border-color);\r\n padding: 3px 10px;\r\n padding-bottom: 4px;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n}\r\n\r\n.styles_obj__dFKgt, .styles_obj__dFKgt .styles_name__13yyl {\r\n color: var(--jg-key-name-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_index__2HDDg {\r\n color: var(--jg-index-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_number__2AHSW{\r\n color: var(--jg-number-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_boolean__1BANa {\r\n color: var(--jg-boolean-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_string__rq61g {\r\n color: var(--jg-string-color);\r\n}\r\n\r\n.styles_obj__dFKgt .styles_object__3BV4k {\r\n color: var(--jg-object-color);\r\n}\r\n\r\n.styles_order__3lWKM {\r\n background-color: var(--jg-table-header-bg-color);\r\n color: var(--jg-table-header-color);\r\n}\r\n\r\n.styles_key__2l8qn {\r\n vertical-align: top;\r\n}\r\n\r\n.styles_title__1cca0 {\r\n font-weight: bold;\r\n}\r\n\r\n.styles_plusminus__3UVy2 {\r\n font-size: 15px;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n}\r\n\r\n.styles_search-highlight__PcqVt {\r\n background-color: var(--jg-search-highlight-bg-color);\r\n padding: 1px 5px;\r\n padding-top: 0px;\r\n border-radius: 2px;\r\n}\r\n\r\n.styles_glyphicon__3VdjK {\r\n position: relative;\r\n top: 3px;\r\n display: inline-block;\r\n}\r\n"; | ||
| var styles = { "json-grid-container": "styles_json-grid-container__1do2c", "json-grid-table": "styles_json-grid-table__3KxDK", "highlight": "styles_highlight__1bpMD", "obj": "styles_obj__dFKgt", "name": "styles_name__13yyl", "index": "styles_index__2HDDg", "number": "styles_number__2AHSW", "boolean": "styles_boolean__1BANa", "string": "styles_string__rq61g", "object": "styles_object__3BV4k", "order": "styles_order__3lWKM", "key": "styles_key__2l8qn", "title": "styles_title__1cca0", "plusminus": "styles_plusminus__3UVy2", "search-highlight": "styles_search-highlight__PcqVt", "glyphicon": "styles_glyphicon__3VdjK" }; | ||
| styleInject(css); | ||
| var menuIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%23ffffff%7D%3C%2Fstyle%3E%3Cpath%20%20%20%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032z%22%20%20%2F%3E%3C%2Fsvg%3E"; | ||
| var themes = { | ||
| default: { | ||
| bgColor: "#222", | ||
| tableBorderColor: "#b5b5b5", | ||
| highlightBgColor: "#3b3b3b", | ||
| cellBorderColor: "#474747", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#949494", | ||
| numberColor: "#6c99bb", | ||
| booleanColor: "#6c99bb", | ||
| stringColor: "#a5c261", | ||
| objectColor: "#ffffff", | ||
| tableHeaderBgColor: "#444", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightColor: "#565a36" | ||
| }, | ||
| radical: { | ||
| bgColor: "#1e1e3f", | ||
| tableBorderColor: "#3a3a5e", | ||
| highlightBgColor: "#452a4e", | ||
| cellBorderColor: "#ff79c6", | ||
| keyNameColor: "#e1efff", | ||
| indexColor: "#b7b7ce", | ||
| numberColor: "#ffcc66", | ||
| booleanColor: "#f18e4f", | ||
| stringColor: "#a8ff60", | ||
| objectColor: "#ffcc66", | ||
| tableHeaderBgColor: "#2b265c", | ||
| tableHeaderColor: "#e1efff", | ||
| searchHighlightColor: "#b77ee0" | ||
| }, | ||
| cobalt: { | ||
| bgColor: "#002240", | ||
| tableBorderColor: "#003c60", | ||
| highlightBgColor: "#003c60", | ||
| cellBorderColor: "#007acc", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#007acc", | ||
| numberColor: "#8be9fd", | ||
| booleanColor: "#ff79c6", | ||
| stringColor: "#ff79c6", | ||
| objectColor: "#8be9fd", | ||
| tableHeaderBgColor: "#003c60", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#0f5078" | ||
| }, | ||
| dracula: { | ||
| bgColor: "#282a36", | ||
| tableBorderColor: "#44475a", | ||
| highlightBgColor: "#44475a", | ||
| cellBorderColor: "#6272a4", | ||
| keyNameColor: "#bd93f9", | ||
| indexColor: "#6272a4", | ||
| numberColor: "#8be9fd", | ||
| booleanColor: "#ff79c6", | ||
| stringColor: "#f1fa8c", | ||
| objectColor: "#ff79c6", | ||
| tableHeaderBgColor: "#44475a", | ||
| tableHeaderColor: "#f8f8f2", | ||
| searchHighlightBgColor: "#ff96d2" | ||
| }, | ||
| monokai: { | ||
| bgColor: "#272822", | ||
| tableBorderColor: "#49483e", | ||
| highlightBgColor: "#49483e", | ||
| cellBorderColor: "#75715e", | ||
| keyNameColor: "#f92672", | ||
| indexColor: "#75715e", | ||
| numberColor: "#ae81ff", | ||
| booleanColor: "#ae81ff", | ||
| stringColor: "#e6db74", | ||
| objectColor: "#a6e22e", | ||
| tableHeaderBgColor: "#414434", | ||
| tableHeaderColor: "#f8f8f2", | ||
| searchHighlightBgColor: "#797760" | ||
| }, | ||
| solarizedLight: { | ||
| bgColor: "#fdf6e3", | ||
| tableBorderColor: "#839496", | ||
| highlightBgColor: "#eee8d5", | ||
| cellBorderColor: "#d0d0d0", | ||
| keyNameColor: "#268bd2", | ||
| indexColor: "#657b83", | ||
| numberColor: "#2aa198", | ||
| booleanColor: "#2aa198", | ||
| stringColor: "#859900", | ||
| objectColor: "#2aa198", | ||
| tableHeaderBgColor: "#eee8d5", | ||
| tableHeaderColor: "#657b83", | ||
| searchHighlightBgColor: "#ddd1ab" | ||
| }, | ||
| solarizedDark: { | ||
| bgColor: "#002b36", | ||
| tableBorderColor: "#586e75", | ||
| highlightBgColor: "#073642", | ||
| cellBorderColor: "#073642", | ||
| keyNameColor: "#268bd2", | ||
| indexColor: "#839496", | ||
| numberColor: "#b58900", | ||
| booleanColor: "#b58900", | ||
| stringColor: "#859900", | ||
| objectColor: "#b58900", | ||
| tableHeaderBgColor: "#073642", | ||
| tableHeaderColor: "#93a1a1", | ||
| searchHighlightBgColor: "#185e70" | ||
| }, | ||
| materialDark: { | ||
| bgColor: "#263238", | ||
| tableBorderColor: "#37474f", | ||
| highlightBgColor: "#37474f", | ||
| cellBorderColor: "#546e7a", | ||
| keyNameColor: "#80cbc4", | ||
| indexColor: "#90a4ae", | ||
| numberColor: "#82b1ff", | ||
| booleanColor: "#82b1ff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#455a64", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| oceanicNext: { | ||
| bgColor: "#1b2b34", | ||
| tableBorderColor: "#2c3e50", | ||
| highlightBgColor: "#343d46", | ||
| cellBorderColor: "#34495e", | ||
| keyNameColor: "#82b1ff", | ||
| indexColor: "#546e7a", | ||
| numberColor: "#89ddff", | ||
| booleanColor: "#89ddff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#2c3e50", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| panda: { | ||
| bgColor: "#292a2b", | ||
| tableBorderColor: "#4d4e50", | ||
| highlightBgColor: "#434547", | ||
| cellBorderColor: "#5f6062", | ||
| keyNameColor: "#ff6b72", | ||
| indexColor: "#9aedfe", | ||
| numberColor: "#f5d76e", | ||
| booleanColor: "#f5d76e", | ||
| stringColor: "#a5ef63", | ||
| objectColor: "#ff6b72", | ||
| tableHeaderBgColor: "#3b3c3d", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| gruvboxMaterial: { | ||
| bgColor: "#282828", | ||
| tableBorderColor: "#3c3836", | ||
| highlightBgColor: "#3c3836", | ||
| cellBorderColor: "#504945", | ||
| keyNameColor: "#d3869b", | ||
| indexColor: "#bdae93", | ||
| numberColor: "#8ec07c", | ||
| booleanColor: "#8ec07c", | ||
| stringColor: "#ebdbb2", | ||
| objectColor: "#d3869b", | ||
| tableHeaderBgColor: "#3c3836", | ||
| tableHeaderColor: "#ebdbb2", | ||
| searchHighlightBgColor: "#62564f" | ||
| }, | ||
| merko: { | ||
| bgColor: "#f6f8fa", | ||
| tableBorderColor: "#e1e4e8", | ||
| highlightBgColor: "#e1e4e8", | ||
| cellBorderColor: "#c9d1d9", | ||
| keyNameColor: "#0366d6", | ||
| indexColor: "#586069", | ||
| numberColor: "#22863a", | ||
| booleanColor: "#22863a", | ||
| stringColor: "#cb2431", | ||
| objectColor: "#0366d6", | ||
| tableHeaderBgColor: "#e1e4e8", | ||
| tableHeaderColor: "#0366d6", | ||
| searchHighlightBgColor: "#ffd33d" | ||
| }, | ||
| tokyoNight: { | ||
| bgColor: "#1a1b26", | ||
| tableBorderColor: "#272a36", | ||
| highlightBgColor: "#34374c", | ||
| cellBorderColor: "#272a36", | ||
| keyNameColor: "#9d88f5", | ||
| indexColor: "#89b8ff", | ||
| numberColor: "#46d9ff", | ||
| booleanColor: "#46d9ff", | ||
| stringColor: "#ff75b5", | ||
| objectColor: "#9d88f5", | ||
| tableHeaderBgColor: "#3a3e54", | ||
| tableHeaderColor: "#f3f3f3", | ||
| searchHighlightBgColor: "#53577b" | ||
| }, | ||
| remedy: { | ||
| bgColor: "#ffffff", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#f5f5f5", | ||
| cellBorderColor: "#eaeaea", | ||
| keyNameColor: "#6e5494", | ||
| indexColor: "#4d4d4d", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2c8ebb", | ||
| objectColor: "#6e5494", | ||
| tableHeaderBgColor: "#f5f5f5", | ||
| tableHeaderColor: "#6e5494", | ||
| searchHighlightBgColor: "#e2cd8f" | ||
| }, | ||
| minimal: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#eeeeee", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#333333", | ||
| indexColor: "#666666", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2ca22c", | ||
| objectColor: "#333333", | ||
| tableHeaderBgColor: "#f0f0f0", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#e0e073" | ||
| }, | ||
| auroraX: { | ||
| bgColor: "#2b313a", | ||
| tableBorderColor: "#343c47", | ||
| highlightBgColor: "#343c47", | ||
| cellBorderColor: "#3d4752", | ||
| keyNameColor: "#b4be82", | ||
| indexColor: "#5c6773", | ||
| numberColor: "#7aa2f7", | ||
| booleanColor: "#7aa2f7", | ||
| stringColor: "#c3a6ff", | ||
| objectColor: "#b4be82", | ||
| tableHeaderBgColor: "#343c47", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| atlanticNight: { | ||
| bgColor: "#2a394f", | ||
| tableBorderColor: "#344b63", | ||
| highlightBgColor: "#344b63", | ||
| cellBorderColor: "#4d5c71", | ||
| keyNameColor: "#6cb6ff", | ||
| indexColor: "#6cb6ff", | ||
| numberColor: "#a2d6ff", | ||
| booleanColor: "#a2d6ff", | ||
| stringColor: "#e2e9fd", | ||
| objectColor: "#6cb6ff", | ||
| tableHeaderBgColor: "#344b63", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff8f40" | ||
| }, | ||
| aTouchOfLilac: { | ||
| bgColor: "#f3f0ff", | ||
| tableBorderColor: "#d2cef4", | ||
| highlightBgColor: "#e1dcff", | ||
| cellBorderColor: "#b8b0e8", | ||
| keyNameColor: "#a26bff", | ||
| indexColor: "#8664b3", | ||
| numberColor: "#6772e5", | ||
| booleanColor: "#6772e5", | ||
| stringColor: "#528bff", | ||
| objectColor: "#a26bff", | ||
| tableHeaderBgColor: "#d2cef4", | ||
| tableHeaderColor: "#44337a", | ||
| searchHighlightBgColor: "#edc8bc" | ||
| }, | ||
| glassUI: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#e0e0e0", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#333333", | ||
| indexColor: "#666666", | ||
| numberColor: "#007acc", | ||
| booleanColor: "#007acc", | ||
| stringColor: "#2ca22c", | ||
| objectColor: "#333333", | ||
| tableHeaderBgColor: "#dddddd", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#e2e29c" | ||
| }, | ||
| fireflyPro: { | ||
| bgColor: "#292d3e", | ||
| tableBorderColor: "#414863", | ||
| highlightBgColor: "#414863", | ||
| cellBorderColor: "#252938", | ||
| keyNameColor: "#c3a6ff", | ||
| indexColor: "#b8bdff", | ||
| numberColor: "#ffd580", | ||
| booleanColor: "#ffd580", | ||
| stringColor: "#9ece6a", | ||
| objectColor: "#ff9e64", | ||
| tableHeaderBgColor: "#414863", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff7272" | ||
| }, | ||
| reUI: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#f0f0f0", | ||
| cellBorderColor: "#c7c7c7", | ||
| keyNameColor: "#4caf50", | ||
| indexColor: "#757575", | ||
| numberColor: "#2196f3", | ||
| booleanColor: "#2196f3", | ||
| stringColor: "#ff9800", | ||
| objectColor: "#4caf50", | ||
| tableHeaderBgColor: "#e0e0e0", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffeb3b" | ||
| }, | ||
| slime: { | ||
| bgColor: "#222222", | ||
| tableBorderColor: "#333333", | ||
| highlightBgColor: "#333333", | ||
| cellBorderColor: "#444444", | ||
| keyNameColor: "#5fd7ff", | ||
| indexColor: "#999999", | ||
| numberColor: "#b8d68c", | ||
| booleanColor: "#b8d68c", | ||
| stringColor: "#ce9178", | ||
| objectColor: "#dcdcaa", | ||
| tableHeaderBgColor: "#333333", | ||
| tableHeaderColor: "#cccccc", | ||
| searchHighlightBgColor: "#fa4949" | ||
| }, | ||
| signedDarkPro: { | ||
| bgColor: "#1e1e1e", | ||
| tableBorderColor: "#2a2a2a", | ||
| highlightBgColor: "#2a2a2a", | ||
| cellBorderColor: "#3a3a3a", | ||
| keyNameColor: "#8da6ce", | ||
| indexColor: "#848484", | ||
| numberColor: "#b5bd68", | ||
| booleanColor: "#b5bd68", | ||
| stringColor: "#cc7832", | ||
| objectColor: "#b294bb", | ||
| tableHeaderBgColor: "#2a2a2a", | ||
| tableHeaderColor: "#d4d4d4", | ||
| searchHighlightBgColor: "#eab09e" | ||
| }, | ||
| ariakeDark: { | ||
| bgColor: "#1c1e26", | ||
| tableBorderColor: "#2a2c33", | ||
| highlightBgColor: "#2a2c33", | ||
| cellBorderColor: "#3a3c47", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#6b7089", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#2a2c33", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#efd096" | ||
| }, | ||
| snazzyLight: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#d0d0d0", | ||
| highlightBgColor: "#f0f0f0", | ||
| cellBorderColor: "#b0b0b0", | ||
| keyNameColor: "#6ab0f3", | ||
| indexColor: "#787878", | ||
| numberColor: "#bd93f9", | ||
| booleanColor: "#bd93f9", | ||
| stringColor: "#50fa7b", | ||
| objectColor: "#ffb86c", | ||
| tableHeaderBgColor: "#d0d0d0", | ||
| tableHeaderColor: "#2e2e2e", | ||
| searchHighlightBgColor: "#ff5555" | ||
| }, | ||
| spacegray: { | ||
| bgColor: "#202328", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#394147", | ||
| keyNameColor: "#a9b1d6", | ||
| indexColor: "#768390", | ||
| numberColor: "#f29718", | ||
| booleanColor: "#f29718", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#e0e0e0", | ||
| searchHighlightBgColor: "#ff6c6b" | ||
| }, | ||
| celestial: { | ||
| bgColor: "#0f1419", | ||
| tableBorderColor: "#1c232b", | ||
| highlightBgColor: "#1c232b", | ||
| cellBorderColor: "#2c3848", | ||
| keyNameColor: "#79b8ff", | ||
| indexColor: "#abb2bf", | ||
| numberColor: "#56d364", | ||
| booleanColor: "#56d364", | ||
| stringColor: "#d19a66", | ||
| objectColor: "#c678dd", | ||
| tableHeaderBgColor: "#1c232b", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#30435a" | ||
| }, | ||
| blueberryDark: { | ||
| bgColor: "#242b38", | ||
| tableBorderColor: "#343d4a", | ||
| highlightBgColor: "#343d4a", | ||
| cellBorderColor: "#444f5c", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#8c98a6", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#343d4a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#30435a" | ||
| }, | ||
| bear: { | ||
| bgColor: "#e6e6e6", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#d5d5d5", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| }, | ||
| oneDarkPro: { | ||
| bgColor: "#282c34", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#3e4451", | ||
| keyNameColor: "#abb2bf", | ||
| indexColor: "#5c6370", | ||
| numberColor: "#d19a66", | ||
| booleanColor: "#d19a66", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| nord: { | ||
| bgColor: "#2e3440", | ||
| tableBorderColor: "#3b4252", | ||
| highlightBgColor: "#3b4252", | ||
| cellBorderColor: "#434c5e", | ||
| keyNameColor: "#81a1c1", | ||
| indexColor: "#a3be8c", | ||
| numberColor: "#8fbcbb", | ||
| booleanColor: "#8fbcbb", | ||
| stringColor: "#ebcb8b", | ||
| objectColor: "#b48ead", | ||
| tableHeaderBgColor: "#3b4252", | ||
| tableHeaderColor: "#e5e9f0", | ||
| searchHighlightBgColor: "#bf616a" | ||
| }, | ||
| palenight: { | ||
| bgColor: "#292d3e", | ||
| tableBorderColor: "#414863", | ||
| highlightBgColor: "#414863", | ||
| cellBorderColor: "#2c3042", | ||
| keyNameColor: "#c3a6ff", | ||
| indexColor: "#b8bdff", | ||
| numberColor: "#ffd580", | ||
| booleanColor: "#ffd580", | ||
| stringColor: "#9ece6a", | ||
| objectColor: "#ff9e64", | ||
| tableHeaderBgColor: "#414863", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff8b8b" | ||
| }, | ||
| nightOwl: { | ||
| bgColor: "#011627", | ||
| tableBorderColor: "#02233d", | ||
| highlightBgColor: "#02233d", | ||
| cellBorderColor: "#03314b", | ||
| keyNameColor: "#addb67", | ||
| indexColor: "#dcdcaa", | ||
| numberColor: "#82aaff", | ||
| booleanColor: "#82aaff", | ||
| stringColor: "#c792ea", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#02233d", | ||
| tableHeaderColor: "#e0e0e0", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| andromeda: { | ||
| bgColor: "#282c34", | ||
| tableBorderColor: "#2c313a", | ||
| highlightBgColor: "#2c313a", | ||
| cellBorderColor: "#3e4451", | ||
| keyNameColor: "#abb2bf", | ||
| indexColor: "#5c6370", | ||
| numberColor: "#d19a66", | ||
| booleanColor: "#d19a66", | ||
| stringColor: "#98c379", | ||
| objectColor: "#61afef", | ||
| tableHeaderBgColor: "#2c313a", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#e06c75" | ||
| }, | ||
| horizon: { | ||
| bgColor: "#1c1e26", | ||
| tableBorderColor: "#2a2c33", | ||
| highlightBgColor: "#2a2c33", | ||
| cellBorderColor: "#3a3c47", | ||
| keyNameColor: "#82aaff", | ||
| indexColor: "#6b7089", | ||
| numberColor: "#c3e88d", | ||
| booleanColor: "#c3e88d", | ||
| stringColor: "#f78c6c", | ||
| objectColor: "#c792ea", | ||
| tableHeaderBgColor: "#2a2c33", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#f2d6a3" | ||
| }, | ||
| cobalt2: { | ||
| bgColor: "#193549", | ||
| tableBorderColor: "#234666", | ||
| highlightBgColor: "#234666", | ||
| cellBorderColor: "#29546a", | ||
| keyNameColor: "#6699cc", | ||
| indexColor: "#9cdcfe", | ||
| numberColor: "#b5cea8", | ||
| booleanColor: "#b5cea8", | ||
| stringColor: "#ce9178", | ||
| objectColor: "#d1d2d3", | ||
| tableHeaderBgColor: "#234666", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff5370" | ||
| }, | ||
| atomOneLight: { | ||
| bgColor: "#fafafa", | ||
| tableBorderColor: "#e0e0e0", | ||
| highlightBgColor: "#f5f5f5", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| }, | ||
| ysgrifennwr: { | ||
| bgColor: "#f8f8f8", | ||
| tableBorderColor: "#eaeaea", | ||
| highlightBgColor: "#f2f2f2", | ||
| cellBorderColor: "#d9d9d9", | ||
| keyNameColor: "#2b91af", | ||
| indexColor: "#888888", | ||
| numberColor: "#6a5acd", | ||
| booleanColor: "#6a5acd", | ||
| stringColor: "#cd5c5c", | ||
| objectColor: "#008b8b", | ||
| tableHeaderBgColor: "#eaeaea", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ff9900" | ||
| }, | ||
| notepadPlusPlusRemixed: { | ||
| bgColor: "#262626", | ||
| tableBorderColor: "#333333", | ||
| highlightBgColor: "#333333", | ||
| cellBorderColor: "#4d4d4d", | ||
| keyNameColor: "#ffffff", | ||
| indexColor: "#aaaaaa", | ||
| numberColor: "#ffcc66", | ||
| booleanColor: "#ffcc66", | ||
| stringColor: "#a6e22e", | ||
| objectColor: "#66d9ef", | ||
| tableHeaderBgColor: "#333333", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff6666" | ||
| }, | ||
| githubLight: { | ||
| bgColor: "#ffffff", | ||
| tableBorderColor: "#eaecef", | ||
| highlightBgColor: "#f6f8fa", | ||
| cellBorderColor: "#d1d5da", | ||
| keyNameColor: "#0366d6", | ||
| indexColor: "#6a737d", | ||
| numberColor: "#0366d6", | ||
| booleanColor: "#0366d6", | ||
| stringColor: "#032f62", | ||
| objectColor: "#6f42c1", | ||
| tableHeaderBgColor: "#f6f8fa", | ||
| tableHeaderColor: "#24292e", | ||
| searchHighlightBgColor: "#fffbdd" | ||
| }, | ||
| shadesOfPurple: { | ||
| bgColor: "#2d2b55", | ||
| tableBorderColor: "#463d69", | ||
| highlightBgColor: "#463d69", | ||
| cellBorderColor: "#54496b", | ||
| keyNameColor: "#fad000", | ||
| indexColor: "#a599e9", | ||
| numberColor: "#ff6188", | ||
| booleanColor: "#ff6188", | ||
| stringColor: "#a9b9ce", | ||
| objectColor: "#fad000", | ||
| tableHeaderBgColor: "#463d69", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#ff6188" | ||
| }, | ||
| synthWave: { | ||
| bgColor: "#2a2139", | ||
| tableBorderColor: "#3c3359", | ||
| highlightBgColor: "#3c3359", | ||
| cellBorderColor: "#524772", | ||
| keyNameColor: "#f92aad", | ||
| indexColor: "#4df0ff", | ||
| numberColor: "#fff", | ||
| booleanColor: "#fff", | ||
| stringColor: "#00f9f9", | ||
| objectColor: "#ff8d00", | ||
| tableHeaderBgColor: "#3c3359", | ||
| tableHeaderColor: "#fff", | ||
| searchHighlightBgColor: "#ff8d00" | ||
| }, | ||
| codeBlue: { | ||
| bgColor: "#0e1b29", | ||
| tableBorderColor: "#233544", | ||
| highlightBgColor: "#233544", | ||
| cellBorderColor: "#345a7d", | ||
| keyNameColor: "#5a9bcf", | ||
| indexColor: "#96b5b4", | ||
| numberColor: "#99cc99", | ||
| booleanColor: "#99cc99", | ||
| stringColor: "#d2cd87", | ||
| objectColor: "#ff8d00", | ||
| tableHeaderBgColor: "#233544", | ||
| tableHeaderColor: "#fff", | ||
| searchHighlightBgColor: "#233544" | ||
| }, | ||
| cyberpunk: { | ||
| bgColor: "#1b2b34", | ||
| tableBorderColor: "#405c79", | ||
| highlightBgColor: "#405c79", | ||
| cellBorderColor: "#52676d", | ||
| keyNameColor: "#82b1ff", | ||
| indexColor: "#c792ea", | ||
| numberColor: "#89ddff", | ||
| booleanColor: "#89ddff", | ||
| stringColor: "#c3e88d", | ||
| objectColor: "#ffcb6b", | ||
| tableHeaderBgColor: "#405c79", | ||
| tableHeaderColor: "#d8dee9", | ||
| searchHighlightBgColor: "#405c79" | ||
| }, | ||
| laserWave: { | ||
| bgColor: "#0a1e24", | ||
| tableBorderColor: "#0f2a35", | ||
| highlightBgColor: "#0f2a35", | ||
| cellBorderColor: "#153e50", | ||
| keyNameColor: "#f5ef19", | ||
| indexColor: "#33ccff", | ||
| numberColor: "#19f9d8", | ||
| booleanColor: "#19f9d8", | ||
| stringColor: "#f4eeff", | ||
| objectColor: "#ff66d8", | ||
| tableHeaderBgColor: "#0f2a35", | ||
| tableHeaderColor: "#ffffff", | ||
| searchHighlightBgColor: "#f76d47" | ||
| }, | ||
| hipster: { | ||
| bgColor: "#0f0f0f", | ||
| tableBorderColor: "#181818", | ||
| highlightBgColor: "#181818", | ||
| cellBorderColor: "#303030", | ||
| keyNameColor: "#74b0df", | ||
| indexColor: "#999999", | ||
| numberColor: "#8cdcfe", | ||
| booleanColor: "#8cdcfe", | ||
| stringColor: "#ff8a65", | ||
| objectColor: "#b0bec5", | ||
| tableHeaderBgColor: "#181818", | ||
| tableHeaderColor: "#f8f8f0", | ||
| searchHighlightBgColor: "#d2cd87" | ||
| }, | ||
| wildberry: { | ||
| bgColor: "#1b1725", | ||
| tableBorderColor: "#272030", | ||
| highlightBgColor: "#272030", | ||
| cellBorderColor: "#312742", | ||
| keyNameColor: "#ee82ee", | ||
| indexColor: "#ff79c6", | ||
| numberColor: "#bd93f9", | ||
| booleanColor: "#bd93f9", | ||
| stringColor: "#ff5555", | ||
| objectColor: "#f8f8f2", | ||
| tableHeaderBgColor: "#272030", | ||
| tableHeaderColor: "#ffb86c", | ||
| searchHighlightBgColor: "#f1fa8c" | ||
| }, | ||
| qiita: { | ||
| bgColor: "#f6f6f6", | ||
| tableBorderColor: "#d1d1d1", | ||
| highlightBgColor: "#f9f9f9", | ||
| cellBorderColor: "#e6e6e6", | ||
| keyNameColor: "#55c5db", | ||
| indexColor: "#666666", | ||
| numberColor: "#55c5db", | ||
| booleanColor: "#55c5db", | ||
| stringColor: "#d54e53", | ||
| objectColor: "#55c5db", | ||
| tableHeaderBgColor: "#e6e6e6", | ||
| tableHeaderColor: "#24292e", | ||
| searchHighlightBgColor: "#ffc107" | ||
| }, | ||
| softEra: { | ||
| bgColor: "#f5f5f5", | ||
| tableBorderColor: "#d3d3d3", | ||
| highlightBgColor: "#eaeaea", | ||
| cellBorderColor: "#c0c0c0", | ||
| keyNameColor: "#4e5a65", | ||
| indexColor: "#888888", | ||
| numberColor: "#4078f2", | ||
| booleanColor: "#4078f2", | ||
| stringColor: "#50a14f", | ||
| objectColor: "#a626a4", | ||
| tableHeaderBgColor: "#d3d3d3", | ||
| tableHeaderColor: "#333333", | ||
| searchHighlightBgColor: "#ffcc00" | ||
| } | ||
| }; | ||
@@ -176,65 +912,2 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { | ||
| var JSONGrid = function JSONGrid(props) { | ||
| var data = props.data, | ||
| defaultExpandDepth = props.defaultExpandDepth, | ||
| defaultExpandKeyTree = props.defaultExpandKeyTree, | ||
| searchText = props.searchText; | ||
| var _useState = React.useState(null), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| highlightedElement = _useState2[0], | ||
| setHighlightedElement = _useState2[1]; | ||
| var wrapperRef = React.useRef(null); | ||
| React.useEffect(function () { | ||
| function handleClickOutside(event) { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| if (highlightedElement != null) highlightedElement.classList.remove(styles.highlight); | ||
| setHighlightedElement(null); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return function () { | ||
| return document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [wrapperRef, highlightedElement]); | ||
| if (data == null) throw new Error("JSONGrid: data prop cannot be null or undefined"); | ||
| if ((typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") throw new Error("JSONGrid: data prop must be an object or an array"); | ||
| if (defaultExpandDepth != null) { | ||
| if (typeof defaultExpandDepth !== "number") throw new Error("JSONGrid: defaultExpandDepth prop must be a number"); | ||
| if (defaultExpandDepth < 0) throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number"); | ||
| } else { | ||
| defaultExpandDepth = 0; | ||
| } | ||
| if (defaultExpandKeyTree != null) { | ||
| if ((typeof defaultExpandKeyTree === "undefined" ? "undefined" : _typeof(defaultExpandKeyTree)) !== "object") throw new Error("JSONGrid: defaultExpandKeyTree prop must be an object"); | ||
| if (Array.isArray(defaultExpandKeyTree)) throw new Error("JSONGrid: defaultExpandKeyTree prop must not be an array"); | ||
| } | ||
| if (searchText != null) { | ||
| if (typeof searchText !== "string") throw new Error("JSONGrid: searchText prop must be a string"); | ||
| var searchKeyTree = lookup(data, searchText); | ||
| defaultExpandKeyTree = mergeKeyTrees(defaultExpandKeyTree, searchKeyTree); | ||
| } | ||
| return React__default.createElement( | ||
| "div", | ||
| { className: styles["json-grid-container"], ref: wrapperRef }, | ||
| React__default.createElement(NestedJSONGrid, { | ||
| level: 0, | ||
| data: data, | ||
| highlightedElement: highlightedElement, | ||
| setHighlightedElement: setHighlightedElement, | ||
| defaultExpandDepth: defaultExpandDepth, | ||
| defaultExpandKeyTree: defaultExpandKeyTree, | ||
| searchText: searchText | ||
| }) | ||
| ); | ||
| }; | ||
| var NestedJSONGrid = function NestedJSONGrid(props) { | ||
@@ -332,7 +1005,16 @@ var level = props.level, | ||
| }, | ||
| React__default.createElement("img", { | ||
| className: styles.glyphicon, | ||
| src: menuIcon, | ||
| clickable: "true" | ||
| }) | ||
| React__default.createElement( | ||
| "svg", | ||
| { | ||
| className: styles.glyphicon, | ||
| clickable: "true", | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
| height: "1em", | ||
| viewBox: "0 0 448 512" | ||
| }, | ||
| React__default.createElement("path", { | ||
| fill: "currentColor", | ||
| d: "M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" | ||
| }) | ||
| ) | ||
| ), | ||
@@ -351,3 +1033,5 @@ keys.map(function (k) { | ||
| "span", | ||
| { className: matchesText(k, searchText) ? styles["search-highlight"] : undefined }, | ||
| { | ||
| className: matchesText(k, searchText) ? styles["search-highlight"] : undefined | ||
| }, | ||
| k.replace(/_/g, " ") | ||
@@ -385,3 +1069,5 @@ ) | ||
| "span", | ||
| { className: matchesText(k, searchText) ? styles["search-highlight"] : undefined }, | ||
| { | ||
| className: matchesText(k, searchText) ? styles["search-highlight"] : undefined | ||
| }, | ||
| k.replace(/_/g, " ") | ||
@@ -404,6 +1090,6 @@ ) | ||
| if (level !== 0) { | ||
| var _useState3 = React.useState(level <= defaultExpandDepth || defaultExpandKeyTree), | ||
| _useState4 = slicedToArray(_useState3, 2), | ||
| open = _useState4[0], | ||
| setOpen = _useState4[1]; | ||
| var _useState = React.useState(level <= defaultExpandDepth || defaultExpandKeyTree), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| open = _useState2[0], | ||
| setOpen = _useState2[1]; | ||
@@ -438,7 +1124,91 @@ return React__default.createElement( | ||
| exports.JSONGrid = JSONGrid; | ||
| var JSONGrid = function JSONGrid(_ref) { | ||
| var data = _ref.data, | ||
| _ref$defaultExpandDep = _ref.defaultExpandDepth, | ||
| defaultExpandDepth = _ref$defaultExpandDep === undefined ? 0 : _ref$defaultExpandDep, | ||
| _ref$defaultExpandKey = _ref.defaultExpandKeyTree, | ||
| defaultExpandKeyTree = _ref$defaultExpandKey === undefined ? {} : _ref$defaultExpandKey, | ||
| searchText = _ref.searchText, | ||
| _ref$theme = _ref.theme, | ||
| theme = _ref$theme === undefined ? "default" : _ref$theme, | ||
| _ref$customTheme = _ref.customTheme, | ||
| customTheme = _ref$customTheme === undefined ? {} : _ref$customTheme; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var _useState = React.useState(null), | ||
| _useState2 = slicedToArray(_useState, 2), | ||
| highlightedElement = _useState2[0], | ||
| setHighlightedElement = _useState2[1]; | ||
| var wrapperRef = React.useRef(null); | ||
| React.useEffect(function () { | ||
| function handleClickOutside(event) { | ||
| if (wrapperRef.current && !wrapperRef.current.contains(event.target)) { | ||
| if (highlightedElement !== null) highlightedElement.classList.remove(styles.highlight); | ||
| setHighlightedElement(null); | ||
| } | ||
| } | ||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return function () { | ||
| return document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, [highlightedElement]); | ||
| if (!data) { | ||
| throw new Error("JSONGrid: data prop cannot be null or undefined"); | ||
| } | ||
| if (!Array.isArray(data) && (typeof data === "undefined" ? "undefined" : _typeof(data)) !== "object") { | ||
| throw new Error("JSONGrid: data prop must be an object or an array"); | ||
| } | ||
| if (defaultExpandDepth < 0) { | ||
| throw new Error("JSONGrid: defaultExpandDepth prop must not be a negative number"); | ||
| } | ||
| if (searchText && typeof searchText !== "string") { | ||
| throw new Error("JSONGrid: searchText prop must be a string"); | ||
| } | ||
| if (!themes[theme]) { | ||
| throw new Error("JSONGrid: theme prop must be one of " + Object.keys(themes).join(", ")); | ||
| } | ||
| var themeDetails = themes[theme]; | ||
| var themeStyles = { | ||
| "--jg-bg-color": customTheme.bgColor || themeDetails.bgColor, | ||
| "--jg-table-border-color": customTheme.tableBorderColor || themeDetails.tableBorderColor, | ||
| "--jg-highlight-bg-color": customTheme.highlightBgColor || themeDetails.highlightBgColor, | ||
| "--jg-cell-border-color": customTheme.cellBorderColor || themeDetails.cellBorderColor, | ||
| "--jg-key-name-color": customTheme.keyNameColor || themeDetails.keyNameColor, | ||
| "--jg-index-color": customTheme.indexColor || themeDetails.indexColor, | ||
| "--jg-number-color": customTheme.numberColor || themeDetails.numberColor, | ||
| "--jg-boolean-color": customTheme.booleanColor || themeDetails.booleanColor, | ||
| "--jg-string-color": customTheme.stringColor || themeDetails.stringColor, | ||
| "--jg-object-color": customTheme.objectColor || themeDetails.objectColor, | ||
| "--jg-table-header-bg-color": customTheme.tableHeaderBgColor || themeDetails.tableHeaderBgColor, | ||
| "--jg-table-header-color": customTheme.tableHeaderColor || themeDetails.tableHeaderColor, | ||
| "--jg-search-highlight-bg-color": customTheme.searchHighlightBgColor || themeDetails.searchHighlightBgColor | ||
| }; | ||
| var mergedKeyTree = searchText ? mergeKeyTrees(defaultExpandKeyTree, lookup(data, searchText)) : defaultExpandKeyTree; | ||
| return React__default.createElement( | ||
| "div", | ||
| { className: styles["json-grid-container"], style: themeStyles, ref: wrapperRef }, | ||
| React__default.createElement(NestedJSONGrid, { | ||
| level: 0, | ||
| data: data, | ||
| highlightedElement: highlightedElement, | ||
| setHighlightedElement: setHighlightedElement, | ||
| defaultExpandDepth: defaultExpandDepth, | ||
| defaultExpandKeyTree: mergedKeyTree, | ||
| searchText: searchText | ||
| }) | ||
| ); | ||
| }; | ||
| return JSONGrid; | ||
| }))); | ||
| //# sourceMappingURL=index.umd.js.map |
| { | ||
| "name": "@redheadphone/react-json-grid", | ||
| "version": "0.4.0", | ||
| "description": "React Component that converts JSON to grid table", | ||
| "version": "0.5.0", | ||
| "description": "React Component that converts JSON to nested grid tables.", | ||
| "author": "Huzaifa Khilawala", | ||
@@ -10,8 +10,14 @@ "license": "MIT", | ||
| "react", | ||
| "json", | ||
| "viewer", | ||
| "table", | ||
| "visualization", | ||
| "data", | ||
| "display", | ||
| "nested", | ||
| "json", | ||
| "grid", | ||
| "table", | ||
| "component", | ||
| "tree", | ||
| "layout", | ||
| "component", | ||
| "library", | ||
| "render", | ||
@@ -27,2 +33,3 @@ "ui" | ||
| "scripts": { | ||
| "demo": "cd demo && npm run start", | ||
| "test": "cross-env CI=1 react-scripts test --env=jsdom", | ||
@@ -29,0 +36,0 @@ "build": "rollup -c", |
@@ -23,3 +23,3 @@ # React JSON Grid | ||
| - **Search Spotlight**: Enhance the visibility of your JSON data with a search feature that effectively highlights cells matching with the search text. | ||
| <!-- - **Customizable Styling**: Tailor the appearance of the grid to match your application's design using custom CSS. --> | ||
| - **Customizable Styling**: Tailor the appearance of the grid to match your application's design using custom theme. | ||
@@ -29,2 +29,3 @@ ## Install | ||
| Run either one in your React project directory: | ||
| ```bash | ||
@@ -41,5 +42,6 @@ npm install @redheadphone/react-json-grid | ||
| Here's an example of how to use the react-json-grid library: | ||
| ```jsx | ||
| import React, { Component } from 'react' | ||
| import { JSONGrid } from '@redheadphone/react-json-grid' | ||
| import JSONGrid from '@redheadphone/react-json-grid' | ||
@@ -85,9 +87,89 @@ class Example extends Component { | ||
| | Name | Type | Description | Default | | ||
| | --------------------- | -------- | ------------------------------------------------------------------ | ----------- | | ||
| | data | object | The JSON object or array to be transformed into a grid table. | undefined | | ||
| | defaultExpandDepth | number | The depth to which the grid is expanded by default. | 0 | | ||
| | defaultExpandKeyTree | object | Tree-like structure with all keys that needs to be expanded. | undefined | | ||
| | searchText | string | The text that needs to be searched in the JSON data. | undefined | | ||
| | Name | Type | Description | Default | | ||
| | --------------------- | -------- | --------------------------------------------------------------------- | ----------- | | ||
| | data | object | The JSON object or array to be transformed into a grid table. | undefined | | ||
| | defaultExpandDepth | number | The depth to which the grid is expanded by default. | 0 | | ||
| | defaultExpandKeyTree | object | Tree-like structure with all keys that needs to be expanded. | undefined | | ||
| | searchText | string | The text that needs to be searched in the JSON data. | undefined | | ||
| | theme | string | The theme name that needs to be applied. | 'default' | | ||
| | customTheme | object | The customTheme object which specify color code of each part of grid. | {} | | ||
| ## Themes | ||
| ### Available Themes | ||
| - default | ||
| - radical | ||
| - cobalt | ||
| - dracula | ||
| - monokai | ||
| - solarizedLight | ||
| - solarizedDark | ||
| - materialDark | ||
| - oceanicNext | ||
| - panda | ||
| - gruvboxMaterial | ||
| - merko | ||
| - tokyoNight | ||
| - remedy | ||
| - minimal | ||
| - auroraX | ||
| - atlanticNight | ||
| - aTouchOfLilac | ||
| - glassUI | ||
| - fireflyPro | ||
| - reUI | ||
| - slime | ||
| - signedDarkPro | ||
| - ariakeDark | ||
| - snazzyLight | ||
| - spacegray | ||
| - celestial | ||
| - blueberryDark | ||
| - bear | ||
| - oneDarkPro | ||
| - nord | ||
| - palenight | ||
| - nightOwl | ||
| - andromeda | ||
| - horizon | ||
| - cobalt2 | ||
| - atomOneLight | ||
| - ysgrifennwr | ||
| - notepadPlusPlusRemixed | ||
| - githubLight | ||
| - shadesOfPurple | ||
| - synthWave | ||
| - codeBlue | ||
| - cyberpunk | ||
| - laserWave | ||
| - hipster | ||
| - wildberry | ||
| - qiita | ||
| - softEra | ||
| Note: Pass one of above themes as a string in the theme prop. You can contribute your custom theme in [themes.js](src/themes.js) | ||
| ### Custom Theme Object Format | ||
| ```json | ||
| { | ||
| "bgColor": "#222", | ||
| "tableBorderColor": "#b5b5b5", | ||
| "highlightBgColor": "#3b3b3b", | ||
| "cellBorderColor": "#474747", | ||
| "keyNameColor": "#ffffff", | ||
| "indexColor": "#949494", | ||
| "numberColor": "#6c99bb", | ||
| "booleanColor": "#6c99bb", | ||
| "stringColor": "#a5c261", | ||
| "objectColor": "#ffffff", | ||
| "tableHeaderBgColor": "#444", | ||
| "tableHeaderColor": "#ffffff", | ||
| "searchHighlightColor": "#565a36" | ||
| } | ||
| ``` | ||
| Note: All field values need to be strings that are accepted by CSS for color. All fields are not mandatory. | ||
| ## Contributing | ||
@@ -94,0 +176,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by140.87%
301304
- Lines of code
- increased by194.44%
3495
- Number of lines in readme file
- increased by85.42%
178
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes