From acc09f7409603125feb80fd507d505d86bf9c36b Mon Sep 17 00:00:00 2001 From: Pejman Nikram Date: Sun, 30 Jun 2024 11:09:13 +0300 Subject: [PATCH] add OnCollapse prop to the ObjectNode --- README.md | 1 + src/components/json-view.tsx | 11 ++++++++++- src/components/object-node.tsx | 8 +++++++- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a728426..2f3b1ec 100644 --- 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 \| Array, 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 index 4d5e079..5d362c5 100644 --- 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 | Array; + 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 index f8ca5b2..a10b35f 100644 --- 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))