From f9a1042fb495effa3444792fc1db9f0b43f73bbb Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 10 Jul 2020 12:06:31 +0200
Subject: [PATCH] fix: add prop rightHeader to Transfer

---
 packages/widgets/src/Transfer/RightHeader.js  | 25 +++++++++++++++++++
 packages/widgets/src/Transfer/Transfer.js     |  9 +++++++
 .../widgets/src/Transfer/Transfer.stories.js  |  9 +++++++
 3 files changed, 43 insertions(+)
 create mode 100644 packages/widgets/src/Transfer/RightHeader.js

diff --git a/packages/widgets/src/Transfer/RightHeader.js b/packages/widgets/src/Transfer/RightHeader.js
new file mode 100644
index 0000000000..86d92e0ee5
--- /dev/null
+++ b/packages/widgets/src/Transfer/RightHeader.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import propTypes from '@dhis2/prop-types'
+
+import { spacers } from '@dhis2/ui-constants'
+
+import { borderColor } from './common/index.js'
+
+export const RightHeader = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                border-bottom: 1px solid ${borderColor};
+                flex-grow: 0;
+                padding: 0 ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+RightHeader.propTypes = {
+    children: propTypes.node,
+    dataTest: propTypes.string,
+}
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
index 984dc4ebca..577d350a72 100644
--- a/packages/widgets/src/Transfer/Transfer.js
+++ b/packages/widgets/src/Transfer/Transfer.js
@@ -13,6 +13,7 @@ import { PickedOptions } from './PickedOptions.js'
 import { RemoveAll } from './RemoveAll.js'
 import { RemoveIndividual } from './RemoveIndividual.js'
 import { ReorderingActions } from './ReorderingActions.js'
+import { RightHeader } from './RightHeader.js'
 import { RightFooter } from './RightFooter.js'
 import { RightSide } from './RightSide.js'
 import { SourceOptions } from './SourceOptions.js'
@@ -87,6 +88,7 @@ export const Transfer = ({
     maxSelections,
     optionsWidth,
     renderOption,
+    rightHeader,
     rightFooter,
     searchTerm,
     selected,
@@ -295,6 +297,11 @@ export const Transfer = ({
             </Actions>
 
             <RightSide dataTest={`${dataTest}-rightside`} width={selectedWidth}>
+                {rightHeader && (
+                    <RightHeader dataTest={`${dataTest}-rightheader`}>
+                        {rightHeader}
+                    </RightHeader>
+                )}
                 <PickedOptions
                     dataTest={`${dataTest}-pickedoptions`}
                     selectedEmptyComponent={selectedEmptyComponent}
@@ -397,6 +404,7 @@ Transfer.defaultProps = {
  * @prop {string} [optionsWidth]
  * @prop {string} [removeAllText]
  * @prop {string} [removeIndividualText]
+ * @prop {Node} [rightHeader]
  * @prop {Node} [rightFooter]
  * @prop {string} [searchTerm]
  * @prop {string[]} selected
@@ -433,6 +441,7 @@ Transfer.propTypes = {
     removeIndividualText: propTypes.string,
     renderOption: propTypes.func,
     rightFooter: propTypes.node,
+    rightHeader: propTypes.node,
     searchTerm: propTypes.string,
     selected: propTypes.arrayOf(propTypes.string),
     selectedEmptyComponent: propTypes.node,
diff --git a/packages/widgets/src/Transfer/Transfer.stories.js b/packages/widgets/src/Transfer/Transfer.stories.js
index 2c3c02f0c8..733fcc11db 100644
--- a/packages/widgets/src/Transfer/Transfer.stories.js
+++ b/packages/widgets/src/Transfer/Transfer.stories.js
@@ -138,6 +138,7 @@ export const Header = () => (
         <Transfer
             onChange={() => console.log('Will be overriden')}
             leftHeader={<h3>Header on the left side</h3>}
+            rightHeader={<h4>Header on the right side</h4>}
             options={options}
         />
     </StatefulWrapper>
@@ -171,6 +172,7 @@ export const Filtered = () => (
             onChange={() => console.log('Will be overriden by StatefulWrapper')}
             initialSearchTerm="ANC"
             leftHeader={<h3>Header on the left side</h3>}
+            rightHeader={<h4>Header on the right side</h4>}
             options={options}
         />
     </StatefulWrapper>
@@ -295,6 +297,7 @@ export const IncreasedOptionsHeight = () => (
                 }
                 height="400px"
                 leftHeader={<h3>Header on the left side</h3>}
+                rightHeader={<h4>Header on the right side</h4>}
                 options={options}
             />
         </StatefulWrapper>
@@ -308,6 +311,7 @@ export const DifferentWidths = () => (
             onChange={() => console.log('Will be overriden by StatefulWrapper')}
             initialSearchTerm="Ba"
             leftHeader={<h3>Header on the left side</h3>}
+            rightHeader={<h4>Header on the right side</h4>}
             optionsWidth="500px"
             selectedWidth="240px"
             options={options}
@@ -405,6 +409,11 @@ const createCustomFilteringInHeader = hideFilterInput => {
                 searchTerm={filter}
                 filterCallback={filterCallback}
                 leftHeader={header}
+                rightHeader={
+                    <p>
+                        <b>Selected Periods</b>
+                    </p>
+                }
                 onFilterChange={({ value }) => setFilter(value)}
                 height="400px"
                 filterLabel="Filter options"