@dhis2-ui/organisation-unit-tree 7.16.1 → 8.0.0

package/build/cjs/__e2e__/common.js

@@ -25,39 +25,59 @@ const delayResponse = (delay, response) => () => new Promise(resolve => setTimeo
 
 exports.delayResponse = delayResponse;
 
-const getOrganisationUnitData = id => {
+const createResponse = ({
+  fields,
+  id,
+  path,
+  displayName,
+  children
+}) => ({ ...(fields.includes('id') ? {
+    id
+  } : {}),
+  ...(fields.includes('path') ? {
+    path
+  } : {}),
+  ...(fields.includes('displayName') ? {
+    displayName
+  } : {}),
+  ...(fields.includes('children::size') ? {
+    children: children.length
+  } : {}),
+  ...(fields.includes('children[id,path,displayName]') ? {
+    children
+  } : {})
+});
+
+const getOrganisationUnitData = (id, {
+  fields
+}) => {
   let data;
 
   if (id === 'A0000000000') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000000',
       path: '/A0000000000',
       displayName: 'Org Unit 1',
       children: [{
         id: 'A0000000001',
         path: '/A0000000000/A0000000001',
-        children: [{
-          id: 'A0000000003'
-        }, {
-          id: 'A0000000004'
-        }],
         displayName: 'Org Unit 2'
       }, {
         id: 'A0000000002',
         path: '/A0000000000/A0000000002',
-        children: [],
         displayName: 'Org Unit 3'
       }, {
         id: 'A0000000006',
         path: '/A0000000000/A0000000006',
-        children: [],
         displayName: 'Org Unit 7'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000001') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000001',
       path: '/A0000000000/A0000000001',
       displayName: 'Org Unit 2',
@@ -72,20 +92,22 @@ const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 5'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000002') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 3',
       id: 'A0000000002',
       path: '/A0000000000/A0000000002',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000003') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 4',
       id: 'A0000000003',
       path: '/A0000000000/A0000000001/A0000000003',
@@ -95,34 +117,37 @@ const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 8'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000004') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 5',
       id: 'A0000000004',
       path: '/A0000000000/A0000000001/A0000000004',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000006') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 7',
       id: 'A0000000006',
       path: '/A0000000000/A0000000006',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000007') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 8',
       id: 'A0000000007',
       path: '/A0000000000/A0000000001/A0000000003/A0000000007',
       children: []
-    };
+    });
   }
 
   return data;
@@ -131,9 +156,11 @@ const getOrganisationUnitData = id => {
 exports.getOrganisationUnitData = getOrganisationUnitData;
 const dataProviderData = {
   organisationUnits: (_, {
-    id
+    id,
+    params = {}
   }) => {
-    const data = getOrganisationUnitData(id);
+    console.log('id, params', id, params);
+    const data = getOrganisationUnitData(id, params);
 
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));

package/build/cjs/__e2e__/tree_api.stories.e2e.js

@@ -15,19 +15,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const customizedDataProviderData = {
   organisationUnits: (...args) => {
     const [, {
-      id
+      id,
+      params
     }] = args;
+    const {
+      fields
+    } = params;
 
     if (id === 'A0000000000') {
-      return _common.dataProviderData.organisationUnits(...args).then(data => ({ ...data,
-        children: data.children.slice(0, 1)
-      }));
+      return _common.dataProviderData.organisationUnits(...args).then(data => {
+        var _data$children;
+
+        return { ...data,
+          children: fields.includes('children::size') ? 1 : (_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.slice(0, 1)
+        };
+      });
     }
 
     if (id === 'A0000000001') {
       return _common.dataProviderData.organisationUnits(...args).then(data => ({ ...data,
         path: '/A0000000001',
-        children: []
+        children: fields.includes('children::size') ? 0 : []
       }));
     }
 

package/build/cjs/__stories__/development-stories.js

@@ -90,9 +90,7 @@ const DxWithRealBackend = () => /*#__PURE__*/_react.default.createElement("div",
 }, "Settings app / Access")), /*#__PURE__*/_react.default.createElement(_appRuntime.DataProvider, {
   baseUrl: "https://debug.dhis2.org/dev",
   apiVersion: ""
-}, /*#__PURE__*/_react.default.createElement(Wrapper //initiallyExpanded={['/ImspTQPwCqd/eIQbndfxQMb']}
-, {
-  suppressAlphabeticalSorting: true,
+}, /*#__PURE__*/_react.default.createElement(Wrapper, {
   roots: ['ImspTQPwCqd', 'O6uvpzGd5pu', 'fdc6uOvgoji']
 })));
 

package/build/cjs/__stories__/shared.js

@@ -36,11 +36,37 @@ const onChildrenLoaded = (...args) => log && console.log('onChildrenLoaded', ...
 
 exports.onChildrenLoaded = onChildrenLoaded;
 
-const getOrganisationUnitData = id => {
+const createResponse = ({
+  fields,
+  id,
+  path,
+  displayName,
+  children
+}) => ({ ...(fields.includes('id') ? {
+    id
+  } : {}),
+  ...(fields.includes('path') ? {
+    path
+  } : {}),
+  ...(fields.includes('displayName') ? {
+    displayName
+  } : {}),
+  ...(fields.includes('children::size') ? {
+    children: children.length
+  } : {}),
+  ...(fields.includes('children[id,path,displayName]') ? {
+    children
+  } : {})
+});
+
+const getOrganisationUnitData = (id, {
+  fields
+}) => {
   let data;
 
   if (id === 'A0000000000') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000000',
       path: '/A0000000000',
       displayName: 'Org Unit 1',
@@ -64,11 +90,12 @@ const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 7'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000001') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000001',
       path: '/A0000000000/A0000000001',
       displayName: 'Org Unit 2',
@@ -83,20 +110,22 @@ const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 5'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000002') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 3',
       id: 'A0000000002',
       path: '/A0000000000/A0000000002',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000003') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 4',
       id: 'A0000000003',
       path: '/A0000000000/A0000000001/A0000000003',
@@ -106,34 +135,37 @@ const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 8'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000004') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 5',
       id: 'A0000000004',
       path: '/A0000000000/A0000000001/A0000000004',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000006') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 7',
       id: 'A0000000006',
       path: '/A0000000000/A0000000006',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000007') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 8',
       id: 'A0000000007',
       path: '/A0000000000/A0000000001/A0000000003/A0000000007',
       children: []
-    };
+    });
   }
 
   return data;
@@ -142,9 +174,10 @@ const getOrganisationUnitData = id => {
 exports.getOrganisationUnitData = getOrganisationUnitData;
 const customData = {
   organisationUnits: (_, {
-    id
+    id,
+    params = {}
   }) => {
-    const data = getOrganisationUnitData(id);
+    const data = getOrganisationUnitData(id, params);
 
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));

package/build/cjs/features/controlled_expanded/index.js

@@ -5,7 +5,9 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 var _common = require("../../__e2e__/common.js");
 
 const expectOrgUnitsToBeDisplayed = ids => {
-  const expandedLabels = ids.map(id => (0, _common.getOrganisationUnitData)(id).displayName);
+  const expandedLabels = ids.map(id => (0, _common.getOrganisationUnitData)(id, {
+    fields: ['displayName']
+  }).displayName);
   expandedLabels.forEach(label => {
     cy.get(`:contains("${label}")`).should('exist');
   });
@@ -13,7 +15,9 @@ const expectOrgUnitsToBeDisplayed = ids => {
 
 const expectOrgUnitsToNotBeDisplayed = ids => {
   const expandedLabels = ids.map(id => {
-    const data = (0, _common.getOrganisationUnitData)(id);
+    const data = (0, _common.getOrganisationUnitData)(id, {
+      fields: ['displayName']
+    });
     return data.displayName;
   });
   expandedLabels.forEach(label => {
@@ -49,7 +53,9 @@ const expectOrgUnitsToNotBeDisplayed = ids => {
   cy.get('@providedPaths').then(providedPaths => {
     const providedIds = providedPaths.map(path => path.match(/[^/]+$/)[0]);
     const hiddenChildrenIds = providedIds.reduce((acc, cur) => {
-      const curData = (0, _common.getOrganisationUnitData)(cur);
+      const curData = (0, _common.getOrganisationUnitData)(cur, {
+        fields: ['children[id,path,displayName]']
+      });
       const childrenIds = curData.children.map(({
         id
       }) => id);

package/build/cjs/features/tree_api/index.js

@@ -97,9 +97,10 @@ const expectStubPayloadToEqual = (stub, prop, expected) => {
 (0, _steps.Then)("the payload contains the loaded children's data", () => {
   cy.window().should(win => {
     const calls = win.onChildrenLoaded.getCalls();
-    const {
+    expect(calls).to.have.length(1);
+    const [{
       args
-    } = calls[calls.length - 1];
-    expect(args[0].id).to.equal('A0000000001');
+    }] = calls;
+    expect(args[0].id).to.equal('A0000000000');
   });
 });

package/build/cjs/helpers/sort-node-children-alphabetically.js

@@ -5,22 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sortNodeChildrenAlphabetically = void 0;
 
-const sortNodeChildrenAlphabetically = node => {
-  if (!node.children) {
-    return node;
-  }
-
-  const sortedChildren = [...node.children];
-  sortedChildren.sort((left, right) => {
-    if (left.displayName === right.displayName) {
-      return 0;
-    }
-
-    return left.displayName.localeCompare(right.displayName);
-  });
-  return { ...node,
-    children: sortedChildren
-  };
-};
+// sort mutates the original
+const sortNodeChildrenAlphabetically = children => [...children].sort((left, right) => left.displayName.localeCompare(right.displayName));
 
 exports.sortNodeChildrenAlphabetically = sortNodeChildrenAlphabetically;

package/build/cjs/locales/en/translations.json

@@ -1,4 +1,5 @@
 {
-    "Could not load children": "",
-    "Error: {{ ERRORMESSAGE }}": ""
+    "No children match filter": "No children match filter",
+    "Could not load children": "Could not load children",
+    "Error: {{ ERRORMESSAGE }}": "Error: {{ ERRORMESSAGE }}"
 }

package/build/cjs/organisation-unit-node/label/label.js

@@ -86,7 +86,7 @@ const Label = ({
       singleSelection,
       rootId
     }); // @TODO: It'd make more sense to pass the node as an object
-    // isntead of spread it. But that'd be a breaking change
+    // instead of spread it. But that'd be a breaking change
 
     const payload = { ...node,
       path: fullPath,
@@ -141,10 +141,7 @@ Label.propTypes = {
   node: _propTypes.default.shape({
     displayName: _propTypes.default.string.isRequired,
     id: _propTypes.default.string.isRequired,
-    children: _propTypes.default.arrayOf(_propTypes.default.shape({
-      displayName: _propTypes.default.string.isRequired,
-      id: _propTypes.default.string.isRequired
-    })),
+    children: _propTypes.default.number,
     path: _propTypes.default.string
   }).isRequired,
   open: _propTypes.default.bool.isRequired,

package/build/cjs/organisation-unit-node/loading-spinner.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingSpinner = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _loader = require("@dhis2-ui/loader");
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const loadingSpinnerStyles = {
+  styles: /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "358163430"
+  }, [".extrasmall.jsx-358163430{display:block;margin:3px 0;}"]),
+  className: "jsx-358163430"
+};
+
+const LoadingSpinner = () => /*#__PURE__*/_react.default.createElement("div", {
+  className: "jsx-2503342345"
+}, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
+  extrasmall: true,
+  className: loadingSpinnerStyles.className
+}), /*#__PURE__*/_react.default.createElement("style", null, loadingSpinnerStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2503342345"
+}, ["div.jsx-2503342345{width:24px;}"]));
+
+exports.LoadingSpinner = LoadingSpinner;

package/build/cjs/organisation-unit-node/organisation-unit-node-children.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OrganisationUnitNodeChildren = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../helpers/index.js");
+
+var _index2 = _interopRequireDefault(require("../locales/index.js"));
+
+var _propTypes2 = require("../prop-types.js");
+
+var _loadingSpinner = require("./loading-spinner.js");
+
+var _useOrgChildren = require("./use-org-children.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const getFilteredChildren = ({
+  orgChildren,
+  filter,
+  node
+}) => {
+  if (!(filter !== null && filter !== void 0 && filter.length)) {
+    return orgChildren;
+  }
+
+  return orgChildren.filter(child => {
+    return (0, _index.isPathIncluded)(filter, `${node.path}/${child.id}`);
+  });
+};
+
+const OrganisationUnitNodeChildren = ({
+  node,
+  autoExpandLoadingError,
+  dataTest,
+  disableSelection,
+  expanded,
+  filter,
+  highlighted,
+  isUserDataViewFallback,
+  onChange,
+  onChildrenLoaded,
+  onCollapse,
+  onExpand,
+  parentPath,
+  renderNodeLabel,
+  rootId,
+  selected,
+  singleSelection,
+  suppressAlphabeticalSorting,
+  OrganisationUnitNode
+}) => {
+  const orgChildren = (0, _useOrgChildren.useOrgChildren)({
+    node,
+    isUserDataViewFallback,
+    suppressAlphabeticalSorting,
+    onComplete: onChildrenLoaded
+  });
+  const displayChildren = orgChildren.called && !orgChildren.loading && !orgChildren.error;
+  const filteredChildren = displayChildren ? getFilteredChildren({
+    orgChildren: orgChildren.data,
+    filter,
+    node
+  }) : [];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, orgChildren.loading && /*#__PURE__*/_react.default.createElement(_loadingSpinner.LoadingSpinner, null), orgChildren.error && `Error: ${orgChildren.error}`, displayChildren && !filteredChildren.length && _index2.default.t('No children match filter'), !!filteredChildren.length && filteredChildren.map(child => {
+    const childPath = `${parentPath}/${child.id}`;
+    return /*#__PURE__*/_react.default.createElement(OrganisationUnitNode, {
+      autoExpandLoadingError: autoExpandLoadingError,
+      dataTest: dataTest,
+      disableSelection: disableSelection,
+      displayName: child.displayName,
+      expanded: expanded,
+      filter: filter,
+      highlighted: highlighted,
+      id: child.id,
+      isUserDataViewFallback: isUserDataViewFallback,
+      key: childPath,
+      onChange: onChange,
+      onChildrenLoaded: onChildrenLoaded,
+      onCollapse: onCollapse,
+      onExpand: onExpand,
+      path: childPath,
+      renderNodeLabel: renderNodeLabel,
+      rootId: rootId,
+      selected: selected,
+      singleSelection: singleSelection,
+      suppressAlphabeticalSorting: suppressAlphabeticalSorting
+    });
+  }));
+};
+
+exports.OrganisationUnitNodeChildren = OrganisationUnitNodeChildren;
+OrganisationUnitNodeChildren.propTypes = {
+  // Prevent cirular imports
+  OrganisationUnitNode: _propTypes.default.func.isRequired,
+  dataTest: _propTypes.default.string.isRequired,
+  node: _propTypes.default.object.isRequired,
+  parentPath: _propTypes.default.string.isRequired,
+  renderNodeLabel: _propTypes.default.func.isRequired,
+  rootId: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  autoExpandLoadingError: _propTypes.default.bool,
+  disableSelection: _propTypes.default.bool,
+  expanded: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  filter: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  highlighted: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  isUserDataViewFallback: _propTypes.default.bool,
+  selected: _propTypes.default.arrayOf(_propTypes2.orgUnitPathPropType),
+  singleSelection: _propTypes.default.bool,
+  suppressAlphabeticalSorting: _propTypes.default.bool,
+  onChildrenLoaded: _propTypes.default.func,
+  onCollapse: _propTypes.default.func,
+  onExpand: _propTypes.default.func
+};