diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
index 2abe034..f35dbd3 100644
--- a/src/components/copy-button.tsx
+++ b/src/components/copy-button.tsx
@@ -4,27 +4,32 @@ import { ReactComponent as CopiedSVG } from '../svgs/copied.svg'
import { JsonViewContext } from './json-view'
export default function CopyButton({ node }: { node: any }) {
- const { customizeCopy } = useContext(JsonViewContext)
+ const { customizeCopy, CopyComponent, CopidComponent } = useContext(JsonViewContext)
const [copied, setCopied] = useState(false)
- return copied ? (
-
- ) : (
- {
- event.stopPropagation()
+ const copyHandler = (event: React.MouseEvent) => {
+ event.stopPropagation()
+
+ const value = customizeCopy(node)
- const value = customizeCopy(node)
+ if (typeof value === 'string' && value) {
+ navigator.clipboard.writeText(value)
+ }
- if (typeof value === 'string' && value) {
- navigator.clipboard.writeText(value)
- }
+ setCopied(true)
+ setTimeout(() => setCopied(false), 3000)
+ }
- setCopied(true)
- setTimeout(() => setCopied(false), 3000)
- }}
- className='json-view--copy'
- />
+ return copied ? (
+ typeof CopidComponent === 'function' ? (
+
+ ) : (
+
+ )
+ ) : typeof CopyComponent === 'function' ? (
+
+ ) : (
+
)
}
diff --git a/src/components/json-view.tsx b/src/components/json-view.tsx
index 3c796a4..4d5e079 100644
--- a/src/components/json-view.tsx
+++ b/src/components/json-view.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useEffect, useState } from 'react'
+import { ReactElement, createContext, useCallback, useEffect, useState } from 'react'
import JsonNode from './json-node'
import type { Collapsed, CustomizeCollapseStringUI, CustomizeNode, DisplaySize, Editable } from '../types'
import { stringifyForCopying } from '../utils'
@@ -44,7 +44,16 @@ export const JsonViewContext = createContext({
matchesURL: false,
urlRegExp: defaultURLRegExp,
- ignoreLargeArray: false
+ ignoreLargeArray: false,
+
+ CopyComponent: undefined as
+ | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
+ | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
+ | undefined,
+ CopidComponent: undefined as
+ | React.FC<{ className: string; style: React.CSSProperties }>
+ | React.Component<{ className: string; style: React.CSSProperties }>
+ | undefined
})
export interface JsonViewProps {
@@ -80,6 +89,11 @@ export interface JsonViewProps {
urlRegExp?: RegExp
ignoreLargeArray?: boolean
+
+ CopyComponent?:
+ | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
+ | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
+ CopidComponent?: React.FC<{ className: string; style: React.CSSProperties }> | React.Component<{ className: string; style: React.CSSProperties }>
}
export default function JsonView({
@@ -114,7 +128,10 @@ export default function JsonView({
matchesURL = false,
urlRegExp = defaultURLRegExp,
- ignoreLargeArray = false
+ ignoreLargeArray = false,
+
+ CopyComponent,
+ CopidComponent
}: JsonViewProps) {
const [_, update] = useState(0)
const forceUpdate = useCallback(() => update(state => ++state), [])
@@ -151,7 +168,10 @@ export default function JsonView({
matchesURL,
urlRegExp,
- ignoreLargeArray
+ ignoreLargeArray,
+
+ CopyComponent,
+ CopidComponent
}}>
= {
collapsed: 2
}
}
+
+export const CustomIcons: StoryObj = {
+ args: {
+ src: {
+ obj: {
+ k1: 123,
+ k2: '123',
+ k3: false
+ }
+ },
+ editable: true,
+ displaySize: true,
+ CopyComponent: ({ onClick, className }) => (
+
+ ),
+ CopidComponent: ({ className, style }) => (
+
+ )
+ }
+}
diff --git a/src/stories/json-view.stories.tsx b/src/stories/json-view.stories.tsx
index 09e0371..8be393a 100644
--- a/src/stories/json-view.stories.tsx
+++ b/src/stories/json-view.stories.tsx
@@ -486,3 +486,26 @@ export const LargeArray: StoryObj = {
displaySize: true
}
}
+
+export const CustomIcons: StoryObj = {
+ args: {
+ src: {
+ obj: {
+ k1: 123,
+ k2: '123',
+ k3: false
+ }
+ },
+ displaySize: true,
+ CopyComponent: ({ onClick, className }) => (
+
+ ),
+ CopidComponent: ({ className, style }) => (
+
+ )
+ }
+}
diff --git a/src/svgs/custom-add.svg b/src/svgs/custom-add.svg
new file mode 100644
index 0000000..98eb53c
--- /dev/null
+++ b/src/svgs/custom-add.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/src/svgs/custom-copied.svg b/src/svgs/custom-copied.svg
new file mode 100644
index 0000000..d783038
--- /dev/null
+++ b/src/svgs/custom-copied.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/svgs/custom-copy.svg b/src/svgs/custom-copy.svg
new file mode 100644
index 0000000..c1f4e18
--- /dev/null
+++ b/src/svgs/custom-copy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file