Merge pull request #48 from PejmanNik/add-oncollapse-prop

add OnCollapse prop to the ObjectNode
YYsuni · Jul 1, 2024 · 117b075 · 117b075
2 parents 3681c59 + acc09f7
commit 117b075
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,7 @@ import 'react18-json-view/src/style.css'
 | `ignoreLargeArray`           | `boolean`                                                                                             | `false`                                                                                             | Prevent collapsing large array(length > 100) behavior since v0.2.7                                                                                                                             |
 | `collapseStringMode`         | `'directly'` \| `'word'` \|  `'address'`                                                              | `'directly'`                                                                                        | If the `word` is assigned, the collapsed length will be adjusted to fully display the last word.                                                                                               |
 | `collapsed`                  | `boolean` \| `integer` \| `function`                                                                  | `false`                                                                                             | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function.                |
+| `onCollapse`                  | `function`                                                                  | -                                                                                            | `(params: { isCollapsing: boolean, node: Record<string, any> \| Array<any>, indexOrName: string \| number \| undefined, depth: number }) => void`                                                                          |
 | `collapseObjectsAfterLength` | `integer`                                                                                             | `99`                                                                                                | When an integer value is assigned, the object and array will initially collapse.                                                                                                               |
 | `editable`                   | `boolean` \| {add?: `boolean`, edit?: `boolean`, delete?: `boolean`}                                  | `false`                                                                                             | When set to true, you can add, edit, or delete the property, and the actions will trigger onAdd, onEdit, or onDelete. Options is available.                                                    |
 | `onAdd`                      | `function`                                                                                            | -                                                                                                   | `(params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void`                                                                                 |

diff --git a/src/components/json-view.tsx b/src/components/json-view.tsx
@@ -13,6 +13,12 @@ type OnChange = (params: {
 	parentType: 'object' | 'array' | null
 	type: 'add' | 'edit' | 'delete'
 }) => void
+type OnCollapse = (params: { 
+	isCollapsing: boolean; 
+	node: Record<string, any> | Array<any>;
+	indexOrName: string | number | undefined; 
+	depth: number 
+}) => void
 
 export const defaultURLRegExp = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
 
@@ -25,7 +31,7 @@ export const JsonViewContext = createContext({
 
 	collapseObjectsAfterLength: 20,
 	collapsed: false as Collapsed,
-
+	onCollapse: undefined as OnCollapse | undefined,
 	enableClipboard: true,
 
 	editable: false as Editable,
@@ -65,6 +71,7 @@ export interface JsonViewProps {
 
 	collapseObjectsAfterLength?: number
 	collapsed?: Collapsed
+	onCollapse?: OnCollapse
 
 	enableClipboard?: boolean
 
@@ -105,6 +112,7 @@ export default function JsonView({
 
 	collapseObjectsAfterLength = 99,
 	collapsed,
+	onCollapse,
 
 	enableClipboard = true,
 
@@ -149,6 +157,7 @@ export default function JsonView({
 
 				collapseObjectsAfterLength,
 				collapsed,
+				onCollapse,
 
 				enableClipboard,
 

diff --git a/src/components/object-node.tsx b/src/components/object-node.tsx
@@ -22,6 +22,7 @@ interface Props {
 export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions }: Props) {
 	const {
 		collapsed,
+		onCollapse,
 		enableClipboard,
 		ignoreLargeArray,
 		collapseObjectsAfterLength,
@@ -41,7 +42,12 @@ export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _de
 
 	const isPlainObject = isObject(node)
 
-	const [fold, setFold] = useState(isCollapsed(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))
+	const [fold, _setFold] = useState(isCollapsed(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))
+
+	const setFold = (value: boolean) => {
+		onCollapse?.({ isCollapsing: !value, node, depth, indexOrName })
+		_setFold(value)
+	}
 
 	useEffect(() => {
 		setFold(isCollapsed(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))