diff --git a/core/src/Container.tsx b/core/src/Container.tsx index 2d3d673d..73915c3f 100644 --- a/core/src/Container.tsx +++ b/core/src/Container.tsx @@ -11,9 +11,22 @@ export interface ContainerProps extends React.HTMLAttributes(props: ContainerProps, ref: React.Ref) => { - const { className = '', children, parentValue, keyid, level = 1, value, initialValue, keyName, ...elmProps } = props; + const { + className = '', + children, + parentValue, + keyid, + level = 1, + value, + initialValue, + keys, + keyName, + ...elmProps + } = props; const dispatch = useShowToolsDispatch(); const subkeyid = useId(); const defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' '); @@ -24,7 +37,7 @@ export const Container = forwardRef((props: ContainerProps, return (
- +
); diff --git a/core/src/comps/KeyValues.tsx b/core/src/comps/KeyValues.tsx index a623d360..8a71cc03 100644 --- a/core/src/comps/KeyValues.tsx +++ b/core/src/comps/KeyValues.tsx @@ -5,20 +5,18 @@ import { useShowToolsDispatch } from '../store/ShowTools'; import { Value } from './Value'; import { KeyNameComp } from '../section/KeyName'; import { RowComp } from '../section/Row'; -import { Container } from '../Container'; +import { Container, type ContainerProps } from '../Container'; import { Quote, Colon } from '../symbol'; import { useHighlight } from '../utils/useHighlight'; +import { type SectionElementResult } from '../store/Section'; -interface KeyValuesProps { - keyName?: string | number; - value?: T; - parentValue?: T; +interface KeyValuesProps extends SectionElementResult { expandKey?: string; level: number; } export const KeyValues = (props: KeyValuesProps) => { - const { value, expandKey = '', level } = props; + const { value, expandKey = '', level, keys = [] } = props; const expands = useExpandsStore(); const { objectSortKeys, indentWidth, collapsed } = useStore(); const isMyArray = Array.isArray(value); @@ -49,7 +47,9 @@ export const KeyValues = (props: KeyValuesProps) => { return (
{entries.map(([key, val], idx) => { - return ; + return ( + + ); })}
); @@ -81,7 +81,7 @@ export const KayName = (props: KayNameProps) => { KayName.displayName = 'JVR.KayName'; export const KeyValuesItem = (props: KeyValuesProps) => { - const { keyName, value, parentValue, level = 0 } = props; + const { keyName, value, parentValue, level = 0, keys = [] } = props; const dispatch = useShowToolsDispatch(); const subkeyid = useId(); const isMyArray = Array.isArray(value); @@ -94,7 +94,14 @@ export const KeyValuesItem = (props: KeyValuesProps) => { if (isNested) { const myValue = isMySet ? Array.from(value as Set) : isMyMap ? Object.fromEntries(value) : value; return ( - + ); } const reset: React.HTMLAttributes = { @@ -102,7 +109,7 @@ export const KeyValuesItem = (props: KeyValuesProps) => { onMouseLeave: () => dispatch({ [subkeyid]: false }), }; return ( - + diff --git a/core/src/editor/KeyName.tsx b/core/src/editor/KeyName.tsx index 3db6d187..5c79baed 100644 --- a/core/src/editor/KeyName.tsx +++ b/core/src/editor/KeyName.tsx @@ -1,6 +1,7 @@ import { FC, useRef, useState } from 'react'; import { SectionElementProps } from '../store/Section'; import { useStore } from './store'; +import { type SectionElementResult } from '../store/Section'; export const KeyNameRender: SectionElementProps['render'] = ( { children, ...reset }, @@ -16,13 +17,9 @@ export const KeyNameRender: SectionElementProps['render'] = ( ); }; -interface ChildProps extends React.HTMLAttributes { - value: unknown; - parentValue?: unknown; - keyName: string | number; -} +interface ChildProps extends React.HTMLAttributes, SectionElementResult {} -const Child: FC = (props) => { +const Child = (props: ChildProps) => { const { value, parentValue, keyName, ...reset } = props; const $dom = useRef(null); const [currentValue, setCurrentValue] = useState(props.children); diff --git a/core/src/section/KeyName.tsx b/core/src/section/KeyName.tsx index e5c47a3e..5c56abb0 100644 --- a/core/src/section/KeyName.tsx +++ b/core/src/section/KeyName.tsx @@ -1,7 +1,8 @@ -import { type FC, type PropsWithChildren } from 'react'; +import { type PropsWithChildren } from 'react'; import { type TagType } from '../store/Types'; import { type SectionElement, useSectionStore } from '../store/Section'; import { useSectionRender } from '../utils/useRender'; +import { type SectionElementResult } from '../store/Section'; export const KeyName = (props: SectionElement) => { const { KeyName: Comp = {} } = useSectionStore(); @@ -11,14 +12,12 @@ export const KeyName = (props: SectionElement) => { KeyName.displayName = 'JVR.KeyName'; -type KeyNameCompProps = { - keyName: string | number; - value?: unknown; - parentValue?: unknown; -}; +export interface KeyNameCompProps + extends React.HTMLAttributes, + SectionElementResult {} -export const KeyNameComp: FC> = (props) => { - const { children, value, parentValue, keyName } = props; +export const KeyNameComp = (props: PropsWithChildren>) => { + const { children, value, parentValue, keyName, keys } = props; const isNumber = typeof children === 'number'; const style: React.CSSProperties = { color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)', @@ -28,7 +27,7 @@ export const KeyNameComp: FC> = (props) => { reset.style = { ...reset.style, ...style }; const Elm = as || 'span'; const child = - render && typeof render === 'function' && render({ ...reset, children }, { value, parentValue, keyName }); + render && typeof render === 'function' && render({ ...reset, children }, { value, parentValue, keyName, keys }); if (child) return child; return {children}; }; diff --git a/core/src/section/Row.tsx b/core/src/section/Row.tsx index ce63abf3..2185e22e 100644 --- a/core/src/section/Row.tsx +++ b/core/src/section/Row.tsx @@ -1,6 +1,7 @@ import { type TagType } from '../store/Types'; import { type SectionElement, useSectionStore } from '../store/Section'; import { useSectionRender } from '../utils/useRender'; +import { type SectionElementResult } from '../store/Section'; export const Row = (props: SectionElement) => { const { Row: Comp = {} } = useSectionStore(); @@ -10,24 +11,17 @@ export const Row = (props: SectionElement) => { Row.displayName = 'JVR.Row'; -export interface RowCompProps extends React.HTMLAttributes { - value?: T; - keyName?: string | number; - parentValue?: unknown; -} +export interface RowCompProps extends React.HTMLAttributes, SectionElementResult {} -export const RowComp = ({ - children, - value, - keyName = '', - parentValue, - ...other -}: React.PropsWithChildren>) => { +export const RowComp = (props: React.PropsWithChildren>) => { + const { children, value, parentValue, keyName, keys, ...other } = props; const { Row: Comp = {} } = useSectionStore(); const { as, render, children: _, ...reset } = Comp; const Elm = as || 'div'; const child = - render && typeof render === 'function' && render({ ...other, ...reset, children }, { value, keyName, parentValue }); + render && + typeof render === 'function' && + render({ ...other, ...reset, children }, { value, keyName, parentValue, keys }); if (child) return child; return ( diff --git a/core/src/store/Section.tsx b/core/src/store/Section.tsx index 622f2ab2..0ea0d58a 100644 --- a/core/src/store/Section.tsx +++ b/core/src/store/Section.tsx @@ -1,12 +1,17 @@ import React, { FC, PropsWithChildren, ComponentPropsWithoutRef, createContext, useContext, useReducer } from 'react'; import { type TagType } from './Types'; +export interface SectionElementResult { + value?: T; + parentValue?: T; + keyName?: K; + /** Index of the parent `keyName` */ + keys?: K[]; +} + export type SectionElementProps = { as?: T; - render?: ( - props: SectionElement, - result: { value: unknown; parentValue?: unknown; keyName: string | number }, - ) => React.ReactNode; + render?: (props: SectionElement, result: SectionElementResult) => React.ReactNode; }; export type SectionElement = SectionElementProps & ComponentPropsWithoutRef;