File: util.d.ts

package info (click to toggle)
cockpit 355-1
  • links: PTS, VCS
  • area: main
  • in suites: forky
  • size: 311,568 kB
  • sloc: javascript: 774,787; python: 40,655; ansic: 35,157; cpp: 11,141; sh: 3,512; makefile: 580; xml: 261
file content (198 lines) | stat: -rw-r--r-- 8,883 bytes parent folder | download | duplicates (20)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
/**
 * @param {string} input - String to capitalize first letter
 */
export declare function capitalize(input: string): string;
/**
 * @param {string} prefix - String to prefix ID with
 */
export declare function getUniqueId(prefix?: string): string;
/**
 * @param { any } this - "This" reference
 * @param { Function } func - Function to debounce
 * @param { number } wait - Debounce amount
 */
export declare function debounce(this: any, func: (...args: any[]) => any, wait: number): (...args: any[]) => void;
/** This function returns whether or not an element is within the viewable area of a container. If partial is true,
 * then this function will return true even if only part of the element is in view.
 *
 * @param {HTMLElement} container  The container to check if the element is in view of.
 * @param {HTMLElement} element    The element to check if it is view
 * @param {boolean} partial   true if partial view is allowed
 * @param {boolean} strict    true if strict mode is set, never consider the container width and element width
 *
 * @returns { boolean } True if the component is in View.
 */
export declare function isElementInView(container: HTMLElement, element: HTMLElement, partial: boolean, strict?: boolean): boolean;
/** This function returns the side the element is out of view on (right, left or both)
 *
 * @param {HTMLElement} container    The container to check if the element is in view of.
 * @param {HTMLElement} element      The element to check if it is view
 *
 * @returns {string} right if the element is of the right, left if element is off the left or both if it is off on both sides.
 */
export declare function sideElementIsOutOfView(container: HTMLElement, element: HTMLElement): string;
/** Interpolates a parameterized templateString using values from a templateVars object.
 * The templateVars object should have keys and values which match the templateString's parameters.
 * Example:
 *    const templateString: 'My name is ${firstName} ${lastName}';
 *    const templateVars: {
 *      firstName: 'Jon'
 *      lastName: 'Dough'
 *    };
 *    const result = fillTemplate(templateString, templateVars);
 *    // "My name is Jon Dough"
 *
 * @param {string} templateString  The string passed by the consumer
 * @param {object} templateVars The variables passed to the string
 *
 * @returns {string} The template string literal result
 */
export declare function fillTemplate(templateString: string, templateVars: any): string;
/**
 * This function allows for keyboard navigation through dropdowns. The custom argument is optional.
 *
 * @param {number} index The index of the element you're on
 * @param {number} innerIndex Inner index number
 * @param {string} position The orientation of the dropdown
 * @param {string[]} refsCollection Array of refs to the items in the dropdown
 * @param {object[]} kids Array of items in the dropdown
 * @param {boolean} [custom] Allows for handling of flexible content
 */
export declare function keyHandler(index: number, innerIndex: number, position: string, refsCollection: any[], kids: any[], custom?: boolean): void;
/** This function returns a list of tabbable items in a container
 *
 *  @param {any} containerRef to the container
 *  @param {string} tababbleSelectors CSS selector string of tabbable items
 */
export declare function findTabbableElements(containerRef: any, tababbleSelectors: string): any[];
/** This function is a helper for keyboard navigation through dropdowns.
 *
 * @param {number} index The index of the element you're on
 * @param {string} position The orientation of the dropdown
 * @param {string[]} collection Array of refs to the items in the dropdown
 */
export declare function getNextIndex(index: number, position: string, collection: any[]): number;
/** This function is a helper for pluralizing strings.
 *
 * @param {number} i The quantity of the string you want to pluralize
 * @param {string} singular The singular version of the string
 * @param {string} plural The change to the string that should occur if the quantity is not equal to 1.
 *                 Defaults to adding an 's'.
 */
export declare function pluralize(i: number, singular: string, plural?: string): string;
/**
 * This function is a helper for turning arrays of breakpointMod objects for flex and grid into style object
 *
 * @param {object} mods The modifiers object
 * @param {string} css-variable The appropriate css variable for the component
 */
export declare const setBreakpointCssVars: (mods: {
    default?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
    '3xl'?: string;
}, cssVar: string) => React.CSSProperties;
export interface Mods {
    default?: string;
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
    '2xl'?: string;
    '3xl'?: string;
    '4xl'?: string;
}
/**
 * This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
 *
 * @param {object} mods The modifiers object
 * @param {any} styles The appropriate styles object for the component
 */
export declare const formatBreakpointMods: (mods: Mods, styles: any, stylePrefix?: string, breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', vertical?: boolean) => any;
/**
 * Return the breakpoint for the given height
 *
 * @param {number | null} height The height to check
 * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
 */
export declare const getVerticalBreakpoint: (height: number) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/**
 * Return the breakpoint for the given width
 *
 * @param {number | null} width The width to check
 * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
 */
export declare const getBreakpoint: (width: number) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/**
 *
 * @param {string} s string to make camelCased
 */
export declare const toCamel: (s: string) => string;
/**
 * Copied from exenv
 */
export declare const canUseDOM: boolean;
/**
 * Calculate the width of the text
 * Example:
 * getTextWidth('my text', node)
 *
 * @param {string} text The text to calculate the width for
 * @param {HTMLElement} node The HTML element
 */
export declare const getTextWidth: (text: string, node: HTMLElement) => number;
/**
 * Get the inner dimensions of an element
 *
 * @param {HTMLElement} node HTML element to calculate the inner dimensions for
 */
export declare const innerDimensions: (node: HTMLElement) => {
    height: number;
    width: number;
};
/**
 * This function is a helper for truncating text content on the left, leaving the right side of the content in view
 *
 * @param {HTMLElement} node HTML element
 * @param {string} value The original text value
 */
export declare const trimLeft: (node: HTMLElement, value: string) => void;
/**
 * @param {string[]} events - Operations to prevent when disabled
 */
export declare const preventedEvents: (events: string[]) => {};
/**
 * @param {React.RefObject<any>[]} timeoutRefs - Timeout refs to clear
 */
export declare const clearTimeouts: (timeoutRefs: React.RefObject<any>[]) => void;
/**
 * Helper function to get the language direction of a given element, useful for figuring out if left-to-right
 * or right-to-left specific logic should be applied.
 *
 * @param {HTMLElement} targetElement  - Element the helper will get the language direction of
 * @param {'ltr' | 'rtl'} defaultDirection - Language direction to assume if one can't be determined, defaults to 'ltr'
 * @returns {'ltr' | 'rtl'} - The language direction of the target element
 */
export declare const getLanguageDirection: (targetElement: HTMLElement, defaultDirection?: 'ltr' | 'rtl') => "ltr" | "rtl";
/**
 * Gets a reference element based on a ref property, which can typically be 1 of several types.
 *
 * @param {HTMLElement | (() => HTMLElement) | React.RefObject<any>} refProp The ref property to get a reference element from.
 * @returns The reference element if one is found.
 */
export declare const getReferenceElement: (refProp: HTMLElement | (() => HTMLElement) | React.RefObject<any>) => any;
/**
 * Gets the [client|offset|scroll]Left property of an element, and determines whether it needs to be
 * adjusted for an RTL direction.
 *
 * @param {HTMLElement} targetElement  - Element to get the inline-start property of.
 * @param {HTMLElement} ancestorElement - Ancestor element to base the inline-start calculation off of when the direction is RTL.
 * @param {'client' | 'offset' | 'scroll'} inlineType - The inline-start property type to base calculations on.
 * @returns {number} - The value of the inline-start property.
 */
export declare const getInlineStartProperty: (targetElement: HTMLElement, ancestorElement: HTMLElement, inlineType?: 'client' | 'offset' | 'scroll') => number;
//# sourceMappingURL=util.d.ts.map