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

package/build/cjs/__e2e__/common.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StatefulMultiSelectionWrapper = exports.dataProviderData = exports.delayResponse = exports.namespace = void 0;
+exports.createDecoratorCustomDataProvider = exports.createDecoratorStatefulMultiSelection = exports.StatefulMultiSelectionWrapper = exports.dataProviderData = exports.getOrganisationUnitData = exports.delayResponse = exports.namespace = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,131 +17,171 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/* eslint-disable react/display-name */
 const namespace = 'OrganisationUnitTree';
 exports.namespace = namespace;
 
 const delayResponse = (delay, response) => () => new Promise(resolve => setTimeout(() => resolve(response), delay));
 
 exports.delayResponse = delayResponse;
-const dataProviderData = {
-  organisationUnits: (type, {
-    id
-  }) => {
-    if (id === 'A0000000000') {
-      return {
-        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') {
-      return {
+const getOrganisationUnitData = id => {
+  let data;
+
+  if (id === 'A0000000000') {
+    data = {
+      id: 'A0000000000',
+      path: '/A0000000000',
+      displayName: 'Org Unit 1',
+      children: [{
         id: 'A0000000001',
         path: '/A0000000000/A0000000001',
-        displayName: 'Org Unit 2',
         children: [{
-          id: 'A0000000003',
-          path: '/A0000000000/A0000000001/A0000000003',
-          children: [],
-          displayName: 'Org Unit 4'
+          id: 'A0000000003'
         }, {
-          id: 'A0000000004',
-          path: '/A0000000000/A0000000001/A0000000004',
-          children: [],
-          displayName: 'Org Unit 5'
-        }]
-      };
-    }
-
-    if (id === 'A0000000002') {
-      return {
-        displayName: 'Org Unit 3',
+          id: 'A0000000004'
+        }],
+        displayName: 'Org Unit 2'
+      }, {
         id: 'A0000000002',
         path: '/A0000000000/A0000000002',
-        children: []
-      };
-    }
+        children: [],
+        displayName: 'Org Unit 3'
+      }, {
+        id: 'A0000000006',
+        path: '/A0000000000/A0000000006',
+        children: [],
+        displayName: 'Org Unit 7'
+      }]
+    };
+  }
 
-    if (id === 'A0000000003') {
-      return {
-        displayName: 'Org Unit 4',
+  if (id === 'A0000000001') {
+    data = {
+      id: 'A0000000001',
+      path: '/A0000000000/A0000000001',
+      displayName: 'Org Unit 2',
+      children: [{
         id: 'A0000000003',
         path: '/A0000000000/A0000000001/A0000000003',
-        children: []
-      };
-    }
-
-    if (id === 'A0000000004') {
-      return {
-        displayName: 'Org Unit 5',
+        children: [],
+        displayName: 'Org Unit 4'
+      }, {
         id: 'A0000000004',
         path: '/A0000000000/A0000000001/A0000000004',
-        children: []
-      };
-    }
+        children: [],
+        displayName: 'Org Unit 5'
+      }]
+    };
+  }
 
-    if (id === 'A0000000006') {
-      return {
-        displayName: 'Org Unit 7',
-        id: 'A0000000006',
-        path: '/A0000000000/A0000000006',
-        children: []
-      };
-    }
+  if (id === 'A0000000002') {
+    data = {
+      displayName: 'Org Unit 3',
+      id: 'A0000000002',
+      path: '/A0000000000/A0000000002',
+      children: []
+    };
+  }
+
+  if (id === 'A0000000003') {
+    data = {
+      displayName: 'Org Unit 4',
+      id: 'A0000000003',
+      path: '/A0000000000/A0000000001/A0000000003',
+      children: [{
+        id: 'A0000000007',
+        path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+        children: [],
+        displayName: 'Org Unit 8'
+      }]
+    };
+  }
+
+  if (id === 'A0000000004') {
+    data = {
+      displayName: 'Org Unit 5',
+      id: 'A0000000004',
+      path: '/A0000000000/A0000000001/A0000000004',
+      children: []
+    };
+  }
 
-    return Promise.reject(`No org unit with id "${id}"`);
+  if (id === 'A0000000006') {
+    data = {
+      displayName: 'Org Unit 7',
+      id: 'A0000000006',
+      path: '/A0000000000/A0000000006',
+      children: []
+    };
   }
+
+  if (id === 'A0000000007') {
+    data = {
+      displayName: 'Org Unit 8',
+      id: 'A0000000007',
+      path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+      children: []
+    };
+  }
+
+  return data;
 };
-exports.dataProviderData = dataProviderData;
 
-const onChange = (selected, setSelected) => ({
-  selected: newSelected
-}) => {
-  setSelected(newSelected);
-  return newSelected;
+exports.getOrganisationUnitData = getOrganisationUnitData;
+const dataProviderData = {
+  organisationUnits: (_, {
+    id
+  }) => {
+    const data = getOrganisationUnitData(id);
+
+    if (!data) {
+      return Promise.reject(new Error('404 - Org unit not found'));
+    }
+
+    return Promise.resolve(data);
+  }
 };
+exports.dataProviderData = dataProviderData;
 
 const StatefulMultiSelectionWrapper = ({
   children,
-  onSelectionChange
+  onSelectionChange = () => null
 }) => {
   const [selected, setSelected] = (0, _react.useState)([]);
-  const onChangeHandler = onChange(selected, setSelected, false);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
+  return children({
     selected,
-    onChange: (...args) => {
-      const newSelection = onChangeHandler(...args);
-
-      if (onSelectionChange) {
-        onSelectionChange(newSelection);
-      }
+    onChange: ({
+      selected: newSelected
+    }) => {
+      setSelected(newSelected);
+      onSelectionChange(newSelected);
     }
-  }));
+  });
 };
 
 exports.StatefulMultiSelectionWrapper = StatefulMultiSelectionWrapper;
 StatefulMultiSelectionWrapper.propTypes = {
   children: _propTypes.default.func.isRequired,
   onSelectionChange: _propTypes.default.func
-};
+};
+
+const createDecoratorStatefulMultiSelection = args => {
+  return fn => /*#__PURE__*/_react.default.createElement(StatefulMultiSelectionWrapper, {
+    onSelectionChange: args === null || args === void 0 ? void 0 : args.onSelectionChange
+  }, fn);
+};
+
+exports.createDecoratorStatefulMultiSelection = createDecoratorStatefulMultiSelection;
+
+const createDecoratorCustomDataProvider = args => {
+  const data = (args === null || args === void 0 ? void 0 : args.data) || dataProviderData;
+  return fn => {
+    window.dataProviderData = data;
+    return /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+      data: data
+    }, fn());
+  };
+};
+
+exports.createDecoratorCustomDataProvider = createDecoratorCustomDataProvider;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingProps = exports.Controlled = exports.default = void 0;
+
+var _button = require("@dhis2-ui/button");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../index.js");
+
+var _common = require("./common.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+window.initiallyExpandedPaths = ['/A0000000000/A0000000001'];
+window.orgUnitPathToExpand = '/A0000000000/A0000000001';
+var _default = {
+  title: _common.namespace,
+  decorators: [(0, _common.createDecoratorCustomDataProvider)()]
+};
+exports.default = _default;
+
+const Controlled = () => {
+  const initiallyExpanded = (0, _index.getAllExpandedOrgUnitPaths)(window.initiallyExpandedPaths);
+  const [expanded, setExpanded] = (0, _react.useState)(initiallyExpanded);
+
+  const handleExpand = ({
+    path
+  }) => {
+    if (!expanded.includes(path)) {
+      setExpanded([...expanded, path]);
+    }
+  };
+
+  const handleCollapse = ({
+    path
+  }) => {
+    const pathIndex = expanded.indexOf(path);
+
+    if (pathIndex !== -1) {
+      const updatedExpanded = pathIndex === 0 ? expanded.slice(1) : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
+      setExpanded(updatedExpanded);
+    }
+  };
+
+  const imperativeToggle = () => {
+    if (!expanded.includes('/A0000000000/A0000000001')) {
+      // Make sure that all required sub paths are included as well
+      const nextPaths = (0, _index.getAllExpandedOrgUnitPaths)([...expanded, window.orgUnitPathToExpand]);
+      return setExpanded(nextPaths);
+    }
+
+    setExpanded(expanded.filter(v => v !== '/A0000000000/A0000000001'));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+    onChange: () => null,
+    name: "Root org unit",
+    roots: ['A0000000000'],
+    expanded: expanded,
+    handleExpand: handleExpand,
+    handleCollapse: handleCollapse
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    dataTest: "org-unit-toggle",
+    onClick: imperativeToggle
+  }, "Toggle Org Unit 2"));
+};
+
+exports.Controlled = Controlled;
+
+const MissingProps = () => {
+  const expanded = [];
+
+  const handleExpand = () => null;
+
+  return /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+    onChange: () => null,
+    name: "Root org unit",
+    roots: ['A0000000000'],
+    expanded: expanded,
+    handleExpand: handleExpand
+  });
+};
+
+exports.MissingProps = MissingProps;

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

@@ -12,7 +12,6 @@ var _common = require("./common.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-window.dataProviderData = _common.dataProviderData;
 window.allUnits = [];
 
 for (let i = 0; i < 7; ++i) {

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

@@ -19,16 +19,16 @@ const data = {
     }] = args;
 
     if (id === 'A0000000000') {
-      return { ..._common.dataProviderData.organisationUnits(...args),
+      return _common.dataProviderData.organisationUnits(...args).then(response => ({ ...response,
         children: []
-      };
+      }));
     }
 
     if (id === 'A0000000001') {
-      return { ..._common.dataProviderData.organisationUnits(...args),
+      return _common.dataProviderData.organisationUnits(...args).then(response => ({ ...response,
         path: '/A0000000001',
         children: []
-      };
+      }));
     }
 
     return Promise.resolve({});

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

@@ -12,25 +12,23 @@ var _common = require("./common.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-window.dataProviderData = {
+const customizedDataProviderData = {
   organisationUnits: (...args) => {
     const [, {
       id
     }] = args;
 
     if (id === 'A0000000000') {
-      const data = _common.dataProviderData.organisationUnits(...args);
-
-      return { ...data,
+      return _common.dataProviderData.organisationUnits(...args).then(data => ({ ...data,
         children: data.children.slice(0, 1)
-      };
+      }));
     }
 
     if (id === 'A0000000001') {
-      return { ..._common.dataProviderData.organisationUnits(...args),
+      return _common.dataProviderData.organisationUnits(...args).then(data => ({ ...data,
         path: '/A0000000001',
         children: []
-      };
+      }));
     }
 
     return Promise.resolve({});
@@ -41,7 +39,7 @@ window.onCollapse = window.Cypress && window.Cypress.cy.stub();
 window.onExpand = window.Cypress && window.Cypress.cy.stub();
 window.onChildrenLoaded = window.Cypress && window.Cypress.cy.stub();
 (0, _react.storiesOf)(_common.namespace, module).add('Events', () => /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
-  data: window.dataProviderData
+  data: customizedDataProviderData
 }, /*#__PURE__*/_react2.default.createElement(_common.StatefulMultiSelectionWrapper, null, ({
   selected,
   onChange

package/build/cjs/__stories__/collapsed.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Collapsed = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index.js");
+
+var _shared = require("./shared.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Collapsed = () => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+  onChange: _shared.onChange,
+  name: 'Root org unit',
+  roots: ['A0000000000']
+});
+
+exports.Collapsed = Collapsed;

package/build/cjs/__stories__/custom-expanded-imperative-open.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomExpandedImperativeOpen = void 0;
+
+var _button = require("@dhis2-ui/button");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = require("../index.js");
+
+var _shared = require("./shared.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CustomExpandedImperativeOpen = () => {
+  const orgUnit2Path = '/A0000000000/A0000000001';
+  const initiallyExpanded = (0, _index.getAllExpandedOrgUnitPaths)([]);
+  const [expanded, setExpanded] = (0, _react.useState)(initiallyExpanded);
+
+  const handleExpand = ({
+    path
+  }) => {
+    if (!expanded.includes(path)) {
+      setExpanded([...expanded, path]);
+    }
+  };
+
+  const handleCollapse = ({
+    path
+  }) => {
+    const pathIndex = expanded.indexOf(path);
+
+    if (pathIndex !== -1) {
+      const updatedExpanded = pathIndex === 0 ? expanded.slice(1) : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];
+      setExpanded(updatedExpanded);
+    }
+  };
+
+  const imperativeToggle = () => {
+    if (!expanded.includes('/A0000000000/A0000000001')) {
+      // Make sure that all required sub paths are included as well
+      const nextPaths = (0, _index.getAllExpandedOrgUnitPaths)([...expanded, orgUnit2Path]);
+      return setExpanded(nextPaths);
+    }
+
+    setExpanded(expanded.filter(v => v !== '/A0000000000/A0000000001'));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+    onChange: _shared.onChange,
+    name: "Root org unit",
+    roots: ['A0000000000'],
+    expanded: expanded,
+    handleExpand: handleExpand,
+    handleCollapse: handleCollapse
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    onClick: imperativeToggle
+  }, "Toggle Org Unit 2"));
+}; // Do we need this story?
+// export const CustomExpandedKeepUserExpanded = () => {
+//     /**
+//      * @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[]}
+//      */
+//     const getInitiallyExpandedPaths = paths =>
+//         paths.reduce((all, curPath) => {
+//             const allPathsInCurPath = extractAllPathsFromPath(curPath)
+//             return [...all, ...allPathsInCurPath]
+//         }, [])
+//
+//     const [useOriginal, setUseOriginal] = useState(true)
+//     const initiallyExpanded = getInitiallyExpandedPaths(
+//         ['/A0000000000/A0000000001']
+//     )
+//     const alternativeInitiallyExpanded = getInitiallyExpandedPaths(
+//         ['/A0000000000']
+//     )
+//
+//     const [expandedConfig, setExpandedConfig] = useState(
+//         () => initiallyExpanded.map(path => ({
+//             userExpanded: false,
+//             path,
+//         }))
+//     )
+//
+//     const expanded = useMemo(
+//         () => expandedConfig.map(({ path }) => path),
+//         [expandedConfig]
+//     )
+//
+//     const switchAutomaticallyExpended = () => {
+//         // Necessary due to the nature of the async state setter of the hook
+//         const nextUseOriginal = !useOriginal
+//         const allUserExpandedPaths = getInitiallyExpandedPaths(
+//             expandedConfig
+//                 .filter(({ userExpanded }) => userExpanded)
+//                 .map(({ path }) => path)
+//         )
+//
+//         const allUserExpanded = allUserExpandedPaths.map(path => ({
+//             userExpanded: true,
+//             path,
+//         }))
+//
+//         const actualInitiallyExpended = nextUseOriginal ? initiallyExpanded : alternativeInitiallyExpanded
+//         const missingInitiallyExpanded = actualInitiallyExpended.filter(path => {
+//             return !allUserExpandedPaths.find(curPath => curPath.includes(path))
+//         })
+//
+//         const nextExpandedConfig = [
+//             ...allUserExpanded,
+//             ...missingInitiallyExpanded.map(path => ({
+//                 userExpanded: false,
+//                 path,
+//             }))
+//         ]
+//
+//         setExpandedConfig(nextExpandedConfig)
+//         setUseOriginal(nextUseOriginal)
+//     }
+//
+//     const handleExpand = ({ path }) => {
+//         if (!expandedConfig.find(config => config.path === path)) {
+//             setExpandedConfig([...expandedConfig, { userExpanded: true, path }])
+//         }
+//     }
+//
+//     const handleCollapse = ({ path }) => {
+//         const pathIndex = expandedConfig.findIndex(config => config.path === path)
+//
+//         if (pathIndex !== -1) {
+//             const updatedExpandedConfig =
+//                 pathIndex === 0
+//                     ? expandedConfig.slice(1)
+//                     : [
+//                           ...expandedConfig.slice(0, pathIndex),
+//                           ...expandedConfig.slice(pathIndex + 1),
+//                       ]
+//
+//             setExpandedConfig(updatedExpandedConfig)
+//         }
+//     }
+//
+//     return (
+//         <>
+//             <OrganisationUnitTree
+//                 onChange={onChange}
+//                 name="Root org unit"
+//                 roots={['A0000000000']}
+//                 expanded={expanded}
+//                 handleExpand={handleExpand}
+//                 handleCollapse={handleCollapse}
+//             />
+//             <br />
+//             <Button onClick={switchAutomaticallyExpended}>
+//                 Switch automatically expanded
+//             </Button>
+//         </>
+//     )
+// }
+
+
+exports.CustomExpandedImperativeOpen = CustomExpandedImperativeOpen;

package/build/cjs/__stories__/custom-node-label.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomNodeLabel = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../index.js");
+
+var _shared = require("./shared.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CustomNodeLabel = () => /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitTree, {
+  name: "Root org unit",
+  roots: "A0000000000",
+  initiallyExpanded: ['/A0000000000/A0000000001'],
+  renderNodeLabel: ({
+    label,
+    node
+  }) => {
+    if (node.path !== '/A0000000000/A0000000001') {
+      return label;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("span", null, "--- ", label);
+  },
+  onChange: _shared.onChange
+});
+
+exports.CustomNodeLabel = CustomNodeLabel;