styled-components_v5.x.x.js (18115B)
1 // flow-typed signature: 1f5de1a8acfb1cef787a7062bb304212 2 // flow-typed version: 207fb32765/styled-components_v5.x.x/flow_>=v0.104.x 3 4 // @flow 5 6 declare module 'styled-components' { 7 declare class InterpolatableComponent<P> extends React$Component<P> { 8 static +styledComponentId: string; 9 } 10 11 declare export type Styles = { 12 [ruleOrSelector: string]: string | number, // | Styles, 13 ..., 14 }; 15 16 declare export type Interpolation<P> = 17 | (( 18 executionContext: P 19 ) => ((executionContext: P) => InterpolationBase) | InterpolationBase) 20 | InterpolationBase; 21 22 declare export type InterpolationBase = 23 | CSSRules 24 | KeyFrames 25 | string 26 | number 27 | false // falsy values are OK, true is the only one not allowed, because it renders as "true" 28 | null 29 | void 30 | Styles 31 | Class<InterpolatableComponent<any>>; // eslint-disable-line flowtype/no-weak-types 32 33 declare export type TaggedTemplateLiteral<I, R> = ( 34 strings: string[], 35 ...interpolations: Interpolation<I>[] 36 ) => R; 37 38 // Should this be `mixed` perhaps? 39 declare export type CSSRules = Interpolation<any>[]; // eslint-disable-line flowtype/no-weak-types 40 41 declare export type CSSConstructor = TaggedTemplateLiteral<any, CSSRules>; // eslint-disable-line flowtype/no-weak-types 42 declare export type KeyFramesConstructor = TaggedTemplateLiteral< 43 any, // eslint-disable-line flowtype/no-weak-types 44 KeyFrames 45 >; 46 declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral< 47 any, // eslint-disable-line flowtype/no-weak-types 48 React$ComponentType<*> 49 >; 50 51 declare interface Tag<T> { 52 styleTag: HTMLStyleElement | null; 53 getIds(): string[]; 54 hasNameForId(id: string, name: string): boolean; 55 insertMarker(id: string): T; 56 insertRules(id: string, cssRules: string[], name: ?string): void; 57 removeRules(id: string): void; 58 css(): string; 59 toHTML(additionalAttrs: ?string): string; 60 toElement(): React$Element<*>; 61 clone(): Tag<T>; 62 sealed: boolean; 63 } 64 65 // The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over 66 declare export class StyleSheet { 67 static get master(): StyleSheet; 68 static get instance(): StyleSheet; 69 static reset(forceServer?: boolean): void; 70 71 id: number; 72 forceServer: boolean; 73 target: ?HTMLElement; 74 tagMap: { [string]: Tag<any>, ... }; // eslint-disable-line flowtype/no-weak-types 75 deferred: { [string]: string[] | void, ... }; 76 rehydratedNames: { [string]: boolean, ... }; 77 ignoreRehydratedNames: { [string]: boolean, ... }; 78 tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types 79 importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types 80 capacity: number; 81 clones: StyleSheet[]; 82 83 constructor(?HTMLElement): this; 84 rehydrate(): this; 85 clone(): StyleSheet; 86 sealAllTags(): void; 87 makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types 88 getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types 89 getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types 90 hasId(id: string): boolean; 91 hasNameForId(id: string, name: string): boolean; 92 deferredInject(id: string, cssRules: string[]): void; 93 inject(id: string, cssRules: string[], name?: string): void; 94 remove(id: string): void; 95 toHtml(): string; 96 toReactElements(): React$ElementType[]; 97 } 98 99 declare export function isStyledComponent(target: mixed): boolean; 100 101 declare type SCMProps = { 102 children?: React.Node, 103 sheet?: StyleSheet, 104 target?: HTMLElement, 105 ... 106 }; 107 108 declare export var StyleSheetContext: React$Context<StyleSheet>; 109 declare export var StyleSheetConsumer: React$ComponentType<{| 110 children: (value: StyleSheet) => ?React$Node, 111 |}>; 112 declare var StyleSheetProvider: React$ComponentType<{| 113 children?: React$Node, 114 value: StyleSheet, 115 |}>; 116 117 /** 118 * plugin 119 * 120 * @param {number} context 121 * @param {Array<string>} selector 122 * @param {Array<string>} parent 123 * @param {string} content 124 * @param {number} line 125 * @param {number} column 126 * @param {number} length 127 * @return {(string|void)?} 128 */ 129 130 declare type StylisPluginSignature = ( 131 context: number, 132 selector: string[], 133 parent: string[], 134 content: string, 135 line: number, 136 column: number, 137 length: number 138 ) => string | void; 139 140 declare export class StyleSheetManager extends React$Component<SCMProps> { 141 getContext(sheet: ?StyleSheet, target: ?HTMLElement): StyleSheet; 142 render(): React$Element<typeof StyleSheetProvider>; 143 stylisPlugins?: StylisPluginSignature[]; 144 disableVendorPrefixes?: boolean; 145 disableCSSOMInjection?: boolean; 146 } 147 148 declare export class ServerStyleSheet { 149 instance: StyleSheet; 150 masterSheet: StyleSheet; 151 sealed: boolean; 152 153 seal(): void; 154 collectStyles(children: any): React$Element<StyleSheetManager>; // eslint-disable-line flowtype/no-weak-types 155 getStyleTags(): string; 156 toReactElements(): React$ElementType[]; 157 // This seems to be use a port of node streams in the Browsers. Not gonna type this for now 158 // eslint-disable-next-line flowtype/no-weak-types 159 interleaveWithNodeStream(stream: any): any; 160 } 161 162 declare export class KeyFrames { 163 id: string; 164 name: string; 165 rules: string[]; 166 167 constructor(name: string, rules: string[]): this; 168 inject(StyleSheet): void; 169 toString(): string; 170 getName(): string; 171 } 172 173 // I think any is appropriate here? 174 // eslint-disable-next-line flowtype/no-weak-types 175 declare export var css: CSSConstructor; 176 declare export var keyframes: KeyFramesConstructor; 177 declare export var createGlobalStyle: CreateGlobalStyleConstructor; 178 declare export var ThemeConsumer: React$ComponentType<{| 179 children: (value: mixed) => ?React$Node, 180 |}>; 181 declare export var ThemeProvider: React$ComponentType<{| 182 children?: ?React$Node, 183 theme: mixed | (mixed => mixed), 184 |}>; 185 186 /** 187 Any because the intended use-case is for users to do: 188 189 import {ThemeContext} from 'styled-components'; 190 ... 191 const theme = React.useContext<MyTheme>(ThemeContext); 192 193 If they want DRY-er code, they could declare their own version of this via something like 194 195 import { ThemeContext as SCThemeContext } from 'styled-components'; 196 export const ThemeContext: React$Context<MyTheme> = SCThemeContext; 197 198 and then 199 200 import {ThemeContext} from './theme'; 201 */ 202 // eslint-disable-next-line flowtype/no-weak-types 203 declare export var ThemeContext: React$Context<any>; 204 205 declare export type ThemeProps<T> = {| 206 theme: T, 207 |}; 208 209 declare type CommonSCProps = {| 210 children?: React$Node, 211 className?: ?string, 212 style?: { [string]: string | number, ... }, 213 ref?: React$Ref<any>, // eslint-disable-line flowtype/no-weak-types 214 |}; 215 216 declare export type PropsWithTheme<Props, T> = {| 217 ...ThemeProps<T>, 218 ...CommonSCProps, // Not sure how useful this is here, but it's technically correct to have it 219 ...$Exact<Props>, 220 |}; 221 222 declare export function withTheme<Theme, Config: { ... }, Instance>( 223 Component: React$AbstractComponent<Config, Instance> 224 ): React$AbstractComponent<$Diff<Config, ThemeProps<Theme | void>>, Instance>; 225 226 declare export function useTheme<Theme>(): Theme; 227 228 declare export type StyledComponent< 229 Props, 230 Theme, 231 Instance, 232 MergedProps = { ...$Exact<Props>, ...CommonSCProps, ... } 233 > = React$AbstractComponent<MergedProps, Instance> & 234 Class<InterpolatableComponent<MergedProps>>; 235 236 declare export type StyledFactory<StyleProps, Theme, Instance> = {| 237 [[call]]: TaggedTemplateLiteral< 238 PropsWithTheme<StyleProps, Theme>, 239 StyledComponent<StyleProps, Theme, Instance> 240 >, 241 +attrs: <A: { ... }>( 242 (StyleProps => A) | A 243 ) => TaggedTemplateLiteral< 244 PropsWithTheme<{| ...$Exact<StyleProps>, ...$Exact<A> |}, Theme>, 245 StyledComponent< 246 React$Config<{| ...$Exact<StyleProps>, ...$Exact<A> |}, $Exact<A>>, 247 Theme, 248 Instance 249 > 250 >, 251 |}; 252 253 declare export type StyledShorthandFactory<V> = {| 254 [[call]]: <StyleProps, Theme>( 255 string[], 256 ...Interpolation<PropsWithTheme<StyleProps, Theme>>[] 257 ) => StyledComponent<StyleProps, Theme, V>, 258 [[call]]: <StyleProps, Theme>( 259 (props: PropsWithTheme<StyleProps, Theme>) => Interpolation<any> // eslint-disable-line flowtype/no-weak-types 260 ) => StyledComponent<StyleProps, Theme, V>, 261 +attrs: <A: { ... }, StyleProps = {||}, Theme = {||}>( 262 (StyleProps => A) | A 263 ) => TaggedTemplateLiteral< 264 PropsWithTheme<{| ...$Exact<StyleProps>, ...$Exact<A> |}, Theme>, 265 StyledComponent< 266 React$Config<{| ...$Exact<StyleProps>, ...$Exact<A> |}, $Exact<A>>, 267 Theme, 268 V 269 > 270 >, 271 |}; 272 273 declare type BuiltinElementInstances = { 274 a: React$ElementRef<'a'>, 275 abbr: React$ElementRef<'abbr'>, 276 address: React$ElementRef<'address'>, 277 area: React$ElementRef<'area'>, 278 article: React$ElementRef<'article'>, 279 aside: React$ElementRef<'aside'>, 280 audio: React$ElementRef<'audio'>, 281 b: React$ElementRef<'b'>, 282 base: React$ElementRef<'base'>, 283 bdi: React$ElementRef<'bdi'>, 284 bdo: React$ElementRef<'bdo'>, 285 big: React$ElementRef<'big'>, 286 blockquote: React$ElementRef<'blockquote'>, 287 body: React$ElementRef<'body'>, 288 br: React$ElementRef<'br'>, 289 button: React$ElementRef<'button'>, 290 canvas: React$ElementRef<'canvas'>, 291 caption: React$ElementRef<'caption'>, 292 cite: React$ElementRef<'cite'>, 293 code: React$ElementRef<'code'>, 294 col: React$ElementRef<'col'>, 295 colgroup: React$ElementRef<'colgroup'>, 296 data: React$ElementRef<'data'>, 297 datalist: React$ElementRef<'datalist'>, 298 dd: React$ElementRef<'dd'>, 299 del: React$ElementRef<'del'>, 300 details: React$ElementRef<'details'>, 301 dfn: React$ElementRef<'dfn'>, 302 dialog: React$ElementRef<'dialog'>, 303 div: React$ElementRef<'div'>, 304 dl: React$ElementRef<'dl'>, 305 dt: React$ElementRef<'dt'>, 306 em: React$ElementRef<'em'>, 307 embed: React$ElementRef<'embed'>, 308 fieldset: React$ElementRef<'fieldset'>, 309 figcaption: React$ElementRef<'figcaption'>, 310 figure: React$ElementRef<'figure'>, 311 footer: React$ElementRef<'footer'>, 312 form: React$ElementRef<'form'>, 313 h1: React$ElementRef<'h1'>, 314 h2: React$ElementRef<'h2'>, 315 h3: React$ElementRef<'h3'>, 316 h4: React$ElementRef<'h4'>, 317 h5: React$ElementRef<'h5'>, 318 h6: React$ElementRef<'h6'>, 319 head: React$ElementRef<'head'>, 320 header: React$ElementRef<'header'>, 321 hgroup: React$ElementRef<'hgroup'>, 322 hr: React$ElementRef<'hr'>, 323 html: React$ElementRef<'html'>, 324 i: React$ElementRef<'i'>, 325 iframe: React$ElementRef<'iframe'>, 326 img: React$ElementRef<'img'>, 327 input: React$ElementRef<'input'>, 328 ins: React$ElementRef<'ins'>, 329 kbd: React$ElementRef<'kbd'>, 330 label: React$ElementRef<'label'>, 331 legend: React$ElementRef<'legend'>, 332 li: React$ElementRef<'li'>, 333 link: React$ElementRef<'link'>, 334 main: React$ElementRef<'main'>, 335 map: React$ElementRef<'map'>, 336 mark: React$ElementRef<'mark'>, 337 menu: React$ElementRef<'menu'>, 338 meta: React$ElementRef<'meta'>, 339 meter: React$ElementRef<'meter'>, 340 nav: React$ElementRef<'nav'>, 341 noscript: React$ElementRef<'noscript'>, 342 object: React$ElementRef<'object'>, 343 ol: React$ElementRef<'ol'>, 344 optgroup: React$ElementRef<'optgroup'>, 345 option: React$ElementRef<'option'>, 346 output: React$ElementRef<'output'>, 347 p: React$ElementRef<'p'>, 348 param: React$ElementRef<'param'>, 349 picture: React$ElementRef<'picture'>, 350 pre: React$ElementRef<'pre'>, 351 progress: React$ElementRef<'progress'>, 352 q: React$ElementRef<'q'>, 353 rp: React$ElementRef<'rp'>, 354 rt: React$ElementRef<'rt'>, 355 ruby: React$ElementRef<'ruby'>, 356 s: React$ElementRef<'s'>, 357 samp: React$ElementRef<'samp'>, 358 script: React$ElementRef<'script'>, 359 section: React$ElementRef<'section'>, 360 select: React$ElementRef<'select'>, 361 small: React$ElementRef<'small'>, 362 source: React$ElementRef<'source'>, 363 span: React$ElementRef<'span'>, 364 strong: React$ElementRef<'strong'>, 365 style: React$ElementRef<'style'>, 366 sub: React$ElementRef<'sub'>, 367 summary: React$ElementRef<'summary'>, 368 sup: React$ElementRef<'sup'>, 369 table: React$ElementRef<'table'>, 370 tbody: React$ElementRef<'tbody'>, 371 td: React$ElementRef<'td'>, 372 textarea: React$ElementRef<'textarea'>, 373 tfoot: React$ElementRef<'tfoot'>, 374 th: React$ElementRef<'th'>, 375 thead: React$ElementRef<'thead'>, 376 time: React$ElementRef<'time'>, 377 title: React$ElementRef<'title'>, 378 tr: React$ElementRef<'tr'>, 379 track: React$ElementRef<'track'>, 380 u: React$ElementRef<'u'>, 381 ul: React$ElementRef<'ul'>, 382 var: React$ElementRef<'var'>, 383 video: React$ElementRef<'video'>, 384 wbr: React$ElementRef<'wbr'>, 385 // SVG 386 circle: React$ElementRef<'circle'>, 387 clipPath: React$ElementRef<'clipPath'>, 388 defs: React$ElementRef<'defs'>, 389 ellipse: React$ElementRef<'ellipse'>, 390 g: React$ElementRef<'g'>, 391 image: React$ElementRef<'image'>, 392 line: React$ElementRef<'line'>, 393 linearGradient: React$ElementRef<'linearGradient'>, 394 mask: React$ElementRef<'mask'>, 395 path: React$ElementRef<'path'>, 396 pattern: React$ElementRef<'pattern'>, 397 polygon: React$ElementRef<'polygon'>, 398 polyline: React$ElementRef<'polyline'>, 399 radialGradient: React$ElementRef<'radialGradient'>, 400 rect: React$ElementRef<'rect'>, 401 stop: React$ElementRef<'stop'>, 402 svg: React$ElementRef<'svg'>, 403 text: React$ElementRef<'text'>, 404 tspan: React$ElementRef<'tspan'>, 405 // Deprecated, should be HTMLUnknownElement, but Flow doesn't support it 406 keygen: React$ElementRef<'keygen'>, 407 menuitem: React$ElementRef<'menuitem'>, 408 ... 409 }; 410 411 declare type BuiltinElementType<ElementName: string> = $ElementType< 412 BuiltinElementInstances, 413 ElementName 414 >; 415 416 declare type ConvenientShorthands = $ObjMap< 417 BuiltinElementInstances, 418 <V>(V) => StyledShorthandFactory<V> 419 >; 420 421 declare interface Styled { 422 <Comp: React$ComponentType<P>, Theme, OwnProps = React$ElementConfig<Comp>>( 423 Comp 424 ): StyledFactory<{| ...$Exact<OwnProps> |}, Theme, Comp>; 425 <StyleProps, Theme, ElementName: $Keys<BuiltinElementInstances>>( 426 ElementName 427 ): StyledFactory<StyleProps, Theme, BuiltinElementType<ElementName>>; 428 } 429 430 declare export default Styled & ConvenientShorthands; 431 } 432 433 declare module 'styled-components/native' { 434 import type { 435 CSSRules, 436 CSSConstructor, 437 KeyFramesConstructor, 438 CreateGlobalStyleConstructor, 439 StyledComponent, 440 Interpolation, 441 442 // "private" types 443 TaggedTemplateLiteral, 444 StyledFactory, 445 StyledShorthandFactory, 446 ThemeProps, 447 PropsWithTheme, 448 } from 'styled-components'; 449 450 declare type BuiltinElementInstances = { 451 ActivityIndicator: React$ComponentType<{ ... }>, 452 ActivityIndicatorIOS: React$ComponentType<{ ... }>, 453 ART: React$ComponentType<{ ... }>, 454 Button: React$ComponentType<{ ... }>, 455 DatePickerIOS: React$ComponentType<{ ... }>, 456 DrawerLayoutAndroid: React$ComponentType<{ ... }>, 457 Image: React$ComponentType<{ ... }>, 458 ImageBackground: React$ComponentType<{ ... }>, 459 ImageEditor: React$ComponentType<{ ... }>, 460 ImageStore: React$ComponentType<{ ... }>, 461 KeyboardAvoidingView: React$ComponentType<{ ... }>, 462 ListView: React$ComponentType<{ ... }>, 463 MapView: React$ComponentType<{ ... }>, 464 Modal: React$ComponentType<{ ... }>, 465 NavigatorIOS: React$ComponentType<{ ... }>, 466 Picker: React$ComponentType<{ ... }>, 467 PickerIOS: React$ComponentType<{ ... }>, 468 ProgressBarAndroid: React$ComponentType<{ ... }>, 469 ProgressViewIOS: React$ComponentType<{ ... }>, 470 ScrollView: React$ComponentType<{ ... }>, 471 SegmentedControlIOS: React$ComponentType<{ ... }>, 472 Slider: React$ComponentType<{ ... }>, 473 SliderIOS: React$ComponentType<{ ... }>, 474 SnapshotViewIOS: React$ComponentType<{ ... }>, 475 Switch: React$ComponentType<{ ... }>, 476 RecyclerViewBackedScrollView: React$ComponentType<{ ... }>, 477 RefreshControl: React$ComponentType<{ ... }>, 478 SafeAreaView: React$ComponentType<{ ... }>, 479 StatusBar: React$ComponentType<{ ... }>, 480 SwipeableListView: React$ComponentType<{ ... }>, 481 SwitchAndroid: React$ComponentType<{ ... }>, 482 SwitchIOS: React$ComponentType<{ ... }>, 483 TabBarIOS: React$ComponentType<{ ... }>, 484 Text: React$ComponentType<{ ... }>, 485 TextInput: React$ComponentType<{ ... }>, 486 ToastAndroid: React$ComponentType<{ ... }>, 487 ToolbarAndroid: React$ComponentType<{ ... }>, 488 Touchable: React$ComponentType<{ ... }>, 489 TouchableHighlight: React$ComponentType<{ ... }>, 490 TouchableNativeFeedback: React$ComponentType<{ ... }>, 491 TouchableOpacity: React$ComponentType<{ ... }>, 492 TouchableWithoutFeedback: React$ComponentType<{ ... }>, 493 View: React$ComponentType<{ ... }>, 494 ViewPagerAndroid: React$ComponentType<{ ... }>, 495 WebView: React$ComponentType<{ ... }>, 496 FlatList: React$ComponentType<{ ... }>, 497 SectionList: React$ComponentType<{ ... }>, 498 VirtualizedList: React$ComponentType<{ ... }>, 499 ... 500 }; 501 502 declare type BuiltinElementType<ElementName: string> = $ElementType< 503 BuiltinElementInstances, 504 ElementName 505 >; 506 507 declare type ConvenientShorthands = $ObjMap< 508 BuiltinElementInstances, 509 <V>(V) => StyledShorthandFactory<V> 510 >; 511 512 declare interface Styled { 513 <StyleProps, Theme, ElementName: $Keys<BuiltinElementInstances>>( 514 ElementName 515 ): StyledFactory<StyleProps, Theme, BuiltinElementType<ElementName>>; 516 < 517 Comp: React$ComponentType<any>, 518 Theme, 519 OwnProps = React$ElementConfig<Comp> 520 >( 521 Comp 522 ): StyledFactory<{| ...$Exact<OwnProps> |}, Theme, Comp>; 523 } 524 525 declare export default Styled & ConvenientShorthands; 526 } 527 528 declare module 'styled-components/macro' { 529 declare export * from 'styled-components'; 530 }