refactor(org unit tree): use "label" instead of "node.displayName" fo…

…r label
dhis2 · Aug 3, 2021 · d3aa503 · d3aa503
1 parent 399375e
commit d3aa503
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 29 deletions.
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
@@ -86,6 +86,7 @@ export const OrganisationUnitNode = ({
         path,
         singleSelection,
         node: data,
+        label: data.displayName,
         checked: isSelected,
         dataTest: `${dataTest}-label`,
         highlighted: isHighlighted,

diff --git a/...it-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js b/...it-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js
@@ -9,6 +9,7 @@ export const defaultRenderNodeLabel = ({
     hasSelectedDescendants,
     highlighted,
     checked,
+    label,
     loading,
     onChange,
     onToggleOpen,
@@ -17,20 +18,20 @@ export const defaultRenderNodeLabel = ({
     singleSelection,
 }) => (
     <Label
+        node={node}
         checked={checked}
         dataTest={dataTest}
         disableSelection={disableSelection}
-        displayName={node.displayName}
         hasChildren={hasChildren}
         hasSelectedDescendants={hasSelectedDescendants}
         highlighted={highlighted}
-        id={node.id}
         loading={loading}
         onChange={onChange}
         selected={selected}
         onToggleOpen={onToggleOpen}
         open={open}
-        path={node.path}
         singleSelection={singleSelection}
-    />
+    >
+        {label}
+    </Label>
 )
diff --git a/...ee/src/organisation-unit-tree/default-render-node-label/label/disabled-selection-label.js b/...ee/src/organisation-unit-tree/default-render-node-label/label/disabled-selection-label.js
@@ -9,17 +9,18 @@ import { SingleSelectionLabel } from './single-selection-label.js'
  * @param {bool} [props.loading]
  * @returns {React.Component}
  */
-export const DisabledSelectionLabel = ({ label, loading, onToggleOpen }) => (
+export const DisabledSelectionLabel = ({ children, loading, onToggleOpen }) => (
     <SingleSelectionLabel
         checked={false}
         loading={loading}
-        label={label}
         onChange={onToggleOpen}
-    />
+    >
+        {children}
+    </SingleSelectionLabel>
 )
 
 DisabledSelectionLabel.propTypes = {
-    label: propTypes.string.isRequired,
+    children: propTypes.any.isRequired,
     onToggleOpen: propTypes.func.isRequired,
     loading: propTypes.bool,
 }
diff --git a/...unit-tree/src/organisation-unit-tree/default-render-node-label/label/iconized-checkbox.js b/...unit-tree/src/organisation-unit-tree/default-render-node-label/label/iconized-checkbox.js
@@ -8,7 +8,7 @@ export const IconizedCheckbox = ({
     dataTest,
     hasChildren,
     indeterminate,
-    label,
+    children,
     loading,
     name,
     open,
@@ -27,7 +27,7 @@ export const IconizedCheckbox = ({
     const checkboxLabel = (
         <>
             <span>{icon}</span>
-            {label}
+            {children}
 
             <style jsx>{`
                 span {
@@ -55,10 +55,10 @@ export const IconizedCheckbox = ({
 
 IconizedCheckbox.propTypes = {
     checked: propTypes.bool.isRequired,
+    children: propTypes.any.isRequired,
     dataTest: propTypes.string.isRequired,
     hasChildren: propTypes.bool.isRequired,
     indeterminate: propTypes.bool.isRequired,
-    label: propTypes.any.isRequired,
     loading: propTypes.bool.isRequired,
     name: propTypes.string.isRequired,
     open: propTypes.bool.isRequired,

diff --git a/...rganisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js b/...rganisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js
@@ -22,8 +22,8 @@ const createNewSelected = ({ selected, path, checked, singleSelection }) => {
 }
 
 const Label = ({
-    id,
-    path,
+    children,
+    node,
     open,
     loading,
     checked,
@@ -32,22 +32,27 @@ const Label = ({
     selected,
     hasChildren,
     highlighted,
-    displayName,
     onToggleOpen,
     disableSelection,
     singleSelection,
     hasSelectedDescendants,
 }) => {
     const onClick = ({ checked }, event) => {
         const newSelected = createNewSelected({
+            path: node.path,
             selected,
-            path,
             checked,
             singleSelection,
         })
 
         onChange(
-            { id, path, checked, displayName, selected: newSelected },
+            {
+                // @TODO: It'd make more sense to pass the node as an object
+                // isntead of spread it. But that'd be a breaking change
+                ...node,
+                checked,
+                selected: newSelected,
+            },
             event
         )
     }
@@ -56,10 +61,11 @@ const Label = ({
         return (
             <LabelContainer highlighted={highlighted}>
                 <DisabledSelectionLabel
-                    label={displayName}
                     loading={loading}
                     onToggleOpen={onToggleOpen}
-                />
+                >
+                    {children}
+                </DisabledSelectionLabel>
             </LabelContainer>
         )
     }
@@ -69,10 +75,11 @@ const Label = ({
             <LabelContainer highlighted={highlighted}>
                 <SingleSelectionLabel
                     checked={checked}
-                    label={displayName}
                     onChange={onClick}
                     loading={loading}
-                />
+                >
+                    {children}
+                </SingleSelectionLabel>
             </LabelContainer>
         )
     }
@@ -83,27 +90,37 @@ const Label = ({
                 dataTest={dataTest}
                 checked={checked}
                 name="org-unit"
-                value={id}
-                label={displayName}
+                value={node.id}
                 loading={loading}
                 indeterminate={!checked && hasSelectedDescendants}
                 onChange={onClick}
                 open={open}
                 hasChildren={hasChildren}
-            />
+            >
+                {children}
+            </IconizedCheckbox>
         </LabelContainer>
     )
 }
 
 Label.propTypes = {
+    children: propTypes.any.isRequired,
     dataTest: propTypes.string.isRequired,
     // This is `any` so it can be customized by the app
-    displayName: propTypes.any.isRequired,
     hasChildren: propTypes.bool.isRequired,
-    id: propTypes.string.isRequired,
     loading: propTypes.bool.isRequired,
+    node: propTypes.shape({
+        displayName: propTypes.string.isRequired,
+        id: propTypes.string.isRequired,
+        children: propTypes.arrayOf(
+            propTypes.shape({
+                displayName: propTypes.string.isRequired,
+                id: propTypes.string.isRequired,
+            })
+        ),
+        path: propTypes.string,
+    }).isRequired,
     open: propTypes.bool.isRequired,
-    path: propTypes.string.isRequired,
     onChange: propTypes.func.isRequired,
     onToggleOpen: propTypes.func.isRequired,
     checked: propTypes.bool,

diff --git a/...tree/src/organisation-unit-tree/default-render-node-label/label/single-selection-label.js b/...tree/src/organisation-unit-tree/default-render-node-label/label/single-selection-label.js
@@ -11,15 +11,15 @@ import React from 'react'
  * @param {Function} [props.onChange]
  * @returns {React.Component}
  */
-export const SingleSelectionLabel = ({ checked, label, onChange, loading }) => (
+export const SingleSelectionLabel = ({ checked, children, onChange, loading }) => (
     <span
         onClick={event => {
             const payload = { checked: !checked }
             onChange(payload, event)
         }}
         className={cx({ checked, loading })}
     >
-        {label}
+        {children}
 
         <style jsx>{`
             span {
@@ -48,7 +48,7 @@ export const SingleSelectionLabel = ({ checked, label, onChange, loading }) => (
 )
 
 SingleSelectionLabel.propTypes = {
-    label: propTypes.string.isRequired,
+    children: propTypes.any.isRequired,
     checked: propTypes.bool,
     loading: propTypes.bool,
     onChange: propTypes.func,