feat: Enhance objectSortKeys props.

Author: jaywcjlove

core/README.md

@@ -687,7 +687,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   /** Define the root node name. @default undefined */
   keyName?: string | number;
   /** Whether sort keys through `String.prototype.localeCompare()` @default false */
-  objectSortKeys?: boolean | ((a: string, b: string) => number);
+  objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number);
   /** Set the indent-width for nested objects @default 15 */
   indentWidth?: number;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */

core/src/comps/KeyValues.tsx

@@ -35,7 +35,9 @@ export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
     entries =
       objectSortKeys === true
         ? entries.sort(([a], [b]) => (typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0))
-        : entries.sort(([a], [b]) => (typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0));
+        : entries.sort(([a, valA], [b, valB]) =>
+            typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b, valA, valB) : 0,
+          );
   }
 
   const style = {

core/src/index.test.tsx

@@ -1,4 +1,5 @@
 import renderer from 'react-test-renderer';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
 import JsonView from './';
 
 const avatar = 'https://i.imgur.com/MK3eW3As.jpg';
@@ -47,3 +48,42 @@ it('renders <JsonView /> test case', () => {
   expect(tree).toHaveProperty('props.onMouseEnter');
   expect(tree).toHaveProperty('props.onMouseLeave');
 });
+
+it('renders <JsonView objectSortKeys /> test case', () => {
+  render(
+    <JsonView value={{ b: 1, a: 2 }} objectSortKeys>
+      <JsonView.KeyName data-testid="keyname" />
+    </JsonView>,
+  );
+  const keyname = screen.getAllByTestId('keyname')[0];
+  expect(keyname.innerHTML).toEqual('a');
+});
+
+it('renders <JsonView objectSortKeys={false} /> test case', () => {
+  render(
+    <JsonView value={{ b: 1, a: 2 }} objectSortKeys={false}>
+      <JsonView.KeyName data-testid="keyname" />
+    </JsonView>,
+  );
+  const keyname = screen.getAllByTestId('keyname')[0];
+  expect(keyname.innerHTML).toEqual('b');
+});
+
+it('renders <JsonView objectSortKeys={() => {}} /> test case', () => {
+  render(
+    <JsonView
+      value={{ bool: 1, a: 2 }}
+      objectSortKeys={(a, b, valA, valB) => {
+        expect(a).toEqual('a');
+        expect(b).toEqual('bool');
+        expect(valA).toEqual(2);
+        expect(valB).toEqual(1);
+        return a.localeCompare(b);
+      }}
+    >
+      <JsonView.KeyName data-testid="keyname" />
+    </JsonView>,
+  );
+  const keyname = screen.getAllByTestId('keyname')[0];
+  expect(keyname.innerHTML).toEqual('a');
+});

core/src/index.tsx

@@ -45,7 +45,7 @@ export interface JsonViewProps<T extends object>
   /** Define the root node name. @default undefined */
   keyName?: string | number;
   /** Whether sort keys through `String.prototype.localeCompare()` @default false */
-  objectSortKeys?: boolean | ((a: string, b: string) => number);
+  objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number);
   /** Set the indent-width for nested objects @default 15 */
   indentWidth?: number;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */