@kit-data-manager/react-search-component
Version:
All-in-one component for rendering an elastic search UI for searching anything. Built-in support for visualizing related items in a graph and resolving unique identifiers.
83 lines (82 loc) • 3.99 kB
TypeScript
import { SearchFieldConfiguration } from "@elastic/search-ui";
import { GenericResultViewTagProps } from "../../components/result/GenericResultViewTag";
export interface GenericResultViewProps {
/**
* Search result that will be rendered in this view. Will be provided by ReactSearchComponent
*/
result: Record<string, unknown>;
/**
* The elastic field where the title of the card will be read from
*/
titleField?: string;
/**
* The elastic field where the description of the card will be read from
*/
descriptionField?: string;
/**
* The elastic field where the image of the card will be read from. Will directly be passed to the `src` attribute of an `img` tag
*/
imageField?: string;
/**
* Enable this option to invert the image on dark mode. This is useful for greyscale schematics.
*/
invertImageInDarkMode?: boolean;
/**
* The elastic field where the digital object location (the target page of the `Open` button) will be read from
*/
digitalObjectLocationField?: string;
/**
* The elastic field where the landing page location will be read from
*/
landingPageLocationField?: string;
/**
* The elastic field where the PID of the current result will be read from. Can be omitted if you don't have a PID
*/
pidField?: string;
/**
* The elastic field where the unique identifier of the child item(s) of the current result will be read from. Should be an array of PIDs or otherwise unique identifiers. Will be displayed in a related items graph.
*/
childItemPidField?: string;
/**
* Options for prefetching of related items in the relations graph. It is recommended to define this if the default settings don't work properly.
* @default Value of pidField
* @example
* relatedItemsPrefetch={{ searchFields: { pid: {} } }}
*/
relatedItemsPrefetchOptions?: {
searchFields?: Record<string, SearchFieldConfiguration>;
};
/**
* The elastic field where the unique identifier of the parent item(s) of the current result will be read from. Should be an array of PIDs or otherwise unique identifiers. Will be displayed in a related items graph.
*/
parentItemPidField?: string;
/**
* The elastic field where the creation date of the result will be read from. Will be parsed as an ISO Date.
*/
creationDateField?: string;
/**
* The elastic field where the edited date of the result will be read from. Will be parsed as an ISO Date.
*/
editedDateField?: string;
/**
* The elastic field where an additional identifier will be read from. You don't need to provide this if you don't have any additional identifiers apart from the PID.
*/
additionalIdentifierField?: string;
/**
* Define custom tags to display on the card. Each tag displays the information from one field.
*/
tags?: Omit<GenericResultViewTagProps, "result">[];
/**
* Whether to show the open in FairDOScope button in the dropdown. Useful if this result entry is an FDO
*/
showOpenInFairDoScope?: boolean;
/**
* Whether to show the Inspect FDO button in the dropdown. Useful if this result entry is an FDO
*/
showInspectFDO?: boolean;
}
/**
* Configurable result view component that can be customized for specific use cases. Will display a card for each search result from elastic. If this component
* doesn't fit your needs, feel free to implement your own result view.
*/
export declare function GenericResultView({ result, titleField, descriptionField, imageField, invertImageInDarkMode, landingPageLocationField, digitalObjectLocationField, pidField, childItemPidField, parentItemPidField, creationDateField, editedDateField, additionalIdentifierField, relatedItemsPrefetchOptions, tags, showOpenInFairDoScope, showInspectFDO }: GenericResultViewProps): import("react/jsx-runtime").JSX.Element;