import * as React from 'react'; import { PropInjector } from '@material-ui/types'; import * as CSS from 'csstype'; import * as JSS from 'jss'; import { DefaultTheme } from '../defaultTheme'; // Disable automatic export export {}; type JSSFontface = CSS.FontFace & { fallbacks?: CSS.FontFace[] }; export type PropsFunc = (props: Props) => T; /** * Allows the user to augment the properties available */ export interface BaseCSSProperties extends CSS.Properties { '@font-face'?: JSSFontface | JSSFontface[]; } export interface CSSProperties extends BaseCSSProperties { // Allow pseudo selectors and media queries // `unknown` is used since TS does not allow assigning an interface without // an index signature to one with an index signature. This is to allow type safe // module augmentation. // Technically we want any key not typed in `BaseCSSProperties` to be of type // `CSSProperties` but this doesn't work. The index signature needs to cover // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]` // but this would not allow assigning React.CSSProperties to CSSProperties [k: string]: unknown | CSSProperties; } export type BaseCreateCSSProperties = { [P in keyof BaseCSSProperties]: BaseCSSProperties[P] | PropsFunc; }; export interface CreateCSSProperties extends BaseCreateCSSProperties { // Allow pseudo selectors and media queries [k: string]: | BaseCreateCSSProperties[keyof BaseCreateCSSProperties] | CreateCSSProperties; } /** * This is basically the API of JSS. It defines a Map, * where * - the `keys` are the class (names) that will be created * - the `values` are objects that represent CSS rules (`React.CSSProperties`). * * if only `CSSProperties` are matched `Props` are inferred to `any` */ export type StyleRules = Record< ClassKey, // JSS property bag | CSSProperties // JSS property bag where values are based on props | CreateCSSProperties // JSS property bag based on props | PropsFunc> >; /** * @internal */ export type StyleRulesCallback = ( theme: Theme ) => StyleRules; export type Styles = | StyleRules | StyleRulesCallback; export interface WithStylesOptions extends JSS.StyleSheetFactoryOptions { defaultTheme?: Theme; flip?: boolean; withTheme?: boolean; name?: string; } export type ClassNameMap = Record; /** * @internal */ export type ClassKeyInferable = string | Styles; export type ClassKeyOfStyles = StylesOrClassKey extends string ? StylesOrClassKey : StylesOrClassKey extends StyleRulesCallback ? ClassKey : StylesOrClassKey extends StyleRules ? ClassKey : never; /** * infers the type of the props used in the styles */ export type PropsOfStyles = StylesType extends Styles ? Props : {}; /** * infers the type of the theme used in the styles */ export type ThemeOfStyles = StylesType extends Styles ? Theme : {}; export type WithStyles< StylesType extends ClassKeyInferable, IncludeTheme extends boolean | undefined = false > = (IncludeTheme extends true ? { theme: ThemeOfStyles } : {}) & { classes: ClassNameMap>; innerRef?: React.Ref; } & PropsOfStyles; export interface StyledComponentProps { /** * Override or extend the styles applied to the component. */ classes?: Partial>; innerRef?: React.Ref; } export default function withStyles< StylesType extends Styles, Options extends WithStylesOptions> = {} >( style: StylesType, options?: Options ): PropInjector< WithStyles, StyledComponentProps> & PropsOfStyles >;