@dhis2-ui/organisation-unit-tree 7.2.8 → 7.4.2

package/build/es/organisation-unit-node/use-open-state.test.js

@@ -1,164 +1,129 @@
-import { useEffect, useState } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
 import { useOpenState } from './use-open-state.js';
-jest.mock('react', () => ({
-  useState: jest.fn(),
-  useEffect: jest.fn()
-}));
 describe('OrganisationUnitTree - useOpenState', () => {
   const onExpand = jest.fn();
   const onCollapse = jest.fn();
-  beforeEach(() => {
-    useState.mockImplementation(initialValue => [initialValue, () => null]);
-    useEffect.mockImplementation(callback => callback());
-  });
   afterEach(() => {
     onExpand.mockClear();
     onCollapse.mockClear();
   });
-  it('should not have an initial open state if the path is not in the expanded array', () => {
+  it('should set open to false if the path is not in the expanded array', () => {
     const path = '/foo';
     const expanded = ['/bar'];
     const expected = false;
     const {
-      open: actual
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       path,
       expanded
-    });
+    }));
+    const {
+      open: actual
+    } = result.current;
     expect(actual).toBe(expected);
   });
-  it('should have an initial open state if the path is in the expanded array', () => {
+  it('should set open to true if the path is in the expanded array', () => {
     const path = '/foo';
     const expanded = ['/foo'];
     const expected = true;
     const {
-      open: actual
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       path,
       expanded
-    });
+    }));
+    const {
+      open: actual
+    } = result.current;
     expect(actual).toBe(expected);
   });
-  it('should call setOpen with false when calling onToggleOpen if open is true', () => {
-    let useStateCall = 0;
-    const open = true;
-    const setOpen = jest.fn();
-    useState.mockImplementation(initialValue => {
-      useStateCall++;
-
-      if (useStateCall === 1) {
-        return [initialValue, jest.fn()];
-      }
-
-      return [open, setOpen];
-    });
+  it('should call onCollapse when calling onToggleOpen while open is true', () => {
     const path = '/foo';
     const expanded = ['/foo'];
     const {
-      onToggleOpen
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       path,
-      expanded
-    });
-    onToggleOpen();
-    expect(setOpen).toHaveBeenCalledWith(!open);
-  });
-  it('should call setOpen with true when calling onToggleOpen if open is false', () => {
-    let useStateCall = 0;
-    const open = true;
-    const setOpen = jest.fn();
-    useState.mockImplementation(initialValue => {
-      useStateCall++;
-
-      if (useStateCall === 1) {
-        return [initialValue, jest.fn()];
-      }
-
-      return [open, setOpen];
-    });
+      expanded,
+      onCollapse
+    }));
     const {
       onToggleOpen
-    } = useOpenState({
-      path: '/foo',
-      expanded: []
-    });
+    } = result.current;
     onToggleOpen();
-    expect(setOpen).toHaveBeenCalledWith(!open);
+    expect(onCollapse).toHaveBeenCalledWith({
+      path: '/foo'
+    });
+    expect(onExpand).toHaveBeenCalledTimes(0);
   });
-  it('should call the onExpand callback with the path when calling onToggleOpen and open was false', () => {
-    useState.mockImplementation(() => [false, jest.fn()]);
+  it('should call onExpand when calling onToggleOpen while open is false', () => {
     const path = '/foo';
+    const expanded = [];
     const {
-      onToggleOpen
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       path,
-      expanded: [],
-      onExpand,
-      onCollapse
-    });
-    onToggleOpen();
-    expect(onExpand).toHaveBeenCalledWith({
-      path
-    });
-    expect(onCollapse).toHaveBeenCalledTimes(0);
-  });
-  it('should call the onCollapse callback with the path when calling onToggleOpen and open was true', () => {
-    useState.mockImplementation(() => [true, jest.fn()]);
-    const path = '/foo';
+      expanded,
+      onExpand
+    }));
     const {
       onToggleOpen
-    } = useOpenState({
-      path,
-      expanded: [],
-      onExpand,
-      onCollapse
-    });
+    } = result.current;
     onToggleOpen();
-    expect(onCollapse).toHaveBeenCalledWith({
-      path
+    expect(onExpand).toHaveBeenCalledWith({
+      path: '/foo'
     });
-    expect(onExpand).toHaveBeenCalledTimes(0);
+    expect(onCollapse).toHaveBeenCalledTimes(0);
   });
-  it('should set the state to open if there is an error and autoExpandLoadingError is true', () => {
+  it('should set openedOnceDueToError to true if there is an error and autoExpandLoadingError is true', async () => {
     const path = '/foo';
     const {
-      open
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       autoExpandLoadingError: true,
       errorMessage: 'error message',
       path,
       expanded: [],
       onExpand,
       onCollapse
-    });
-    expect(open).toBe(true);
+    }));
+    const {
+      openedOnceDueToError
+    } = result.current;
+    expect(openedOnceDueToError).toBe(true);
   });
-  it('should not alter the state if there is an error but autoExpandLoadingError is falsy', () => {
+  it('should not set open to true if there is an error but autoExpandLoadingError is falsy', () => {
     const path = '/foo';
     const {
-      open
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       autoExpandLoadingError: undefined,
       errorMessage: 'error message',
       path,
       expanded: [],
       onExpand,
       onCollapse
-    });
+    }));
+    const {
+      open
+    } = result.current;
     expect(open).toBe(false);
   });
-  it('should not alter the state if autoExpandLoadingError is true but there is no error', () => {
+  it('should not set open to true if autoExpandLoadingError is true but there is no error', () => {
     const path = '/foo';
     const {
-      open
-    } = useOpenState({
+      result
+    } = renderHook(() => useOpenState({
       autoExpandLoadingError: true,
       errorMessage: '',
       path,
       expanded: [],
       onExpand,
       onCollapse
-    });
+    }));
+    const {
+      open
+    } = result.current;
     expect(open).toBe(false);
   });
 });

package/build/es/organisation-unit-tree/organisation-unit-tree.js

@@ -1,3 +1,4 @@
+import { requiredIf } from '@dhis2/prop-types';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { OrganisationUnitNode } from '../organisation-unit-node/index.js';
@@ -25,6 +26,9 @@ const OrganisationUnitTree = ({
   selected,
   singleSelection,
   suppressAlphabeticalSorting,
+  expanded: expandedControlled,
+  handleExpand: handleExpandControlled,
+  handleCollapse: handleCollapseControlled,
   onExpand,
   onCollapse,
   onChildrenLoaded
@@ -45,7 +49,14 @@ const OrganisationUnitTree = ({
     expanded,
     handleExpand,
     handleCollapse
-  } = useExpanded(initiallyExpanded, onExpand, onCollapse);
+  } = useExpanded({
+    initiallyExpanded,
+    onExpand,
+    onCollapse,
+    expandedControlled,
+    handleExpandControlled,
+    handleCollapseControlled
+  });
   useEffect(() => {
     // do not refetch on initial render
     if (refetch && reloadId > 0 && reloadId !== prevReloadId) {
@@ -103,6 +114,7 @@ OrganisationUnitTree.propTypes = {
 
   /** When set to true, no unit can be selected */
   disableSelection: PropTypes.bool,
+  expanded: requiredIf(props => !!props.handleExpand || !!props.handleCollapse, PropTypes.arrayOf(PropTypes.string)),
 
   /**
    * All organisation units with a path that includes the provided paths will be shown.
@@ -112,6 +124,8 @@ OrganisationUnitTree.propTypes = {
 
   /** When true, everything will be reloaded. In order to load it again after reloading, `forceReload` has to be set to `false` and then to `true` again */
   forceReload: PropTypes.bool,
+  handleCollapse: requiredIf(props => !!props.expanded || !!props.handleExpand, PropTypes.func),
+  handleExpand: requiredIf(props => !!props.expanded || !!props.handleCollapse, PropTypes.func),
 
   /**
    * All units provided to "highlighted" as path will be visually

package/build/es/organisation-unit-tree/organisation-unit-tree.test.js

@@ -0,0 +1,55 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { OrganisationUnitTree } from './organisation-unit-tree.js';
+describe('OrganisationUnitTree', () => {
+  const origError = console.error.bind(console);
+  const errorMock = jest.fn();
+  beforeEach(() => {
+    console.error = errorMock;
+  });
+  afterEach(() => {
+    console.error = origError;
+    errorMock.mockClear();
+  });
+  describe('Controlled expanded props', () => {
+    describe('Missing props', () => {
+      it('should throw a prop-types error when "handleCollapse" is missing', () => {
+        shallow( /*#__PURE__*/React.createElement(CustomDataProvider, {
+          data: {}
+        }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+          roots: "/A001",
+          expanded: [],
+          onChange: () => {},
+          handleExpand: () => {}
+        })));
+        expect(errorMock).toHaveBeenCalledTimes(1);
+        expect(errorMock.mock.calls[0][0]).toMatch(/^Warning: Failed prop type: Invalid prop `handleCollapse` supplied to `OrganisationUnitTree`/);
+      });
+      it('should throw a prop-types error when "handleExpand" is missing', () => {
+        shallow( /*#__PURE__*/React.createElement(CustomDataProvider, {
+          data: {}
+        }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+          roots: "/A001",
+          expanded: [],
+          onChange: () => {},
+          handleCollapse: () => {}
+        })));
+        expect(errorMock).toHaveBeenCalledTimes(1);
+        expect(errorMock.mock.calls[0][0]).toMatch(/^Warning: Failed prop type: Invalid prop `handleExpand` supplied to `OrganisationUnitTree`/);
+      });
+      it('should throw a prop-types error when "expanded" is missing', () => {
+        shallow( /*#__PURE__*/React.createElement(CustomDataProvider, {
+          data: {}
+        }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+          roots: "/A001",
+          onChange: () => {},
+          handleCollapse: () => {},
+          handleExpand: () => {}
+        })));
+        expect(errorMock).toHaveBeenCalledTimes(1);
+        expect(errorMock.mock.calls[0][0]).toMatch(/^Warning: Failed prop type: Invalid prop `expanded` supplied to `OrganisationUnitTree`/);
+      });
+    });
+  });
+});

package/build/es/organisation-unit-tree/use-expanded/{helpers.js → create-expand-handlers.js}

@@ -1,25 +1,3 @@
-/**
- * @param {string} path
- * @returns {string[]}
- */
-export const extractAllPathsFromPath = path => {
-  // remove leading slash and split by path delimiter/slashes
-  const segments = path.replace(/^\//, '').split('/');
-  const withSubPaths = segments.map((segment, index) => {
-    // take all segments from 0 to index and join them with the delimiter
-    return `/${segments.slice(0, index + 1).join('/')}`;
-  });
-  return withSubPaths;
-};
-/**
- * @param {string[]} initiallyExpanded
- * @returns {string[]}
- */
-
-export const getInitiallyExpandedPaths = initiallyExpanded => initiallyExpanded.reduce((all, curPath) => {
-  const allPathsInCurPath = extractAllPathsFromPath(curPath);
-  return [...all, ...allPathsInCurPath];
-}, []);
 /**
  * @param {Object} args
  * @param {string[]} args.expanded
@@ -28,7 +6,6 @@ export const getInitiallyExpandedPaths = initiallyExpanded => initiallyExpanded.
  * @param {Function} [args.onCollapse]
  * @returns {{ handleExpand: Function, handleCollapse: Function }}
  */
-
 export const createExpandHandlers = ({
   expanded,
   setExpanded,

package/build/es/organisation-unit-tree/use-expanded/{helpers.test.js → create-expand-handlers.test.js}

@@ -1,17 +1,4 @@
-import { createExpandHandlers, getInitiallyExpandedPaths } from './helpers.js';
-describe('OrganisationUnitTree - useExpanded - getInitiallyExpandedPaths', () => {
-  const initiallyExpanded = ['/foo/bar/baz', '/foobar/barbaz/bazfoo'];
-  it('should include all initiallyExpanded paths in the returned expanded array', () => {
-    const actual = getInitiallyExpandedPaths(initiallyExpanded);
-    const expected = expect.arrayContaining(initiallyExpanded);
-    expect(actual).toEqual(expected);
-  });
-  it('should include all sub paths of the paths in initiallyExpanded in the returned exanded array', () => {
-    const actual = getInitiallyExpandedPaths(initiallyExpanded);
-    const expected = expect.arrayContaining(['/foo', '/foo/bar', '/foobar', '/foobar/barbaz']);
-    expect(actual).toEqual(expected);
-  });
-});
+import { createExpandHandlers } from './create-expand-handlers.js';
 describe('OrganisationUnitTree - useExpanded - createExpandHandlers', () => {
   const initiallyExpanded = ['/foo/bar/baz', '/foobar/barbaz/bazfoo'];
   const onExpand = jest.fn();

package/build/es/organisation-unit-tree/use-expanded/use-expanded.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { getInitiallyExpandedPaths, createExpandHandlers } from './helpers.js';
+import { getAllExpandedPaths } from '../../get-all-expanded-paths/index.js';
+import { createExpandHandlers } from './create-expand-handlers.js';
 /**
  * @param {string[]} initiallyExpanded
  * @param {Function} [onExpand]
@@ -7,9 +8,26 @@ import { getInitiallyExpandedPaths, createExpandHandlers } from './helpers.js';
  * @returns {{ expanded: string[], handleExpand: Function, handleCollapse: Function }}
  */
 
-export const useExpanded = (initiallyExpanded, onExpand, onCollapse) => {
-  const allInitiallyExpandedPaths = getInitiallyExpandedPaths(initiallyExpanded);
+export const useExpanded = ({
+  initiallyExpanded,
+  onExpand,
+  onCollapse,
+  expandedControlled,
+  handleExpandControlled,
+  handleCollapseControlled
+}) => {
+  const isControlled = !!expandedControlled;
+  const allInitiallyExpandedPaths = isControlled ? [] : getAllExpandedPaths(initiallyExpanded);
   const [expanded, setExpanded] = useState(allInitiallyExpandedPaths);
+
+  if (isControlled) {
+    return {
+      expanded: expandedControlled,
+      handleExpand: handleExpandControlled,
+      handleCollapse: handleCollapseControlled
+    };
+  }
+
   const {
     handleExpand,
     handleCollapse

package/build/es/organisation-unit-tree/use-expanded/use-expanded.test.js

@@ -1,31 +1,64 @@
 import { useState } from 'react';
-import { createExpandHandlers, getInitiallyExpandedPaths } from './helpers.js';
+import { getAllExpandedPaths } from '../../get-all-expanded-paths/index.js';
+import { createExpandHandlers } from './create-expand-handlers.js';
 import { useExpanded } from './use-expanded.js';
 jest.mock('react', () => ({
   useState: jest.fn(initialValue => [initialValue, () => null])
 }));
-jest.mock('../use-expanded/helpers.js', () => ({
-  getInitiallyExpandedPaths: jest.fn(input => input),
+jest.mock('../../get-all-expanded-paths/index.js', () => ({
+  getAllExpandedPaths: jest.fn(input => input)
+}));
+jest.mock('./create-expand-handlers.js', () => ({
   createExpandHandlers: jest.fn(() => ({
     handleCollapse: () => null,
     handleExpand: () => null
   }))
 }));
 describe('OrganisationUnitTree - useExpanded hook', () => {
-  it('should use the getInitiallyExpandedPaths helper to determine the initial state', () => {
-    getInitiallyExpandedPaths.mockImplementationOnce(input => [...input, '/foo/bar/baz']);
+  const onExpand = jest.fn();
+  const onCollapse = jest.fn();
+  it('should use the getAllExpandedPaths helper to determine the initial state', () => {
+    getAllExpandedPaths.mockImplementationOnce(input => [...input, '/foo/bar/baz']);
     const expected = ['/foo', '/foo/bar', '/foo/bar/baz'];
     const {
       expanded: actual
-    } = useExpanded(['/foo', '/foo/bar']);
+    } = useExpanded({
+      initiallyExpanded: ['/foo', '/foo/bar'],
+      onExpand,
+      onCollapse
+    });
     expect(actual).toEqual(expected);
   });
   it('should pass the setExpanded function from seState to createExpandHandlers', () => {
     const setExpanded = jest.fn();
     useState.mockImplementationOnce(() => [[], setExpanded]);
-    useExpanded([]);
+    useExpanded({
+      initiallyExpanded: [],
+      onExpand,
+      onCollapse
+    });
     expect(createExpandHandlers).toHaveBeenCalledWith(expect.objectContaining({
       setExpanded
     }));
   });
+  it('should return the controlled values if all of them are being provided', () => {
+    const expandedControlled = ['/foo'];
+    const handleExpandControlled = jest.fn();
+    const handleCollapseControlled = jest.fn();
+    const {
+      expanded,
+      handleExpand,
+      handleCollapse
+    } = useExpanded({
+      initiallyExpanded: [],
+      onExpand,
+      onCollapse,
+      expandedControlled,
+      handleExpandControlled,
+      handleCollapseControlled
+    });
+    expect(expanded).toBe(expandedControlled);
+    expect(handleExpand).toBe(handleExpandControlled);
+    expect(handleCollapse).toBe(handleCollapseControlled);
+  });
 });