1import React, { ComponentType, forwardRef, PropsWithChildren } from 'react';
2import { Platform } from 'react-native';
3
4import Text, { TextProps } from '../primitives/Text';
5import View, { ViewProps } from '../primitives/View';
6
7function createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {
8  return forwardRef((props: ViewProps, ref) => {
9    return <View {...nativeProps} {...props} ref={ref} />;
10  }) as ComponentType<ViewProps>;
11}
12
13export const UL = createView(
14  Platform.select({
15    web: {
16      accessibilityRole: 'list',
17    },
18  })
19);
20
21function isTextProps(props: any): props is TextProps {
22  // Treat <li></li> as a Text element.
23  return typeof props.children === 'string';
24}
25
26type LIProps = TextProps | ViewProps;
27
28export const LI = forwardRef((props: PropsWithChildren<LIProps>, ref: any) => {
29  if (isTextProps(props)) {
30    const accessibilityRole: LIProps['accessibilityRole'] = Platform.select({
31      web: 'listitem',
32      default: props.accessibilityRole,
33    });
34    return <Text {...props} accessibilityRole={accessibilityRole} ref={ref} />;
35  }
36  const accessibilityRole: LIProps['accessibilityRole'] = Platform.select({
37    web: 'listitem',
38    default: props.accessibilityRole,
39  });
40  return <View {...props} accessibilityRole={accessibilityRole} ref={ref} />;
41}) as ComponentType<LIProps>;
42