react-native-screens/src/components/helpers/prepareHeaderBarButtonItems.ts at cb3bfe4b6c19ab13fb9c51264b102228c6338d59 · chrism/react-native-screens · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { Image, processColor } from 'react-native';
import {
  HeaderBarButtonItem,
  HeaderBarButtonItemWithMenu,
} from 'react-native-screens/types';

const prepareMenu = (
  menu: HeaderBarButtonItemWithMenu['menu'],
  index: number,
  side: 'left' | 'right',
  path: string = '',
): HeaderBarButtonItemWithMenu['menu'] => {
  return {
    ...menu,
    items: menu.items.map((menuItem, menuIndex) => {
      const currentPath = path ? `${path}.${menuIndex}` : `${menuIndex}`;
      const iconType = menuItem.icon?.type;
      const sfSymbolName =
        iconType === 'sfSymbol' ? menuItem.icon?.name : undefined;
      const xcassetName =
        iconType === 'xcasset' ? menuItem.icon?.name : undefined;

      let imageSource, templateSource;
      if (menuItem.icon?.type === 'imageSource') {
        imageSource = Image.resolveAssetSource(menuItem.icon.imageSource);
      } else if (menuItem.icon?.type === 'templateSource') {
        templateSource = Image.resolveAssetSource(menuItem.icon.templateSource);
      }

      if (menuItem.type === 'submenu') {
        return {
          ...menuItem,
          sfSymbolName,
          xcassetName,
          imageSource,
          templateSource,
          ...prepareMenu(menuItem, index, side, currentPath),
        };
      }
      return {
        ...menuItem,
        sfSymbolName,
        xcassetName,
        imageSource,
        templateSource,
        menuId: `${currentPath}-${index}-${side}`,
      };
    }),
  };
};

export const prepareHeaderBarButtonItems = (
  barButtonItems: HeaderBarButtonItem[],
  side: 'left' | 'right',
) => {
  return barButtonItems?.map((item, index) => {
    if (item.type === 'spacing') {
      return item;
    }
    let imageSource, templateSource;
    if (item.icon?.type === 'imageSource') {
      imageSource = Image.resolveAssetSource(item.icon.imageSource);
    } else if (item.icon?.type === 'templateSource') {
      templateSource = Image.resolveAssetSource(item.icon.templateSource);
    }

    const titleStyle = item.titleStyle
      ? { ...item.titleStyle, color: processColor(item.titleStyle.color) }
      : undefined;
    const tintColor = item.tintColor ? processColor(item.tintColor) : undefined;
    const badge = item.badge
      ? {
          ...item.badge,
          style: {
            ...item.badge.style,
            color: processColor(item.badge.style?.color),
            backgroundColor: processColor(item.badge.style?.backgroundColor),
          },
        }
      : undefined;
    const processedItem = {
      ...item,
      imageSource,
      templateSource,
      sfSymbolName: item.icon?.type === 'sfSymbol' ? item.icon.name : undefined,
      xcassetName: item.icon?.type === 'xcasset' ? item.icon.name : undefined,
      titleStyle,
      tintColor,
      badge,
    };
    if (item.type === 'button') {
      return {
        ...processedItem,
        buttonId: `${index}-${side}`,
      };
    }
    if (item.type === 'menu') {
      return {
        ...processedItem,
        menu: prepareMenu(item.menu, index, side),
      };
    }
    return null;
  });
};