glamorous-component.d.ts

import {CSSProperties} from './css-properties'

import {Component} from './glamorous'

import {Omit} from './helpers'

/**
* `glamorousComponentFactory` returns a ComponentClass
*
* @see {@link https://github.com/paypal/glamorous/blob/master/src/create-glamorous.js#L28-L131}
*/

export interface ExtraGlamorousProps {
  /**
   * Called with the inner element's reference
   */
  innerRef?: (instance: any) => void

  className?: string
  /**
   * Same type as any of the styles provided, will be merged with this component's styles and take highest priority over the component's predefined styles
   */
  css?: CSSProperties
  theme?: object
}

export interface GlamorousComponentFunctions<ExternalProps, Props> {
  /**
   * Copies the styles of an already created glamorous component with a different tag
   */
  withComponent: (
    component: string | Component<Props>,
  ) => GlamorousComponent<ExternalProps, Props>

  /**
   * Applies props by default for a component
   */
  withProps: <DefaultProps extends object>(
    props: DefaultProps,
  ) => GlamorousComponent<ExternalProps & Partial<DefaultProps>, Props>
}

export interface GlamorousComponent<ExternalProps, Props>
  extends React.ComponentClass<ExternalProps & ExtraGlamorousProps>,
    GlamorousComponentFunctions<ExternalProps, Props> {}

export type GlamorousComponentProps<ExternalProps> = JSX.IntrinsicAttributes &
  JSX.IntrinsicClassAttributes<
    React.Component<ExtraGlamorousProps & ExternalProps, React.ComponentState>
  > &
  ExternalProps & {children?: React.ReactNode}