@types for typescript

[bturner1273]

just wondering if this is something you might consider. I have one I use locally which you can feel free to use, there are just a few types I couldn't fully flesh out from the docs so I set them to any.

react-dropdown-tree-select.d.ts:

declare type DropdownTreeSelectData = {
    label: string;                          // required: Checkbox label
    value: any;                             // required: Checkbox value
    children?: DropdownTreeSelectData[];    // optional: Array of child objects
    checked?: boolean;                      // optional: Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered
    disabled?: boolean;                     // optional: Selectable state of checkbox. if true, the checkbox is disabled and the node is not selectable
    expanded?: boolean;                     // optional: If true, the node is expanded (children of children nodes are not expanded by default unless children nodes also have expanded: true).
    className?: string;                     // optional: Additional css class for the node. This is helpful to style the nodes your way
    tagClassName?: string;                  // optional: Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node
    actions?: DropdownTreeSelectAction[];   // optional: An array of extra action on the node (such as displaying an info icon or any custom icons/elements)
    dataset?: any;                          // optional: Allows data-* attributes to be set on the node and tag elements
    isDefaultValue?: boolean;               // optional: Indicate if a node is a default value. When true, the dropdown will automatically select the node(s) when there is no other selected node. Can be used on more than one node.
    tagLabel?: string;                      // optional: tag label in case you need it to differ from the checkbox label
    [key: string]: any;                     // optional: Any extra properties that you'd like to receive during `onChange` event
}

declare type DropdownTreeSelectAction = {
    className: string;          // required: CSS class for the node. e.g. `fa fa-info`
    title?: string;             // optional: HTML tooltip text
    text?: string;              // optional: Any text to be displayed. This is helpful to pass ligatures if you're using ligature fonts
    [key: string]: any;         // optional: Any extra properties that you'd like to receive during `onChange` event
}

declare type DropdownTreeSelectTexts = {
    placeholder?: string;              // optional: The text to display as placeholder on the search box. Defaults to `Choose...`
    inlineSearchPlaceholder?: string;  // optional: The text to display as placeholder on the inline search box. Only applicable with the `inlineSearchInput` setting. Defaults to `Search...`
    noMatches?: string;                // optional: The text to display when the search does not find results in the content list. Defaults to `No matches found`
    label?: string;                    // optional: Adds `aria-labelledby` to search input when input starts with `#`, adds `aria-label` to search input when label has value (not containing '#')
    labelRemove?: string;              // optional: The text to display for `aria-label` on tag delete buttons which is combined with `aria-labelledby` pointing to the node label. Defaults to `Remove`
}

declare type DropdownTreeSelectProps = {
    className?: string;                                                                             // Additional classname for container. The container renders with a default classname of react-dropdown-tree-select
    clearSearchOnChange?: boolean;                                                                  // Clear the input search if a node has been selected/unselected
    onChange?(currentNode: DropdownTreeSelectData, selectedNodes: DropdownTreeSelectData[]): void;  // Fires when a node change event occurs
    onNodeToggle?(currentNode: DropdownTreeSelectData): void;                                       // Fires when a node is expanded or collapsed
    onAction?(node: DropdownTreeSelectData, action: DropdownTreeSelectAction): void;                // Fires when a action is triggered
    onFocus?(evt: any): void;                                                                       // Fires when input box receives focus or the dropdown arrow is clicked. This is helpful for setting dirty or touched flags with forms
    onBlur?(evt: any): void;                                                                        // Fires when input box loses focus or the dropdown arrow is clicked again (and the dropdown collapses). This is helpful for setting dirty or touched flags with forms
    data: DropdownTreeSelectData | DropdownTreeSelectData[];                                        // Data for rendering the tree select items
    texts?: DropdownTreeSelectTexts;                                                                 // Texts to override various labels, place holders & messages used in the component. You can also use this to provide translated messages
    keepTreeOnSearch?: boolean;                                                                     // Displays search results as a tree instead of flattened results
    keepChildrenOnSearch?: boolean;                                                                 // Displays children of found nodes to allow searching for a parent node on then selecting any child node of the found node. Defaults to false
    keepOpenOnSelect?: boolean;                                                                     // Keeps single selects open after selection. Defaults to false. This only works in combination with simpleSelect or radioSelect
    mode?: string;                                                                                  // Defines how the dropdown is rendered / behaves. Options: (defualt)multiSelect, hierarchical, simpleSelect, radioSelect
    showPartiallySelected?: boolean;                                                                // If set to true, shows checkboxes in a partial state when one, but not all of their children are selected. Allows styling of partially selected nodes as well, by using :indeterminate pseudo class. Simply add desired styles to .node.partial .checkbox-item:indeterminate { ... } in your CSS
    showDropdown?: string;                                                                          // Let's you choose the rendered state of the dropdown. Options: initial, always
    disabled?: boolean;                                                                             // Disables the dropdown completely. This is useful during form submit events
    readonly?: boolean;                                                                             // Makes the dropdown read only, which means that the user can still interact with it but cannot change any of its values
    id?: string;                                                                                    // Specific id for container. The container renders with a default id of rdtsN where N is the count of the current component rendered
    searchPredicate?(node: DropdownTreeSelectData, searchTerm: any): void;                          // Optional search predicate to override the default case insensitive contains match on node labels
    inlineSearchInput?: boolean;                                                                    // Makes the search input renders inside the dropdown-content
    tabIndex?: number;                                                                              // attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation
}

Edit: I can't say I really know the intricacies of creating the @types/react-dropdown-tree-select and whether you would need to drastically change anything in the lib itself to support the types but I am happy to contribute if there is any extra help needed

[bturner1273]

Nevermind I saw you have this file in dist. However I still had to declare the library as a module in global.d.ts. Any suggestions on using your .d.ts file properly?

[mrchief]

I don't think you need to do anything other than npm install. If you see this file in the dist folder locally, then typescript should be able to find the types.

[bturner1273]

Ahh okey dokey I must have it configured wrong/looking in the wrong place for types thank you!