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

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

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OrganisationUnitTree = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes = require("@dhis2/prop-types");
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("../organisation-unit-node/index.js");
 
-var _propTypes2 = require("../prop-types.js");
+var _propTypes3 = require("../prop-types.js");
 
 var _index2 = require("./default-render-node-label/index.js");
 
@@ -48,6 +50,9 @@ const OrganisationUnitTree = ({
   selected,
   singleSelection,
   suppressAlphabeticalSorting,
+  expanded: expandedControlled,
+  handleExpand: handleExpandControlled,
+  handleCollapse: handleCollapseControlled,
   onExpand,
   onCollapse,
   onChildrenLoaded
@@ -68,7 +73,14 @@ const OrganisationUnitTree = ({
     expanded,
     handleExpand,
     handleCollapse
-  } = (0, _index3.useExpanded)(initiallyExpanded, onExpand, onCollapse);
+  } = (0, _index3.useExpanded)({
+    initiallyExpanded,
+    onExpand,
+    onCollapse,
+    expandedControlled,
+    handleExpandControlled,
+    handleCollapseControlled
+  });
   (0, _react.useEffect)(() => {
     // do not refetch on initial render
     if (refetch && reloadId > 0 && reloadId !== prevReloadId) {
@@ -115,27 +127,30 @@ const OrganisationUnitTree = ({
 exports.OrganisationUnitTree = OrganisationUnitTree;
 OrganisationUnitTree.propTypes = {
   /** Root org unit ID(s) */
-  roots: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
+  roots: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)]).isRequired,
 
   /** Will be called with the following object:
    * `{ id: string, displayName: string, path: string, checked: boolean, selected: string[] }` */
-  onChange: _propTypes.default.func.isRequired,
+  onChange: _propTypes2.default.func.isRequired,
 
   /** When set, the error when loading children fails will be shown automatically */
-  autoExpandLoadingError: _propTypes.default.bool,
-  dataTest: _propTypes.default.string,
+  autoExpandLoadingError: _propTypes2.default.bool,
+  dataTest: _propTypes2.default.string,
 
   /** When set to true, no unit can be selected */
-  disableSelection: _propTypes.default.bool,
+  disableSelection: _propTypes2.default.bool,
+  expanded: (0, _propTypes.requiredIf)(props => !!props.handleExpand || !!props.handleCollapse, _propTypes2.default.arrayOf(_propTypes2.default.string)),
 
   /**
    * All organisation units with a path that includes the provided paths will be shown.
    * All others will not be rendered. When not provided, all org units will be shown.
    */
-  filter: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  filter: _propTypes2.default.arrayOf(_propTypes3.orgUnitPathPropType),
 
   /** 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.default.bool,
+  forceReload: _propTypes2.default.bool,
+  handleCollapse: (0, _propTypes.requiredIf)(props => !!props.expanded || !!props.handleExpand, _propTypes2.default.func),
+  handleExpand: (0, _propTypes.requiredIf)(props => !!props.expanded || !!props.handleCollapse, _propTypes2.default.func),
 
   /**
    * All units provided to "highlighted" as path will be visually
@@ -145,7 +160,7 @@ OrganisationUnitTree.propTypes = {
    * * searchResults
    * * highlightSearchResults
    */
-  highlighted: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  highlighted: _propTypes2.default.arrayOf(_propTypes3.orgUnitPathPropType),
 
   /**
    * An array of OU paths that will be expanded automatically
@@ -154,10 +169,10 @@ OrganisationUnitTree.propTypes = {
    * and all its parent OUs separated by slashes (/)
    * Note: This replaces "openFirstLevel" as that's redundant
    */
-  initiallyExpanded: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  initiallyExpanded: _propTypes2.default.arrayOf(_propTypes3.orgUnitPathPropType),
 
   /** When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units */
-  isUserDataViewFallback: _propTypes.default.bool,
+  isUserDataViewFallback: _propTypes2.default.bool,
 
   /** Renders the actual node component for each leaf, can be used to
    * customize the node. The default function just returns the node's
@@ -187,25 +202,25 @@ OrganisationUnitTree.propTypes = {
    *    disableSelection: boolean,
    * }
    * ``` */
-  renderNodeLabel: _propTypes.default.func,
+  renderNodeLabel: _propTypes2.default.func,
 
   /** An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`) */
-  selected: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  selected: _propTypes2.default.arrayOf(_propTypes3.orgUnitPathPropType),
 
   /** When set, no checkboxes will be displayed and only the first selected path in `selected` will be highlighted */
-  singleSelection: _propTypes.default.bool,
+  singleSelection: _propTypes2.default.bool,
 
   /** Turns off alphabetical sorting of units */
-  suppressAlphabeticalSorting: _propTypes.default.bool,
+  suppressAlphabeticalSorting: _propTypes2.default.bool,
 
   /** Called with the children's data that was loaded */
-  onChildrenLoaded: _propTypes.default.func,
+  onChildrenLoaded: _propTypes2.default.func,
 
   /** Called with `{ path: string }` with the path of the parent of the level closed */
-  onCollapse: _propTypes.default.func,
+  onCollapse: _propTypes2.default.func,
 
   /** Called with `{ path: string }` with the path of the parent of the level opened */
-  onExpand: _propTypes.default.func
+  onExpand: _propTypes2.default.func
   /**
    * All units with ids (not paths!) provided
    * to "idsThatShouldBeReloaded" will be reloaded

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _organisationUnitTree = require("./organisation-unit-tree.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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', () => {
+        (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+          data: {}
+        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.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', () => {
+        (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+          data: {}
+        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.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', () => {
+        (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+          data: {}
+        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.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/cjs/organisation-unit-tree/use-expanded/{helpers.js → create-expand-handlers.js}

@@ -3,33 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createExpandHandlers = exports.getInitiallyExpandedPaths = exports.extractAllPathsFromPath = void 0;
+exports.createExpandHandlers = void 0;
 
-/**
- * @param {string} path
- * @returns {string[]}
- */
-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[]}
- */
-
-
-exports.extractAllPathsFromPath = extractAllPathsFromPath;
-
-const getInitiallyExpandedPaths = initiallyExpanded => initiallyExpanded.reduce((all, curPath) => {
-  const allPathsInCurPath = extractAllPathsFromPath(curPath);
-  return [...all, ...allPathsInCurPath];
-}, []);
 /**
  * @param {Object} args
  * @param {string[]} args.expanded
@@ -38,10 +13,6 @@ const getInitiallyExpandedPaths = initiallyExpanded => initiallyExpanded.reduce(
  * @param {Function} [args.onCollapse]
  * @returns {{ handleExpand: Function, handleCollapse: Function }}
  */
-
-
-exports.getInitiallyExpandedPaths = getInitiallyExpandedPaths;
-
 const createExpandHandlers = ({
   expanded,
   setExpanded,

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

@@ -1,20 +1,7 @@
 "use strict";
 
-var _helpers = require("./helpers.js");
+var _createExpandHandlers = require("./create-expand-handlers.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 = (0, _helpers.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 = (0, _helpers.getInitiallyExpandedPaths)(initiallyExpanded);
-    const expected = expect.arrayContaining(['/foo', '/foo/bar', '/foobar', '/foobar/barbaz']);
-    expect(actual).toEqual(expected);
-  });
-});
 describe('OrganisationUnitTree - useExpanded - createExpandHandlers', () => {
   const initiallyExpanded = ['/foo/bar/baz', '/foobar/barbaz/bazfoo'];
   const onExpand = jest.fn();
@@ -28,7 +15,7 @@ describe('OrganisationUnitTree - useExpanded - createExpandHandlers', () => {
     const expanded = initiallyExpanded;
     const {
       handleExpand
-    } = (0, _helpers.createExpandHandlers)({
+    } = (0, _createExpandHandlers.createExpandHandlers)({
       expanded,
       setExpanded
     });
@@ -42,7 +29,7 @@ describe('OrganisationUnitTree - useExpanded - createExpandHandlers', () => {
     const expanded = [...initiallyExpanded, '/a/new/path'];
     const {
       handleExpand
-    } = (0, _helpers.createExpandHandlers)({
+    } = (0, _createExpandHandlers.createExpandHandlers)({
       expanded,
       setExpanded
     });
@@ -56,7 +43,7 @@ describe('OrganisationUnitTree - useExpanded - createExpandHandlers', () => {
     const expanded = [...initiallyExpanded, '/a/new/path'];
     const {
       handleCollapse
-    } = (0, _helpers.createExpandHandlers)({
+    } = (0, _createExpandHandlers.createExpandHandlers)({
       expanded,
       setExpanded
     });
@@ -70,7 +57,7 @@ describe('OrganisationUnitTree - useExpanded - createExpandHandlers', () => {
     const expanded = initiallyExpanded;
     const {
       handleCollapse
-    } = (0, _helpers.createExpandHandlers)({
+    } = (0, _createExpandHandlers.createExpandHandlers)({
       expanded,
       setExpanded
     });

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

@@ -7,7 +7,9 @@ exports.useExpanded = void 0;
 
 var _react = require("react");
 
-var _helpers = require("./helpers.js");
+var _index = require("../../get-all-expanded-paths/index.js");
+
+var _createExpandHandlers = require("./create-expand-handlers.js");
 
 /**
  * @param {string[]} initiallyExpanded
@@ -15,13 +17,30 @@ var _helpers = require("./helpers.js");
  * @param {Function} [onCollapse]
  * @returns {{ expanded: string[], handleExpand: Function, handleCollapse: Function }}
  */
-const useExpanded = (initiallyExpanded, onExpand, onCollapse) => {
-  const allInitiallyExpandedPaths = (0, _helpers.getInitiallyExpandedPaths)(initiallyExpanded);
+const useExpanded = ({
+  initiallyExpanded,
+  onExpand,
+  onCollapse,
+  expandedControlled,
+  handleExpandControlled,
+  handleCollapseControlled
+}) => {
+  const isControlled = !!expandedControlled;
+  const allInitiallyExpandedPaths = isControlled ? [] : (0, _index.getAllExpandedPaths)(initiallyExpanded);
   const [expanded, setExpanded] = (0, _react.useState)(allInitiallyExpandedPaths);
+
+  if (isControlled) {
+    return {
+      expanded: expandedControlled,
+      handleExpand: handleExpandControlled,
+      handleCollapse: handleCollapseControlled
+    };
+  }
+
   const {
     handleExpand,
     handleCollapse
-  } = (0, _helpers.createExpandHandlers)({
+  } = (0, _createExpandHandlers.createExpandHandlers)({
     expanded,
     setExpanded,
     onExpand,

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

@@ -2,28 +2,38 @@
 
 var _react = require("react");
 
-var _helpers = require("./helpers.js");
+var _index = require("../../get-all-expanded-paths/index.js");
+
+var _createExpandHandlers = require("./create-expand-handlers.js");
 
 var _useExpanded = require("./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', () => {
-    _helpers.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', () => {
+    _index.getAllExpandedPaths.mockImplementationOnce(input => [...input, '/foo/bar/baz']);
 
     const expected = ['/foo', '/foo/bar', '/foo/bar/baz'];
     const {
       expanded: actual
-    } = (0, _useExpanded.useExpanded)(['/foo', '/foo/bar']);
+    } = (0, _useExpanded.useExpanded)({
+      initiallyExpanded: ['/foo', '/foo/bar'],
+      onExpand,
+      onCollapse
+    });
     expect(actual).toEqual(expected);
   });
   it('should pass the setExpanded function from seState to createExpandHandlers', () => {
@@ -31,9 +41,33 @@ describe('OrganisationUnitTree - useExpanded hook', () => {
 
     _react.useState.mockImplementationOnce(() => [[], setExpanded]);
 
-    (0, _useExpanded.useExpanded)([]);
-    expect(_helpers.createExpandHandlers).toHaveBeenCalledWith(expect.objectContaining({
+    (0, _useExpanded.useExpanded)({
+      initiallyExpanded: [],
+      onExpand,
+      onCollapse
+    });
+    expect(_createExpandHandlers.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
+    } = (0, _useExpanded.useExpanded)({
+      initiallyExpanded: [],
+      onExpand,
+      onCollapse,
+      expandedControlled,
+      handleExpandControlled,
+      handleCollapseControlled
+    });
+    expect(expanded).toBe(expandedControlled);
+    expect(handleExpand).toBe(handleExpandControlled);
+    expect(handleCollapse).toBe(handleCollapseControlled);
+  });
 });