UNPKG

smart-webcomponents-react

Version:

[![Price](https://img.shields.io/badge/price-COMMERCIAL-00JS8f7.svg)](https://jqwidgets.com/license/)

154 lines (153 loc) 9.81 kB
import React from "react"; import { FilterPanelProperties } from "./../index"; import { Animation, FilterPanelFilterType, FilterPanelMode } from './../index'; export { FilterPanelProperties } from "./../index"; export { Animation, FilterPanelFilterType, FilterPanelMode } from './../index'; declare let Smart: any; export { Smart }; export interface FilterPanelProps extends FilterPanelProperties { className?: string; style?: React.CSSProperties; onCancel?: ((event?: Event) => void) | undefined; onClear?: ((event?: Event) => void) | undefined; onFilter?: ((event?: Event) => void) | undefined; onCreate?: ((event?: Event) => void) | undefined; onReady?: ((event?: Event) => void) | undefined; } /** The filter panel allows you to customize and display the applied filter expressions. */ export declare class FilterPanel extends React.Component<React.HTMLAttributes<Element> & FilterPanelProps, any> { private _id; private nativeElement; private componentRef; get id(): string; /** Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If assigned any other valid value, the corresponding animation mode is applied. Use this property to control whether animations are active or turned off for the element. * Property type: Animation | string */ get animation(): Animation | string; set animation(value: Animation | string); /** Specifies the set of operation buttons that will be displayed in the filter panel, allowing users to perform actions such as applying, resetting, or clearing filters. Adjusting this setting controls which interactive options are available to users directly within the filter interface. * Property type: string[] */ get buttons(): string[]; set buttons(value: string[]); /** An array in 'excel' mode that specifies the dataset used to extract unique filter values. The expected format is a JSON array of objects, where each object represents a data row with key-value pairs corresponding to column names and their respective values. For example:'''json[ { "name": "Alice", "age": 30 }, { "name": "Bob", "age": 25 }]'''Unique filter values will be derived from the property values within these objects. * Property type: number[] */ get data(): number[]; set data(value: number[]); /** Provides a detailed description of a data field that contains values resulting from the application of specific filter criteria, indicating that only data meeting those criteria are included in this field. * Property type: string */ get dataField(): string; set dataField(value: string); /** When the property is assigned an array, it specifies a custom set of filter values that will be displayed to the user, overriding the default filter list. If the property is assigned a callback function, it enables users to dynamically add their own filter values in addition to the default ones. In this latter case, you must also implement the evaluateFilterExpression function to handle evaluation of custom filters. Please note that the .dataSource property is only supported when mode is set to 'excel'. * Property type: any */ get dataSource(): any; set dataSource(value: any); /** Controls the visibility of the filter panel, allowing you to show or hide the panel as needed. * Property type: boolean */ get disabled(): boolean; set disabled(value: boolean); /** Callback function invoked during the filter panel operation, allowing developers to implement custom evaluation logic for filtering data. This function receives relevant data parameters and should return a boolean indicating whether an item meets the filter criteria. * Property type: any */ get evaluateFilterExpression(): any; set evaluateFilterExpression(value: any); /** Specifies the type of filter to be applied, determining how data will be sorted, displayed, or restricted based on the selected filter criteria. * Property type: FilterPanelFilterType | string */ get filterType(): FilterPanelFilterType | string; set filterType(value: FilterPanelFilterType | string); /** Specifies the date format pattern applied when the filterType is set to 'Date'. This string determines how date values are parsed and displayed within the filter, following standard date formatting conventions (e.g., 'YYYY-MM-DD'). * Property type: string */ get formatString(): string; set formatString(value: string); /** Gets or sets the unlockKey value used to activate and unlock access to the product’s features. The unlockKey is typically provided after purchase or authorization and is required to enable full product functionality. * Property type: string */ get unlockKey(): string; set unlockKey(value: string); /** Specifies or retrieves the current language setting. This property determines which language is used for displaying content and should be used together with the messages property to provide the appropriate localized messages for users. * Property type: string */ get locale(): string; set locale(value: string); /** Specifies the names of the fields included in the filtered element. This determines which properties or attributes of the element are returned after applying the filter criteria. * Property type: any */ get messages(): any; set messages(value: any); /** Defines the operational mode of the filter panel, specifying how the panel behaves or displays filters within the user interface. * Property type: FilterPanelMode | string */ get mode(): FilterPanelMode | string; set mode(value: FilterPanelMode | string); /** If the element is set to readonly, users can view its content but cannot modify, edit, or interact with the element’s value. However, the element can still receive focus and its content can be selected or copied. * Property type: boolean */ get readonly(): boolean; set readonly(value: boolean); /** Specifies the visual theme applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, to ensure a consistent look and feel across the interface. * Property type: string */ get theme(): string; set theme(value: string); /** When set to true, the element becomes unfocusable, meaning it cannot receive keyboard or mouse focus during user interaction or through JavaScript. * Property type: boolean */ get unfocusable(): boolean; set unfocusable(value: boolean); get properties(): string[]; /** This event is triggered when the user cancels or clears the current set of applied filters, discarding any active filtering criteria. * @param event. The custom event. */ onCancel?: ((event?: Event) => void) | undefined; /** This event is triggered whenever all active filtering criteria are removed, resulting in the display of the complete, unfiltered dataset. It occurs specifically when the user or application clears the current filters, resetting the view to its default state. * @param event. The custom event. */ onClear?: ((event?: Event) => void) | undefined; /** This event is triggered whenever the user applies new settings or changes to the filter panel. It occurs after the filter options have been selected and confirmed, signaling that the current filter criteria should be used to update displayed data or content accordingly. * @param event. The custom event. */ onFilter?: ((event?: Event) => void) | undefined; /** This event occurs, when the React component is created. * @param event. The custom event. */ onCreate?: ((event?: Event) => void) | undefined; /** This event occurs, when the React component is completely rendered. * @param event. The custom event. */ onReady?: ((event?: Event) => void) | undefined; get eventListeners(): string[]; /** Removes all active filters currently applied, returning the view to its unfiltered state and displaying the complete set of data. */ cancel(): void; /** Removes all active filters and displays the complete, unfiltered data set. */ clear(): void; /** Assesses the given filter condition by applying it to a specified dataset or input, and determines whether the data meets the criteria defined by the filter. Returns a boolean value indicating if the filter evaluates to true or false for the provided input. * @param {any} value. The evalueated element in filter panel. */ evaluate(value: any): void; /** Applies the currently selected filter criteria to update and display the relevant data set. */ filter(): void; /** Retrieves the current state of all active filters, including their selected values and configuration settings. This provides an overview of how data is being filtered at the present moment. * @returns {any} */ getState(): any; /** Restores a previously saved filter configuration, applying all selected filter options and criteria to return the interface to its earlier state. * @param {any} state. An object returned by the method getState. */ loadState(state: any): void; constructor(props: any); componentDidRender(initialize: boolean): void; componentDidMount(): void; componentDidUpdate(): void; componentWillUnmount(): void; render(): React.ReactElement<{ ref: any; suppressHydrationWarning: boolean; }, string | React.JSXElementConstructor<any>>; } export default FilterPanel;