Merge pull request #210 from dhis2/fix/transfer-right-header

feat(transfer): add rightHeader (TECH-394)
dhis2 · Jul 10, 2020 · 272fe72 · 272fe72
2 parents 4a0eb33 + f9a1042
commit 272fe72
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/packages/widgets/src/Transfer/RightHeader.js 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
@@ -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'
@@ -88,6 +89,7 @@ export const Transfer = ({
     maxSelections,
     optionsWidth,
     renderOption,
+    rightHeader,
     rightFooter,
     searchTerm,
     selected,
@@ -297,6 +299,11 @@ export const Transfer = ({
             </Actions>
 
             <RightSide dataTest={`${dataTest}-rightside`} width={selectedWidth}>
+                {rightHeader && (
+                    <RightHeader dataTest={`${dataTest}-rightheader`}>
+                        {rightHeader}
+                    </RightHeader>
+                )}
                 <PickedOptions
                     dataTest={`${dataTest}-pickedoptions`}
                     selectedEmptyComponent={selectedEmptyComponent}
@@ -400,6 +407,7 @@ Transfer.defaultProps = {
  * @prop {string} [optionsWidth]
  * @prop {string} [removeAllText]
  * @prop {string} [removeIndividualText]
+ * @prop {Node} [rightHeader]
  * @prop {Node} [rightFooter]
  * @prop {string} [searchTerm]
  * @prop {string[]} selected
@@ -437,6 +445,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
@@ -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>
@@ -307,6 +309,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>
@@ -320,6 +323,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}
@@ -417,6 +421,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"