{"_id":"@abdulmatinsanni/react-native-picklist","_rev":"1-2b3cbcb0c10d14e9c03d5a07de95f14e","name":"@abdulmatinsanni/react-native-picklist","dist-tags":{"latest":"1.3.5"},"versions":{"1.3.5":{"name":"@abdulmatinsanni/react-native-picklist","version":"1.3.5","private":false,"description":"General page for single/multiple select/show with single/multiple data level.","main":"src/index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/abdulmatinsanni/react-native-picklist.git"},"keywords":["React-Native","PickList","MultiSelect"],"author":{"name":"Abdulmatin Sanni"},"license":"MIT","bugs":{"url":"https://github.com/abdulmatinsanni/react-native-picklist/issues","email":"abdulmatin.i.sanni@gmail.com"},"homepage":"https://github.com/abdulmatinsanni/react-native-picklist#readme","dependencies":{"@hecom/image-arrow":"^1.0.0","general-tree":"^1.1.4","react-navigation-header-buttons":"^3.0.4","react-native-general-searchbar":"^1.0.6"},"gitHead":"b75fe4b824fdf8809bbc0aae22e9650a79b2fc46","_id":"@abdulmatinsanni/react-native-picklist@1.3.5","_nodeVersion":"12.5.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-nHz1GaRuKqCJA7MKGRKQnNpDH/8cL29GNwe2GbQKrBXVLWGqEEiy54FSHOijAPZb84nDDkRt6eyK36hQa0YREA==","shasum":"990cb3020f368764eee12d8c301b53223352f4ce","tarball":"https://registry.npmjs.org/@abdulmatinsanni/react-native-picklist/-/react-native-picklist-1.3.5.tgz","fileCount":18,"unpackedSize":47815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJwObCRA9TVsSAnZWagAA+DkP/Rb3KYDYtJqr01di231S\nT74kwfgPWJUAF+HlVUeDsW9W1d6KvlolYf/pMtwVkzCaJPJa3U8L3lDSyiRY\nQIlZNsml9ZNwU0qm0aoo5C70vR3ZxNbRaiQsQqq+uvmkjd3uDdJAPD6PIY3p\nKyshV7sliJwsR7BYyGkMjeVULSBKGY+efjc9WkbXdDQAwP8EtPzagf5w91Z6\nl140XpG9oT21aRS1UQQcv30bed5ObX1Hhwf7AzYAigucp/tBee3JBI3RwTcv\ngXcGA53Z4ke3SSpBUIMsjU8lLLs4Bqn/9eG5MGGJtVIQ5E6lCKKRYmYCsMT4\nLbd/0PczugMMhgi8V9BQ4ECH/+rCoaTDZmUcGScTcGcA7HX0TTkaA0cI6JiH\nN7WMVKkOMzXdTw4kJf5qpN/wc226nQkR3bmm7YBCH4w8YlYGN/FQNNDhq3ky\nLReWnKO29ldokjwvUZTWS/SkJ4s8YDoVOt4QE2QGGrLgHFUmL1V4nichPg7V\ncTIPPIvSM9arcamvkUyHZ3zjMrazy/1RmD0FdigzFIXtbXQZW+XOL4HDqTVj\nUlRgLA8x3LD1NYj0S+j4dg8Hh2GgOoLxtlDtNH3ZjJIYA4BzUr8E87ER/8JY\ntQ3PKrQzFhtfcGwwzO9nzAVQHGG02BdDbMykMOdWXuOq10EmQ3441rrjV3Bn\nGedT\r\n=pN+s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChEWggtetwG8gqvQLgoEuWomYqVdXceTrp/sKyXOm49wIhAIwGcriXnDWpx57P9nMUolmtMisdmiq7l5nPK8faTLgK"}]},"maintainers":[{"name":"abdulmatinsanni","email":"abdulmatin.i.sanni@gmail.com"}],"_npmUser":{"name":"abdulmatinsanni","email":"abdulmatin.i.sanni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-picklist_1.3.5_1579615130769_0.8074918916739724"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-21T13:58:50.739Z","1.3.5":"2020-01-21T13:58:50.935Z","modified":"2022-04-04T10:58:41.256Z"},"maintainers":[{"name":"abdulmatinsanni","email":"abdulmatin.i.sanni@gmail.com"}],"description":"General page for single/multiple select/show with single/multiple data level.","homepage":"https://github.com/abdulmatinsanni/react-native-picklist#readme","keywords":["React-Native","PickList","MultiSelect"],"repository":{"type":"git","url":"git+https://github.com/abdulmatinsanni/react-native-picklist.git"},"author":{"name":"Abdulmatin Sanni"},"bugs":{"url":"https://github.com/abdulmatinsanni/react-native-picklist/issues","email":"abdulmatin.i.sanni@gmail.com"},"license":"MIT","readme":"# react-native-picklist\r\n\r\n[![npm version](https://img.shields.io/npm/v/react-native-picklist.svg?style=flat)](https://www.npmjs.com/package/react-native-picklist)\r\n\r\nThis is a picklist page. It supports:\r\n\r\n- Single Level or Multiple Level data.\r\n- Single Select or Multiple Select.\r\n- Show or Hide the internal components.\r\n- Customize the UI component.\r\n- Search in the data automaticlly.\r\n- Section style page.\r\n\r\n## ScreenShots\r\n\r\n<p float=\"left\">\r\n\r\n<img src=\"/resource/1.gif\" width=\"25%\">\r\n\r\n<img src=\"/resource/2.gif\" width=\"25%\">\r\n\r\n</p>\r\n\r\nSame UI on Android.\r\n\r\n## Install\r\n\r\nInstall by Yarn:\r\n\r\n```shell\r\nyarn add @abdulmatinsanni/react-native-picklist\r\n```\r\n\r\nInstall by NPM:\r\n\r\n```shell\r\nnpm install --save @abdulmatinsanni/react-native-picklist\r\n```\r\n\r\n## Usage\r\n\r\nImport the module in the file:\r\n\r\n```jsx\r\nimport PickList from \"react-native-picklist\";\r\n\r\nexport default class TopPage extends React.PureComponent {\r\n  static navigationOptions = PickList.navigationOptions;\r\n\r\n  render() {\r\n    return (\r\n      <PickList\r\n      // ...\r\n      />\r\n    );\r\n  }\r\n}\r\n```\r\n\r\nIf you want to use button in `navigationOptions`, you should set following items:\r\n\r\n```javascript\r\nimport { HeaderButton } from \"react-navigation-header-buttons\";\r\n\r\nHeaderButton.defaultProps.getButtonElement = props => {\r\n  const { title } = props;\r\n  return <Text>{title}</Text>;\r\n};\r\n```\r\n\r\nYou can set the following properties or see example project to learn how to use it.\r\n\r\n## Properties\r\n\r\nRequired:\r\n\r\n- `title`: Page title.\r\n- `data`: Data to show. We will construct a virtual root node to contain it.\r\n- `navigation`: Navigator's props.\r\n\r\nOptional:\r\n\r\n- `firstTitleLine`: First item displayed in `TitleLine` when it has the multi-level data and show the title line.\r\n- `isCascade`: When multi-level and multi-select are true, auto-cascading selects child nodes or not. Default is `true`.\r\n- `multilevel`: Has multi-level data or not. Default is `false`.\r\n- `multiselect`: Is multi-select or not. Default is `false`.\r\n- `onFinish`: Pass the selected items when finish selecting.\r\n- `rightTitle`: Button title on the right corner.\r\n- `rightClick`: Button click callback on the right corner.\r\n- `renderRow`: Customize a row display. You can override this property to make the list readonly. Default implement is in `DefaultRow.js`.\r\n- `renderHeader`: Customize header of page.\r\n- `renderSingleSelectIcon`: Customize single-selected icon.\r\n- `renderMultiSelectIcon`: Customize multi-selected icon.\r\n- `showBottomView`: Show bottom bar or not.\r\n- `showSearchView`: Show search bar or not.\r\n- `showTitleLine`: Show title line at the header or not.\r\n- `showAllCell`: Show select all or deselect all cell or not.\r\n- `showCount`: Show not leaf item's children count and selected count.\r\n- `numberOfTextLines`: Max number of lines of `Text` component in one row. Default is `0`, means no restrict of lines. You can set to `1` for single line text mode.\r\n- `directBackWhenSingle`: Directly go back to previous page or not when single-select data.\r\n- `cancelableWhenDirectBack`: Selected item is cancelable or not when single-select data and `directBackWhenSingle` is `true`.\r\n- `selectedIds`: Initial selected item's identifier list.\r\n- `selectable`: Can a tree node selectable or not.\r\n- `childrenKey`: Children key of tree node.\r\n- `idKey`: Identifier key of tree node, supports array of string or one string only.\r\n- `labelKey`: Label key of tree node.\r\n- `searchKeys`: Normal search keys of tree node.\r\n- `sort`: Sort method for data list.\r\n- `split`: Split method when generate sections of data list.\r\n- `flatListProps`: Props of `FlatList` when data is flat.\r\n- `sectionListProps`: Props of `SectionList` when data is splitted to sections.\r\n- `searchListProps`: Props of `FlatList` when searching.\r\n- `buttonProps`: Props of `HeaderButton` in navigation bar.\r\n- `labels`: Label text in component.\r\n\r\nYou can change labels globally by following statement:\r\n\r\n```javascript\r\nPickList.defaultProps.labels.xxx = \"xxx\";\r\n```\r\n\r\nYou can call function with PickList view reference:\r\n\r\n```javascript\r\n<PickList\r\n    ref={this.picklist = ref}\r\n    ...\r\n/>\r\n\r\nthis.picklist.xxx();\r\n```\r\n\r\nFollowing functions supported:\r\n\r\n- `getSelectedItems: () => Tree[]`: Get current selected items. You can handle these with [Tree API](https://github.com/abdulmatinsanni/general-tree#Interface).\r\n- `backToPreviousPage: () => boolean`: Auto go back to previous page. If it is the first page, it returns false. Otherwise it returns true.\r\n\r\n## Example Project\r\n\r\nYou can open the example project by following steps:\r\n\r\n1. Enter `example`. Use `yarn` or `npm install` to install the modules. Run `npm start` in a seperate terminal.\r\n1. Create a example project with entry file `index` and module name `test`.\r\n","readmeFilename":"README.md"}