Skip to content

Commit 00043df

Browse files
MaksimDrobchakstepovat
MaksimDrobchak
authored and
stepovat
committed
BREAKING CHANGES: Support Search in destination column (#141)
* Use search HOC in destination list * Use filteredItems as single source of items for destination list * Support custom filterFunction for selected items * added README * added multi_select_state_utils * added multi_select_state_utils * split multi select state utils * upgrade multi_select_state_utils * reuse findItem
1 parent 24dd70f commit 00043df

13 files changed

Lines changed: 704 additions & 288 deletions

‎README.md‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -76,34 +76,38 @@ class Example extends Component {
7676

7777
## Properties
7878

79-
| Name | Type | Default | Description
80-
|:----- |:----- |:----- |:-----
81-
| `items` | `List` | [] | list of items.
82-
| `selectedItems` | `Array` | [] | selected list to start with (subgroup of items).
83-
| `onChange` | `function` | ()=>{} | callback for changed event.
84-
| `loading` | `boolean` | false | toggle to show loading indication.
85-
| `messages` | `Object` | {} | custom messages. Please see below for the availabale messages.
86-
| `showSearch ` | `boolean` | true | toggle to show search option.
87-
| `showSelectAll` | `boolean` | true | toggle to show select all option in list.
88-
| `showSelectedItems` | `boolean` | true | toggle to show selected items right pane.
89-
| `wrapperClassName` | `String` | '' | wrapper class name - Used for customizing the style.
90-
| `height` | `number` | 400 | available items list height.
91-
| `itemHeight` | `number` | 40 | the height of an item in the list.
92-
| `selectedItemHeight` | `number` | `itemHeight` | the height of the selected item in the list.
93-
| `selectAllHeight` | `number` | `itemHeight` | the height of the selectAll component, by default will use the value of the itemHeight.
94-
| `maxSelectedItems` | `number` | | defines the maximum items that can be selected, overrides showSelectAll.
95-
| `filterFunction` | `function` | based on label | The function used to filter items based on the search query.
96-
| `searchRenderer` | `Component` | | Component to replace the default Search component.
97-
| `selectedItemRenderer` | `Component` | | Component to replace the default selected item component in the destination list.
98-
| `loaderRenderer` | `Component` | | Component to replace the default loader component.
99-
| `selectAllRenderer` | `Component` | | Component to replace the default select all component.
100-
| `itemRenderer` | `Component` | | Component to replace the default item component in the source list.
101-
| `selectionStatusRenderer` | `Component` | | Component to replace the default selection status component.
102-
| `noItemsRenderer` | `Component` | | Component to replace the default no items component.
103-
| `searchValue` | `string` | | The value of the search field.
104-
| `searchValueChanged` | `function` | | Function to handle the change of search field. Accepts value as a single argument.
105-
|`responsiveHeight` | `string` | 400px | Responsive height of the wrapping component, can send percent for example: `70%`
106-
|`withGrouping` | `boolean` | false | Your items will be grouped by the group prop values - see "item grouping" section below
79+
| Name | Type | Default | Description |
80+
| :---------------------------- | :---------- | :------------- | :------------------------------------------------------------------------------------------------------ |
81+
| `items` | `List` | [] | list of items. |
82+
| `selectedItems` | `Array` | [] | selected list to start with (subgroup of items). |
83+
| `onChange` | `function` | ()=>{} | callback for changed event. |
84+
| `loading` | `boolean` | false | toggle to show loading indication. |
85+
| `messages` | `Object` | {} | custom messages. Please see below for the availabale messages. |
86+
| `showSearch ` | `boolean` | true | toggle to show search option. |
87+
| `showSelectAll` | `boolean` | true | toggle to show select all option in list. |
88+
| `showSelectedItems` | `boolean` | true | toggle to show selected items right pane. |
89+
| `wrapperClassName` | `String` | '' | wrapper class name - Used for customizing the style. |
90+
| `height` | `number` | 400 | available items list height. |
91+
| `itemHeight` | `number` | 40 | the height of an item in the list. |
92+
| `selectedItemHeight` | `number` | `itemHeight` | the height of the selected item in the list. |
93+
| `selectAllHeight` | `number` | `itemHeight` | the height of the selectAll component, by default will use the value of the itemHeight. |
94+
| `maxSelectedItems` | `number` | | defines the maximum items that can be selected, overrides showSelectAll. |
95+
| `filterFunction` | `function` | based on label | The function used to filter items based on the search query. |
96+
| `searchRenderer` | `Component` | | Component to replace the default Search component. |
97+
| `selectedItemRenderer` | `Component` | | Component to replace the default selected item component in the destination list. |
98+
| `loaderRenderer` | `Component` | | Component to replace the default loader component. |
99+
| `selectAllRenderer` | `Component` | | Component to replace the default select all component. |
100+
| `itemRenderer` | `Component` | | Component to replace the default item component in the source list. |
101+
| `selectionStatusRenderer` | `Component` | | Component to replace the default selection status component. |
102+
| `noItemsRenderer` | `Component` | | Component to replace the default no items component. |
103+
| `searchValue` | `string` | | The value of the search field. |
104+
| `searchValueChanged` | `function` | | Function to handle the change of search field. Accepts value as a single argument. |
105+
| `responsiveHeight` | `string` | 400px | Responsive height of the wrapping component, can send percent for example: `70%` |
106+
| `withGrouping` | `boolean` | false | Your items will be grouped by the group prop values - see "item grouping" section below |
107+
| `showSelectedItemsSearch` | `boolean` | false | toggle to show search option in detination list. |
108+
| `searchSelectedItemsValue` | `string` | | The value of the search field for destination list. |
109+
| `searchSelectedItemsChanged` | `function` | | Function to handle the change of search field for destination list. Accepts value as a single argument. |
110+
| `selectedItemsFilterFunction` | `function` | based on label | Is the same as filterFunction by default to filter items based on the search query in destination list. |
107111

108112

109113
## Customization

‎src/components/destination_list.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,30 @@ import NoItems from "./items/no_items";
88
import SelectedItem from "./items/selected_item";
99
import SelectionStatus from "./selection_status/selection_status";
1010
import { groupItems } from "./item_grouping_util";
11+
import withSearch from "./with_search";
1112

1213
const DestinationList = ({
1314
selectionStatusRenderer,
1415
selectedIds,
1516
clearAll,
1617
messages,
17-
selectedItems,
1818
itemHeight,
1919
height,
2020
unselectItems,
2121
selectedItemRenderer,
2222
noItemsRenderer,
23-
withGrouping
23+
withGrouping,
24+
filteredItems,
25+
children
2426
}) => {
2527
const SelectionStatusRenderer = selectionStatusRenderer;
2628
const updatedSelectedItems = withGrouping
27-
? groupItems(selectedItems)
28-
: selectedItems;
29+
? groupItems(filteredItems)
30+
: filteredItems;
31+
2932
return (
3033
<Column>
34+
{children}
3135
<SelectionStatusRenderer
3236
selected={selectedIds}
3337
clearAll={clearAll}
@@ -53,26 +57,28 @@ DestinationList.propTypes = {
5357
selectedIds: PropTypes.arrayOf(PropTypes.number),
5458
clearAll: PropTypes.func,
5559
messages: PropTypes.object,
56-
selectedItems: PropTypes.array,
5760
itemHeight: PropTypes.number,
5861
height: PropTypes.number,
5962
unselectItems: PropTypes.func,
6063
selectedItemRenderer: PropTypes.any,
6164
noItemsRenderer: PropTypes.any,
62-
withGrouping: PropTypes.bool
65+
withGrouping: PropTypes.bool,
66+
filteredItems: PropTypes.arrayOf(PropTypes.object),
67+
children: PropTypes.node
6368
};
6469

6570
DestinationList.defaultProps = {
6671
listRenderer: List,
6772
selectionStatusRenderer: SelectionStatus,
6873
selectedIds: [],
6974
messages: {},
70-
selectedItems: [],
7175
itemHeight: 40,
7276
height: 400,
7377
selectedItemRenderer: SelectedItem,
7478
noItemsRenderer: NoItems,
75-
withGrouping: false
79+
withGrouping: false,
80+
filteredItems: []
7681
};
7782

78-
export default DestinationList;
83+
export { DestinationList };
84+
export default withSearch(DestinationList);

‎src/components/multi_select.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export class MultiSelect extends PureComponent {
3838
maxSelectedItems: PropTypes.number,
3939
withGrouping: PropTypes.bool,
4040
listRenderer: PropTypes.func,
41-
generateClassName: PropTypes.func
41+
generateClassName: PropTypes.func,
42+
showSelectedItemsSearch: PropTypes.bool
4243
};
4344

4445
static defaultProps = {
@@ -52,7 +53,8 @@ export class MultiSelect extends PureComponent {
5253
itemHeight: 40,
5354
loaderRenderer: Loader,
5455
withGrouping: false,
55-
generateClassName: defaultGenerateClassName
56+
generateClassName: defaultGenerateClassName,
57+
showSelectedItemsSearch: false
5658
};
5759

5860
calculateHeight() {
@@ -104,7 +106,11 @@ export class MultiSelect extends PureComponent {
104106
searchValue,
105107
withGrouping,
106108
generateClassName,
107-
listRenderer
109+
listRenderer,
110+
showSelectedItemsSearch,
111+
searchSelectedItemsValue,
112+
filterSelectedItems,
113+
filteredSelectedItems
108114
} = this.props;
109115
const calculatedHeight = this.calculateHeight();
110116
const selectedIds = selectedItems.map(item => item.id);
@@ -150,13 +156,17 @@ export class MultiSelect extends PureComponent {
150156
selectedIds={selectedIds}
151157
clearAll={clearAll}
152158
messages={messages}
153-
selectedItems={selectedItems}
154159
itemHeight={selectedItemHeight || itemHeight}
155160
height={height}
156161
unselectItems={unselectItems}
157162
selectedItemRenderer={selectedItemRenderer}
158163
noItemsRenderer={noItemsRenderer}
159164
withGrouping={withGrouping}
165+
showSearch={showSelectedItemsSearch}
166+
searchValue={searchSelectedItemsValue}
167+
filteredItems={filteredSelectedItems}
168+
searchIcon={searchIcon}
169+
filterItems={filterSelectedItems}
160170
/>
161171
)}
162172
</div>

0 commit comments

Comments
 (0)