Make collapseAnimationTime local (#164)

Author: CarlosNZ

src/CollectionNode.tsx

@@ -63,12 +63,8 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
 
   const startCollapsed = collapseFilter(incomingNodeData)
 
-  const { contentRef, isAnimating, maxHeight, collapsed, animateCollapse } = useCollapseTransition(
-    data,
-    collapseAnimationTime,
-    startCollapsed,
-    mainContainerRef
-  )
+  const { contentRef, isAnimating, maxHeight, collapsed, animateCollapse, cssTransitionValue } =
+    useCollapseTransition(data, collapseAnimationTime, startCollapsed, mainContainerRef)
 
   const {
     pathString,
@@ -462,7 +458,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
           <div className="jer-collection-name">
             <div
               className={`jer-collapse-icon jer-accordion-icon${collapsed ? ' jer-rotate-90' : ''}`}
-              style={{ zIndex: 11 + nodeData.level * 2 }}
+              style={{ zIndex: 11 + nodeData.level * 2, transition: cssTransitionValue }}
               onClick={(e) => handleCollapse(e)}
             >
               <Icon name="chevron" rotate={collapsed} nodeData={nodeData} />
@@ -480,7 +476,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
           {!isEditing && showCount && (
             <div
               className={`jer-collection-item-count${showCount ? ' jer-visible' : ' jer-hidden'}`}
-              style={getStyles('itemCount', nodeData)}
+              style={{ ...getStyles('itemCount', nodeData), transition: cssTransitionValue }}
             >
               {size === 1
                 ? translate('ITEM_SINGLE', { ...nodeData, size: 1 }, 1)
@@ -489,7 +485,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
           )}
           <div
             className={`jer-brackets${isCollapsed ? ' jer-visible' : ' jer-hidden'}`}
-            style={getStyles('bracket', nodeData)}
+            style={{ ...getStyles('bracket', nodeData), transition: cssTransitionValue }}
           >
             {brackets.close}
           </div>
@@ -510,6 +506,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
           // Prevent collapse if this node or any children are being edited
           maxHeight: childrenEditing ? undefined : maxHeight,
           ...getStyles('collectionInner', nodeData),
+          transition: cssTransitionValue,
         }}
         ref={contentRef}
       >

src/JsonEditor.tsx

@@ -376,15 +376,8 @@ export const JsonEditor: React.FC<JsonEditorProps> = (props) => {
     setDocRoot(root)
   }, [])
 
-  const { collapseAnimationTime = 300 } = props
-
   if (!docRoot) return null
 
-  const transitionTime = getComputedStyle(docRoot).getPropertyValue('--jer-expand-transition-time')
-  if (parseFloat(transitionTime) * 1000 !== collapseAnimationTime) {
-    docRoot.style.setProperty('--jer-expand-transition-time', `${collapseAnimationTime / 1000}s`)
-  }
-
   return (
     <ThemeProvider theme={props.theme ?? defaultTheme} icons={props.icons} docRoot={docRoot}>
       <TreeStateProvider>

src/hooks/useCollapseTransition.ts

@@ -62,6 +62,8 @@ export const useCollapseTransition = (
   const prevHeight = useRef<string | number>(0)
   const timerId = useRef<number>()
 
+  const cssTransitionValue = `${collapseAnimationTime / 1000}s`
+
   // Method to change the collapse state and manage the animated transition
   const animateCollapse = (collapse: boolean) => {
     if (collapsed === collapse) return
@@ -98,6 +100,7 @@ export const useCollapseTransition = (
     animateCollapse,
     maxHeight,
     collapsed,
+    cssTransitionValue,
   }
 }
 

src/style.css

@@ -4,18 +4,15 @@
   --jer-select-arrow: #777;
   --jer-form-border: 1px solid #ededf0;
   --jer-form-border-focus: 1px solid #e2e2e2;
-  --jer-expand-transition-time: 0.3s;
   --jer-highlight-color: #b3d8ff;
 }
 
 .jer-visible {
   opacity: 1;
-  transition: var(--jer-expand-transition-time);
 }
 
 .jer-hidden {
   opacity: 0;
-  transition: var(--jer-expand-transition-time);
 }
 
 /* Select styled as per:
@@ -157,7 +154,6 @@ select:focus + .focus {
 
 .jer-collection-inner {
   position: relative;
-  transition: var(--jer-expand-transition-time);
 }
 
 .jer-collection-text-edit {
@@ -339,7 +335,7 @@ select:focus + .focus {
 
 .jer-copy-pulse {
   position: relative;
-  transition: transform var(--jer-expand-transition-time);
+  transition: 0.3s;
 }
 
 .jer-copy-pulse:hover {
@@ -378,12 +374,10 @@ select:focus + .focus {
 
 .jer-rotate-90 {
   transform: rotate(-90deg);
-  transition: transform var(--jer-expand-transition-time);
 }
 
 .jer-accordion-icon {
   /* font-size: '2em'; */
-  transition: transform var(--jer-expand-transition-time);
 }
 
 .jer-icon:hover {