fix: add prop placeholder to Filter and filterPlaceholder to Transfer

dhis2 · Jul 10, 2020 · 388b556 · 388b556
1 parent 1f07266
commit 388b556
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/widgets/src/Transfer/Filter.js b/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,
 }
diff --git a/packages/widgets/src/Transfer/Transfer.js b/packages/widgets/src/Transfer/Transfer.js
@@ -74,6 +74,7 @@ export const Transfer = ({
     selectedEmptyComponent,
     enableOrderChange,
     filterLabel,
+    filterPlaceholder,
     filterCallback,
     filterable,
     height,
@@ -185,6 +186,7 @@ export const Transfer = ({
                         {filterable && !hideFilterInput && (
                             <Filter
                                 label={filterLabel}
+                                placeholder={filterPlaceholder}
                                 dataTest={`${dataTest}-filter`}
                                 filter={actualFilter}
                                 onChange={
@@ -387,6 +389,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]
@@ -421,6 +424,7 @@ Transfer.propTypes = {
     enableOrderChange: propTypes.bool,
     filterCallback: propTypes.func,
     filterLabel: propTypes.string,
+    filterPlaceholder: propTypes.string,
     filterable: propTypes.bool,
     height: propTypes.string,
     hideFilterInput: propTypes.bool,

diff --git a/packages/widgets/src/Transfer/Transfer.stories.js b/packages/widgets/src/Transfer/Transfer.stories.js
@@ -172,6 +172,8 @@ export const Filtered = () => (
             initialSearchTerm="ANC"
             leftHeader={<h3>Header on the left side</h3>}
             options={options}
+            filterLabel="Filter with label and placeholder"
+            filterPlaceholder="Filter placeholder"
         />
     </StatefulWrapper>
 )
@@ -408,6 +410,7 @@ const createCustomFilteringInHeader = hideFilterInput => {
                 onFilterChange={({ value }) => setFilter(value)}
                 height="400px"
                 filterLabel="Filter options"
+                filterPlaceholder="Search"
             />
         )
     }