Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add OnCollapse prop to the ObjectNode #48

Merged
merged 1 commit into from
Jul 1, 2024
Merged

add OnCollapse prop to the ObjectNode #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
11 changes: 10 additions & 1 deletion src/components/json-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}\/?/

Expand All @@ -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,
Expand Down Expand Up @@ -65,6 +71,7 @@ export interface JsonViewProps {

collapseObjectsAfterLength?: number
collapsed?: Collapsed
onCollapse?: OnCollapse

enableClipboard?: boolean

Expand Down Expand Up @@ -105,6 +112,7 @@ export default function JsonView({

collapseObjectsAfterLength = 99,
collapsed,
onCollapse,

enableClipboard = true,

Expand Down Expand Up @@ -149,6 +157,7 @@ export default function JsonView({

collapseObjectsAfterLength,
collapsed,
onCollapse,

enableClipboard,

Expand Down
8 changes: 7 additions & 1 deletion src/components/object-node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ interface Props {
export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions }: Props) {
const {
collapsed,
onCollapse,
enableClipboard,
ignoreLargeArray,
collapseObjectsAfterLength,
Expand All @@ -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))
Expand Down