react-gateway: Support fallbacks for GatewayDest (alternative for https://github.com/cloudflare/react-gateway/pull/39)

readme.md

Supercharges GatewayDest so that it allows default children, because this does not work:

 <GatewayDest name="my-top-nav-title"><div>Default content if nobody has passed anything to me yet.</GatewayDest>

This PR fixes that, but it hasn't been merged yet.

Usage

 <GatewayDestWithFallback name="my-top-nav-title" fallback={<Logo />} />

index.tsx

/**
 * Supercharges GatewayDest so that it allows default children, because this does not work:
 * <GatewayDest><div>Default content if nobody has passed anything to me yet.</GatewayDest>
 * @see https://github.com/cloudflare/react-gateway/pull/39
 * 
 * @usage <GatewayDestWithFallback name={constants.gateway.backUrl} fallback={<UiNavigation.Action />} />
 */

import * as React from 'react'
import { GatewayDest } from 'react-gateway'

interface Props {
  name: string
  children?: React.ReactNode
  fallback?: React.ReactNode
}

function GatewayDestWithFallback(props: Props) {
  return (
    <GatewayDest name={props.name} component={Inner} fallback={props.fallback}>
      {props.children}
    </GatewayDest>
  )
}

interface InnerProps {
  // It appears that children coming from GatewayDest
  // are transformed into normal JS arrays.
  children?: React.ReactElement[]
  fallback?: React.ReactNode
}

function Inner(props: InnerProps) {
  return (props.children && props.children.length ? props.children : props.fallback || <div />)
}

export default GatewayDestWithFallback