chore: merge branch 'master' into fix/transfer-selected-render-option

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [5.1.1](https://github.com/dhis2/ui/compare/v5.1.0...v5.1.1) (2020-07-10)
+
+
+### Bug Fixes
+
+* add prop placeholder to Filter and filterPlaceholder to Transfer ([388b556](https://github.com/dhis2/ui/commit/388b55686ff91e6c132b8f06e2fa86fcdbf9ef00))
+* add prop rightHeader to Transfer ([f9a1042](https://github.com/dhis2/ui/commit/f9a1042fb495effa3444792fc1db9f0b43f73bbb))
+
 # [5.1.0](https://github.com/dhis2/ui/compare/v5.0.7...v5.1.0) (2020-07-09)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "repository": {
         "type": "git",
         "url": "https://github.com/dhis2/ui.git"

packages/constants/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-constants",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "description": "Constants used in the UI libs",
     "main": "build/cjs/lib.js",
     "module": "build/es/lib.js",

packages/core/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dhis2/ui-core",
     "description": "Component primitives for DHIS2 user interfaces",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "main": "build/cjs/lib.js",
     "module": "build/es/lib.js",
     "sideEffects": false,
@@ -25,8 +25,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui-constants": "5.1.0",
-        "@dhis2/ui-icons": "5.1.0",
+        "@dhis2/ui-constants": "5.1.1",
+        "@dhis2/ui-icons": "5.1.1",
         "@popperjs/core": "^2.4.2",
         "classnames": "^2.2.6",
         "react-popper": "^2.2.3",

packages/forms/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-forms",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "main": "./build/cjs/lib.js",
     "module": "./build/es/lib.js",
     "sideEffects": false,
@@ -21,7 +21,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui-core": "5.1.0",
+        "@dhis2/ui-core": "5.1.1",
         "classnames": "^2.2.6",
         "final-form": "^4.20.0",
         "react-final-form": "^6.5.0"

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-icons",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "description": "Icons used in the UI libs",
     "main": "build/cjs/lib.js",
     "module": "build/es/lib.js",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "main": "build/cjs/lib.js",
     "module": "build/es/lib.js",
     "author": "Viktor Varland <[email protected]>",
@@ -10,10 +10,10 @@
         "build": "d2-app-scripts build"
     },
     "dependencies": {
-        "@dhis2/ui-constants": "5.1.0",
-        "@dhis2/ui-icons": "5.1.0",
-        "@dhis2/ui-core": "5.1.0",
-        "@dhis2/ui-forms": "5.1.0",
-        "@dhis2/ui-widgets": "5.1.0"
+        "@dhis2/ui-constants": "5.1.1",
+        "@dhis2/ui-icons": "5.1.1",
+        "@dhis2/ui-core": "5.1.1",
+        "@dhis2/ui-forms": "5.1.1",
+        "@dhis2/ui-widgets": "5.1.1"
     }
 }

packages/widgets/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-widgets",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "main": "build/cjs/lib.js",
     "module": "build/es/lib.js",
     "sideEffects": false,
@@ -26,9 +26,9 @@
         "@dhis2/app-runtime": "^2.2.2",
         "@dhis2/d2-i18n": "^1",
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui-constants": "5.1.0",
-        "@dhis2/ui-core": "5.1.0",
-        "@dhis2/ui-icons": "5.1.0",
+        "@dhis2/ui-constants": "5.1.1",
+        "@dhis2/ui-core": "5.1.1",
+        "@dhis2/ui-icons": "5.1.1",
         "classnames": "^2.2.6",
         "resize-observer-polyfill": "^1.5.1"
     },

packages/widgets/src/Transfer/Filter.js

@@ -3,12 +3,13 @@ import { spacers } from '@dhis2/ui-constants'
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 
-export const Filter = ({ dataTest, filter, onChange, label }) => (
+export const Filter = ({ dataTest, filter, onChange, label, placeholder }) => (
     <div data-test={dataTest}>
         <Field label={label} name={dataTest} dataTest={`${dataTest}-field`}>
             <Input
                 dataTest={`${dataTest}-input`}
                 type="search"
+                placeholder={placeholder}
                 name={dataTest}
                 value={filter}
                 onChange={onChange}
@@ -32,4 +33,5 @@ Filter.propTypes = {
     filter: propTypes.string.isRequired,
     onChange: propTypes.func.isRequired,
     label: propTypes.string,
+    placeholder: propTypes.string,
 }

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,
+}

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'
@@ -74,6 +75,7 @@ export const Transfer = ({
     selectedEmptyComponent,
     enableOrderChange,
     filterLabel,
+    filterPlaceholder,
     filterCallback,
     filterable,
     height,
@@ -87,6 +89,7 @@ export const Transfer = ({
     maxSelections,
     optionsWidth,
     renderOption,
+    rightHeader,
     rightFooter,
     searchTerm,
     selected,
@@ -185,6 +188,7 @@ export const Transfer = ({
                         {filterable && !hideFilterInput && (
                             <Filter
                                 label={filterLabel}
+                                placeholder={filterPlaceholder}
                                 dataTest={`${dataTest}-filter`}
                                 filter={actualFilter}
                                 onChange={
@@ -296,6 +300,11 @@ export const Transfer = ({
             </Actions>
 
             <RightSide dataTest={`${dataTest}-rightside`} width={selectedWidth}>
+                {rightHeader && (
+                    <RightHeader dataTest={`${dataTest}-rightheader`}>
+                        {rightHeader}
+                    </RightHeader>
+                )}
                 <PickedOptions
                     dataTest={`${dataTest}-pickedoptions`}
                     selectedEmptyComponent={selectedEmptyComponent}
@@ -389,6 +398,7 @@ Transfer.defaultProps = {
  * @prop {bool} [hideFilterInput] Automatically true when "hideFilterInput" is true
  * @prop {bool} [enableOrderChange]
  * @prop {string} [filterLabel]
+ * @prop {string} [filterPlaceholder]
  * @prop {Function} [filterCallback]
  * @prop {string} [height]
  * @prop {bool} [hideFilterInput]
@@ -399,6 +409,7 @@ Transfer.defaultProps = {
  * @prop {string} [optionsWidth]
  * @prop {string} [removeAllText]
  * @prop {string} [removeIndividualText]
+ * @prop {Node} [rightHeader]
  * @prop {Node} [rightFooter]
  * @prop {string} [searchTerm]
  * @prop {string[]} selected
@@ -423,6 +434,7 @@ Transfer.propTypes = {
     enableOrderChange: propTypes.bool,
     filterCallback: propTypes.func,
     filterLabel: propTypes.string,
+    filterPlaceholder: propTypes.string,
     filterable: propTypes.bool,
     height: propTypes.string,
     hideFilterInput: propTypes.bool,
@@ -435,6 +447,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,

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,11 +172,24 @@ 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>
 )
 
+export const FilterPlaceholder = () => (
+    <StatefulWrapper>
+        <Transfer
+            filterable
+            onChange={() => console.log('Will be overriden by StatefulWrapper')}
+            options={options}
+            filterLabel="Filter with placeholder"
+            filterPlaceholder="Search"
+        />
+    </StatefulWrapper>
+)
+
 const renderOption = ({ label, value, onClick, highlighted, selected }) => (
     <p
         onClick={event => onClick({ label, value }, event)}
@@ -303,6 +317,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>
@@ -316,6 +331,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}
@@ -413,9 +429,15 @@ 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"
+                filterPlaceholder="Search"
             />
         )
     }

storybook/package.json

@@ -1,6 +1,6 @@
 {
     "name": "storybook",
-    "version": "5.1.0",
+    "version": "5.1.1",
     "description": "Stories for DHIS2 UI",
     "main": "index.js",
     "license": "BSD-3-Clause",
@@ -22,11 +22,11 @@
         "typeface-roboto": "^0.0.75"
     },
     "dependencies": {
-        "@dhis2/ui": "5.1.0",
-        "@dhis2/ui-constants": "5.1.0",
-        "@dhis2/ui-core": "5.1.0",
-        "@dhis2/ui-forms": "5.1.0",
-        "@dhis2/ui-icons": "5.1.0",
-        "@dhis2/ui-widgets": "5.1.0"
+        "@dhis2/ui": "5.1.1",
+        "@dhis2/ui-constants": "5.1.1",
+        "@dhis2/ui-core": "5.1.1",
+        "@dhis2/ui-forms": "5.1.1",
+        "@dhis2/ui-icons": "5.1.1",
+        "@dhis2/ui-widgets": "5.1.1"
     }
 }