Skip to content

Commit d52d627

Browse files
CarlosNZCarlosNZ
authored
#209 Add (optional) tooltips to icons (#211)
1 parent 323db89 commit d52d627

File tree

8 files changed

+35
-3
lines changed

8 files changed

+35
-3
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@ This is a reference list of *all* possible props, divided into related sections.
196196
| ----------------------- | ----------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
197197
| `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). |
198198
| `icons` | `{[iconName]: JSX.Element, ... }` | `{ }` | Replace the built-in icons by specifying them here — see [Themes](#themes--styles). | |
199+
| `showIconTooltips` | `boolean` | false | Display icon tooltips when hovering. | |
199200
| `indent` | `number` | `3` | Specify the amount of indentation for each level of nesting in the displayed data. |
200201
| `collapse` | `boolean\|number\|FilterFunction` | `false` | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load — see [Collapse](#collapse). |
201202
| `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
914915
DEFAULT_NEW_KEY: 'key',
915916
SHOW_LESS: '(Show less)',
916917
EMPTY_STRING: '<empty string>' // Displayed when property key is ""
918+
// Tooltips only appear if `showIconTooltips` prop is enabled
919+
TOOLTIP_COPY: 'Copy to clipboard',
920+
TOOLTIP_EDIT: 'Edit',
921+
TOOLTIP_DELETE: 'Delete',
922+
TOOLTIP_ADD: 'Add',
917923
}
918924
```
919925

‎demo/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -600,6 +600,7 @@ function App() {
600600
// translations={{
601601
// EMPTY_STRING: 'Nah',
602602
// }}
603+
showIconTooltips
603604
/>
604605
</Suspense>
605606
</Box>

‎src/ButtonPanels.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ interface EditButtonProps {
3636
// eslint-disable-next-line
3737
replacer?: (this: any, key: string, value: unknown) => string
3838
) => string
39+
showIconTooltips: boolean
3940
}
4041

4142
export const EditButtons: React.FC<EditButtonProps> = ({
@@ -52,6 +53,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
5253
editConfirmRef,
5354
getNewKeyOptions,
5455
jsonStringify,
56+
showIconTooltips,
5557
}) => {
5658
const { getStyles } = useTheme()
5759
const NEW_KEY_PROMPT = translate('KEY_NEW', nodeData)
@@ -160,17 +162,27 @@ export const EditButtons: React.FC<EditButtonProps> = ({
160162
onClick={(e) => e.stopPropagation()}
161163
>
162164
{enableClipboard && (
163-
<div onClick={handleCopy} className="jer-copy-pulse">
165+
<div
166+
onClick={handleCopy}
167+
className="jer-copy-pulse"
168+
title={showIconTooltips ? translate('TOOLTIP_COPY', nodeData) : ''}
169+
>
164170
<Icon name="copy" nodeData={nodeData} />
165171
</div>
166172
)}
167173
{startEdit && (
168-
<div onClick={startEdit}>
174+
<div
175+
onClick={startEdit}
176+
title={showIconTooltips ? translate('TOOLTIP_EDIT', nodeData) : ''}
177+
>
169178
<Icon name="edit" nodeData={nodeData} />
170179
</div>
171180
)}
172181
{handleDelete && (
173-
<div onClick={handleDelete}>
182+
<div
183+
onClick={handleDelete}
184+
title={showIconTooltips ? translate('TOOLTIP_DELETE', nodeData) : ''}
185+
>
174186
<Icon name="delete" nodeData={nodeData} />
175187
</div>
176188
)}
@@ -181,6 +193,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
181193
// For arrays, we don't need to add a key
182194
else handleAdd('')
183195
}}
196+
title={showIconTooltips ? translate('TOOLTIP_ADD', nodeData) : ''}
184197
>
185198
<Icon name="add" nodeData={nodeData} />
186199
</div>

‎src/CollectionNode.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
4747
collapseAnimationTime,
4848
onMove,
4949
enableClipboard,
50+
showIconTooltips,
5051
searchFilter,
5152
searchText,
5253
indent,
@@ -432,6 +433,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
432433
getNewKeyOptions={getNewKeyOptions}
433434
editConfirmRef={editConfirmRef}
434435
jsonStringify={jsonStringify}
436+
showIconTooltips={showIconTooltips}
435437
/>
436438
)
437439

‎src/JsonEditor.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const Editor: React.FC<JsonEditorProps> = ({
6363
keySort = false,
6464
showArrayIndices = true,
6565
showStringQuotes = true,
66+
showIconTooltips = false,
6667
defaultValue = null,
6768
newKeyOptions,
6869
minWidth = 250,
@@ -366,6 +367,7 @@ const Editor: React.FC<JsonEditorProps> = ({
366367
sort,
367368
showArrayIndices,
368369
showStringQuotes,
370+
showIconTooltips,
369371
indent,
370372
defaultValue,
371373
newKeyOptions,

‎src/ValueNodeWrapper.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
4949
sort,
5050
editConfirmRef,
5151
jsonStringify,
52+
showIconTooltips,
5253
} = props
5354
const { getStyles } = useTheme()
5455
const {
@@ -388,6 +389,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
388389
keyboardControls={keyboardControls}
389390
editConfirmRef={editConfirmRef}
390391
jsonStringify={jsonStringify}
392+
showIconTooltips={showIconTooltips}
391393
/>
392394
)
393395
)}

‎src/localisation.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ const localisedStrings = {
1515
DEFAULT_NEW_KEY: 'key',
1616
SHOW_LESS: '(Show less)',
1717
EMPTY_STRING: '<empty string>',
18+
TOOLTIP_COPY: 'Copy to clipboard',
19+
TOOLTIP_EDIT: 'Edit',
20+
TOOLTIP_DELETE: 'Delete',
21+
TOOLTIP_ADD: 'Add',
1822
}
1923

2024
export type LocalisedStrings = typeof localisedStrings

‎src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface JsonEditorProps {
3838
keySort?: boolean | CompareFunction
3939
showArrayIndices?: boolean
4040
showStringQuotes?: boolean
41+
showIconTooltips?: boolean
4142
defaultValue?: string | number | boolean | null | object | DefaultValueFunction
4243
newKeyOptions?: string[] | NewKeyOptionsFunction
4344
minWidth?: string | number
@@ -257,6 +258,7 @@ interface BaseNodeProps {
257258
onDelete: InternalUpdateFunction
258259
onError?: OnErrorFunction
259260
showErrorMessages: boolean
261+
showIconTooltips: boolean
260262
onMove: InternalMoveFunction
261263
enableClipboard: boolean | CopyFunction
262264
restrictEditFilter: FilterFunction

0 commit comments

Comments
 (0)