Merge pull request #58 from suyizhang/feature/custom-operation

新增 CustomOperation
YYsuni · Aug 26, 2024 · 70f8e02 · 70f8e02
2 parents cc87705 + 65a0e61
commit 70f8e02
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -70,6 +70,7 @@ import 'react18-json-view/src/style.css'
 | `customizeCopy`                                                    | `(node: any) => any`                                                                                  | internal stringify                                                                                  | Customize copy behavior, only the returned non-empty string will be written to clipboard.                                                                                                      |
 | `CopyComponent` \/ `DoneComponent` \/ `CancelComponent`   (canary) | `React.FC` \/ `React.Component` `<{ onClick: (event: React.MouseEvent) => void; className: string ; style: React.CSSProperties}>` | -                                                                                                   | Customize copy icon.                                                                                                                                                                           |
 | `CopiedComponent` (canary)                                         | `React.FC` \/ `React.Component` `<{ className: string; style: React.CSSProperties }>`                 | -                                                                                                   | Customize copied icon.                                                                                                                                                                         |
+| `CustomOperation`                                       | `React.FC` \/ `React.Component` `<{ node: any }>`                 | -                                                                                                   |      Custom Operation                                                                                                                                                                   |
 
 ### Collapsed function
 ```ts

diff --git a/src/components/json-node.tsx b/src/components/json-node.tsx
@@ -34,7 +34,7 @@ interface Props {
 
 export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, indexOrName, parent, editHandle }: Props) {
 	// prettier-ignore
-	const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp, EditComponent, DoneComponent, CancelComponent } = useContext(JsonViewContext)
+	const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp, EditComponent, DoneComponent, CancelComponent, CustomOperation } = useContext(JsonViewContext)
 
 	let customReturn: ReturnType<CustomizeNode> | undefined
 	if (typeof customizeNode === 'function') customReturn = safeCall(customizeNode, [{ node, depth, indexOrName }])
@@ -124,14 +124,12 @@ export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, ind
 		)
 
 		const isEditing = editing || deleting
-
 		const ctrlClick =
 			!isEditing && editableEdit(editable) && customEdit(customReturn as CustomizeOptions | undefined) && editHandle
 				? (event: React.MouseEvent) => {
 						if (event.ctrlKey || event.metaKey) edit()
 				  }
 				: undefined
-
 		const Icons = (
 			<>
 				{isEditing &&
@@ -166,6 +164,7 @@ export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, ind
 				{!isEditing && editableDelete(editable) && customDelete(customReturn as CustomizeOptions | undefined) && _deleteHandle && (
 					<DeleteSVG className='json-view--edit' onClick={() => setDeleting(true)} />
 				)}
+				{ typeof CustomOperation === 'function' ?  <CustomOperation node={node}  /> : null }
 			</>
 		)
 

diff --git a/src/components/json-view.tsx b/src/components/json-view.tsx
@@ -68,6 +68,10 @@ export const JsonViewContext = createContext({
 	| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
 	| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
 	| undefined,
+	CustomOperation: undefined as
+	| React.FC<{ node: any }>
+	| React.Component<{ node: any }>
+	| undefined,
 })
 
 export interface JsonViewProps {
@@ -122,6 +126,10 @@ export interface JsonViewProps {
 	DoneComponent?:
 	| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
 	| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
+
+	CustomOperation?:
+	| React.FC<{ node: any }>
+	| React.Component<{ node: any }>
 }
 
 export default function JsonView({
@@ -165,13 +173,13 @@ export default function JsonView({
 
 	EditComponent,
 	CancelComponent,
-	DoneComponent
+	DoneComponent,
+	CustomOperation,
 }: JsonViewProps) {
 	const [_, update] = useState(0)
 	const forceUpdate = useCallback(() => update(state => ++state), [])
 	const [src, setSrc] = useState(_src)
 	useEffect(() => setSrc(_src), [_src])
-
 	return (
 		<JsonViewContext.Provider
 			value={{
@@ -210,7 +218,8 @@ export default function JsonView({
 				CopiedComponent,
 				EditComponent,
 				CancelComponent,
-				DoneComponent
+				DoneComponent,
+				CustomOperation,
 			}}>
 			<code
 				className={'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '') + (className ? ' ' + className : '')}

diff --git a/src/components/large-array-node.tsx b/src/components/large-array-node.tsx
@@ -17,7 +17,7 @@ interface Props {
 }
 
 export default function LargeArrayNode({ originNode, node, depth, index, deleteHandle: _deleteSelf, customOptions, startIndex }: Props) {
-	const { enableClipboard, src, onEdit, onChange, forceUpdate, displaySize } = useContext(JsonViewContext)
+	const { enableClipboard, src, onEdit, onChange, forceUpdate, displaySize, CustomOperation } = useContext(JsonViewContext)
 
 	const [fold, setFold] = useState(true)
 
@@ -57,6 +57,7 @@ export default function LargeArrayNode({ originNode, node, depth, index, deleteH
 			)}
 
 			{!fold && enableClipboard && customCopy(customOptions) && <CopyButton node={node} />}
+			{ typeof CustomOperation === 'function' ?  <CustomOperation node={node}  /> : null }
 		</>
 	)
 

diff --git a/src/components/large-array.tsx b/src/components/large-array.tsx
@@ -24,7 +24,7 @@ export default function LargeArray({ node, depth, deleteHandle: _deleteSelf, ind
 		nestCollapsedArray.push(node.slice(i, i + 100))
 	}
 
-	const { collapsed, enableClipboard, collapseObjectsAfterLength, editable, onDelete, src, onAdd, onEdit, onChange, forceUpdate, displaySize } =
+	const { collapsed, enableClipboard, collapseObjectsAfterLength, editable, onDelete, src, onAdd, CustomOperation, onChange, forceUpdate, displaySize } =
 		useContext(JsonViewContext)
 
 	const [fold, setFold] = useState(isCollapsed_largeArray(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))
@@ -89,6 +89,7 @@ export default function LargeArray({ node, depth, deleteHandle: _deleteSelf, ind
 			{!fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (
 				<DeleteSVG className='json-view--edit' onClick={() => setDeleting(true)} />
 			)}
+			{ typeof CustomOperation === 'function' ?  <CustomOperation node={node}  /> : null }
 		</>
 	)
 

diff --git a/src/components/object-node.tsx b/src/components/object-node.tsx
@@ -33,7 +33,8 @@ export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _de
 		onEdit,
 		onChange,
 		forceUpdate,
-		displaySize
+		displaySize,
+		CustomOperation,
 	} = useContext(JsonViewContext)
 
 	if (!ignoreLargeArray && Array.isArray(node) && node.length > 100) {
@@ -173,6 +174,7 @@ export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _de
 			{!fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (
 				<DeleteSVG className='json-view--edit' onClick={() => setDeleting(true)} />
 			)}
+			{ typeof CustomOperation === 'function' ?  <CustomOperation node={node}  /> : null }
 		</>
 	)