react#PropsWithChildren TypeScript Examples

MultiScreenErrorBoundary = (props: PropsWithChildren<{}>) => {
  const intl = useIntl();

  return (
    <ErrorBoundary message={intl.formatMessage({id: 'common.unknownTabError'})}>
      {props.children}
    </ErrorBoundary>
  );
}

export function DeleteWithUndo(
    props: PropsWithChildren<{
        endpoint: string
        object: {
            name?: string
            id: number
        }
        className: string
        style: CSSProperties
        callback: () => void
    }>
): JSX.Element {
    const { className, style, children } = props
    return (
        <a
            href="#"
            onClick={(e) => {
                e.preventDefault()
                e.stopPropagation()
                deleteWithUndo(props)
            }}
            className={className}
            style={style}
        >
            {children}
        </a>
    )
}

createWrapper = ({
  clientId = '__test_client_id__',
  domain = '__test_domain__',
  ...opts
}: Partial<Auth0ClientOptions> = {}) => {
  return function Wrapper({
    children,
  }: PropsWithChildren<Record<string, unknown>>): JSX.Element {
    return (
      <Auth0Provider domain={domain} clientId={clientId} {...opts}>
        {children}
      </Auth0Provider>
    );
  };
}

test('должен вызваться fetch из конфига', async () => {
  const axiosMock = jest.fn(() => Promise.resolve({ data: {} }))
  const config: Partial<ResourceProviderConfig> = getDefaultResourceConfig(axiosMock as any)
  const wrapper = ({ children }: PropsWithChildren<{}>) => (
    <ResourceProvider options={config}>{children}</ResourceProvider>
  )

  const fnMock = jest.fn(() => Promise.resolve({ data: {} }))
  const {
    result: {
      current: { mutateAsync },
    },
  } = renderHook(
    () =>
      useMutateResource<void, string>({
        key: 'http://test/',
        mutationFn: fnMock as any,
      }),
    { wrapper }
  )
  await act(() => mutateAsync('test'))
  expect(axiosMock).not.toBeCalled()
  expect(fnMock).toBeCalledWith('test')
})

Accordion = (props: PropsWithChildren<AccordionProps>) => {
  const classes = useStyles();

  return (
    <MuiAccordion
      disabled={props.disabled}
      TransitionProps={{ unmountOnExit: props.unmountOnExit ?? false }}
    >
      <MuiAccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`${props.id}-content`}
        id={`${props.id}-header`}
      >
        <Typography className={classes.heading}>{props.heading}</Typography>
        <Typography className={classes.secondaryHeading}>
          {props.secondaryHeading}
        </Typography>
      </MuiAccordionSummary>
      <AccordionDetails>{props.children}</AccordionDetails>
    </MuiAccordion>
  );
}

DependencyManagerProvider: FC<
    PropsWithChildren<{readonly defaultRegisterDependencies?: boolean}>
> = memo(({children, defaultRegisterDependencies = true}) => {
    const arr = useMemo<[DependencyManager, DependencyManagerProviderConfig]>(() => {
        return [
            new DependencyManager(),
            { defaultRegisterDependencies } 
        ];
    }, [defaultRegisterDependencies]);
    return (
        <dependencyManagerContext.Provider value={arr}>
            {children}
        </dependencyManagerContext.Provider>
    );
})

Auth0ProviderWithRedirectCallback = ({
  children,
  ...props
}: PropsWithChildren<Auth0ProviderOptions>) => {
  const navigate = useNavigate();

  const onRedirectCallback = (appState?: AppState) => {
    navigate((appState && appState.returnTo) || window.location.pathname);
  };

  return (
    <Auth0Provider onRedirectCallback={onRedirectCallback} {...props}>
      {children}
    </Auth0Provider>
  );
}

export default function Accordion({ title, isOpen, children }: PropsWithChildren<AccordionProps>) {
  const [hasCollapsed, setHasCollapsed] = useState(!isOpen);
  const isActive = !hasCollapsed;
  return (
    <AccordionWrapper onClick={() => setHasCollapsed((prev) => !prev)}>
      <TitleWrapper>
        <Title>{title}</Title>
        <Icon isActive={isActive}>
          <svg
            viewBox="0 0 24 24"
            focusable="false"
            className="chakra-icon chakra-accordion__icon css-j2ph2z"
            aria-hidden="true"
            preserveAspectRatio="none"
          >
            <path fill="currentColor" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
          </svg>
        </Icon>
      </TitleWrapper>
      <Collapse isOpen={isActive} duration={300}>
        <Description>
          <RichText>{children}</RichText>
        </Description>
      </Collapse>
    </AccordionWrapper>
  );
}

class ErrorBoundary extends Component<
  PropsWithChildren<{}>,
  ErrorBoundaryState
> {
  constructor(props: PropsWithChildren<{}>) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError = () => {
    return { hasError: true };
  };

  render() {
    const { hasError } = this.state;
    const { children } = this.props;

    return hasError ? <ErrorPage /> : children;
  }
}

export function XFlowAppExtensionModule<T>(props: PropsWithChildren<IProps>) {
  const { createModule, children } = props
  /** 获取扩展Registry */
  const extensionRegistry = useExtensionRegistry()

  /** Config */
  const config = React.useMemo<IModuleConfig<T>>(
    () => props.config || { CONFIG_TYPE: '', getConfig: async () => ({} as T) },
    /* eslint-disable-next-line  */
    [],
  )

  React.useEffect(() => {
    /** 注册 extension 到 Registry */
    const disposable = extensionRegistry.addExtension({
      config: config,
      createModule,
    })
    return () => {
      disposable.dispose()
    }
    /* eslint-disable-next-line  */
  }, [])

  /** 可以 Wrap Children组件 */
  if (Array.isArray(children) || React.isValidElement(children)) {
    return <> {children} </>
  }

  return null
}

GitlabStarredScreen = paginatedRefreshListScreen(
	(_: PropsWithChildren<{navigation: RootNav}>, page) =>
		helper.getGitStarredProjects(page),
	(project, _, {navigation}) => (
		<ProjectItem
			project={project}
			onPress={() => {
				navigation.navigate("GitLabProject", {project});
			}}
		/>
	),
	({id}) => String(id),
)

Surface = ({ ...delegated }: PropsWithChildren<SurfaceProps>) => {
  const [{ shadow, ...settings }] = useSurfaceSettings()

  return (
    <Container
      tabIndex={-1}
      shadow={shadow.shadow}
      {...settings}
      {...delegated}
    />
  )
}

List = React.forwardRef<
  HTMLUListElement | HTMLOListElement,
  PropsWithChildren<Props> &
    React.OlHTMLAttributes<HTMLOListElement | HTMLUListElement>
>(
  (
    {
      variant = 'none',
      as = 'ul',
      className = '',
      children,
      ...props
    }: PropsWithChildren<Props> &
      React.HTMLAttributes<HTMLUListElement | HTMLOListElement>,
    forwardRef,
  ) => {
    if (as === 'ul') {
      return (
        <ul ref={forwardRef} className={`${styles[variant]} ${className}`} {...props}>
          {children}
        </ul>
      );
    }
    return (
      <ol
        ref={forwardRef as React.ForwardedRef<HTMLOListElement>}
        className={`${styles[variant]} ${className}`}
        {...props}
      >
        {children}
      </ol>
    );
  },
)

MenuIcon = (props: PropsWithChildren<MenuIconProps>) => {
    return (
        <Tooltip title={props.title} aria-label={props['aria-label']}>
            <ButtonBase
                onClick={props.onClick}
                sx={{
                    marginLeft: '0.5rem',
                    marginRight: '0.5rem',
                    padding: '0.5rem',
                    borderRadius: '10rem',
                    backgroundColor: 'transparent',
                    cursor: 'pointer',
                    transition: '0.2s',
                    '&:hover': {
                        backgroundColor: (theme) =>
                            alpha(darkSwitch(theme, theme.palette.common.black, theme.palette.common.white), 0.1),
                    },
                }}
            >
                {props.children}
            </ButtonBase>
        </Tooltip>
    );
}

export function LinkBox({
  as: As = Link,
  title,
  children,
  description,
  ...rest
}: PropsWithChildren<LinkBoxProps>) {
  return (
    <As {...rest}>
      {children}

      <div>
        <strong>{title}</strong>

        {description && <p>{description}</p>}
      </div>

      <FiChevronRight size={18} />
    </As>
  );
}

export default function LessonTip({ icon, children } : PropsWithChildren<Props>) {
  return (
    <p className={`${styles['lesson-tip']} d-flex align-items-center`}>
      {
        // Using icon={icon || faLightbulb} throws the following
        // TypeScript error: Expression produces a union type that is too complex to represent.
        icon
          ? <FontAwesomeIcon width="32" icon={icon} />
          : <FontAwesomeIcon width="32" icon={faLightbulb} />
      }
      <span>
        {children}
      </span>
    </p>
  );
}

Accordion = ({
  header,
  buttonLabel,
  defaultOpen,
  children,
}: PropsWithChildren<AccordionProps>) => (
  <Disclosure defaultOpen={defaultOpen}>
    {({ open }) => (
      <>
        <HeaderButton open={open} label={buttonLabel}>
          {header}
        </HeaderButton>
        <Panel>{children}</Panel>
      </>
    )}
  </Disclosure>
)

export default function Demo({ title, children }: PropsWithChildren<{ title: string }>) {
  const baseURL = `${GITHUB_URL}/tree/master/frontend-ssr`;
  const { pathname } = useRouter();

  return (
    <>
      <main className={`${styles.demo} my-5`}>
        <h1>
          {title}
        </h1>
        {children}
      </main>
      <div className="text-right mr-2">
        <p>
          E vreo problemă cu acest demo?
          {' '}
          <a href={`${baseURL}/pages${pathname}`} target="_blank" rel="noreferrer">
            Corectează-l pe GitHub
          </a>
        </p>
      </div>
    </>
  );
}

export class ErrorBoundary extends React.Component<PropsWithChildren<{}>, { hasError: boolean }> {
    constructor(props: any) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error: Error) {
        return { hasError: true };
    }

    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        // logErrorToMyService(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return (
                <Box
                    display={"flex"}
                    flexDirection={"column"}
                    m={0.5}>
                    <Box
                        display={"flex"}
                        alignItems={"center"}
                        m={0.5}>
                        <ErrorIcon color={"error"} fontSize={"small"}/>
                        <Box marginLeft={1}>Error</Box>
                    </Box>
                    <Typography variant={"caption"}>
                        See the error in the console
                    </Typography>
                </Box>
            );
        }

        return this.props.children;
    }
}

export default function BasicSection({ imageUrl, title, overTitle, reversed, children }: PropsWithChildren<BasicSectionProps>) {
  return (
    <BasicSectionWrapper reversed={reversed}>
      <ImageContainer>
        <NextImage src={imageUrl} alt={title} layout="fill" objectFit="cover" />
      </ImageContainer>
      <ContentContainer>
        <CustomOverTitle>{overTitle}</CustomOverTitle>
        <Title>{title}</Title>
        <RichText>{children}</RichText>
      </ContentContainer>
    </BasicSectionWrapper>
  );
}

/**
 * This component updates the breadcrumb in the app bar when rendered
 * @param children
 * @param title
 * @param path
 * @constructor
 * @category Components
 */
function BreadcrumbUpdater({
                               children,
                               title,
                               path
                           }
                               : PropsWithChildren<BreadcrumbRouteProps>) {

    const breadcrumbsContext = useBreadcrumbsContext();
    React.useEffect(() => {
        breadcrumbsContext.set({
            breadcrumbs: [{
                title: title,
                url: path
            }]
        });
    }, [path, title]);

    return <>{children}</>;
}

Collapser = ({
  onToggle,
  size = '20em',
  isOpen = false,
  className = '',
  as: Wrapper = 'div',
  Toggler = DefaultToggler,
  children,
}: PropsWithChildren<Props>) => {
  return (
    <Wrapper className={`
      ${className} 
      ${styles.Collapser} 
      ${isOpen ? styles['is-open'] : ''}
      relative
      `}
    >
      <div style={{ maxHeight: size }} className={styles.content}>
        {children}
      </div>
      <div className={`${styles.toggler} absolute`}>
        <Toggler onClick={onToggle} isOpen={isOpen} />
      </div>
    </Wrapper>
  );
}

WingBlank: React.FC<PropsWithChildren<WingBlankProps>> = (props) => {
  const { size = 8, children, style } = props
  return (
    <div
      style={{
        marginLeft: size,
        marginRight: size,
        ...style,
      }}
    >
      {children}
    </div>
  )
}