1 | import * as React from 'react';
|
2 | import type { IStyle, ITheme } from '../../Styling';
|
3 | import type { IStyleFunctionOrObject } from '../../Utilities';
|
4 | /**
|
5 | * Shimmer component props.
|
6 | * {@docCategory Shimmer}
|
7 | */
|
8 | export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
|
9 | /**
|
10 | * Sets the width value of the shimmer wave wrapper.
|
11 | * @defaultvalue 100%
|
12 | */
|
13 | width?: number | string;
|
14 | /**
|
15 | * Controls when the shimmer is swapped with actual data through an animated transition.
|
16 | * @defaultvalue false
|
17 | */
|
18 | isDataLoaded?: boolean;
|
19 | /**
|
20 | * Elements to render in one line of the Shimmer.
|
21 | */
|
22 | shimmerElements?: IShimmerElement[];
|
23 | /**
|
24 | * Custom elements when necessary to build complex placeholder skeletons.
|
25 | */
|
26 | customElementsGroup?: React.ReactNode;
|
27 | /**
|
28 | * Localized string of the status label for screen reader
|
29 | */
|
30 | ariaLabel?: string;
|
31 | /**
|
32 | * Call to provide customized styling that will layer on top of the variant rules.
|
33 | */
|
34 | styles?: IStyleFunctionOrObject<IShimmerStyleProps, IShimmerStyles>;
|
35 | /**
|
36 | * Additional CSS class(es) to apply to the Shimmer container.
|
37 | */
|
38 | className?: string;
|
39 | /**
|
40 | * Theme provided by High-Order Component.
|
41 | */
|
42 | theme?: ITheme;
|
43 | /**
|
44 | * Defines an object with possible colors to pass for Shimmer customization used on different backgrounds.
|
45 | */
|
46 | shimmerColors?: IShimmerColors;
|
47 | }
|
48 | /**
|
49 | * Shimmer Elements Interface representing all common properties between Gap, Circle and Line.
|
50 | * {@docCategory Shimmer}
|
51 | */
|
52 | export interface IShimmerElement {
|
53 | /**
|
54 | * Represents the possible type of the shimmer elements: Gap, Circle, Line.
|
55 | * Required for every element you intend to use.
|
56 | */
|
57 | type: ShimmerElementType;
|
58 | /**
|
59 | * Sets the height of the element (ICircle, ILine, IGap) in pixels.
|
60 | * Read more details for each specific element.
|
61 | */
|
62 | height?: number;
|
63 | /**
|
64 | * Sets the width value of the element (ILine, IGap) in pixels.
|
65 | * Read more details for each specific element.
|
66 | */
|
67 | width?: number | string;
|
68 | /**
|
69 | * Sets vertical alignment of the element (ICircle, ILine).
|
70 | * @defaultvalue center
|
71 | */
|
72 | verticalAlign?: 'top' | 'center' | 'bottom';
|
73 | }
|
74 | /**
|
75 | * Line element interface
|
76 | * {@docCategory Shimmer}
|
77 | */
|
78 | export interface ILine extends IShimmerElement {
|
79 | /**
|
80 | * Sets the height of the shimmer line in pixels.
|
81 | * @defaultvalue 16px
|
82 | */
|
83 | height?: number;
|
84 | /**
|
85 | * Line width value.
|
86 | * @defaultvalue 100%
|
87 | */
|
88 | width?: number | string;
|
89 | }
|
90 | /**
|
91 | * Circle element interface
|
92 | * {@docCategory Shimmer}
|
93 | */
|
94 | export interface ICircle extends IShimmerElement {
|
95 | /**
|
96 | * Sets the height of the shimmer circle in pixels.
|
97 | * Minimum supported 10px.
|
98 | * @defaultvalue 24px
|
99 | */
|
100 | height?: number;
|
101 | }
|
102 | /**
|
103 | * Gap element interface
|
104 | * {@docCategory Shimmer}
|
105 | */
|
106 | export interface IGap extends IShimmerElement {
|
107 | /**
|
108 | * Sets the height of the shimmer gap in pixels.
|
109 | * @defaultvalue 16px
|
110 | */
|
111 | height?: number;
|
112 | /**
|
113 | * Gap width value.
|
114 | * @defaultvalue 10px
|
115 | */
|
116 | width?: number | string;
|
117 | }
|
118 | /**
|
119 | * Defines props needed to construct styles.
|
120 | * This represents the simplified set of immutable things which control the class names.
|
121 | * {@docCategory Shimmer}
|
122 | */
|
123 | export interface IShimmerStyleProps {
|
124 | /** Boolean flag to trigger fadeIn/fadeOut transition animation when content is loaded. */
|
125 | isDataLoaded?: boolean;
|
126 | /** Optional CSS class name for the component attached to the root stylable area. */
|
127 | className?: string;
|
128 | /** Theme provided by High-Order Component. */
|
129 | theme: ITheme;
|
130 | /** Interval in milliseconds for the adeIn/fadeOut transition animation. */
|
131 | transitionAnimationInterval?: number;
|
132 | /** Color to be used as the main background color of Shimmer when not animating. */
|
133 | shimmerColor?: string;
|
134 | /** Tip color of the shimmer wave which gradually gets from and to `shimmerColor`. */
|
135 | shimmerWaveColor?: string;
|
136 | }
|
137 | /**
|
138 | * Represents the stylable areas of the control.
|
139 | * {@docCategory Shimmer}
|
140 | */
|
141 | export interface IShimmerStyles {
|
142 | /** Refers to the root wrapper element. */
|
143 | root?: IStyle;
|
144 | /** Refers to wrapper element of the shimmer only. */
|
145 | shimmerWrapper?: IStyle;
|
146 | /** Refers to gradient element of the shimmer animation only. */
|
147 | shimmerGradient?: IStyle;
|
148 | /** Refers to wrapper element of the children only. */
|
149 | dataWrapper?: IStyle;
|
150 | /** Styles for the hidden helper element to aid with screen readers. */
|
151 | screenReaderText?: IStyle;
|
152 | }
|
153 | /**
|
154 | * Describes the possible types for shimmer elements used.
|
155 | * {@docCategory Shimmer}
|
156 | */
|
157 | export declare enum ShimmerElementType {
|
158 | /**
|
159 | * Line element type
|
160 | */
|
161 | line = 1,
|
162 | /**
|
163 | * Circle element type
|
164 | */
|
165 | circle = 2,
|
166 | /**
|
167 | * Gap element type
|
168 | */
|
169 | gap = 3
|
170 | }
|
171 | /**
|
172 | * Describes the default heights for shimmer elements when omitted in implementation.
|
173 | * {@docCategory Shimmer}
|
174 | */
|
175 | export declare enum ShimmerElementsDefaultHeights {
|
176 | /**
|
177 | * Default height of the line element when not provided by user: 16px
|
178 | */
|
179 | line = 16,
|
180 | /**
|
181 | * Default height of the gap element when not provided by user: 16px
|
182 | */
|
183 | gap = 16,
|
184 | /**
|
185 | * Default height of the circle element when not provided by user: 24px
|
186 | */
|
187 | circle = 24
|
188 | }
|
189 | /**
|
190 | * Interface describing the possible color customizations of Shimmer.
|
191 | * {@docCategory Shimmer}
|
192 | */
|
193 | export interface IShimmerColors {
|
194 | /**
|
195 | * Defines the main background color which is the color you see when the wave is not animating.
|
196 | * @defaultvalue theme.palette.neutralLight
|
197 | */
|
198 | shimmer?: string;
|
199 | /**
|
200 | * Defines the tip color of the shimmer wave which gradually gets from and to `shimmer` color.
|
201 | * @defaultvalue theme.palette.neutralLighter
|
202 | */
|
203 | shimmerWave?: string;
|
204 | /**
|
205 | * Defines the background color of the space in between and around shimmer elements (borders, gaps and
|
206 | * rounded corners).
|
207 | * @defaultvalue theme.palette.white
|
208 | */
|
209 | background?: string;
|
210 | }
|