Merge pull request #209 from dhis2/fix/transfer-filter-placeholder

feat(transfer): add filter placeholder (TECH-395)
dhis2 · Jul 10, 2020 · 4a0eb33 · 4a0eb33
2 parents 1f07266 + a3fd32a
commit 4a0eb33
Show file tree

Hide file tree

Showing 3 changed files with 20 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
@@ -176,6 +176,18 @@ export const Filtered = () => (
     </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 }) => (
     <p
         onClick={event => onClick({ label, value }, event)}
@@ -408,6 +420,7 @@ const createCustomFilteringInHeader = hideFilterInput => {
                 onFilterChange={({ value }) => setFilter(value)}
                 height="400px"
                 filterLabel="Filter options"
+                filterPlaceholder="Search"
             />
         )
     }