vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-12 04:50:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added missing prop for the multi select component

Browse Source
This commit is contained in:
végtelenség
2019-03-05 13:17:02 +02:00
parent caceb08513
commit 15e163aef6
2 changed files with 139 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/react-widgets/lib/Multiselect.d.ts
Vendored
+41 -20
View File
@@ -1,12 +1,14 @@
import * as React from 'react';
import { ReactWidgetsCommonDropdownProps, AutoFocus } from './CommonProps';
import * as React from "react";
import { ReactWidgetsCommonDropdownProps, AutoFocus } from "./CommonProps";
interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectClass>, AutoFocus {
interface MultiselectProps
extends ReactWidgetsCommonDropdownProps<MultiselectClass>,
AutoFocus {
/**
* Enables the list option creation UI. onFilter will only the UI when actively filtering for a list item.
* @default 'onFilter'
*/
allowCreate?: boolean | 'onFilter';
allowCreate?: boolean | "onFilter";
/**
* 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)
@@ -20,20 +22,26 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
* Change event Handler that is called when the value is changed. The handler is called with
* an array of values.
*/
onChange?: (dataItems: any[], metadata: {
dataItem: any;
action: 'insert' | 'remove';
originalEvent?: any;
lastValue?: any[];
searchTerm?: string;
}) => void;
onChange?: (
dataItems: any[],
metadata: {
dataItem: any;
action: "insert" | "remove";
originalEvent?: any;
lastValue?: any[];
searchTerm?: string;
}
) => 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, metadata: {
originalEvent: any;
}) => void;
onSelect?: (
value: any,
metadata: {
originalEvent: 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
@@ -100,11 +108,14 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
* 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, metadata: {
action: 'clear' | 'input';
lastSearchTerm?: string;
originalEvent?: any;
}) => void;
onSearch?: (
searchTerm: string,
metadata: {
action: "clear" | "input";
lastSearchTerm?: string;
originalEvent?: any;
}
) => 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
@@ -124,7 +135,12 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
* item (analogous to the array.filter builtin)
* @default startsWith
*/
filter?: false | "startsWith" | "endsWith" | "contains" | ((dataItem: any, searchTerm: string) => boolean);
filter?:
| false
| "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.
@@ -167,6 +183,11 @@ interface MultiselectProps extends ReactWidgetsCommonDropdownProps<MultiselectCl
* The transition component is also injected with a dropUp prop indicating the direction it should open.
*/
popupTransition?: React.ReactType | string;
/**
* Adds a css class to the input container element.
*/
containerClassName?: string;
}
interface MultiselectMessages {
types/react-widgets/react-widgets-tests.tsx
+98 -98
View File
@@ -1,7 +1,15 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Calendar, Combobox, DateTimePicker, DropdownList, Multiselect, NumberPicker, SelectList } from "react-widgets";
import {
Calendar,
Combobox,
DateTimePicker,
DropdownList,
Multiselect,
NumberPicker,
SelectList
} from "react-widgets";
function tagComponent(props: { value: string }) {
return <span>{props.value}</span>;
@@ -18,105 +26,97 @@ function listComponent(props: { value: string }) {
class Test extends React.Component<React.Props<{}>> {
render() {
return (
<div>
<div>
<Calendar />
<Combobox />
<DateTimePicker />
<DropdownList />
<Multiselect />
<NumberPicker />
<SelectList />
<div>
<Calendar />
<Combobox />
<DateTimePicker />
<DropdownList />
<Multiselect />
<NumberPicker />
<SelectList />
</div>
<div>
<Calendar defaultValue={new Date()} />
<Combobox defaultValue={"foo"} />
<DateTimePicker defaultValue={new Date()} />
<DropdownList defaultValue={"foo"} />
<Multiselect defaultValue={["foo"]} />
<NumberPicker defaultValue={1} />
<SelectList defaultValue={"foo"} />
</div>
<div>
<Multiselect
tagComponent={tagComponent}
itemComponent={itemComponent}
/>
<Combobox
itemComponent={itemComponent}
listComponent={listComponent}
/>
<DropdownList
itemComponent={itemComponent}
listComponent={listComponent}
/>
<Multiselect listComponent={listComponent} />
<SelectList listComponent={listComponent} />
</div>
<div>
<Calendar disabled readOnly />
<Combobox
disabled
readOnly
dropUp
placeholder={"Some text"}
/>
<DateTimePicker disabled readOnly dropUp />
<DropdownList disabled readOnly dropUp />
<Multiselect disabled readOnly dropUp />
<NumberPicker disabled readOnly />
<SelectList disabled readOnly />
</div>
<div>
<Calendar
autoFocus
defaultValue={new Date()}
defaultView="year"
views={["year", "decade"]}
/>
<Combobox autoFocus delay={300} name="box" />
<Combobox
busy
busySpinner={<span className="fas fa-sync fa-spin" />}
/>
<DateTimePicker autoFocus open="date" />
<DropdownList
autoFocus
delay={350}
name="list"
multiple={false}
/>
<DropdownList containerClassName="list-items" />
<Multiselect autoFocus allowCreate />
<Multiselect containerClassName="multiselect-container" />
<NumberPicker
autoFocus
name="numbers"
placeholder="hello"
/>
<SelectList
autoFocus
delay={400}
tabIndex={-1}
name="list"
/>
</div>
<div>
<DateTimePicker
dropUp={true}
containerClassName="d-flex"
timeIcon={<i className="fa fa-clock" />}
/>
</div>
</div>
<div>
<Calendar defaultValue={new Date()} />
<Combobox defaultValue={'foo'} />
<DateTimePicker defaultValue={new Date()} />
<DropdownList defaultValue={'foo'} />
<Multiselect defaultValue={['foo']} />
<NumberPicker defaultValue={1}/>
<SelectList defaultValue={'foo'} />
</div>
<div>
<Multiselect
tagComponent={tagComponent}
itemComponent={itemComponent}
/>
<Combobox
itemComponent={itemComponent}
listComponent={listComponent}
/>
<DropdownList
itemComponent={itemComponent}
listComponent={listComponent}
/>
<Multiselect
listComponent={listComponent}
/>
<SelectList
listComponent={listComponent}
/>
</div>
<div>
<Calendar disabled readOnly />
<Combobox disabled readOnly dropUp placeholder={'Some text'}/>
<DateTimePicker disabled readOnly dropUp />
<DropdownList disabled readOnly dropUp />
<Multiselect disabled readOnly dropUp />
<NumberPicker disabled readOnly />
<SelectList disabled readOnly />
</div>
<div>
<Calendar
autoFocus
defaultValue={new Date()}
defaultView="year"
views={['year', 'decade']}
/>
<Combobox
autoFocus
delay={300}
name="box"
/>
<Combobox
busy
busySpinner={
<span className="fas fa-sync fa-spin" />
}
/>
<DateTimePicker
autoFocus
open="date"
/>
<DropdownList
autoFocus
delay={350}
name="list"
multiple={false}
/>
<DropdownList
containerClassName="list-items"
/>
<Multiselect
autoFocus
allowCreate
/>
<NumberPicker
autoFocus
name="numbers"
placeholder="hello"
/>
<SelectList
autoFocus
delay={400}
tabIndex={-1}
name="list"
/>
</div>
<div>
<DateTimePicker dropUp={true} containerClassName="d-flex" timeIcon={<i className="fa fa-clock" />} />
</div>
</div>
);
}
}