sohobloo / react-native-modal-dropdown

A react-native dropdown/picker/selector component for both Android & iOS.
MIT License
1.19k stars 477 forks source link

Do you use typescript? (and some feature research) #190

Open PMExtra opened 6 years ago

PMExtra commented 6 years ago

I want to rewrite this project by typescript and add these features:

  1. Make the options more powerful, I will add a type that:

    export interface DropdownOptionObject {
    value: number | string  // For onSelect(value, index)
    title?: (() => string) | string  // For buttonTitle, and optionTitle if the render has not been set
    render?: (() => ReactElement<{}>) | ReactElement<{}>  // For render the option
    }
    export type DropdownOption = DropdownOptionObject | string

    then I can easily to make some dropdown like that:

    Price filter:
    --------------------
    ¥0 - ¥20         19%
    ¥20 - ¥30        49%
    ¥30 - ¥40        25%
    (input)  -  (input)    // there are two inputs that can be filled by user

    It's a very typical usage case in online shop.

  2. Support multiple selection.

I'd like to know how much you're interested in it, that affects whether I will open source or just for myself.

PMExtra commented 6 years ago

There is another usage case:

Date between
-------------------
Recent 1 week
Recent 1 month
(picker) - (picker)

And I would implement that by options:

enum DateRange { week, month, custom }
const OPTIONS: DropdownOption[] = [{
  value: DateRange.week,
  title: "Recent 1 week",
}, {
  value: DateRange.month,
  title: "Recent 1 month",
}, {
  value: DateRange.custom,
  title: () => `${store.beginDate} - ${store.endDate}`,  // For button title
  render: ( // Just a schematic, omit the style
    <View>
      <DatePicker onValueChange={store.setBeginDate} />
      <Text>-</Text>
      <DatePicker onValueChange={store.setEndDate} />
    </View>
  ),
}]

It's much easier than current.