react#ReactNode TypeScript Examples

App = ({
  children,
  phase,
}: {
  children: ReactNode;
  phase: number;
}) => {
  const { startNextPhase } = useLazyPhase();

  if (phase === PHASE.AFTER_PAINT) {
    startNextPhase();
  }

  return <>{children}</>;
}

combinePureChildren = (children: ReactNode): ReactNode[] => {
  let isPrevChildPure: boolean = false
  const childList: ReactNode[] = []

  Children.forEach(children, child => {
    const isCurrentChildPure = typeof child === 'string' || typeof child === 'number'

    if (isPrevChildPure && isCurrentChildPure) {
      const lastIndex = childList.length - 1
      const lastChild = childList[lastIndex]
      childList[lastIndex] = [lastChild, child].join(' ')
    } else {
      childList.push(child)
    }

    isPrevChildPure = isCurrentChildPure
  })

  return childList
}

Grid = styled(
  ({ children, className }: { children: ReactNode[]; className?: string }) => (
    <section className={className}>{children}</section>
  ),
)<{ size: number }>`
  display: grid;
  grid-template-columns: repeat(${variants.length}, ${({ size }) => size}px);
  grid-template-rows: repeat(${tokens.length}, ${({ size }) => size}px);

  div {
    display: grid;
    place-content: center;

    img {
      font-size: ${({ size }) => size - 10}px;
      width: 1em;
      height: 1em;
    }
  }
`

/**
 * A table of label/value pairs.
 */
function LabelValueTable({
  className,
  data,
}: {
  className?: string
  data: { label: string; value: ReactNode }[]
}): JSX.Element {
  return (
    <Table className={className}>
      <TableBody>
        {data.map(({ label, value }) => (
          <TableRow key={label}>
            <TableCell component='th' scope='row' variant='head'>
              {label}
            </TableCell>
            <TableCell>{value}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

function LoginButton({
                         icon,
                         onClick,
                         text
                     }: { icon: React.ReactNode, onClick: () => void, text: string }) {
    return (
        <Box m={0.5} width={"100%"}>
            <Button fullWidth
                    variant="outlined"
                    onClick={onClick}>
                <Box sx={{
                    p: "1",
                    display: "flex",
                    width: "240px",
                    height: "32px",
                    alignItems: "center",
                    justifyItems: "center"
                }}>
                    <Box sx={{
                        display: "flex",
                        flexDirection: "column",
                        width: "32px",
                        alignItems: "center",
                        justifyItems: "center"
                    }}>
                        {icon}
                    </Box>
                    <Box sx={{
                        flexGrow: 1,
                        pl: 2,
                        textAlign: "center"
                    }}>{text}</Box>
                </Box>
            </Button>
        </Box>
    )
}

function Theme({ children }: { children: ReactNode }) {
  const settings = useSettings()
  const systemIsDark = useMediaQuery('(prefers-color-scheme: dark)')
  const dark = settings.theme === 'dark' || (settings.theme === 'system' && systemIsDark)
  const theme = useMemo(
    () => createTheme(dark ? darkTheme : lightTheme),
    [dark]
  )

  useEffect(() => {
    document.querySelector('meta[name="theme-color"]')
      ?.setAttribute('content', dark ? '#272727' :'#0e752e')
  }, [dark])

  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  )
}

export function Link({children, href, as}: { href: string, as?: string, children: ReactNode }) {
    return (
        <FLink href={href} as={as}>
            <a className={ss.anchor}>
                {children}
            </a>
        </FLink>
    )
}

Upload: React.FC<UploadProps> = ({ onUpload }: UploadProps) => {
  function renderDragMessage(
    isDragActive: boolean,
    isDragRejest: boolean,
  ): ReactNode {
    if (!isDragActive) {
      return (
        <UploadMessage>Selecione ou arraste o arquivo aqui.</UploadMessage>
      );
    }

    if (isDragRejest) {
      return <UploadMessage type="error">Arquivo não suportado</UploadMessage>;
    }

    return <UploadMessage type="success">Solte o arquivo aqui</UploadMessage>;
  }

  return (
    <>
      <Dropzone accept="text/csv" onDropAccepted={(files) => onUpload(files)}>
        {({ getRootProps, getInputProps, isDragActive, isDragReject }): any => (
          <DropContainer
            {...getRootProps()}
            isDragActive={isDragActive}
            isDragReject={isDragReject}
          >
            <input {...getInputProps()} data-testid="upload" />
            {renderDragMessage(isDragActive, isDragReject)}
          </DropContainer>
        )}
      </Dropzone>
    </>
  );
}

ConditionalWrapper = ({
  children,
  condition,
  wrapper,
}: {
  children: ReactNode;
  condition: boolean;
  wrapper: (children: ReactNode) => JSX.Element;
}) => (condition ? wrapper(children) : <>{children}</>)

ContextMenu: React.FC<{
  children: ReactNode | ReactNodeArray;
  menuId: string;
}> = ({ children, menuId }) => {
  const childrenArray = isReactNodeArray(children) ? children : [children];
  const childrenWithDividers = childrenArray.reduce(
    (acc: ReactNodeArray, child, index) => {
      if (!acc.length) return [child];
      acc.push(<Divider key={index} />);
      acc.push(child);
      return acc;
    },
    []
  );
  return (
    <ContextMenuWrapper id={menuId}>
      <Wrapper>{childrenWithDividers}</Wrapper>
    </ContextMenuWrapper>
  );
}

function SubscribeFormWithText(
  { children, className = '' }: { children: ReactNode, className?: string },
) {
  return (
    <div className={`${styles['subscribe-form--with-text']} ${className} d-flex justify-content-between`}>
      <div>
        {children}
      </div>
      <SubscribeForm />
    </div>
  );
}

numberInputField(propertyType: NumericPropertyType): ReactNode {
    switch (propertyType) {
      case 'Integer':
        return this.createFilterInput(<IntegerInput onChange={this.onNumberInputChange}/>, true);
      case 'Double':
        return this.createFilterInput(<DoubleInput onChange={this.onNumberInputChange}/>, true);
      case 'Long':
        return this.createFilterInput(<LongInput onChange={this.onNumberInputChange}/>, true);
      case 'BigDecimal':
        return this.createFilterInput(<BigDecimalInput onChange={this.onNumberInputChange}/>, true);
      default:
        return assertNever('property type', propertyType);
    }
  }

public render() {
    const uiProps = this.props.schema['ui:props'] || {};

    return (
      <Switch
        {...uiProps}
        checked={this.checked}
        checkedChildren={uiProps.checkedChildren as ReactNode || '是'}
        unCheckedChildren={uiProps.uncheckedChildren as ReactNode || '否'}
        onChange={(checked: boolean) => {
          this.props.onChange?.(this.encodeValue(checked));
        }}
      />
    );
  }

Profitable = ({ bid, balance, children }: { bid: IBid, balance: number, children: ReactNode }) => {

  const isProfitable: boolean = bid && bid.claimPrice && balance > bid.claimPrice ? true : false

  if (!isProfitable) return null

  return (
    <>
      {children}
    </>
  );
}

function Context({ children }: { children: ReactNode }) {
  const [alertBox, setAlertBox] = useState<AlertBox>(null);
  const [drawMode, setDrawMode] = useState<boolean>(false);
  const [drawPadRef, setDrawPadRef] = useState({});

  // This function will also set 'isDrawMode' property in localStorage
  const setDrawModeTo = (isDrawMode: boolean) => {
    setDrawMode(isDrawMode);
    localStorage.setItem("isDrawMode", JSON.stringify(isDrawMode));
  };

  useEffect(() => {
    const isDrawMode: string = localStorage.getItem("isDrawMode") || "false";
    if (isDrawMode === "true") setDrawModeTo(true);
    else if (isDrawMode === "false") setDrawModeTo(false);
    else setDrawModeTo(false);
  }, []);

  return (
    <AlertBoxContext.Provider value={{ alertBox, setAlertBox }}>
      <DrawModeContext.Provider
        value={{ drawMode, setDrawMode: setDrawModeTo }}
      >
        <DrawPadRefContext.Provider value={{ drawPadRef, setDrawPadRef }}>
          {children}
        </DrawPadRefContext.Provider>
      </DrawModeContext.Provider>
    </AlertBoxContext.Provider>
  );
}

childrenAsText = (
  children: React.ReactChildren | React.ReactNode | undefined,
  joiner = ''
): string =>
  children
    ? (React.Children.toArray(children).reduce(
        (str, child) =>
          `${str}${joiner}${
            React.isValidElement(child)
              ? childrenAsText(child.props.children, joiner)
              : `${child}`
          }`,
        ''
      ) as string)
    : ''

export default class ErrorBoundary extends Component<{ fallback: ReactNode; children: ReactNode }> {
  state = { hasError: false, error: null }
  static getDerivedStateFromError(error: Error): { hasError: boolean; error: Error } {
    return {
      hasError: true,
      error,
    }
  }
  render(): ReactNode {
    if (this.state.hasError) {
      return this.props.fallback
    }
    return this.props.children
  }
}

describe('Modal', () => {
  const setup = (
    props: {
      title?: string;
      subTitle?: string;
      footer?: ReactNode;
    } = {
      title: 'title',
      subTitle: 'subTitle',
      footer: <button type="submit">Done</button>,
    }
  ) =>
    render(
      <Modal {...props} show>
        <div>Hello world</div>
      </Modal>
    );

  verifyAxeTest(setup());

  it('should render the component and matches it against stored snapshot', () => {
    setup();

    expect(screen.getByTestId('Modal')).toMatchSnapshot();
  });

  it('should render the component and matches it against stored snapshot with default prop values', () => {
    setup({});

    expect(screen.getByTestId('Modal')).toMatchSnapshot();
  });
});

OptionRow = ({
  children,
  ...others
}: {
  children: ReactNode;
  [key: string]: any;
}) => {
  return (
    <Row
      mainAxisAlignment="space-between"
      crossAxisAlignment="center"
      width="100%"
      my={4}
      px={4}
      overflowX="auto"
      {...others}
    >
      {children}
    </Row>
  );
}

/**
   * Render the component.
   *
   * @return React node.
   */
  render(): ReactNode {
    return (
      <div className="wrapper">
        <h2 id="dynamic-slides-example-heading">Dynamic Slide Example</h2>

        <Splide
          options={ {
            rewind : true,
            perPage: 2,
            height : '10rem',
            gap    : '1rem',
          } }
          aria-labelledby="dynamic-slides-example-heading"
        >
          { this.state.slides.map( ( slide, index ) => (
            <SplideSlide key={ index }>
              <img src={ slide.src } alt={ slide.alt }/>
            </SplideSlide>
          ) ) }
        </Splide>

        <div className="controls">
          <button onClick={ this.onClick.bind( this ) }>Add Slide</button>
        </div>
      </div>
    );
  }

describe('ApiClientContextController', () => {
  const wrapper = ({ children }: { children?: ReactNode }) => <>{children}</>;

  test('renders its children', () => {
    const { getByText } = render(
      <ApiClientContextController>
        <span>TEST</span>
      </ApiClientContextController>,
      { wrapper },
    );

    expect(getByText(/TEST/)).toBeInTheDocument();
  });
});

export function nameOrAddress(
  address: string | undefined,
  identities: { [address: string]: Identity } | undefined,
  shortern?: boolean | undefined,
  autonomous?: boolean | undefined,
  ens?: string | null
): string | ReactNode {
  const formattedAddress = isAddress(address)

  if (!address) {
    return ''
  }

  // checksum name, as they are checksummed in identity mapping
  const identity: Identity | undefined = formattedAddress ? identities?.[formattedAddress] : undefined

  if (identity?.twitter) {
    return <LogoText type="twitter">{'@' + identity.twitter.handle}</LogoText>
  }

  if (identity?.other) {
    return <LogoText type="other">{identity.other.name}</LogoText>
  }

  if (autonomous) {
    return 'Autonomous Proposal Contract ⚙️'
  }

  if (shortern) {
    return ens ?? shortenAddress(address)
  }

  return ens ?? address
}

htmlProcessor = (html: string): ReactNode => {
  if (typeof html !== 'string') {
    logger.error('htmlParser: html is not a string');
    return React.createElement('div', {}, 'errors: please check dev console') as ReactNode;
  }

  let doc = domParser.parseFromString(html, 'text/html');

  if (doc === null) {
    logger.error('htmlParser: doc is null, unable to process html');
    return React.createElement('p', {}, 'errors: please check dev console') as ReactNode;
  }
  return converter(doc as unknown as HTMLElement, 1);
}

lfl: RichNumberFormatter = (value: string | number) => {
  if (value == null || value === '-' || isNaN(value as any) || value === Infinity || value === -Infinity) {
    return render('-')
  }
  value = Number(value)
  if (value > 0) {
    return render(
      <>
        <span style={{ color: '#f4485c' }}>{numeral(value).format('0.00%')}</span>
        <BeautifulUpIcon style={{ marginLeft: 4, color: '#f4485c' }} />
      </>,
    )
  }

  if (value < 0) {
    return render(
      <>
        <span style={{ color: '#00a854' }}>{numeral(value).format('0.00%')}</span>
        <BeautifulDownIcon style={{ marginLeft: 4, color: '#00a854' }} />
      </>,
    )
  }

  // value === 0
  return render(<span style={{ color: '#838383' }}>0</span>)

  function render(children: ReactNode) {
    return (
      <div className="lfl-cell" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'flex-end' }}>
        {children}
      </div>
    )
  }
}

function NavLink(props: {
	children: ReactNode;
	href: string;
	closeMenu?: () => void;
}) {
	return (
		<li className="shrink-0">
			<Link href={props.href}>
				<a className={navlinkClassname} onClick={props.closeMenu}>
					{props.children}
				</a>
			</Link>
		</li>
	);
}

ABTestingController: React.FunctionComponent<{
    config: ABTestingConfig;
    userId: number | string;
    userProfile: { [key: string]: string };
    children: ReactNode;
}> = ({ config, userId, userProfile, children }) => {
    const experiments = React.useMemo(
        () => new Experiments(config, userId, userProfile),
        [config, userId, userProfile]
    );
    return <ABTestingContext.Provider value={experiments}>{children}</ABTestingContext.Provider>;
}

MOBILE_SELECT_MENU_ITEMS = Object.values(OrderKeys)
  .filter((key) => DEFAULT_ITEMS.includes(key))
  .reduce<ReactNode[]>(
    (elements, val) => [
      ...elements,
      ...times(2, (i) => {
        const itemOrder: Order = i % 2 === 0 ? "asc" : "desc";
        return (
          <MenuItem value={`${val}-${itemOrder}`} key={val + i}>
            <Typography color="primary" variant="h4">
              {getOrderKeysFriendlyString(val)}
              {"  "}
              {itemOrder === "asc" ? (
                <ArrowDownward fontSize="small" />
              ) : (
                <ArrowUpward fontSize="small" />
              )}
            </Typography>
          </MenuItem>
        );
      }),
    ],
    []
  )

/**
 * Creates a [React Portal](https://reactjs.org/docs/portals.html).
 */
export function createPortal(
  children: ReactNode,
  container: Panel,
  key?: null | string,
): ReactPortal {
  const portal = {
    $$typeof: REACT_PORTAL_TYPE,
    key: key == null ? null : String(key),
    children,
    containerInfo: container,
  };

  return portal as any;
}

public render = (): ReactNode => {
    return (
      <div style={{ border: '1px solid gray', borderRadius: '4px' }}>
        <div style={{ padding: '9px 12px' }}>
          <div ref={this.notebookRef}></div>
        </div>
        <div style={{ marginTop: '4px' }}>
          
          <div style={{
            backgroundColor: '#ddd',
            fontWeight: 700,
            padding: ".25rem .5rem",
            borderRadius: '0 0 4px 4px',
            gridTemplateColumns: "auto auto",
            display:"grid"
          }}>
            <div style={{textAlign:"left"}}>{this.props.args.name}</div>
            <div style={{textAlign:"right"}}>
            <a href={`https://observablehq.com/${this.props.args.notebook}`} style={{ color: '#666', }}>{this.props.args.notebook}</a>
            </div>
          </div>
        </div>
      </div >
    )
  }