Options
All
  • Public
  • Public/Protected
  • All
Menu

External module "components"

Index

Variables

Let advancedBinding

advancedBinding: boolean = getAdvancedBinding()

Const cache

cache: CacheClass<unknown, unknown> = new memoryCache.Cache()

Let componentMap

componentMap: any = Object.assign({ Fragment, Suspense },ReactDOMElements,window && typeof window === "object" ? window.__jsonx_custom_elements : {})

object of all react components available for JSONX

Functions

DynamicComponent

  • DynamicComponent(this: Context, props?: defs.dynamicComponentProps): undefined | null | { children?: null | string | JSONReactElement[] | any; props?: any; type: string } | ReactElementLike
  • Parameters

    • this: Context
    • Default value props: defs.dynamicComponentProps = {}

    Returns undefined | null | { children?: null | string | JSONReactElement[] | any; props?: any; type: string } | ReactElementLike

getBoundedComponents

  • getBoundedComponents(this: Context, options?: { advancedBinding?: undefined | false | true; boundedComponents?: string[]; reactComponents?: jsonx["jsonxComponents"] }): any
  • getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list

    Parameters

    • this: Context
    • Default value options: { advancedBinding?: undefined | false | true; boundedComponents?: string[]; reactComponents?: jsonx["jsonxComponents"] } = {}

      options for getBoundedComponents

      • Optional advancedBinding?: undefined | false | true
      • Optional boundedComponents?: string[]
      • Optional reactComponents?: jsonx["jsonxComponents"]

        all react components available for JSONX

    Returns any

    reactComponents object of all react components available for JSONX

getComponentFromLibrary

  • getComponentFromLibrary(options?: { componentLibraries?: jsonx["jsonxLibrary"]; jsonx: jsonx }): any
  • returns a react component from a component library

    Parameters

    • Default value options: { componentLibraries?: jsonx["jsonxLibrary"]; jsonx: jsonx } = { jsonx: {} }

      options for getComponentFromLibrary

      • Optional componentLibraries?: jsonx["jsonxLibrary"]
      • jsonx: jsonx

    Returns any

    react component from react library like bootstrap, material design or bulma

getComponentFromMap

  • getComponentFromMap(options?: { componentLibraries?: jsonx["jsonxLibrary"]; debug?: undefined | false | true; jsonx?: defs.jsonx; logError?: any; reactComponents?: jsonx["jsonxComponents"] }): any
  • returns a react element from jsonx.component

    example

    // returns react elements getComponentFromMap({jsonx:{component:'div'}})=>div getComponentFromMap({jsonx:{component:'MyModal'},reactComponents:{MyModal:MyModal extends React.Component}})=>MyModal getComponentFromMap({jsonx:{component:'reactBootstap.nav'},componentLibraries:{reactBootstrap,}})=>reactBootstap.nav

    Parameters

    • Default value options: { componentLibraries?: jsonx["jsonxLibrary"]; debug?: undefined | false | true; jsonx?: defs.jsonx; logError?: any; reactComponents?: jsonx["jsonxComponents"] } = {}

      options for getComponentFromMap

      • Optional componentLibraries?: jsonx["jsonxLibrary"]
      • Optional debug?: undefined | false | true
      • Optional jsonx?: defs.jsonx
      • Optional logError?: any
      • Optional reactComponents?: jsonx["jsonxComponents"]

    Returns any

    valid react element

getFunctionFromEval

  • getFunctionFromEval(options?: any): any
  • Returns a new function from an options object

    Parameters

    • Default value options: any = {}

    Returns any

getReactClassComponent

  • getReactClassComponent(this: Context, reactComponent?: {}, options?: any): ReactComponentLike

getReactContext

  • getReactContext(options?: any): Context<any>
  • Parameters

    • Default value options: any = {}

    Returns Context<any>

getReactFunctionComponent

  • getReactFunctionComponent(this: Context, reactComponent?: {}, functionBody?: string | defs.functionParam, options?: any): any
  • Returns new React Function Component

    todo

    set 'functionprops' to set arguments for function

    see

    https://reactjs.org/docs/hooks-intro.html

    example

    const jsonxRender = { component:'div', passprops:'true', children:[ { component:'input', thisprops:{ value:['count'], }, }, { component:'button', __dangerouslyBindEvalProps:{ onClick:function(count,setCount){ setCount(count+1); console.log('this is inline',{count,setCount}); }, // onClick:(function(count,setCount){ // setCount(count+1) // console.log('this is inline',{count,setCount}); // }), children:'Click me' } ] }; const functionBody = 'const [count, setCount] = useState(0); const functionprops = {count,setCount};' const options = { name: IntroHook} const MyCustomFunctionComponent = jsonx._jsonxComponents.getReactFunctionComponent({jsonxRender, functionBody, options});

    Parameters

    • this: Context
    • Default value reactComponent: {} = {}

      Valid JSONX to render

    • Default value functionBody: string | defs.functionParam = ""

      String of function component body

    • Default value options: any = {}

    Returns any