chore(deps): update dependency @uiw/react-json-view to ^2.0.0-alpha.7

uiwjs · Sep 23, 2023 · 8717280 · 8717280
1 parent bdd22ae
commit 8717280
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -18,9 +18,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@uiw/react-copy-to-clipboard": "^4.21.28",
+    "@uiw/react-copy-to-clipboard": "^4.22.0",
     "@uiw/react-github-corners": "^1.5.15",
-    "@uiw/react-json-view": "^1.8.4",
+    "@uiw/react-json-view": "^2.0.0-alpha.7",
     "@wcj/dark-mode": "^1.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,6 +1,5 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import JsonViewer from '@uiw/react-json-view';
-import { type SemicolonProps } from '@uiw/react-json-view/esm/semicolon';
 import { darkTheme } from '@uiw/react-json-view/dark';
 import { lightTheme } from '@uiw/react-json-view/light';
 import CopyToClipboard from '@uiw/react-copy-to-clipboard';
@@ -28,6 +27,7 @@ const Header = styled.header`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding-bottom: 6rem;
 `;
 
 const Keyboard = styled.div`
@@ -101,13 +101,6 @@ const JsonView = styled.div`
 type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 type KeyboardEventType = Writeable<KeyboardEvent>;
 
-const ObjectKey: SemicolonProps['render'] = ({ value, keyName, parentName, ...reset }) => {
-  if (/(keycode|charcode|which)/i.test(keyName?.toString() || '')) {
-    return <del {...reset} title={`"${keyName}" deprecated`} />;
-  }
-  return <span {...reset} />;
-};
-
 const App = () => {
   const [data, setData] = useState<KeyboardEventType>();
   const [copied, setCopied] = useState(false);
@@ -205,13 +198,15 @@ const App = () => {
               </CopyToClipboard>
             </Keyboard>
             <JsonView>
-              <JsonViewer
-                value={data}
-                components={{
-                  objectKey: ObjectKey,
-                }}
-                style={{ ...style, '--w-rjv-background-color': 'transparent' } as React.CSSProperties}
-              />
+              <JsonViewer value={data} style={{ ...style, '--w-rjv-background-color': 'transparent' } as React.CSSProperties}>
+                <JsonViewer.KeyName
+                  render={(props, { value, keyName }) => {
+                    if (/(keycode|charcode|which)/i.test(keyName?.toString() || '')) {
+                      return <del {...props}>{keyName}</del>;
+                    }
+                  }}
+                />
+              </JsonViewer>
             </JsonView>
           </Fragment>
         )}