https://github.com/gxsshallot/react-native-picklist
A picklist page support single or multi select, single or multi level data, and display.
https://github.com/gxsshallot/react-native-picklist
multilevel-data picklist react-native
Last synced: 8 months ago
JSON representation
A picklist page support single or multi select, single or multi level data, and display.
- Host: GitHub
- URL: https://github.com/gxsshallot/react-native-picklist
- Owner: gxsshallot
- License: mit
- Created: 2018-05-16T10:21:46.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T10:31:13.000Z (over 3 years ago)
- Last Synced: 2025-08-16T01:40:25.666Z (10 months ago)
- Topics: multilevel-data, picklist, react-native
- Language: JavaScript
- Homepage:
- Size: 1.7 MB
- Stars: 28
- Watchers: 2
- Forks: 12
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-picklist
[](https://www.npmjs.com/package/react-native-picklist)
[](https://travis-ci.org/gaoxiaosong/react-native-picklist)
[中文说明](https://www.jianshu.com/p/e78b6187f5a0)
This is a picklist page. It supports:
* Single Level or Multiple Level data.
* Single Select or Multiple Select.
* Show or Hide the internal components.
* Customize the UI component.
* Search in the data automaticlly.
* Section style page.
## ScreenShots
Same UI on Android.
## Install
Install by Yarn:
```shell
yarn add react-native-picklist
```
Install by NPM:
```shell
npm install --save react-native-picklist
```
## Usage
Import the module in the file:
```jsx
import PickList from 'react-native-picklist';
export default class TopPage extends React.PureComponent {
static navigationOptions = PickList.navigationOptions;
render() {
return (
);
}
}
```
If you want to use button in `navigationOptions`, you should set following items:
```javascript
import { HeaderButton } from 'react-navigation-header-buttons';
HeaderButton.defaultProps.getButtonElement = (props) => {
const {title} = props;
return (
{title}
);
};
```
You can set the following properties or see example project to learn how to use it.
## Properties
Required:
* `title`: Page title.
* `data`: Data to show. We will construct a virtual root node to contain it.
* `navigation`: Navigator's props.
Optional:
* `firstTitleLine`: First item displayed in `TitleLine` when it has the multi-level data and show the title line.
* `isCascade`: When multi-level and multi-select are true, auto-cascading selects child nodes or not. Default is `true`.
* `multilevel`: Has multi-level data or not. Default is `false`.
* `multiselect`: Is multi-select or not. Default is `false`.
* `onFinish`: Pass the selected items when finish selecting.
* `rightTitle`: Button title on the right corner.
* `rightClick`: Button click callback on the right corner.
* `renderRow`: Customize a row display. You can override this property to make the list readonly. Default implement is in `DefaultRow.js`.
* `renderHeader`: Customize header of page.
* `renderSingleSelectIcon`: Customize single-selected icon.
* `renderMultiSelectIcon`: Customize multi-selected icon.
* `showBottomView`: Show bottom bar or not.
* `showSearchView`: Show search bar or not.
* `showTitleLine`: Show title line at the header or not.
* `showAllCell`: Show select all or deselect all cell or not.
* `showCount`: Show not leaf item's children count and selected count.
* `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.
* `directBackWhenSingle`: Directly go back to previous page or not when single-select data.
* `cancelableWhenDirectBack`: Selected item is cancelable or not when single-select data and `directBackWhenSingle` is `true`.
* `selectedIds`: Initial selected item's identifier list.
* `selectable`: Can a tree node selectable or not.
* `childrenKey`: Children key of tree node.
* `idKey`: Identifier key of tree node, supports array of string or one string only.
* `labelKey`: Label key of tree node.
* `searchKeys`: Normal search keys of tree node.
* `sort`: Sort method for data list.
* `split`: Split method when generate sections of data list.
* `flatListProps`: Props of `FlatList` when data is flat.
* `sectionListProps`: Props of `SectionList` when data is splitted to sections.
* `searchListProps`: Props of `FlatList` when searching.
* `buttonProps`: Props of `HeaderButton` in navigation bar.
* `labels`: Label text in component.
You can change labels globally by following statement:
```javascript
PickList.defaultProps.labels.xxx = 'xxx';
```
You can call function with PickList view reference:
```javascript
this.picklist.xxx();
```
Following functions supported:
* `getSelectedItems: () => Tree[]`: Get current selected items. You can handle these with [Tree API](https://github.com/gaoxiaosong/general-tree#Interface).
* `backToPreviousPage: () => boolean`: Auto go back to previous page. If it is the first page, it returns false. Otherwise it returns true.
## Example Project
You can open the example project by following steps:
1. Enter `example`. Use `yarn` or `npm install` to install the modules. Run `npm start` in a seperate terminal.
1. Create a example project with entry file `index` and module name `test`.