mirror of https://github.com/ColorlibHQ/AdminLTE
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.3 KiB
99 lines
3.3 KiB
5 years ago
|
import { Dictionary } from './types/interfaces/Dictionary';
|
||
|
import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
|
||
|
export interface Position {
|
||
|
left: number;
|
||
|
top: number;
|
||
|
}
|
||
|
/**
|
||
|
* Resembles an item in the grid of Filterizr.
|
||
|
*/
|
||
|
export default class FilterItem {
|
||
|
node: Element;
|
||
|
options: FilterizrOptions;
|
||
|
dimensions: {
|
||
|
width: number;
|
||
|
height: number;
|
||
|
};
|
||
|
private data;
|
||
|
private sortData;
|
||
|
private index;
|
||
|
private filteredOut;
|
||
|
private lastPosition;
|
||
|
private onTransitionEndHandler;
|
||
|
constructor(node: Element, index: number, options: FilterizrOptions);
|
||
|
/**
|
||
|
* Destroys the FilterItem instance
|
||
|
*/
|
||
|
destroy(): void;
|
||
|
/**
|
||
|
* Filters in a specific FilterItem out of the grid.
|
||
|
* @param targetPosition the position towards which the element should animate
|
||
|
* @param cssOptions for the animation
|
||
|
*/
|
||
|
filterIn(targetPosition: Position, cssOptions: Dictionary): void;
|
||
|
/**
|
||
|
* Filters out a specific FilterItem out of the grid.
|
||
|
* @param cssOptions for the animation
|
||
|
*/
|
||
|
filterOut(cssOptions: Dictionary): void;
|
||
|
/**
|
||
|
* Helper method to calculate the animation delay for a given grid item
|
||
|
* @param delay in ms
|
||
|
* @param delayMode can be 'alternate' or 'progressive'
|
||
|
*/
|
||
|
getTransitionDelay(delay: number, delayMode: 'progressive' | 'alternate'): number;
|
||
|
/**
|
||
|
* Returns true if the text contents of the FilterItem match the search term
|
||
|
* @param searchTerm to look up
|
||
|
* @return if the innerText matches the term
|
||
|
*/
|
||
|
contentsMatchSearch(searchTerm: string): boolean;
|
||
|
/**
|
||
|
* Recalculates the dimensions of the element and updates them in the state
|
||
|
*/
|
||
|
updateDimensions(): void;
|
||
|
/**
|
||
|
* Returns all categories of the grid items data-category attribute
|
||
|
* with a regexp regarding all whitespace.
|
||
|
* @return {String[]} an array of the categories the item belongs to
|
||
|
*/
|
||
|
getCategories(): string[];
|
||
|
/**
|
||
|
* Returns the value of the sort attribute
|
||
|
* @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
|
||
|
*/
|
||
|
getSortAttribute(sortAttribute: string): string | number;
|
||
|
/**
|
||
|
* Helper method for the search method of Filterizr
|
||
|
* @return {String} innerText of the FilterItem in lowercase
|
||
|
*/
|
||
|
private getContentsLowercase;
|
||
|
/**
|
||
|
* Sets up the events related to the FilterItem instance
|
||
|
*/
|
||
|
private bindEvents;
|
||
|
/**
|
||
|
* Removes all events related to the FilterItem instance
|
||
|
*/
|
||
|
private unbindEvents;
|
||
|
/**
|
||
|
* Calculates and returns the transition css property based on options.
|
||
|
*/
|
||
|
private getTransitionStyle;
|
||
|
/**
|
||
|
* Sets the transition css property as an inline style on the FilterItem.
|
||
|
*
|
||
|
* The idea here is that during the very first render items should assume
|
||
|
* their positions directly.
|
||
|
*
|
||
|
* Following renders should actually trigger the transitions, which is why
|
||
|
* we need to delay setting the transition property.
|
||
|
*
|
||
|
* Unfortunately, JavaScript code executes on the same thread as the
|
||
|
* browser's rendering. Everything that needs to be drawn waits for
|
||
|
* JavaScript execution to complete. Thus, we need to use a setTimeout
|
||
|
* here to defer setting the transition style at the first rendering cycle.
|
||
|
*/
|
||
|
private setTransitionStyle;
|
||
|
}
|