Repository navigation
Props interface for Arrow component #58
Description
Activity
@MarisHeinols You can refer to the example below.
<JsonView.Arrow render={(props) => { const svgProps: React.SVGProps<SVGSVGElement> = { style: { cursor: 'pointer', height: '1em', width: '1em', marginRight: 5, userSelect: 'none' }, fill: "var(--w-rjv-arrow-color, currentColor)" } interface Props { // 其他属性... 'data-expanded': boolean; } const isExpanded = (props as Props)['data-expanded']; if (!isExpanded) { return ( <svg viewBox="0 0 24 24" {...svgProps}> <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" /> </svg> ); } return ( <svg viewBox="0 0 24 24" {...svgProps}> <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" /> </svg> ); }} />
Reacted by MarisHeinols
I am trying to add custom arrow in project that uses typescript for all other components like Int, KetName I found interfaces to use but for Arrow component can't find interface that would include data-expanded prop. As this type provided by IDE does not include such value - render?: ((props: SymbolsElement<"span">) => React.ReactNode) | undefined
<JsonView.Arrow
// eslint-disable-next-line @typescript-eslint/no-explicit-any
render={(props: any) => {
console.log(props);
const isExpanded = props['data-expanded'];
return (
<img
style={{
cursor: 'pointer',
width: '0.7rem',
marginRight: 10,
rotate: isExpanded ? '0deg' : '270deg',
}}
src="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/icons/forms_selector.svg"
/>
);
}}
/>