Options
All
  • Public
  • Public/Protected
  • All
Menu

retmpl

Index

Type Aliases

Functions

Type Aliases

ComponentProps

ComponentProps<T, P>: Omit<P, "children"> & { $next?: Template<T>; children?: Template<T> }

Type Parameters

  • T

  • P

ItemContext

ItemContext: { first: boolean; index: number; last: boolean }

Type declaration

  • first: boolean
  • index: number
  • last: boolean

Length

Length: string | number

Options

Options: { colProps?: ShapeProps; colType?: any; containerType?: any; rowProps?: ShapeProps; rowType?: any; wrapperProps?: ShapeProps; wrapperType?: any }

Type declaration

  • Optional colProps?: ShapeProps
  • Optional colType?: any
  • Optional containerType?: any
  • Optional rowProps?: ShapeProps
  • Optional rowType?: any
  • Optional wrapperProps?: ShapeProps
  • Optional wrapperType?: any

ShapeProps

ShapeProps: { absolute?: boolean; aspectRatio?: number | string; b?: Length; className?: string; col?: boolean; color?: string; content?: "start" | "end" | "center" | "between" | "around" | "evenly"; extraProps?: Record<string, any> | ((props: ShapeProps) => Record<string, any>); flex?: string | number; gap?: Length; h?: Length; items?: "start" | "end" | "center" | "baseline" | "stretch"; justify?: "start" | "end" | "center" | "between" | "around" | "evenly"; justifyItems?: "start" | "end" | "center" | "stretch"; justifySelf?: "start" | "end" | "center" | "stretch"; l?: Length; m?: Length; mx?: Length; my?: Length; p?: Length; pb?: Length; pl?: Length; pr?: Length; pt?: Length; px?: Length; py?: Length; r?: Length; reverse?: boolean; rounded?: boolean | number | string; row?: boolean; self?: "start" | "end" | "center" | "between" | "around" | "evenly"; t?: Length; w?: Length; wrap?: boolean | "nowrap" | "wrap" | "wrap-reverse" }

Type declaration

  • Optional absolute?: boolean
  • Optional aspectRatio?: number | string
  • Optional b?: Length

    bottom

  • Optional className?: string
  • Optional col?: boolean

    flexDirection: column

  • Optional color?: string

    backgroundColor

  • Optional content?: "start" | "end" | "center" | "between" | "around" | "evenly"

    alignContent

  • Optional extraProps?: Record<string, any> | ((props: ShapeProps) => Record<string, any>)
  • Optional flex?: string | number
  • Optional gap?: Length
  • Optional h?: Length

    height

  • Optional items?: "start" | "end" | "center" | "baseline" | "stretch"

    alignItems

  • Optional justify?: "start" | "end" | "center" | "between" | "around" | "evenly"

    justifyContent

  • Optional justifyItems?: "start" | "end" | "center" | "stretch"
  • Optional justifySelf?: "start" | "end" | "center" | "stretch"
  • Optional l?: Length

    left

  • Optional m?: Length

    margin

  • Optional mx?: Length

    marginLeft and marginRight

  • Optional my?: Length

    marginTop and marginBottom

  • Optional p?: Length

    padding

  • Optional pb?: Length

    paddingBottom

  • Optional pl?: Length

    paddingLeft

  • Optional pr?: Length

    paddingRight

  • Optional pt?: Length

    paddingTop

  • Optional px?: Length

    paddingLeft and paddingRight

  • Optional py?: Length

    paddingTop and paddingBottom

  • Optional r?: Length

    right

  • Optional reverse?: boolean

    row = true, reverse = true => flexDirection: row-reverse col = true, reverse = true => flexDirection: col-reverse

  • Optional rounded?: boolean | number | string

    borderRadius. rouned = true => full border radius (9999px)

  • Optional row?: boolean

    flexDirection: row

  • Optional self?: "start" | "end" | "center" | "between" | "around" | "evenly"

    alignSelf

  • Optional t?: Length

    top

  • Optional w?: Length

    width

  • Optional wrap?: boolean | "nowrap" | "wrap" | "wrap-reverse"

    flexWrap

Template

Template<T>: { [ key in keyof T]?: ValueOf<T, key> }

Type Parameters

  • T

TemplateBuilder

TemplateBuilder<T>: { <N>(name: N, value: ValueOf<T, N>): ReactElement<any, string | JSXElementConstructor<any>>; (render: ((loaded: boolean, onLoad: VoidFunction) => Template<T>), deps?: any[]): ReactElement<any, string | JSXElementConstructor<any>>; (template: Template<T>): ReactElement<any, string | JSXElementConstructor<any>> }

Type Parameters

  • T

Type declaration

    • <N>(name: N, value: ValueOf<T, N>): ReactElement<any, string | JSXElementConstructor<any>>
    • (render: ((loaded: boolean, onLoad: VoidFunction) => Template<T>), deps?: any[]): ReactElement<any, string | JSXElementConstructor<any>>
    • (template: Template<T>): ReactElement<any, string | JSXElementConstructor<any>>

    • Type Parameters

      • N extends string | number | symbol

      Parameters

      Returns ReactElement<any, string | JSXElementConstructor<any>>

    • Parameters

      • render: ((loaded: boolean, onLoad: VoidFunction) => Template<T>)
          • (loaded: boolean, onLoad: VoidFunction): Template<T>

          • Parameters

            • loaded: boolean
            • onLoad: VoidFunction

            Returns Template<T>

      • Optional deps: any[]

      Returns ReactElement<any, string | JSXElementConstructor<any>>

    • Parameters

      Returns ReactElement<any, string | JSXElementConstructor<any>>

ValueOf

ValueOf<T, N>: T[N] extends FC<infer P> ? ComponentProps<T, P> | [number, ComponentProps<T, P> | ((context: ItemContext) => ComponentProps<T, P>), ...Template<T>[]] | ComponentProps<T, P>[] : number

Type Parameters

  • T

  • N extends keyof T

Functions

createShapeTemplate

  • createShapeTemplate(defaultProps?: Partial<ShapeProps>, type?: any): ((props: PropsWithChildren<ShapeProps>) => CElement<any, Component<any, any, any>>) & { defaultProps: undefined | Partial<ShapeProps> }

  • Parameters

    • Optional defaultProps: Partial<ShapeProps>
    • type: any = "div"

    Returns ((props: PropsWithChildren<ShapeProps>) => CElement<any, Component<any, any, any>>) & { defaultProps: undefined | Partial<ShapeProps> }

createTemplateBuilder

  • create a template builder from specified template definitions. A template definitions is following below structure:

    const templateDefinition = {
     line: <div style={{ height: 10, backgroundColor: 'silver' }}/>, // react node
     circle: (props) => <div style={{ height: props.radius, width: props.radius, borderRadius: 100 }}/> // a functional component
    }

    Type Parameters

    • T

    Parameters

    • definitions: T
    • Optional options: Options

    Returns TemplateBuilder<{ col: FC<ShapeProps>; row: FC<ShapeProps>; wrapper: FC<ShapeProps> } & T>

Generated using TypeDoc