diff --git a/components/organisation-unit-tree/src/__stories__/custom-node-label.js b/components/organisation-unit-tree/src/__stories__/custom-node-label.js index b5d3680d64..f11afcc933 100644 --- a/components/organisation-unit-tree/src/__stories__/custom-node-label.js +++ b/components/organisation-unit-tree/src/__stories__/custom-node-label.js @@ -6,15 +6,14 @@ export const CustomNodeLabel = () => ( name="Root org unit" roots="A0000000000" initiallyExpanded={['/A0000000000/A0000000001']} - renderNodeLabel={data => { - if (data.node.path !== '/A0000000000/A0000000001') { - return OrganisationUnitTree.defaultProps.renderNodeLabel(data) + renderNodeLabel={({ node, loading }) => { + const { displayName } = node + + if (loading) { + return `${displayName} (loading)` } - return OrganisationUnitTree.defaultProps.renderNodeLabel({ - ...data, - label: --- {data.node.displayName}, - }) + return --- {displayName} }} /> ) diff --git a/components/organisation-unit-tree/src/__stories__/custom-requests.js b/components/organisation-unit-tree/src/__stories__/custom-requests.js index a9a55fdbfe..2059c7d280 100644 --- a/components/organisation-unit-tree/src/__stories__/custom-requests.js +++ b/components/organisation-unit-tree/src/__stories__/custom-requests.js @@ -63,30 +63,22 @@ export const CustomRequests = () => { name="Root org unit" roots={['A0000000000']} initiallyExpanded={['/A0000000000/A0000000001/A0000000003']} - renderNodeLabel={data => { - if (data.loading) { - return OrganisationUnitTreeControllable.defaultProps.renderNodeLabel( - data - ) + renderNodeLabel={({ loading, node, additional }) => { + const { displayName } = node + + if (loading) { + return displayName } - const { approvalStatuses } = data.additional + const { approvalStatuses } = additional const [approvalStatus] = approvalStatuses const { permissions } = approvalStatus const { mayApprove } = permissions - const formatted = { - ...data, - label: ( - - {data.node.displayName} (mayApprove:{' '} - {mayApprove.toString()}) - - ), - } - - return OrganisationUnitTreeControllable.defaultProps.renderNodeLabel( - formatted + return ( + + {displayName} (mayApprove: {mayApprove.toString()}) + ) }} /> diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/disabled-selection-label.js b/components/organisation-unit-tree/src/organisation-unit-node/label/disabled-selection-label.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/disabled-selection-label.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/disabled-selection-label.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-empty.js b/components/organisation-unit-tree/src/organisation-unit-node/label/icon-empty.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-empty.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/icon-empty.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-folder-closed.js b/components/organisation-unit-tree/src/organisation-unit-node/label/icon-folder-closed.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-folder-closed.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/icon-folder-closed.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-folder-open.js b/components/organisation-unit-tree/src/organisation-unit-node/label/icon-folder-open.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-folder-open.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/icon-folder-open.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-single.js b/components/organisation-unit-tree/src/organisation-unit-node/label/icon-single.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon-single.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/icon-single.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon.js b/components/organisation-unit-tree/src/organisation-unit-node/label/icon.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/icon.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/icon.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/iconized-checkbox.js b/components/organisation-unit-tree/src/organisation-unit-node/label/iconized-checkbox.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/iconized-checkbox.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/iconized-checkbox.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/index.js b/components/organisation-unit-tree/src/organisation-unit-node/label/index.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/index.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/index.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label-container.js b/components/organisation-unit-tree/src/organisation-unit-node/label/label-container.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label-container.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/label-container.js diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js b/components/organisation-unit-tree/src/organisation-unit-node/label/label.js similarity index 98% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/label.js index 06fed84bbf..aa50cfc697 100644 --- a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js +++ b/components/organisation-unit-tree/src/organisation-unit-node/label/label.js @@ -1,6 +1,6 @@ import propTypes from 'prop-types' import React from 'react' -import { orgUnitPathPropType } from '../../../prop-types.js' +import { orgUnitPathPropType } from '../../prop-types.js' import { DisabledSelectionLabel } from './disabled-selection-label.js' import { IconizedCheckbox } from './iconized-checkbox.js' import { LabelContainer } from './label-container.js' diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/single-selection-label.js b/components/organisation-unit-tree/src/organisation-unit-node/label/single-selection-label.js similarity index 100% rename from components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/single-selection-label.js rename to components/organisation-unit-tree/src/organisation-unit-node/label/single-selection-label.js diff --git a/components/organisation-unit-tree/src/organisation-unit-node/organisation-unit-node.js b/components/organisation-unit-tree/src/organisation-unit-node/organisation-unit-node.js index a139a65c82..ddee172624 100644 --- a/components/organisation-unit-tree/src/organisation-unit-node/organisation-unit-node.js +++ b/components/organisation-unit-tree/src/organisation-unit-node/organisation-unit-node.js @@ -9,6 +9,7 @@ import { orgUnitPathPropType } from '../prop-types.js' import { computeChildNodes } from './compute-child-nodes.js' import { ErrorMessage } from './error-message.js' import { hasDescendantSelectedPaths } from './has-descendant-selected-paths.js' +import { Label } from './label/index.js' import { useOpenState } from './use-open-state.js' const loadingSpinnerStyles = resolve` @@ -90,26 +91,43 @@ export const OrganisationUnitNode = ({ const isSelected = selected.includes(path) - const label = renderNodeLabel({ + const labelContent = renderNodeLabel({ additional, disableSelection, hasChildren, hasSelectedDescendants, loading, error, - onChange, selected, - onToggleOpen, open, path, singleSelection, node: organisationUnit, label: organisationUnit.displayName, checked: isSelected, - dataTest: `${dataTest}-label`, highlighted: isHighlighted, }) + const label = ( + + ) + /** * No children means no arrow, therefore we have to provide something. * While "loading" is true, "hasChildren" is false diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js b/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js index c51f783b96..e2df1e8022 100644 --- a/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js +++ b/components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js @@ -1,37 +1 @@ -import React from 'react' -import { Label } from './label/index.js' - -export const defaultRenderNodeLabel = ({ - node, - dataTest = `${dataTest}-label`, - disableSelection, - hasChildren, - hasSelectedDescendants, - highlighted, - checked, - label, - loading, - onChange, - onToggleOpen, - open, - selected, - singleSelection, -}) => ( - -) +export const defaultRenderNodeLabel = ({ label }) => label diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js index 88d374a909..89969f7810 100644 --- a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js +++ b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js @@ -174,22 +174,16 @@ OrganisationUnitTree.propTypes = { /** When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units */ isUserDataViewFallback: propTypes.bool, - /** Renders the actual node component for each leaf, can be used to - * customize the node. In order to change the displayed node while keeping - * the existing functionality intact, you can re-use the original prop - * and overwrite the label property. + /** Renders the actual node label content for each leaf, can be used to + * customize the node. The default function just returns the node's + * displayName * * @example - * renderNodeLabel={data => { - * return OrganisationUnitTree.defaultProps.renderNodeLabel({ - * ...data, - * label: ( - * - * {data.node.displayName} - * - * ), - * }) - * }} + * renderNodeLabel={data => ( + * + * {data.node.displayName.toUpperCase()} + * + * )} * * @param {Object} data * @param {Object} data.node @@ -197,7 +191,6 @@ OrganisationUnitTree.propTypes = { * @param {string} data.node.id * @param {string} [data.node.path] Only provided once `loading` is false * @param {Object} [data.node.children] Only provided once `loading` is false - * @param {string} data.dataTest * @param {string} [data.error] * @param {string[]} data.selected * @param {boolean} data.disableSelection @@ -208,8 +201,9 @@ OrganisationUnitTree.propTypes = { * @param {boolean} data.loading * @param {boolean} data.open * @param {boolean} data.singleSelection - * @param {Function} data.onChange - * @param {Function} data.onToggleOpen + * @param {Object} data.additional + * If the request is being customized, then all responses except the org + * unit's response data will be included in this object */ renderNodeLabel: propTypes.func,