Skip to content

Commit 8b994c6

Browse files
kbashtenko-omiliakbashtenko-omilia
committed
feat: added support of custom Edit, Done and Cancel icons
1 parent db043d1 commit 8b994c6

3 files changed

Lines changed: 49 additions & 9 deletions

File tree

‎src/components/json-node.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ interface Props {
3333
}
3434

3535
export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, indexOrName, parent, editHandle }: Props) {
36-
const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp } = useContext(JsonViewContext)
36+
const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp, EditComponent, DoneComponent, CancelComponent } = useContext(JsonViewContext)
3737

3838
let customReturn: ReturnType<CustomizeNode> | undefined
3939
if (typeof customizeNode === 'function') customReturn = safeCall(customizeNode, [{ node, depth, indexOrName }])
@@ -134,8 +134,8 @@ export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, ind
134134

135135
const Icons = (
136136
<>
137-
{isEditing && <DoneSVG className='json-view--edit' style={{ display: 'inline-block' }} onClick={deleting ? deleteHandle : done} />}
138-
{isEditing && <CancelSVG className='json-view--edit' style={{ display: 'inline-block' }} onClick={cancel} />}
137+
{isEditing && (typeof DoneComponent === 'function' ? <DoneComponent className='json-view--edit' style={{ display: 'inline-block' }} onClick={deleting ? deleteHandle : done} /> : <DoneSVG className='json-view--edit' style={{ display: 'inline-block' }} onClick={deleting ? deleteHandle : done} />)}
138+
{isEditing && (typeof CancelComponent === 'function' ? <CancelComponent className='json-view--edit' style={{ display: 'inline-block' }} onClick={cancel} /> : <CancelSVG className='json-view--edit' style={{ display: 'inline-block' }} onClick={cancel} />)}
139139

140140
{!isEditing && enableClipboard && customCopy(customReturn as CustomizeOptions | undefined) && <CopyButton node={node} />}
141141
{!isEditing && matchesURL && type === 'string' && urlRegExp.test(node) && customMatchesURL(customReturn as CustomizeOptions | undefined) && (
@@ -144,8 +144,8 @@ export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, ind
144144
</a>
145145
)}
146146

147-
{!isEditing && editableEdit(editable) && customEdit(customReturn as CustomizeOptions | undefined) && editHandle && (
148-
<EditSVG className='json-view--edit' onClick={edit} />
147+
{!isEditing && editableEdit(editable) && customEdit(customReturn as CustomizeOptions | undefined) && editHandle && ( typeof EditComponent === 'function' ?
148+
<EditComponent className='json-view--edit' onClick={edit} /> : <EditSVG className='json-view--edit' onClick={edit} />
149149
)}
150150
{!isEditing && editableDelete(editable) && customDelete(customReturn as CustomizeOptions | undefined) && _deleteHandle && (
151151
<DeleteSVG className='json-view--edit' onClick={() => setDeleting(true)} />

‎src/components/json-view.tsx‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,19 @@ export const JsonViewContext = createContext({
5454
CopiedComponent: undefined as
5555
| React.FC<{ className: string; style: React.CSSProperties }>
5656
| React.Component<{ className: string; style: React.CSSProperties }>
57-
| undefined
57+
| undefined,
58+
EditComponent: undefined as
59+
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
60+
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
61+
| undefined,
62+
CancelComponent: undefined as
63+
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
64+
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
65+
| undefined,
66+
DoneComponent: undefined as
67+
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
68+
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
69+
| undefined,
5870
})
5971

6072
export interface JsonViewProps {
@@ -96,6 +108,18 @@ export interface JsonViewProps {
96108
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
97109
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
98110
CopiedComponent?: React.FC<{ className: string; style: React.CSSProperties }> | React.Component<{ className: string; style: React.CSSProperties }>
111+
112+
EditComponent:
113+
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
114+
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
115+
116+
CancelComponent:
117+
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
118+
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
119+
120+
DoneComponent:
121+
| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
122+
| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
99123
}
100124

101125
export default function JsonView({
@@ -134,7 +158,11 @@ export default function JsonView({
134158
ignoreLargeArray = false,
135159

136160
CopyComponent,
137-
CopiedComponent
161+
CopiedComponent,
162+
163+
EditComponent,
164+
CancelComponent,
165+
DoneComponent
138166
}: JsonViewProps) {
139167
const [_, update] = useState(0)
140168
const forceUpdate = useCallback(() => update(state => ++state), [])
@@ -175,7 +203,10 @@ export default function JsonView({
175203
ignoreLargeArray,
176204

177205
CopyComponent,
178-
CopiedComponent
206+
CopiedComponent,
207+
EditComponent,
208+
CancelComponent,
209+
DoneComponent
179210
}}>
180211
<code
181212
className={'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '') + (className ? ' ' + className : '')}

‎src/stories/editable.stories.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,15 @@ export const CustomIcons: StoryObj<TYPE_FC> = {
320320
<svg className={className} style={style} xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' viewBox='0 0 512 512' width='512' height='512'>
321321
<path d='M405.333,0H106.667C47.786,0.071,0.071,47.786,0,106.667v298.667C0.071,464.214,47.786,511.93,106.667,512h298.667 C464.214,511.93,511.93,464.214,512,405.333V106.667C511.93,47.786,464.214,0.071,405.333,0z M426.667,172.352L229.248,369.771 c-16.659,16.666-43.674,16.671-60.34,0.012c-0.004-0.004-0.008-0.008-0.012-0.012l-83.563-83.541 c-8.348-8.348-8.348-21.882,0-30.229s21.882-8.348,30.229,0l83.541,83.541l197.44-197.419c8.348-8.318,21.858-8.294,30.176,0.053 C435.038,150.524,435.014,164.034,426.667,172.352z' />
322322
</svg>
323-
)
323+
),
324+
EditComponent: ({ onClick, className }) => (
325+
<svg onClick={onClick} className={className} fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
326+
),
327+
CancelComponent: ({ onClick, className }) => (
328+
<svg onClick={onClick} className={className} enable-background="new 0 0 32 32" height="32px" id="svg2" version="1.1" viewBox="0 0 32 32" width="32px" xmlns="http://www.w3.org/2000/svg"><g id="background"><rect fill="none" height="32" width="32"/></g><g id="cancel"><polygon points="2,26 6,30 16,20 26,30 30,26 20,16 30,6 26,2 16,12 6,2 2,6 12,16 "/></g></svg>
329+
),
330+
DoneComponent: ({ onClick, className }) => (
331+
<svg onClick={onClick} className={className} height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48H0z" fill="none"/><path d="M36 14l-2.83-2.83-12.68 12.69 2.83 2.83L36 14zm8.49-2.83L23.31 32.34 14.97 24l-2.83 2.83L23.31 38l24-24-2.82-2.83zM.83 26.83L12 38l2.83-2.83L3.66 24 .83 26.83z"/></svg>
332+
),
324333
}
325334
}

0 commit comments

Comments
 (0)