status-im/react-native-dialogs
2
0
Fork 0
mirror of https://github.com/status-im/react-native-dialogs.git synced 2025-03-01 08:40:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Differentiate OptionsCheckboxList, close #111

Browse Source 
* At same time, fix up OptionsPicker
* Got rid of OptionsCheckbox - made it apart of OptionsCommon
This commit is contained in:
Noitidart 2019-03-20 17:41:52 -07:00
parent 7e8f9667b5
commit 92a68ae1b4
2 changed files with 170 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
DialogAndroid.js
View File

@ -9,13 +9,7 @@ type LabelKey = string | 'label';
type ListItem = { label:string, id?:any }; type ListItem = { label:string, id?:any };
type OptionsAlert = {| type OptionsAlert = {|
...OptionsCheckbox, ...OptionsCommon,
...OptionsCommon
|}
type OptionsCheckbox = {|
checkboxLabel?: string,
checkboxDefaultValue?: boolean
|} |}
type OptionsCommon = {| type OptionsCommon = {|
@ -33,7 +27,8 @@ type OptionsCommon = {|
cancelable?: boolean, cancelable?: boolean,
linkColor?: ColorValue, // applies if contentIsHtml is true, and there are <a> elements in content string linkColor?: ColorValue, // applies if contentIsHtml is true, and there are <a> elements in content string
forceStacking?: boolean, forceStacking?: boolean,
maxNumberOfItems?: int checkboxLabel?: string,
checkboxDefaultValue?: boolean
|} |}
type ListItemJustLabel = { label:string }; type ListItemJustLabel = { label:string };
@ -41,13 +36,13 @@ type ListItemJustId = { id:string };
type ListItemFull = { label:string, id:any }; type ListItemFull = { label:string, id:any };
type ListItemBare = {}; type ListItemBare = {};
type OptionsRadio = {| type OptionsRadioList = {|
maxNumberOfItems?: int, maxNumberOfItems?: number,
type: typeof ListType.listRadio, type: typeof ListType.listRadio,
widgetColor?: ColorValue // radio color widgetColor?: ColorValue // radio color
|} |}
type OptionsCheckbox = {| type OptionsCheckboxList = {|
maxNumberOfItems?: int, maxNumberOfItems?: number,
type: typeof ListType.listCheckbox, type: typeof ListType.listCheckbox,
neutralIsClear?: boolean, neutralIsClear?: boolean,
widgetColor?: ColorValue // checkbox color widgetColor?: ColorValue // checkbox color
@ -56,49 +51,49 @@ type OptionsCheckbox = {|
type OptionsPicker = {| type OptionsPicker = {|
...OptionsCommon, ...OptionsCommon,
type?: typeof ListType.listPlain, type?: typeof ListType.listPlain,
maxNumberOfItems?: int, maxNumberOfItems?: number,
items: ListItemJustLabel[], items: ListItemJustLabel[],
|} | {| |} | {|
...OptionsCommon, ...OptionsCommon,
type?: typeof ListType.listPlain, type?: typeof ListType.listPlain,
maxNumberOfItems?: int, maxNumberOfItems?: number,
items: ListItemBare[], items: ListItemBare[],
labelKey: string labelKey: string
|} | {| |} | {|
// radio - no preselected // radio - no preselected
...OptionsCommon, ...OptionsCommon,
...OptionsRadio, ...OptionsRadioList,
items: ListItemJustLabel[], items: ListItemJustLabel[],
|} | {| |} | {|
// radio - no preselected // radio - no preselected
...OptionsCommon, ...OptionsCommon,
...OptionsRadio, ...OptionsRadioList,
items: ListItemBare[], items: ListItemBare[],
labelKey: string labelKey: string
|} | {| |} | {|
// radio - preselected - ListItemFull // radio - preselected - ListItemFull
...OptionsCommon, ...OptionsCommon,
...OptionsRadio, ...OptionsRadioList,
items: ListItemFull[], items: ListItemFull[],
selectedId: any selectedId: any
|} | {| |} | {|
// radio - preselected - ListItemJustlabel // radio - preselected - ListItemJustlabel
...OptionsCommon, ...OptionsCommon,
...OptionsRadio, ...OptionsRadioList,
items: ListItemJustLabel[], items: ListItemJustLabel[],
idKey: string, idKey: string,
selectedId: any selectedId: any
|} | {| |} | {|
// radio - preselected - ListItemJustId // radio - preselected - ListItemJustId
...OptionsCommon, ...OptionsCommon,
...OptionsRadio, ...OptionsRadioList,
items: ListItemJustId[], items: ListItemJustId[],
labelKey: string, labelKey: string,
selectedId: any selectedId: any
|} | {| |} | {|
// radio - preselected - ListItemBare // radio - preselected - ListItemBare
...OptionsCommon, ...OptionsCommon,
...OptionsRadio, ...OptionsRadioList,
items: ListItemBare[], items: ListItemBare[],
idKey: string, idKey: string,
labelKey: string, labelKey: string,
@ -106,38 +101,38 @@ type OptionsPicker = {|
|} | {| |} | {|
// checklist - no preselected - ListItemJustLabel // checklist - no preselected - ListItemJustLabel
...OptionsCommon, ...OptionsCommon,
...OptionsCheckbox, ...OptionsCheckboxList,
items: ListItemJustLabel[] items: ListItemJustLabel[]
|} | {| |} | {|
// checklist - no preselected - ListItemBare // checklist - no preselected - ListItemBare
...OptionsCommon, ...OptionsCommon,
...OptionsCheckbox, ...OptionsCheckboxList,
items: ListItemBare[], items: ListItemBare[],
labelKey: string labelKey: string
|} | {| |} | {|
// checklist - preselected - ListItemFull // checklist - preselected - ListItemFull
...OptionsCommon, ...OptionsCommon,
...OptionsCheckbox, ...OptionsCheckboxList,
items: ListItemFull[], items: ListItemFull[],
selectedIds: any[] selectedIds: any[]
|} | {| |} | {|
// checklist - preselected - ListItemJustlabel // checklist - preselected - ListItemJustlabel
...OptionsCommon, ...OptionsCommon,
...OptionsCheckbox, ...OptionsCheckboxList,
items: ListItemJustLabel[], items: ListItemJustLabel[],
idKey: string, idKey: string,
selectedIds: any selectedIds: any
|} | {| |} | {|
// checklist - preselected - ListItemJustId // checklist - preselected - ListItemJustId
...OptionsCommon, ...OptionsCommon,
...OptionsCheckbox, ...OptionsCheckboxList,
items: ListItemJustId[], items: ListItemJustId[],
labelKey: string, labelKey: string,
selectedIds: any selectedIds: any
|} | {| |} | {|
// checklist - preselected - ListItemBare // checklist - preselected - ListItemBare
...OptionsCommon, ...OptionsCommon,
...OptionsCheckbox, ...OptionsCheckboxList,
items: ListItemBare[], items: ListItemBare[],
idKey: string, idKey: string,
labelKey: string, labelKey: string,
@ -156,7 +151,7 @@ type ActionType =
| typeof DialogAndroid.actionPositive | typeof DialogAndroid.actionPositive
| typeof DialogAndroid.actionSelect; | typeof DialogAndroid.actionSelect;
type Options = OptionsCommon | OptionsPicker | OptionsProgress | OptionsPrompt; type Options = OptionsAlert | OptionsPicker | OptionsProgress | OptionsPrompt;
type OptionsProgress = {| type OptionsProgress = {|
contentColor?: $PropertyType<OptionsCommon, 'contentColor'>, contentColor?: $PropertyType<OptionsCommon, 'contentColor'>,

213
README.md
View File

@ -31,7 +31,6 @@ An Android only module for Material Design dialogs. This is a wrapper over [afol
- [`type ListItem`](#type-listitem) - [`type ListItem`](#type-listitem)
- [`type ListType`](#type-listtype) - [`type ListType`](#type-listtype)
- [`type OptionsAlert`](#type-optionsalert) - [`type OptionsAlert`](#type-optionsalert)
- [`type OptionsCheckbox`](#type-optionscheckbox)
- [`type OptionsCommon`](#type-optionscommon) - [`type OptionsCommon`](#type-optionscommon)
- [`type OptionsProgress`](#type-optionsprogress) - [`type OptionsProgress`](#type-optionsprogress)
- [`type OptionsPicker`](#type-optionspicker) - [`type OptionsPicker`](#type-optionspicker)
@ -325,31 +324,19 @@ Shows a progress dialog. By default no buttons are shown, and hardware back butt
##### `type OptionsAlert` ##### `type OptionsAlert`
> { > {
> ...OptionsCommon, > ...OptionsCommon
> ...OptionsAlert
> } > }
| Key | Type | Default | Required | Description | | Key | Type | Default | Required | Description |
|--------------------|--------------------------------------------|---------|----------|------------------------------------------------| |------------------|----------------------------------------|---------|----------|--------------------------------------------|
| ...OptionsCheckbox | [`OptionsCheckbox`](#type-optionscheckbox) | | | See [`OptionsCheckbox`](#type-optionscheckbox) | | ...OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
| ...OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
##### `type OptionsCheckbox`
> {
> checkboxLabel?: string,
> checkboxDefaultValue?: boolean
> }
| Key | Type | Default | Required | Description |
|----------------------|-----------|---------|----------|------------------------------------------------------------------------------------|
| checkboxLabel | `string` | | | If set, then there is a checkbox shown at the bottom of the dialog with this label |
| checkboxDefaultValue | `boolean` | `false` | | The initial state of the checkbox. Does nothing if `checkboxLabel` is not set |
##### `type OptionsCommon` ##### `type OptionsCommon`
> { > {
> cancelable?: boolean, > cancelable?: boolean,
> checkboxDefaultValue?: boolean
> checkboxLabel?: string,
> content?: string, > content?: string,
> contentColor?: string, > contentColor?: string,
> contentIsHtml?: boolean, > contentIsHtml?: boolean,
@ -363,26 +350,26 @@ Shows a progress dialog. By default no buttons are shown, and hardware back butt
> positiveText?: string, // default "OK" > positiveText?: string, // default "OK"
> title?: string, > title?: string,
> titleColor?: ColorValue, > titleColor?: ColorValue,
> maxNumberOfItems?: boolean,
> } > }
| Key | Type | Default | Required | Description | | Key | Type | Default | Required | Description |
|---------------|--------------------------------------------------------------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------| |----------------------|--------------------------------------------------------------------------|---------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| cancelable | `boolean` | | | If tapping outside of dialog area, or hardware back button, should dismiss dialog. | | cancelable | `boolean` | | | If tapping outside of dialog area, or hardware back button, should dismiss dialog. |
| content | `string` | | | Dialog message | | checkboxDefaultValue | `boolean` | `false` | | The initial state of the checkbox. Does nothing if `checkboxLabel` is not set. |
| contentColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of dialog message | | checkboxLabel | `string` | | | If set, then there is a checkbox shown at the bottom of the dialog with this label |
| contentIsHtml | `boolean` | | | If dialog message should be parsed as html. (supported tags include: `<a>`, `<img>`, etc) | | content | `string` | | | Dialog message |
| forceStacking | `boolean` | | | If you have multiple action buttons that together are too wide to fit on one line, the dialog will stack the buttons to be vertically oriented. | | contentColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of dialog message |
| linkColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | If `contentIsHtml` is true, and `content` contains `<a>` tags, these are colored with this color | | contentIsHtml | `boolean` | | | If dialog message should be parsed as html. (supported tags include: `<a>`, `<img>`, etc) |
| negativeColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | | | forceStacking | `boolean` | | | If you have multiple action buttons that together are too wide to fit on one line, the dialog will stack the buttons to be vertically oriented. |
| negativeText | `string` | | | If falsy, button is not shown. | | linkColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | If `contentIsHtml` is true, and `content` contains `<a>` tags, these are colored with this color |
| neutralColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | | | negativeColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| neutralText | `string` | | | Shows button in far left with this string as label. If falsy, button is not shown. | | negativeText | `string` | | | If falsy, button is not shown. |
| positiveColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | | | neutralColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| positiveText | `string` | | | If falsy, button is not shown. | | neutralText | `string` | | | Shows button in far left with this string as label. If falsy, button is not shown. |
| title | `string` | | | Title of dialog | | positiveColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | |
| titleColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of title | | positiveText | `string` | | | If falsy, button is not shown. |
| maxNumberOfItems | `int` | | | If you want to set a max amount of visible items in a list | | title | `string` | | | Title of dialog |
| titleColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of title |
##### `type OptionsProgress` ##### `type OptionsProgress`
@ -408,30 +395,127 @@ Shows a progress dialog. By default no buttons are shown, and hardware back butt
##### `type OptionsPicker` ##### `type OptionsPicker`
> { > {|
> ...OptionsCommon, > ...OptionsCommon,
> idKey?: string, > type?: typeof ListType.listPlain,
> items: ListItem[], > maxNumberOfItems?: number,
> labelKey?: string, > items: ListItemJustLabel[],
> neutralIsClear?: boolean, > |} | {|
> selectedId?: any, > ...OptionsCommon,
> selectedIds?: any[], > type?: typeof ListType.listPlain,
> type?: string, > maxNumberOfItems?: number,
> widgetColor?: ColorValue > items: ListItemBare[],
> } > labelKey: string
> |} | {|
> // radio - no preselected
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemJustLabel[],
> |} | {|
> // radio - no preselected
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemBare[],
> labelKey: string
> |} | {|
> // radio - preselected - ListItemFull
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemFull[],
> selectedId: any
> |} | {|
> // radio - preselected - ListItemJustlabel
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemJustLabel[],
> idKey: string,
> selectedId: any
> |} | {|
> // radio - preselected - ListItemJustId
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemJustId[],
> labelKey: string,
> selectedId: any
> |} | {|
> // radio - preselected - ListItemBare
> ...OptionsCommon,
> type: typeof ListType.listRadio,
> widgetColor?: ColorValue // radio color
> items: ListItemBare[],
> idKey: string,
> labelKey: string,
> selectedId: any
> |} | {|
> // checklist - no preselected - ListItemJustLabel
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemJustLabel[]
> |} | {|
> // checklist - no preselected - ListItemBare
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemBare[],
> labelKey: string
> |} | {|
> // checklist - preselected - ListItemFull
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemFull[],
> selectedIds: any[]
> |} | {|
> // checklist - preselected - ListItemJustlabel
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemJustLabel[],
> idKey: string,
> selectedIds: any
> |} | {|
> // checklist - preselected - ListItemJustId
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemJustId[],
> labelKey: string,
> selectedIds: any
> |} | {|
> // checklist - preselected - ListItemBare
> ...OptionsCommon,
> type: typeof ListType.listCheckbox,
> neutralIsClear?: boolean,
> widgetColor?: ColorValue, // checkbox color
> items: ListItemBare[],
> idKey: string,
> labelKey: string,
> selectedIds: any
> |}
| Key | Type | Default | Required | Description | | Key | Type | Default | Required | Description |
|-----------------|--------------------------------------------------------------------------|---------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |------------------|--------------------------------------------------------------------------|---------------------------|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| OptionsCheckbox | [`OptionsCheckbox`](#type-optionscheckbox) | | | See [`OptionsCheckbox`](#type-optionscheckbox) | | OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
| OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) | | idKey | `string` | "id" | | |
| idKey | `string` | "id" | | | | items | [`ListItem`](#type-listitem)[] | | Yes | See [`ListItem`](#type-listitem) |
| items | [`ListItem`](#type-listitem)[] | | Yes | See [`ListItem`](#type-listitem) | | labelKey | `string` | "label" | | |
| labelKey | `string` | "label" | | | | maxNumberOfItems | `number` | | | If you want to set a max amount of visible items in a list |
| neutralIsClear | `boolean` | | | Pressing the neutral button causes the dialog to be closed and `selectedItems` to be an empty array. Only works if `neutralText` is also supplied. | | neutralIsClear | `boolean` | | | Pressing the neutral button causes the dialog to be closed and `selectedItems` to be an empty array. Only works if `neutralText` is also supplied. |
| selectedId | `any` | | | The respective radio will be selected on dialog show. If no such id is found, then nothing is selected. Only applicable if `type` is `DialogAndroid.listRadio`. Requires that `items[]` contain key described by `idKey`. | | selectedId | `any` | | | The respective radio will be selected on dialog show. If no such id is found, then nothing is selected. Only applicable if `type` is `DialogAndroid.listRadio`. Requires that `items[]` contain key described by `idKey`. |
| selectedIds | `any[]` | | | The respective checkbox will be selected on dialog show. If no such id is found, nothing is selected for that id. Only applicable if `type` is `DialogAndroid.listCheckbox`. Requires that `items[]` contain key described by `idKey`. | | selectedIds | `any[]` | | | The respective checkbox will be selected on dialog show. If no such id is found, nothing is selected for that id. Only applicable if `type` is `DialogAndroid.listCheckbox`. Requires that `items[]` contain key described by `idKey`. |
| type | [`ListType`](#type-listtype) | `DialogAndroid.listPlain` | | See [`ListType`](#type-listtype) | | type | [`ListType`](#type-listtype) | `DialogAndroid.listPlain` | | See [`ListType`](#type-listtype) |
| widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of radio or checkbox | | widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of radio or checkbox |
##### `type OptionsPrompt` ##### `type OptionsPrompt`
@ -454,11 +538,10 @@ Shows a progress dialog. By default no buttons are shown, and hardware back butt
> widgetColor?: ColorValue > widgetColor?: ColorValue
> } > }
| Key | Type | Default | Required | Description | | Key | Type | Default | Required | Description |
|-----------------|--------------------------------------------------------------------------|---------|----------|------------------------------------------------| |---------------|--------------------------------------------------------------------------|---------|----------|--------------------------------------------|
| OptionsCheckbox | [`OptionsCheckbox`](#type-optionscheckbox) | | | See [`OptionsCheckbox`](#type-optionscheckbox) | | OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) |
| OptionsCommon | [`OptionsCommon`](#type-optionscommon) | | | See [`OptionsCommon`](#type-optionscommon) | | widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of field underline and cursor |
| widgetColor | [`ColorValue`](https://facebook.github.io/react-native/docs/colors.html) | | | Color of field underline and cursor |
##### `type ProgressStyle` ##### `type ProgressStyle`