Package Exports

react-ultra-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ultra-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Ultra Select

A highly extensible component for React, good substitution for HTML 'select' element on mobile platforms.

Basically React Ultra Select works like the 'select' and 'option' of INPUT element in HTML, however, it accepts groups of data and provides event callbacks for implementing more powerful features. Very handy.

Still testing, will publish 2.0.0 when stable.

Features

Mobile device oriented

Designed for mobile platforms. You can use it on desktop browsers, but the options showing up at the bottom might not give you best experience.
iOS like

Totally iOS like, except the filters and the loop(haven't found a solution yet).
Dynamic

You can pass N groups of data to React Ultra Select. It will handle data automatically and divide into N columns respectively.

Also, you can customize the number visible rows and the height of each row, pass images or any React node as options, etc.
Extensible

Every time the React Ultra Select selects a group of values, it will emit an onSelect event. Every time it stops scrolling, it will emit an onDidSelect event. These events will be very useful for make more powerful components.

For example, I write a React Date Picker based on this component. It's much more complicated.

How to use

This component relies on some libraries, import them into your project first.

npm i react --save
npm i react-dom --save
npm i iscroll --save
npm i iscroll-react --save

Using it in your project:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import UltraSelect from 'react-ultra-select'

class SomeComponent extends Component {
    render() {
    var columns = [
            {
                list: [
                    {key: 1, value: 'Male'},
                    {key: 2, value: 'Female'},
                    {key: 3, value: 'Others'},
                ],
            },
            {
                list: [
                    {key: 10, value: '0-20'},
                    {key: 20, value: '20-29'},
                    {key: 30, value: '30-39'},
                    {key: 40, value: '40-49'},
                    {key: 50, value: '50+'},
                ],
                defaultIndex: 3
            },
        ]
        return <UltraSelect columns={columns}></UltraSelect>
    }
}

Note that you should pack iscroll-probe instead of iscroll in your production code, cause this component use iscroll-probe to calculate scroll offset and selected indecies.

import iScrollProbe from "iscroll/build/iscroll-probe"

Props

Prop Name	Sub Prop	Required	Type	Description	Example Value
`columns`		Yes	Array	Each element contains one selection list and its default index	```[{ list: [{key: 1, value: 1}], defaultIndex: 0, }]```
	`list`	Yes	Array	An array of options	`[{key: 1, value: 1}]`
	`defaultIndex`	Default to `0`	Number	Default index for selected element, starting from 0	`0`
`rowsVisible`		Default to `7`	Odd Number	Visible rows at one time	`3`, `5`, `7`, `9` etc.
`rowHeight`		Default to `25`	Number	Height for each row	`2`
`rowHeightUnit`		Default to `px`	String	Height unit for each row, works with `rowHeight`	`px`, `em`, `rem` etc.
`backdrop`		Default to `true`	Boolean	Whether to show backdrop or not	`false`
`getTitle`		No	Function	A function to set the bottom title, will be called with an array of selected values	`(selectedValues) => Please select `
`getStaticText`		No	Function	A function to set the text in collapse state, will be called with an array of selected values	`(selectedValues) => Please select `
`confirmButton`		Default to `CONFIRM`	String or React Node	Used to customize the confirm button label	`OK`
`onDidSelect`		No	Function	Will be called with the value of the selecting column when selection is made and scrolling stops	`(selectedValue) => console.log(selectValue)`
`onSelect`		No	Function	Will be called with the value of the selecting column when selection is made	`(selectedValue) => console.log(selectValue)`
`onOpen`		No	Function	Will be called when the columns show up
`onClose`		No	Function	Will be called when the columns hide
`disabled`		Default to `false`	Boolean	Disable selection	`true`
`useTouchTap`		Default to `false`	Boolean	Use `onTouchTap` event instead of `onClick` to work with [react-tap-event-plugin][4]	`true`
`isOpen`		Default to `null`	Boolean	Whether the colomns shows up or not	`true`

Functions

UltraSelect.selectedValues

Get the current array of selected values, each element contains a key and a value.
```
this.refs.ultraSelect.selectedValues
```

Examples

Online

Open https://swenyang.github.io/react-ultra-select to see online demo.
Local

Clone this repo, and run npm run examples. Then navigate to http://localhost:8080 to see examples.

TODO

Removing iscroll-probe

React Ultra Select currently relies on React IScroll and iscroll-probe, it's a bit too heavy. Should find a smaller solution for calculating selected indecies.
Transitions

Add some smooth transitions for backdrop and columns showing up and hiding.