diff --git a/README.md b/README.md index e14ba7e..c71f17e 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ const items = [ { name: "Fruits", id: 0, + icon: "https://images.vexels.com/media/users/3/147164/isolated/preview/6bf92415c7b2651f512aa0db5a3e1aba-red-apple-icon-fruit-by-vexels.png" children: [{ name: "Apple", id: 10, @@ -59,6 +60,7 @@ const items = [ { name: "Gems", id: 1, + icon: "https://cdn4.iconfinder.com/data/icons/free-crystal-icons/512/Gemstone.png" children: [{ name: "Quartz", id: 20, @@ -76,6 +78,7 @@ const items = [ { name: "Plants", id: 2, + icon: "https://banner2.kisspng.com/20180514/wqq/kisspng-leaf-plant-green-clip-art-5af9b5b7402440.7747356215263144232627.jpg" children: [{ name: "Mother In Law\'s Tongue", id: 30, @@ -111,6 +114,7 @@ export default class App extends Component { items={items} uniqueKey='id' subKey='children' + iconKey='key' selectText='Choose some things...' showDropDowns={true} readOnlyHeadings={true} @@ -155,16 +159,17 @@ Props, there are lots. ### Main | Prop | Default | type | Desc | | ------------- |------------- | ----- |----- | -|items | | array |the items | +|items | | array |the items | |uniqueKey | 'id' | string |the unique key for your items | -|subKey | 'sub' | string |the array of sub items within items | -|displayKey | 'name' | string |the key for the display name / title of the item | +|subKey | 'sub' | string |the array of sub items within items | +|displayKey | 'name' | string |the key for the display name / title of the item | +|iconKey | 'icon' | string |the key for the display icon / bitmap of the item | |selectedItems | [] | array |the selected items | -|onSelectedItemsChange | | function |function that runs when an item is toggled| -|onSelectedItemObjectsChange | | function |function that returns the selected items as their original objects instead of an array of ids | -|onCancel | | function |function that runs when the cancel button is pressed | -|onConfirm | | function |function that runs when the confirm button is pressed | -|onToggleSelector | | function |callback function that runs when the selector is toggled. receives a boolean for the open/close state of the modal | +|onSelectedItemsChange | | function |function that runs when an item is toggled| +|onSelectedItemObjectsChange | | function |function that returns the selected items as their original objects instead of an array of ids | +|onCancel | | function |function that runs when the cancel button is pressed | +|onConfirm | | function |function that runs when the confirm button is pressed | +|onToggleSelector | | function |callback function that runs when the selector is toggled. receives a boolean for the open/close state of the modal | ### Options @@ -275,3 +280,4 @@ These are the styles you can change: `button` `confirmText` `cancelButton` + `itemIconStyle` \ No newline at end of file diff --git a/lib/components/RowItem.js b/lib/components/RowItem.js index 36f9faa..a6a0a64 100644 --- a/lib/components/RowItem.js +++ b/lib/components/RowItem.js @@ -8,7 +8,8 @@ import { UIManager, LayoutAnimation, FlatList, - StyleSheet + StyleSheet, + Image } from 'react-native' import Icon from 'react-native-vector-icons/MaterialIcons' import RowSubItem from './RowSubItem' @@ -163,6 +164,7 @@ class RowItem extends Component { itemNumberOfLines, displayKey, selectedItems, + iconKey } = this.props const hasDropDown = item[subKey] && item[subKey].length > 0 && showDropDowns @@ -187,6 +189,12 @@ class RowItem extends Component { paddingVertical: 6, }, mergedStyles.item, this._itemSelected(item) && mergedStyles.selectedItem]} > + + {iconKey && item[iconKey] && } + - {item[displayKey]} + {item[displayKey]} { this._itemSelected(item) ? diff --git a/lib/components/RowSubItem.js b/lib/components/RowSubItem.js index d428c7c..faa6fb1 100644 --- a/lib/components/RowSubItem.js +++ b/lib/components/RowSubItem.js @@ -55,6 +55,7 @@ class RowSubItem extends Component { highlightedChildren, itemNumberOfLines, displayKey, + iconKey } = this.props const highlightChild = !selectChildren && highlightedChildren.includes(subItem[uniqueKey]) @@ -80,39 +81,44 @@ class RowSubItem extends Component { paddingVertical: 6, }, mergedStyles.subItem, (itemSelected || highlightChild) && mergedStyles.selectedItem]} > + {iconKey && item[iconKey] && } + {subItem[displayKey]} { - itemSelected || highlightChild ? - - { selectedIconComponent ? - selectedIconComponent - : - - } - - : - null + itemSelected || highlightChild ? + + { selectedIconComponent ? + selectedIconComponent + : + + } + + : + null }