Update demo app and readme

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,7 +333,7 @@ function App() {
               }
               showErrorMessages={dataDefinition.showErrorMessages}
               collapse={collapseLevel}
-              // collapseAnimationTime={100}
+              collapseAnimationTime={collapseTime}
               showCollectionCount={
                 showCount === 'Yes' ? true : showCount === 'When closed' ? 'when-closed' : false
               }
@@ -478,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