From a73a7ae511de6c469c7b1853d97a9f0bf908f806 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Thu, 10 Jul 2025 23:14:19 +1200 Subject: [PATCH 1/2] Add (optional) tooltips to icons --- README.md | 6 ++++++ demo/src/App.tsx | 1 + src/ButtonPanels.tsx | 19 ++++++++++++++++--- src/CollectionNode.tsx | 2 ++ src/JsonEditor.tsx | 2 ++ src/ValueNodeWrapper.tsx | 2 ++ src/localisation.ts | 4 ++++ src/types.ts | 2 ++ 8 files changed, 35 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 37cc619..b767274 100644 --- a/README.md +++ b/README.md @@ -196,6 +196,7 @@ This is a reference list of *all* possible props, divided into related sections. | ----------------------- | ----------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `theme` | `ThemeInput` | `defaultTheme` | Either one of the built-in themes (imported separately), or an object specifying some or all theme properties — see [Themes](#themes--styles). | | `icons` | `{[iconName]: JSX.Element, ... }` | `{ }` | Replace the built-in icons by specifying them here — see [Themes](#themes--styles). | | +| `showIconTooltips` | `boolean` | false | Display icon tooltips when hovering. | | | `indent` | `number` | `3` | Specify the amount of indentation for each level of nesting in the displayed data. | | `collapse` | `boolean\|number\|FilterFunction` | `false` | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load — see [Collapse](#collapse). | | `collapseAnimationTime` | `number` | `300` | Time (in milliseconds) for the transition animation when collapsing collection nodes. | @@ -914,6 +915,11 @@ Localise your implementation (or just customise the default messages) by passing DEFAULT_NEW_KEY: 'key', SHOW_LESS: '(Show less)', EMPTY_STRING: '' // Displayed when property key is "" + // Tooltips only appear if `showIconTooltips` prop is enabled + TOOLTIP_COPY: 'Copy to clipboard', + TOOLTIP_EDIT: 'Edit', + TOOLTIP_DELETE: 'Delete', + TOOLTIP_ADD: 'Add', } ``` diff --git a/demo/src/App.tsx b/demo/src/App.tsx index b7ab2f4..e102ae6 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -600,6 +600,7 @@ function App() { // translations={{ // EMPTY_STRING: 'Nah', // }} + showIconTooltips /> diff --git a/src/ButtonPanels.tsx b/src/ButtonPanels.tsx index 98e2c8f..4d35172 100644 --- a/src/ButtonPanels.tsx +++ b/src/ButtonPanels.tsx @@ -36,6 +36,7 @@ interface EditButtonProps { // eslint-disable-next-line replacer?: (this: any, key: string, value: unknown) => string ) => string + showIconTooltips: boolean } export const EditButtons: React.FC = ({ @@ -52,6 +53,7 @@ export const EditButtons: React.FC = ({ editConfirmRef, getNewKeyOptions, jsonStringify, + showIconTooltips, }) => { const { getStyles } = useTheme() const NEW_KEY_PROMPT = translate('KEY_NEW', nodeData) @@ -160,17 +162,27 @@ export const EditButtons: React.FC = ({ onClick={(e) => e.stopPropagation()} > {enableClipboard && ( -
+
)} {startEdit && ( -
+
)} {handleDelete && ( -
+
)} @@ -181,6 +193,7 @@ export const EditButtons: React.FC = ({ // For arrays, we don't need to add a key else handleAdd('') }} + title="Add" >
diff --git a/src/CollectionNode.tsx b/src/CollectionNode.tsx index 02b01cb..be0362b 100644 --- a/src/CollectionNode.tsx +++ b/src/CollectionNode.tsx @@ -47,6 +47,7 @@ export const CollectionNode: React.FC = (props) => { collapseAnimationTime, onMove, enableClipboard, + showIconTooltips, searchFilter, searchText, indent, @@ -432,6 +433,7 @@ export const CollectionNode: React.FC = (props) => { getNewKeyOptions={getNewKeyOptions} editConfirmRef={editConfirmRef} jsonStringify={jsonStringify} + showIconTooltips={showIconTooltips} /> ) diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx index 84a10cd..0f7f4c1 100644 --- a/src/JsonEditor.tsx +++ b/src/JsonEditor.tsx @@ -63,6 +63,7 @@ const Editor: React.FC = ({ keySort = false, showArrayIndices = true, showStringQuotes = true, + showIconTooltips = false, defaultValue = null, newKeyOptions, minWidth = 250, @@ -366,6 +367,7 @@ const Editor: React.FC = ({ sort, showArrayIndices, showStringQuotes, + showIconTooltips, indent, defaultValue, newKeyOptions, diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index 0926efe..ac6729c 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -49,6 +49,7 @@ export const ValueNodeWrapper: React.FC = (props) => { sort, editConfirmRef, jsonStringify, + showIconTooltips, } = props const { getStyles } = useTheme() const { @@ -388,6 +389,7 @@ export const ValueNodeWrapper: React.FC = (props) => { keyboardControls={keyboardControls} editConfirmRef={editConfirmRef} jsonStringify={jsonStringify} + showIconTooltips={showIconTooltips} /> ) )} diff --git a/src/localisation.ts b/src/localisation.ts index 9dc0c5d..ef21745 100644 --- a/src/localisation.ts +++ b/src/localisation.ts @@ -15,6 +15,10 @@ const localisedStrings = { DEFAULT_NEW_KEY: 'key', SHOW_LESS: '(Show less)', EMPTY_STRING: '', + TOOLTIP_COPY: 'Copy to clipboard', + TOOLTIP_EDIT: 'Edit', + TOOLTIP_DELETE: 'Delete', + TOOLTIP_ADD: 'Add', } export type LocalisedStrings = typeof localisedStrings diff --git a/src/types.ts b/src/types.ts index 27c423a..2dd22a5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -38,6 +38,7 @@ export interface JsonEditorProps { keySort?: boolean | CompareFunction showArrayIndices?: boolean showStringQuotes?: boolean + showIconTooltips?: boolean defaultValue?: string | number | boolean | null | object | DefaultValueFunction newKeyOptions?: string[] | NewKeyOptionsFunction minWidth?: string | number @@ -257,6 +258,7 @@ interface BaseNodeProps { onDelete: InternalUpdateFunction onError?: OnErrorFunction showErrorMessages: boolean + showIconTooltips: boolean onMove: InternalMoveFunction enableClipboard: boolean | CopyFunction restrictEditFilter: FilterFunction From 61ba451209c422d8977c8fea6ce2c19a4c078d7e Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Thu, 10 Jul 2025 23:18:10 +1200 Subject: [PATCH 2/2] Update ButtonPanels.tsx --- src/ButtonPanels.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ButtonPanels.tsx b/src/ButtonPanels.tsx index 4d35172..29de5c7 100644 --- a/src/ButtonPanels.tsx +++ b/src/ButtonPanels.tsx @@ -165,7 +165,7 @@ export const EditButtons: React.FC = ({
@@ -173,7 +173,7 @@ export const EditButtons: React.FC = ({ {startEdit && (
@@ -181,7 +181,7 @@ export const EditButtons: React.FC = ({ {handleDelete && (
@@ -193,7 +193,7 @@ export const EditButtons: React.FC = ({ // For arrays, we don't need to add a key else handleAdd('') }} - title="Add" + title={showIconTooltips ? translate('TOOLTIP_ADD', nodeData) : ''} >