Merge branch '96-custom-animation-time'

Author: CarlosNZ

README.md

@@ -112,6 +112,7 @@ The only *required* value is `data` (although you will need to provide a `setDat
 | `enableClipboard`       | `boolean\|CopyFunction`                       | `true`                                    | Whether or not to enable the "Copy to clipboard" button in the UI. If a function is provided, `true` is assumed and this function will be run whenever an item is copied.                                                                                                                                                                      |
 | `indent`                | `number`                                      | `3`                                       | Specify the amount of indentation for each level of nesting in the displayed data.                                                                                                                                                                                                                                                             |
 | `collapse`              | `boolean\|number\|FilterFunction`             | `false`                                   | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load. If `boolean`, it'll be either all or none. A `number` specifies a nesting depth after which nodes will be closed. For more fine control a function can be provided — see [Filter functions](#filter-functions).                                             |
+| `collapseAnimationTime` | `number`                                      | `500`                                     | Time (in milliseconds) for the transition animation when collapsing collection nodes.                                                                                                                                                                                                                                                          |
 | `restrictEdit`          | `boolean\|FilterFunction`                     | `false`                                   | If `true`, no editing is permitted. A function can be provided for more specificity — see [Filter functions](#filter-functions)                                                                                                                                                                                                                |
 | `restrictDelete`        | `boolean\|FilterFunction`                     | `false`                                   | As with `restrictEdit` but for deletion                                                                                                                                                                                                                                                                                                        |
 | `restrictAdd`           | `boolean\|FilterFunction`                     | `false`                                   | As with `restrictEdit` but for adding new properties                                                                                                                                                                                                                                                                                           |

demo/src/App.tsx

@@ -51,6 +51,7 @@ interface AppState {
   rootName: string
   indent: number
   collapseLevel: number
+  collapseTime: number
   showCount: 'Yes' | 'No' | 'When closed'
   theme: ThemeName | Theme
   allowEdit: boolean
@@ -75,6 +76,7 @@ function App() {
     rootName: dataDefinition.rootName ?? 'data',
     indent: 3,
     collapseLevel: dataDefinition.collapse ?? 2,
+    collapseTime: 500,
     showCount: 'When closed',
     theme: 'default',
     allowEdit: true,
@@ -116,6 +118,7 @@ function App() {
     theme,
     indent,
     collapseLevel,
+    collapseTime,
     showCount,
     showIndices,
     sortKeys,
@@ -330,6 +333,7 @@ function App() {
               }
               showErrorMessages={dataDefinition.showErrorMessages}
               collapse={collapseLevel}
+              collapseAnimationTime={collapseTime}
               showCollectionCount={
                 showCount === 'Yes' ? true : showCount === 'When closed' ? 'when-closed' : false
               }
@@ -477,6 +481,20 @@ function App() {
                     </NumberInputStepper>
                   </NumberInput>
                 </HStack>
+                <HStack className="inputRow">
+                  <FormLabel className="labelWidth" textAlign="right">
+                    Collapse animation time
+                  </FormLabel>
+                  <NumberInput
+                    id="collapseTime"
+                    className="inputWidth"
+                    min={0}
+                    value={collapseTime}
+                    onChange={(value) => updateState({ collapseTime: Number(value) })}
+                  >
+                    <NumberInputField />
+                  </NumberInput>
+                </HStack>
                 <HStack className="inputRow">
                   <FormLabel className="labelWidth" textAlign="right">
                     Indent level

src/CollectionNode.tsx

@@ -32,6 +32,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
     onDelete,
     canDragOnto,
     collapseFilter,
+    collapseAnimationTime,
     onMove,
     enableClipboard,
     searchFilter,
@@ -145,7 +146,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
       hasBeenOpened.current = true
       setCollapsed(!collapsed)
       setCollapseState(null)
-      setTimeout(() => setIsAnimating(false), 500)
+      setTimeout(() => setIsAnimating(false), collapseAnimationTime)
     }
   }
 

src/JsonEditor.tsx

@@ -37,6 +37,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   enableClipboard = true,
   indent = 3,
   collapse = false,
+  collapseAnimationTime = 500,
   showCollectionCount = true,
   restrictEdit = false,
   restrictDelete = false,
@@ -72,6 +73,14 @@ const Editor: React.FC<JsonEditorProps> = ({
 
   const [data, setData] = useData<JsonData>({ setData: srcSetData, data: srcData })
 
+  const docRoot = document.querySelector(':root') as HTMLElement
+  const transitionTime = getComputedStyle(document.documentElement).getPropertyValue(
+    '--jer-expand-transition-time'
+  )
+  if (parseFloat(transitionTime) * 1000 !== collapseAnimationTime) {
+    docRoot?.style.setProperty('--jer-expand-transition-time', `${collapseAnimationTime / 1000}s`)
+  }
+
   useEffect(() => {
     const debounce = setTimeout(() => setDebouncedSearchText(searchText), searchDebounceTime)
     return () => clearTimeout(debounce)
@@ -249,6 +258,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     onMove,
     showCollectionCount,
     collapseFilter,
+    collapseAnimationTime,
     restrictEditFilter,
     restrictDeleteFilter,
     restrictAddFilter,

src/types.ts

@@ -22,6 +22,7 @@ export interface JsonEditorProps {
   id?: string
   indent?: number
   collapse?: boolean | number | FilterFunction
+  collapseAnimationTime?: number // ms
   showCollectionCount?: boolean | 'when-closed'
   restrictEdit?: boolean | FilterFunction
   restrictDelete?: boolean | FilterFunction
@@ -192,6 +193,7 @@ interface BaseNodeProps {
 export interface CollectionNodeProps extends BaseNodeProps {
   data: CollectionData
   collapseFilter: FilterFunction
+  collapseAnimationTime: number
   onAdd: InternalUpdateFunction
   keySort: boolean | CompareFunction
   showArrayIndices: boolean