diff --git a/src/index.d.ts b/src/index.d.ts index 28a551e460..440b36b6da 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -26,7 +26,6 @@ export type SemanticWIDTHS = SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING; export type SemanticGenericOnClick = (event: any, value: any) => void; export type SemanticFormOnClick = (event: any, object: Object) => void; -export type SemanticSearchOnClick = (event: any, value: any, text: string) => void; // TODO - not sure if this is correct. // ====================================================== // Events diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js index 7bb01b8ead..3925ec3466 100644 --- a/src/modules/Search/Search.js +++ b/src/modules/Search/Search.js @@ -17,7 +17,6 @@ import { useValueAndKey, } from '../../lib' import Input from '../../elements/Input' - import SearchCategory from './SearchCategory' import SearchResult from './SearchResult' import SearchResults from './SearchResults' @@ -48,6 +47,15 @@ export default class Search extends Component { PropTypes.object, ]), + /** Minimum characters to query for results */ + minCharacters: PropTypes.number, + + /** Additional text for "No Results" message with less emphasis. */ + noResultsDescription: PropTypes.string, + + /** Message to display when there are no results. */ + noResultsMessage: PropTypes.string, + /** Controls whether or not the results menu is displayed. */ open: PropTypes.bool, @@ -64,16 +72,7 @@ export default class Search extends Component { PropTypes.object, ]), - /** Minimum characters to query for results */ - minCharacters: PropTypes.number, - - /** Additional text for "No Results" message with less emphasis. */ - noResultsDescription: PropTypes.string, - - /** Message to display when there are no results. */ - noResultsMessage: PropTypes.string, - - /** Whether the search should automatically select the first result after searching */ + /** Whether the search should automatically select the first result after searching. */ selectFirstResult: PropTypes.bool, /** Whether a "no results" message should be shown if no results are found. */ diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js index 61b72d4a57..650595afb0 100644 --- a/src/modules/Search/SearchCategory.js +++ b/src/modules/Search/SearchCategory.js @@ -59,7 +59,7 @@ SearchCategory.propTypes = { */ renderer: PropTypes.func, - /** Array of Search.Result props */ + /** Array of Search.Result props. */ results: PropTypes.array, } diff --git a/src/modules/Search/index.d.ts b/src/modules/Search/index.d.ts index 83b2d30b06..e56de1af92 100644 --- a/src/modules/Search/index.d.ts +++ b/src/modules/Search/index.d.ts @@ -1,189 +1,234 @@ -import { ReactFocusEvents, ReactFormEvents, ReactMouseEvents, SemanticSearchOnClick, SemanticSIZES } from '../..'; import * as React from 'react'; +interface SearchProps { + [key: string]: any; + + /** An element type to render as (string or function). */ + as?: any; + + // ------------------------------------ + // Behavior + // ------------------------------------ + + /** Initial value of open. */ + defaultOpen?: boolean; + + /** Initial value. */ + defaultValue?: string; + + /** Shorthand for Icon. */ + icon?: any; + + /** Minimum characters to query for results. */ + minCharacters?: number; + + /** Additional text for "No Results" message with less emphasis. */ + noResultsDescription?: string; + + /** Message to display when there are no results. */ + noResultsMessage?: string; + + /** Controls whether or not the results menu is displayed. */ + open?: boolean; + + /** Placeholder of the search input. */ + placeholder?: string; + + /** + * One of: + * - array of Search.Result props e.g. `{ title: '', description: '' }` or + * - object of categories e.g. `{ name: '', results: [{ title: '', description: '' }]` + */ + results?: Array | Object; + + /** Whether the search should automatically select the first result after searching. */ + selectFirstResult?: boolean; + + /** Whether a "no results" message should be shown if no results are found. */ + showNoResults?: boolean; + + /** Current value of the search input. Creates a controlled component. */ + value?: string; + + // ------------------------------------ + // Rendering + // ------------------------------------ + + /** + * A function that returns the category contents. + * Receives all SearchCategory props. + */ + categoryRenderer?: (props: SearchCategoryProps) => React.ReactElement; + + /** + * A function that returns the result contents. + * Receives all SearchResult props. + */ + resultRenderer?: (props: SearchResultProps) => Array>; + + // ------------------------------------ + // Callbacks + // ------------------------------------ + + /** + * Called on blur. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onBlur: (event: React.MouseEvent, data: SearchProps) => void; + + /** + * Called on focus. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onFocus: (event: React.MouseEvent, data: SearchProps) => void; + + /** + * Called on mousedown. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onMouseDown: (event: React.MouseEvent, data: SearchProps) => void; + + /** + * Called when a result is selected. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onResultSelect: (event: React.MouseEvent, data: SearchResultProps) => void; + + /** + * Called on search input change. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {string} value - Current value of search input. + */ + onSearchChange: (event: React.MouseEvent, value: string) => void; + + // ------------------------------------ + // Style + // ------------------------------------ + + /** A search can have its results aligned to its left or right container edge. */ + aligned?: string; + + /** A search can display results from remote content ordered by categories. */ + category?: boolean; + + /** Additional classes. */ + className?: string; + + /** A search can have its results take up the width of its container. */ + fluid?: boolean; + + /** A search input can take up the width of its container. */ + input: any; + + /** A search can show a loading indicator. */ + loading?: boolean; + + /** A search can have different sizes. */ + size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'; +} -interface SearchProps extends ReactMouseEvents, ReactFocusEvents, ReactFormEvents { - - /** A search can have its results aligned to its left or right container edge. */ - aligned?: string; - - /** An element type to render as (string or function). */ - as?: any; - - /** A search can display results from remote content ordered by categories. */ - category?: boolean; - - /** - * A function that returns the category contents. - * Receives all SearchCategory props. - */ - categoryRenderer?: () => void; // TODO : fix; - - /** Additional classes. */ - className?: string; - - /** Initial value of open. */ - defaultOpen?: boolean; - - /** Initial value. */ - defaultValue?: string; - - /** A search can have its results take up the width of its container. */ - fluid?: boolean; - - /** Shorthand for Icon. */ - icon?: any; - - /** A search can show a loading indicator. */ - loading?: boolean; - - /** Minimum characters to query for results */ - minCharacters?: number; - - /** Additional text for "No Results" message with less emphasis. */ - noResultsDescription?: string; - - /** Message to display when there are no results. */ - noResultsMessage?: string; - - /** - * Called when a result is selected. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ - onResultSelect: (e: React.FormEvent, result: Array | Object) => void; - - /** - * Called on search input change. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {string} value - Current value of search input. - */ - onSearchChange?: React.FormEventHandler; - - /** Controls whether or not the results menu is displayed. */ - open?: boolean; +interface SearchComponent extends React.ComponentClass { + Category: typeof SearchCategory; + Result: typeof SearchResult; + Results: typeof SearchResults; +} - /** Placeholder of the search input. */ - placeholder?: string; +export const Search: SearchComponent; - /** - * A function that returns the result contents. - * Receives all SearchResult props. - */ - resultRenderer?: () => void; // TODO: fix. +interface SearchCategoryProps { + [key: string]: any; - /** - * One of: - * - array of Search.Result props e.g. `{ title: '', description: '' }` or - * - object of categories e.g. `{ name: '', results: [{ title: '', description: '' }]` - */ - results?: Array | Object; + /** An element type to render as (string or function). */ + as?: any; - /** Whether the search should automatically select the first result after searching */ - selectFirstResult?: boolean; + /** The item currently selected by keyboard shortcut. */ + active?: boolean; - /** Whether a "no results" message should be shown if no results are found. */ - showNoResults?: boolean; + /** Primary content. */ + children?: React.ReactNode; - /** A search can have different sizes. */ - size?: SemanticSIZES; + /** Additional classes. */ + className?: string; - /** Current value of the search input. Creates a controlled component. */ - value?: string; -} + /** Display name. */ + name?: string; -interface SearchClass extends React.ComponentClass { - SearchResult: typeof SearchResult; - SearchResults: typeof SearchResults; + /** + * A function that returns the category contents. + * Receives all SearchCategory props. + */ + renderer?: (props: SearchCategoryProps) => React.ReactElement; + /** Array of Search.Result props. */ + results?: Array; } -export const Search: SearchClass; +export const SearchCategory: React.StatelessComponent; interface SearchResultProps { + [key: string]: any; - /** The item currently selected by keyboard shortcut. */ - active?: boolean; + /** An element type to render as (string or function). */ + as?: any; - /** An element type to render as (string or function). */ - as?: any; + /** The item currently selected by keyboard shortcut. */ + active?: boolean; - /** Additional classes. */ - className?: string; + /** Additional classes. */ + className?: string; - /** Additional text with less emphasis. */ - description?: string; + /** Additional text with less emphasis. */ + description?: string; - /** A unique identifier. */ - id?: number; + /** A unique identifier. */ + id?: number; - /** Add an image to the item. */ - image?: string; + /** Add an image to the item. */ + image?: string; - /** - * Called on click. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ - onClick?: SemanticSearchOnClick; + /** + * Called on click. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onClick?: (event: React.MouseEvent, data: SearchResultProps) => void; - /** Customized text for price. */ - price?: string; + /** Customized text for price. */ + price?: string; - /** - * A function that returns the result contents. - * Receives all SearchResult props. - */ - renderer?: () => void; // TODO - fix; + /** + * A function that returns the result contents. + * Receives all SearchResult props. + */ + renderer?: (props: SearchResultProps) => Array>; - /** Display title. */ - title?: string; + /** Display title. */ + title?: string; } export const SearchResult: React.ComponentClass; interface SearchResultsProps { + [key: string]: any; - /** An element type to render as (string or function). */ - as?: any; - - /** Primary content. */ - children?: React.ReactNode; - - /** Additional classes. */ - className?: string; -} - -export const SearchResults: React.ComponentClass; - -interface SearchCategoryProps { - - /** The item currently selected by keyboard shortcut. */ - active?: boolean; - - /** An element type to render as (string or function). */ - as?: any; - - /** Primary content. */ - children?: React.ReactNode; - - /** Additional classes. */ - className?: string; - - /** Display name. */ - name?: string; + /** An element type to render as (string or function). */ + as?: any; - /** - * A function that returns the category contents. - * Receives all SearchCategory props. - */ - renderer?: () => void; // TODO - fix; + /** Primary content. */ + children?: React.ReactNode; - /** Array of Search.Result props */ - results?: Array; + /** Additional classes. */ + className?: string; } -export const SearchCategory: React.ComponentClass; +export const SearchResults: React.StatelessComponent;