11import PropTypes from "prop-types" ;
2- import { Component , isValidElement } from "react" ;
2+ import { isValidElement , useState } from "react" ;
33import Popover from "react-tiny-popover" ;
44
55const DEFAULT_CHILDREN_SIZE = 4 ;
@@ -20,8 +20,8 @@ const addLink = (child, i, url) =>
2020const Card = ( { body } ) => (
2121 // Applied .shadow > .markdown styles: max-height and overflow
2222 < div className = "markdown max-h-[48vh] overflow-auto" >
23- { /* Combined .inline and .shadow pre.inline styles:
24- display: block, margin: 0, padding: 0 with right-padding override
23+ { /* Combined .inline and .shadow pre.inline styles:
24+ display: block, margin: 0, padding: 0 with right-padding override
2525 */ }
2626 < pre className = "block m-0 p-0 pr-[15px]" >
2727 < code > { body } </ code >
@@ -33,71 +33,53 @@ Card.propTypes = {
3333 body : PropTypes . node ,
3434} ;
3535
36- export class Details extends Component {
37- static propTypes = {
38- url : PropTypes . string ,
39- myChilds : PropTypes . arrayOf ( PropTypes . node ) ,
40- } ;
41-
42- constructor ( props ) {
43- super ( props ) ;
44- this . state = {
45- open : false ,
46- } ;
47- }
48-
49- clickOutsideHandler = ( ) => {
50- this . setState ( { open : false } ) ;
51- } ;
52-
53- toggleVisibility = ( ) => {
54- this . setState ( { open : ! this . state . open } ) ;
55- } ;
56-
57- render ( ) {
58- const { myChilds, url } = this . props ;
59-
60- // Find the index of </default>
61- const closeDefaultTagIndex = myChilds . findIndex ( ( child ) => {
62- if ( isValidElement ( child ) ) {
63- return (
64- child . props . className . includes ( "tag" ) &&
65- child . props . children . length === DEFAULT_CHILDREN_SIZE
66- ) ;
67- }
68-
69- return false ;
70- } ) ;
71-
72- const content = [ ...myChilds ] ;
73-
74- // Summary is the part of the snippet that would be shown in the code snippet,
75- // to get it we need to cut the <default></default> enclosing tags
76- const summary = content
77- . splice ( 2 , closeDefaultTagIndex - 3 )
78- . map ( removeSpaces )
79- . map ( ( child , i ) => addLink ( child , i , url ) ) ;
80-
81- content . splice ( 0 , DEFAULT_CHILDREN_SIZE ) ; // Remove <default></default> information
82-
83- const { open } = this . state ;
84- return (
85- < Popover
86- isOpen = { open }
87- position = { [ "right" , "top" ] }
88- padding = { 0 }
89- onClickOutside = { this . clickOutsideHandler }
90- // Replaced .shadow with Tailwind equivalents, including the custom rgba box-shadow
91- containerClassName = "overflow-visible rounded shadow-[-1px_1px_10px_0_rgba(255,255,255,0.44)]"
92- content = { < Card body = { content } /> }
36+ export function Details ( { url, myChilds } ) {
37+ const [ open , setOpen ] = useState ( false ) ;
38+
39+ // Find the index of </default>
40+ const closeDefaultTagIndex = myChilds . findIndex ( ( child ) => {
41+ if ( isValidElement ( child ) ) {
42+ return (
43+ child . props . className . includes ( "tag" ) &&
44+ child . props . children . length === DEFAULT_CHILDREN_SIZE
45+ ) ;
46+ }
47+
48+ return false ;
49+ } ) ;
50+
51+ const content = [ ...myChilds ] ;
52+
53+ // Summary is the part of the snippet that would be shown in the code snippet,
54+ // to get it we need to cut the <default></default> enclosing tags
55+ const summary = content
56+ . splice ( 2 , closeDefaultTagIndex - 3 )
57+ . map ( removeSpaces )
58+ . map ( ( child , i ) => addLink ( child , i , url ) ) ;
59+
60+ content . splice ( 0 , DEFAULT_CHILDREN_SIZE ) ; // Remove <default></default> information
61+
62+ return (
63+ < Popover
64+ isOpen = { open }
65+ position = { [ "right" , "top" ] }
66+ padding = { 0 }
67+ onClickOutside = { ( ) => setOpen ( false ) }
68+ // Replaced .shadow with Tailwind equivalents, including the custom rgba box-shadow
69+ containerClassName = "overflow-visible rounded shadow-[-1px_1px_10px_0_rgba(255,255,255,0.44)]"
70+ content = { < Card body = { content } /> }
71+ >
72+ < span
73+ className = "code-details-summary-span"
74+ onClick = { ( ) => setOpen ( ( prev ) => ! prev ) }
9375 >
94- < span
95- className = "code-details-summary-span"
96- onClick = { this . toggleVisibility }
97- >
98- { summary }
99- </ span >
100- </ Popover >
101- ) ;
102- }
76+ { summary }
77+ </ span >
78+ </ Popover >
79+ ) ;
10380}
81+
82+ Details . propTypes = {
83+ url : PropTypes . string ,
84+ myChilds : PropTypes . arrayOf ( PropTypes . node ) ,
85+ } ;
0 commit comments