vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2025-10-16 12:05:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
ab2b4191c5
DefinitelyTyped/react-widgets/react-widgets.d.ts
Nikolay Matrosov 083bb57ab8 Definitions for react-widgets (#8906) 
* Definitions for Calendar, ComboBox, DateTimePicker, DropdownList, Multiselect, NumberPicker, SelectList components.

* Added tests

* fixed file naming. Corrected react-widgets.d.ts
2016-04-18 00:04:57 +09:00

964 lines
40 KiB
TypeScript
Raw Blame History

// Type definitions for react-widgets v3.2.1
// Project: https://github.com/jquense/react-widgets
// Definitions by: Rogier Schouten <https://github.com/rogierschouten/>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
///<reference path="../react/react.d.ts"/>
declare module 'react-widgets/lib/Combobox' {
interface ComboBoxMessages {
/**
* Combobox button text for screen readers
*/
open: string | ((props: ComboBoxProps) => string);
/**
* text to display when the data prop array is empty
*/
emptyList: string | ((props: ComboBoxProps) => string);
/**
* text to display when the the current filter does not return any results
*/
emptyFilter: string | ((props: ComboBoxProps) => string);
}
interface ComboBoxProps extends __React.Props<ComboBoxClass> {
/**
* The current value of the Combobox. This can be an object (such as a member of the data
* array) or a primitive value, hinted to by the valueField. The widget value does not need
* to be in the data, widgets can have values that are not in their list.
*/
value?: any;
/**
* Default value.
*/
defaultValue?: any;
/**
* Called when the value is changed. If the value is one of the data members that item will
* be returned. In the case of a value not being found in the data array the string value of
* the Combobox will be returned.
*/
onChange?: (value: any) => void;
/**
* This handler fires when an item has been selected from the list. It fires before the
* onChange handler, and fires regardless of whether the value has actually changed.
*/
onSelect?: (value: any) => void;
/**
* An array of possible values for the Combobox. If an array of objects is provided you
* should use the valueField and textField props, to specify which object properties
* comprise the value field (such as an id) and the field used to label the item.
*/
data?: any[];
/**
* A dataItem field name for uniquely identifying items in the data list. A valueField is
* required when the value prop is not itself a dataItem. A valueField is useful when
* specifying the selected item, by its id instead of using the model as the value. When a
* valueField is not provided, the Combobox will use strict equality checks (===) to locate
* the value in the data list.
*/
valueField?: string;
/**
* Specify which data item field to display in the Combobox and selected item. The
* textField` prop may also also used as to find an item in the list as you type. Providing
* an accessor function allows for computed text values
*/
textField?: string;
/**
* This component is used to render each possible item in the Combobox. The default
* component renders the text of the selected item (specified by textfield)
*/
itemComponent?: __React.ReactType;
/**
* Disable the widget, if an Array of values is passed in only those values will be
* disabled.
*/
disabled?: boolean | any[];
/**
* Place the Combobox in a read-only mode, If an Array of values is passed in only those
* values will be read-only.
*/
readOnly?: boolean | any[];
/**
* Determines how to group the Combobox. Providing a string will group the data array by
* that property. You can also provide a function which should return the group value.
*/
groupBy?: string | ((dataItem: any) => any);
/**
* This component is used to render each option group, when groupBy is specified. By default
* the groupBy value will be used.
*/
groupComponent?: __React.ReactType;
/**
* When true the Combobox will suggest, or fill in, values as you type. The suggestions are
* always "startsWith", meaning it will search from the start of the textField property
*/
suggest?: boolean;
/**
* Specify a filtering method used to reduce the items in the dropdown as you type. It can
* be used in conjunction with the suggest prop or instead of it. There are a few built-in
* filtering methods that can be specified by passing the String name. You can explicitly
* opt out of filtering by setting filter to false To handle custom filtering techniques
* provide a function that returns true or false for each passed in item (analogous to the
* array.filter builtin) Acceptable values for filter are: false "startsWith" "endsWith"
* "contains" function(String item)
*/
filter?: boolean | string | ((dataItem: any, searchItem: any) => boolean);
/**
* Use in conjunction with the filter prop. Filter the list without regard for case. This
* only applies to non function values for filter
*/
caseSensitive?: boolean;
/**
* Use in conjunction with the filter prop. Start filtering the list only after the value
* has reached a minimum length.
*/
minLength?: number;
/**
* Whether or not the Combobox is open. When unset (undefined) the Combobox will handle the
* opening and closing internally. The defaultOpen prop can be used to set an initialization
* value for uncontrolled widgets.
*/
open?: boolean;
/**
* Called fires when the Combobox is about to open or close. onToggle should be used when
* the open prop is set otherwise the widget will never open or close.
*/
onToggle?: (isOpen: boolean) => void;
/**
* Mark whether the widget is in a busy or loading state. If true the widget will display a
* spinner gif, useful when loading data via an ajax call.
*/
busy?: boolean;
/**
* The speed, in milliseconds, of the dropdown animation.
*/
duration?: number;
/**
* mark whether the widget should render right-to-left. This property can also be implicitly
* passed to the widget through a childContext prop (isRtl) this allows higher level
* application components to specify the direction.
*/
isRtl?: boolean;
/**
* Object hash containing display text and/or text for screen readers. Use the messages
* object to localize widget text and increase accessibility.
*/
messages?: ComboBoxMessages;
}
interface ComboBox extends __React.ReactElement<ComboBoxProps> {}
interface ComboBoxClass extends __React.ComponentClass<ComboBoxProps> {}
var ComboBox: ComboBoxClass;
export = ComboBox;
}
declare module 'react-widgets/lib/DateTimePicker' {
interface DateTimePickerProps extends __React.Props<DateTimePickerClass> {
/**
* Whether to show the date picker button.
* @default true
*/
calendar?: boolean;
/**
* Whether to show the time picker button.
* @default true
*/
time?: boolean;
/**
* The minimum Date that can be selected. Min only limits selection, it doesn't constrain
* the date values that can be typed or pasted into the widget. If you need this behavior
* you can constrain values via the onChange handler.
* @default Date(1900, 0, 1)
*/
min?: Date;
/**
* The maximum Date that can be selected. Max only limits selection, it doesn't constrain
* the date values that can be typed or pasted into the widget. If you need this behavior
* you can constrain values via the onChange handler.
* @default Date(2099, 11, 31)
*/
max?: Date;
/**
* Default current date at which the calendar opens. If none is provided, opens at today's
* date or the value date (if any).
* @default Date()
*/
currentDate?: Date;
/**
* Change event Handler that is called when the currentDate is changed. The handler is
* called with the currentDate object.
*/
onCurrentDateChange?: (date?: Date) => void;
/**
* A string format used to display the date value.
*/
format?: string;
/**
* A string format to be used while the date input has focus. Useful for showing a simpler
* format for inputing.
*/
editFormat?: string;
/**
* A string format used by the time dropdown to render times.
*/
timeFormat?: string;
/**
* The amount of minutes between each entry in the time list.
*/
step?: number | boolean;
/**
* Determines how the widget parses the typed date string into a Date object. You can
* provide an array of formats to try, or provide a function that returns a date to handle
* parsing yourself. When parse is unspecified and the format prop is a String parse will
* automatically use that format as its default
*/
parse?: (str: string) => Date | string[];
/**
* The starting and lowest level view the calendar can navigate down to.
* @enum "month" "year" "decade" "century"
*/
initialView?: "month" | "year" | "decade" | "century";
/**
* The highest level view the calendar can navigate up to. This value should be higher than
* initialView.
* @enum "month" "year" "decade" "century"
*/
finalView?: "month" | "year" | "decade" | "century";
/**
* The current selected date, should be a Date instance or null.
*/
value?: Date;
/**
* Default value.
*/
defaultValue?: Date;
/**
* Change event Handler that is called when the value is changed. The handler is called with
* both the current Date object (or null if it was not parseable), and the second argument
* is a string representation of the date value, formated by the format prop.
*/
onChange?: (date?: Date, dateStr?: string) => void;
/**
* This handler fires when an item has been selected from the list or calendar. It fires
* before the onChange handler, and fires regardless of whether the value has actually
* changed.
*/
onSelect?: (date?: Date) => void;
/**
* Whether or not the DateTimePicker is open. When unset (undefined) the DateTimePicker will
* handle the opening and closing internally. The defaultOpen prop can be used to set an
* initialization value for uncontrolled widgets.
* @enum false "calendar" "time"
*/
open?: boolean | "calendar" | "time";
/**
* Called when the DateTimePicker is about to open or close. onToggle should be used when
* the open prop is set otherwise the widget will never open or close.
*/
onToggle?: (isOpen: boolean) => void;
/**
* The speed, in milliseconds, of the either dropdown animation.
*/
duration?: number;
/**
* Mark whether the widget should render right-to-left. This property can also be implicitly
* passed to the widget through a childContext prop (isRtl) this allows higher level
* application components to specify the direction.
*/
isRtl?: boolean;
/**
* Object hash containing display text and/or text for screen readers. Use the messages
* object to localize widget text and increase accessibility.
*/
messages?: DateTimePickerMessages;
}
interface DateTimePickerMessages {
/**
* Title and screen reader text for the left arrow button.
* @default "Select Date"
*/
calendarButton?: string;
/**
* Title and screen reader text for the right arrow button.
* @default "Select Time"
*/
timeButton?: string;
}
interface DateTimePicker extends __React.ReactElement<DateTimePickerProps> {}
interface DateTimePickerClass extends __React.ComponentClass<DateTimePickerProps> {}
var DateTimePicker: DateTimePickerClass;
export = DateTimePicker;
}
declare module 'react-widgets/lib/Multiselect' {
interface MultiselectProps extends __React.Props<MultiselectClass> {
/**
* The current values of the Multiselect. The value should can null, or an array of
* valueField values, or an array of objects (such as a few items in the data array)
*/
value?: any[];
/**
* Default Value.
*/
defaultValue?: any[];
/**
* Change event Handler that is called when the value is changed. The handler is called with
* an array of values.
*/
onChange?: (values: any[]) => void;
/**
* This handler fires when an item has been selected from the list. It fires before the
* onChange handler, and fires regardless of whether the value has actually changed
*/
onSelect?: (value: any) => void;
/**
* This handler fires when the user chooses to create a new tag, not in the data list. It is
* up to the widget parent to implement creation logic, a common implementation is shown
* below, where the new tag is selected and added to the data list.
*/
onCreate?: (searchTerm: string) => void;
/**
* Provide an array of possible values for the Multiselect. If an array of objects is
* provided you should use the valueField and textField props, to specify which object
* properties comprise the value field (such as an id) and the field used to label the item.
*/
data?: any[];
/**
* A dataItem field name for uniquely identifying items in the data list. A valueField is
* required when the value prop is not itself a dataItem. A valueField is useful when
* specifying the selected item, by its id instead of using the model as the value.
* When a valueField is not provided, the Multiselect will use strict equality checks (===)
* to locate the value in the data list.
*/
valueField?: string;
/**
* Specify which data item field to display in the Multiselect and selected item. The
* textField prop may also also used as to find an item in the list as you type. Providing
* an accessor function allows for computed text values.
*/
textField?: string | ((dataItem: any) => string);
/**
* This component is used to render each selected item. The default component renders the
* text of the selected item (specified by textfield).
*/
tagComponent?: __React.ReactType;
/**
* This component is used to render each possible item in the list. The default component
* renders the text of the selected item (specified by textfield).
*/
itemComponent?: __React.ReactType;
/**
* Determines how to group the Multiselect values. Providing a string will group the data
* array by that property. You can also provide a 'function' which should return the group
* value.
*/
groupBy?: string | ((dataItem: any) => any);
/**
* This component is used to render each option group, when groupBy is specified. By default
* the groupBy value will be used.
*/
groupComponent?: __React.ReactType;
/**
* The same as an input placeholder, only works in browsers that support the placeholder
* attribute for inputs
*/
placeholder?: string;
/**
* The string value of the current search being typed into the Multiselect. When unset
* (undefined) the Multiselect will handle the filtering internally. The defaultSearchTerm
* prop can be used to set an initialization value for uncontrolled widgets.
*/
searchTerm?: string;
/**
* Called when the value of the text box changes either from typing or a pasted value.
* onSearch should be used when the searchTerm prop is set.
*/
onSearch?: (searchTerm: string) => void;
/**
* Whether or not the Multiselect is open. When unset (undefined) the Multiselect will
* handle the opening and closing internally. The defaultOpen prop can be used to set an
* initialization value for uncontrolled widgets.
*/
open?: boolean;
/**
* Called when the Multiselect is about to open or close. onToggle should be used when the
* open prop is set otherwise the widget will never open or close.
*/
onToggle?: (isOpen: boolean) => void;
/**
* Specify a filtering method used to reduce the items in the dropdown as you type. There
* are a few built-in filtering methods that can be specified by passing the String name.
* You can explicitly opt out of filtering by setting filter to false. To handle custom
* filtering techniques provide a function that returns true or false for each passed in
* item (analogous to the array.filter builtin)
* @enum false "startsWith" "endsWith" "contains" function(String item)
* @default startsWith
*/
filter?: boolean | "startsWith" | "endsWith" | "contains" | ((dataItem: any, searchTerm: string) => boolean);
/**
* Use in conjunction with the filter prop. Filter the list without regard for case. This
* only applies to non function values for filter.
* @default false
*/
caseSensitive?: boolean;
/**
* Use in conjunction with the filter prop. Start filtering the list only after the value
* has reached a minimum length.
* @default 1
*/
minLength?: number;
/**
* mark whether the widget is in a busy or loading state. If true the widget will display a
* spinner gif, useful when loading data via an ajax call.
* @default false
*/
busy?: boolean;
/**
* The speed, in milliseconds, of the dropdown animation.
* @default 250
*/
duration?: number;
/**
* Disable the widget, If an Array of values is passed in only the tags specified will be
* disabled.
*/
disabled?: boolean | any[];
/**
* Place the widget in a readonly mode, If an Array of values is passed in only the tags
* specified will be readonly.
*/
readOnly?: boolean | any[];
/**
* Mark whether the widget should render right-to-left. This property can also be implicitly
* passed to the widget through a childContext prop (isRtl) this allows higher level
* application components to specify the direction.
* @default false
*/
isRtl?: boolean;
/**
* Object hash containing display text and/or text for screen readers. Use the messages
* object to localize widget text and increase accessibility.
*/
messages?: MultiselectMessages;
}
interface MultiselectMessages {
/**
* The text label for creating new tags.
* @default "(create new tag)"
*/
createNew?: string | ((props: MultiselectProps) => string);
/**
* Text to display when the data prop array is empty.
* @default "There are no items in this list"
*/
emptyList?: string | ((props: MultiselectProps) => string);
/**
* Text to display when the the current filter does not return any results.
* @default "The filter returned no results"
*/
emptyFilter?: string | ((props: MultiselectProps) => string);
}
interface Multiselect extends __React.ReactElement<MultiselectProps> {}
interface MultiselectClass extends __React.ComponentClass<MultiselectProps> {}
var Multiselect: MultiselectClass;
export = Multiselect;
}
declare module 'react-widgets/lib/NumberPicker' {
interface NumberPickerProps extends __React.Props<NumberPickerClass>{
/**
* The current value of the NumberPicker.
*/
value?: number;
/**
* Default Value.
*/
defaultValue?: number;
/**
* Change event Handler that is called when the value is changed. The handler is called with
* the current numeric value or null.
*/
onChange?: (value?: number) => void;
/**
* A format string used to display the number value. Localizer dependent, read localization
* for more info.
* @see http://jquense.github.io/react-widgets/docs/#i18n
*/
format?: any;
/**
* Determines how the NumberPicker parses a number from the localized string representation.
* You can also provide a parser Function to pair with a custom format.
*/
parse?: string[] | ((str: string, culture: string) => number);
/**
* The minimum number that the NumberPicker value.
* @default -Infinity
*/
min?: number;
/**
* The maximum number that the NumberPicker value.
* @default Infinity
*/
max?: number;
/**
* Amount to increase or decrease value when using the spinner buttons.
* @default 1
*/
step?: number;
/**
* Specify how precise the value should be when typing, incrementing, or decrementing the
* value. When empty, precision is parsed from the current format and culture.
*/
precision?: number;
/**
* Mark whether the widget should render right-to-left. This property can also be implicitly
* passed to the widget through a childContext prop (isRtl) this allows higher level
* application components to specify the direction.
* @default false
*/
isRtl?: boolean;
/**
* Object hash containing display text and/or text for screen readers. Use the messages
* object to localize widget text and increase accessibility.
*/
messages?: NumberPickerMessages;
}
interface NumberPickerMessages {
/**
* Number picker spinner up button text for screen readers.
* @default "increment value"
*/
increment?: string;
/**
* Number picker spinner down button text for screen readers.
* @default "decrement value"
*/
decrement?: string;
}
interface NumberPicker extends __React.ReactElement<NumberPickerProps> {}
interface NumberPickerClass extends __React.ComponentClass<NumberPickerProps> {}
var NumberPicker: NumberPickerClass;
export = NumberPicker;
}
declare module 'react-widgets/lib/SelectList' {
interface SelectListProps extends __React.Props<SelectListClass>{
/**
* The current value or values of the SelectList. This can be an object (such as a member of
* the data array) or a primitive value, hinted to by the valueField. The widget value does
* not need to be in the data array; widgets can have values that are not in their list.
*/
value?: any | any[];
/**
* Default Value.
*/
defaultValue?: any | any[];
/**
* Change event handler that is called when the value is changed. values will be an array
* when multiple prop is set.
*/
onChange?: (values: any | any[]) => void;
/**
* Provide an array of possible values for the SelectList. If an array of objects is
* provided you should use the valueField and textField props, to specify which object
* properties comprise the value field (such as an id) and the field used to label the item.
*/
data?: any[];
/**
* A dataItem field name for uniquely identifying items in the data list. A valueField is
* required when the value prop is not itself a dataItem. A valueField is useful when
* specifying the selected item, by its id instead of using the model as the value.
* When a valueField is not provided, the SelectList will use strict equality checks (===)
* to locate the value in the data list.
*/
valueField?: string;
/**
* Specify which data item field to display in the SelectList and selected item. The
* textField prop may also also used as to find an item in the list as you type. Providing
* an accessor function allows for computed text values.
*/
textField?: string | ((dataItem: any) => string);
/**
* Whether or not the SelectList allows multiple selection or not. when false the SelectList
* will render as a list of radio buttons, and checkboxes when true.
*/
multiple?: boolean;
/**
* This component is used to render each item in the SelectList. The default component
* renders the text of the selected item (specified by textfield)
*/
itemComponent?: __React.ReactType;
/**
* Determines how to group the SelectList dropdown list. Providing a string will group the
* data array by that property. You can also provide a 'function' which should return the
* group value.
*/
groupBy?: string | ((dataItem: any) => any);
/**
* This component is used to render each option group, when groupBy is specified. By default
* the groupBy value will be used.
*/
groupComponent?: __React.ReactType;
/**
* A handler called when focus shifts on the SelectList. Internally this is used to ensure
* the focused item is in view. If you want to define your own "scrollTo" behavior or just
* disable the default one specify an onMove handler. The handler is called with the
* relevant DOM nodes needed to implement scroll behavior: the list element, the element
* that is currently focused, and a focused value.
*/
onMove?: (list: HTMLElement, focusedNode: HTMLElement, focusedItem: any) => void;
/**
* Mark whether the widget is in a busy or loading state. If true the widget will display a
* spinner gif, useful when loading data via an ajax call.
* @default false
*/
busy?: boolean;
/**
* Disable the widget, if an Array of values is passed in only those values will be
* disabled.
*/
disabled?: boolean | any[];
/**
* Place the SelectList in a read-only mode, If an Array of values is passed in only those
* values will be read-only.
*/
readOnly?: boolean | any[];
/**
* Mark whether the SelectList should render right-to-left. This property can also be
* implicitly passed to the widget through a childContext prop (isRtl) this allows higher
* level application components to specify the direction.
* @default false
*/
isRtl?: boolean;
/**
* Object hash containing display text and/or text for screen readers. Use the messages
* object to localize widget text and increase accessibility.
*/
messages?: SelectListMessages;
}
interface SelectListMessages {
/**
* @default: "There are no items in this list"
*/
emptyList?: string | ((props: SelectListProps) => string)
}
interface SelectList extends __React.ReactElement<SelectListProps> {}
interface SelectListClass extends __React.ComponentClass<SelectListProps> {}
var SelectList: SelectListClass;
export = SelectList;
}
declare module 'react-widgets/lib/Calendar' {
interface CalendarProps extends __React.Props<CalendarClass>{
/**
* The current selected date, should be a Date object or null.
*/
value?: Date;
/**
* Default value.
*/
defaultValue?: Date;
/**
* Change event Handler that is called when the value is changed. The handler is called with
* the Date object
*/
onChange?: (date?: Date) => void;
/**
* Callback fired when the Calendar navigates between views, or forward and backwards in
* time.
*/
onNavigate?: (date: Date, direction: string, view: string ) => void;
/**
* The minimum date that the Calendar can navigate from.
*/
min?: Date;
/**
* The maximum date that the Calendar can navigate to.
*/
max?: Date;
/**
* Default current date at which the calendar opens. If none is provided, opens at today's
* date or the value date (if any).
* @default Date()
*/
currentDate?: Date;
/**
* Change event Handler that is called when the currentDate is changed. The handler is
* called with the currentDate object.
*/
onCurrentDateChange?: (date?: Date) => void;
/**
* Show or hide the Calendar footer.
* @default false
*/
footer?: boolean;
/**
* Provide a custom component to render the days of the month.
* The Component is provided the following props
* - date: a Date object for the day of the month to render
* - label: a formatted String of the date to render. To adjust the format of the label
* string use the dateFormat prop, listed below.
*/
dayComponent?: __React.ReactType;
/**
* The starting and lowest level view the calendar can navigate down to.
* @enum "month" "year" "decade" "century"
*/
initialView?: "month" | "year" | "decade" | "century";
/**
* The highest level view the calendar can navigate up to. This value should be higher than
* initialView
* @enum "month" "year" "decade" "century"
*/
finalView?: "month" | "year" | "decade" | "century";
/**
* A formatter for the header button of the month view
*/
headerFormat?: string | ((day: Date) => string);
/**
* A formatter for the Calendar footer, formats Today's Date as a string.
*/
footerFormat?: string | ((day: Date) => string);
/**
* A formatter calendar days of the week, the default formats each day as a Narrow name:
* "Mo", "Tu", etc.
*/
dayFormat?: string | ((day: Date) => string);
/**
* A formatter for day of the month.
*/
dateFormat?: string | ((day: Date) => string);
/**
* A formatter for month name.
*/
monthFormat?: string | ((day: Date) => string);
/**
* A formatter for the year.
*/
yearFormat?: string | ((day: Date) => string);
/**
* A formatter for decade, the default formats the first and last year of the decade like:
* 2000 - 2009.
*/
decadeFormat?: string | ((day: Date) => string);
/**
* A formatter for century, the default formats the first and last year of the century like:
* 1900 - 1999.
*/
centuryFormat?: string | ((day: Date) => string);
/**
* Mark whether the widget should render right-to-left. This property can also be implicitly
* passed to the widget through a childContext prop (isRtl) this allows higher level
* application components to specify the direction.
*/
isRtl?: boolean;
messages?: CalendarMessages;
}
interface CalendarMessages {
/**
* Title and screen reader text for the left arrow button.
* @default: "navigate back"
*/
moveBack?: string;
/**
* Title and screen reader text for the right arrow button.
* @default: "navigate forward"
*/
moveForward?: string;
}
interface Calendar extends __React.ReactElement<CalendarProps> {}
interface CalendarClass extends __React.ComponentClass<CalendarProps> {}
var Calendar: CalendarClass;
export = Calendar;
}
declare module 'react-widgets/lib/DropdownList' {
interface DropdownListProps extends __React.Props<DropdownListClass> {
/**
* The current value of the DropdownList. This can be an object (such as a member of the
* data array) or a primitive value, hinted to by the valueField. The widget value does not
* need to be in the data array; widgets can have values that are not in their list.
*/
value?: any;
/**
* Default value.
*/
defaultValue?: any;
/**
* Change event Handler that is called when the value is changed.
*/
onChange?: (value: any) => void;
/**
* This handler fires when an item has been selected from the list. It fires before the
* onChange handler, and fires regardless of whether the value has actually changed.
*/
onSelect?: (value: any) => void;
/**
* Provide an array of possible values for the DropdownList. If an array of objects is
* provided you should use the valueField and textField props, to specify which object
* properties comprise the value field (such as an id) and the field used to label the item.
*/
data?: any[];
/**
* A dataItem field name for uniquely identifying items in the data list. A valueField is
* required when the value prop is not itself a dataItem. A valueField is useful when
* specifying the selected item, by its id instead of using the model as the value.
* When a valueField is not provided, the DropdownList will use strict equality checks (===)
* to locate the value in the data list.
*/
valueField?: string;
/**
* Specify which data item field to display in the DropdownList and selected item.
* ThetextFieldprop may also also used as to find an item in the list as you type. Providing
* an accessor function allows for computed text values
*/
textField?: string;
/**
* This component is used to render the selected value of the DropdownList. The default
* component renders the text of the selected item (specified by textfield)
*/
valueComponent?: __React.ReactType;
/**
* This component is used to render each possible item in the DropdownList. The default
* component renders the text of the selected item (specified by textfield)
*/
itemComponent?: __React.ReactType;
/**
* Disable the widget, if an Array of values is passed in only those values will be disabled.
*/
disabled?: boolean | any[];
/**
* Place the DropdownList in a read-only mode, If an Array of values is passed in only those
* values will be read-only.
*/
readOnly?: boolean | any[];
/**
* Determines how to group the DropdownList. Providing a string will group the data array by
* that property. You can also provide a function which should return the group value.
*/
groupBy?: string | ((dataItem: any) => any);
/**
* This component is used to render each option group, when groupBy is specified. By default
* the groupBy value will be used.
*/
groupComponent?: __React.ReactType;
/**
* Text to display when the value is empty.
*/
placeholder?: string;
/**
* The string value of the current search being typed into the DropdownList. When unset
* (undefined) the DropdownList will handle the filtering internally. The defaultSearchTerm
* prop can be used to set an initialization value for uncontrolled widgets. searchTerm is
* only relevant when the filter prop is set.
*/
searchTerm?: string;
/**
* Called when the value of the filter input changes either from typing or a pasted value.
* onSearch should be used when the searchTerm prop is set.
*/
onSearch?: (searchTerm: string) => void;
/**
* Whether or not the DropdownList is open. When unset (undefined) the DropdownList will
* handle the opening and closing internally. The defaultOpen prop can be used to set an
* initialization value for uncontrolled widgets.
*/
open?: boolean;
/**
* Called when the DropdownList is about to open or close. onToggle should be used when the
* open prop is set otherwise the widget open buttons won't work.
*/
onToggle?: (isOpen: boolean) => void;
/**
* Specify a filtering method used to reduce the items in the dropdown as you type.
* There are a few built-in filtering methods that can be specified by passing the String name.
* To handle custom filtering techniques provide a function that returns true or false
* for each passed in item (analogous to the array.filter builtin)
* @enum false "startsWith" "endsWith" "contains"
*/
filter?: boolean | "startsWith" | "endsWith" | "contains" | ((dataItem: any, str: string) => boolean);
/**
* Use in conjunction with the filter prop. Filter the list without regard for case. This
* only applies to non function values for filter
* @default false
*/
caseSensitive?: boolean;
/**
* Use in conjunction with the filter prop. Start filtering the list only after the value
* has reached a minimum length.
* @default 1
*/
minLength?: number;
/**
* Mark whether the widget is in a busy or loading state. If true the widget will display a
* spinner gif, useful when loading data via an ajax call.
* @default false
*/
busy?: boolean;
/**
* The speed, in milliseconds, of the dropdown animation.
* @default 250
*/
duration?: number;
/**
* Mark whether the widget should render right-to-left. This property can also be implicitly
* passed to the widget through a childContext prop (isRtl) this allows higher level
* application components to specify the direction.
*/
isRtl?: boolean;
/**
* Object hash containing display text and/or text for screen readers. Use the messages
* object to localize widget text and increase accessibility.
*/
messages?: DropdownListMessages;
}
interface DropdownListMessages {
/**
* Dropdown button text for screen readers.
* @default: "Open Dropdown"
*/
open?: string | ((props: DropdownListProps) => string);
/**
* The placeholder text for the filter input.
*/
filterPlaceholder?: string | ((props: DropdownListProps) => string);
/**
* Text to display when the data prop array is empty.
* @default: "There are no items in this list"
*/
emptyList?: string | ((props: DropdownListProps) => string);
/**
* Text to display when the the current filter does not return any results.
* @default: "The filter returned no results"
*/
emptyFilter?: string | ((props: DropdownListProps) => string);
}
interface DropdownList extends __React.ReactElement<DropdownListProps> {}
interface DropdownListClass extends __React.ComponentClass<DropdownListProps> {}
var DropdownList: DropdownListClass;
export = DropdownList;
}
declare module 'react-widgets' {
export import Calendar = require('react-widgets/lib/Calendar');
export import Combobox = require('react-widgets/lib/Combobox');
export import DateTimePicker = require('react-widgets/lib/DateTimePicker');
export import DropdownList = require('react-widgets/lib/DropdownList');
export import Multiselect = require('react-widgets/lib/Multiselect');
export import NumberPicker = require('react-widgets/lib/NumberPicker');
export import SelectList = require('react-widgets/lib/SelectList');
}
Reference in New Issue View Git Blame Copy Permalink