app-builder-core/template/customization/polling/components/PollButtonSidePanelTrigger.tsx at e348a5e0abc581b0ebb04bd42a201c93c9652ea7 · AgoraIO-Community/app-builder-core · 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
import React from 'react';
import {
  useSidePanel,
  ToolbarItem,
  ImageIcon,
  ThemeConfig,
  $config,
  useActionSheet,
  IconButton,
  IconButtonProps,
} from 'customization-api';
import {View, Text, StyleSheet} from 'react-native';
import pollIcons from '../poll-icons';

const POLL_SIDEBAR_NAME = 'side-panel-poll';

const PollButtonSidePanelTrigger = () => {
  const {isOnActionSheet} = useActionSheet();
  const {sidePanel, setSidePanel} = useSidePanel();

  const isPollPanelActive = sidePanel === POLL_SIDEBAR_NAME;
  // On smaller screens
  if (isOnActionSheet) {
    const iconButtonProps: IconButtonProps = {
      onPress: () => {
        setSidePanel(POLL_SIDEBAR_NAME);
      },
      iconProps: {
        icon: pollIcons['bar-chart'],
        tintColor: isPollPanelActive
          ? $config.PRIMARY_ACTION_TEXT_COLOR
          : $config.SECONDARY_ACTION_COLOR,
        iconBackgroundColor: isPollPanelActive
          ? $config.PRIMARY_ACTION_BRAND_COLOR
          : '',
      },
      btnTextProps: {
        text: 'Polls',
        textColor: $config.FONT_COLOR,
        numberOfLines: 1,
        textStyle: {
          marginTop: 8,
        },
      },
      isOnActionSheet: isOnActionSheet,
    };

    return (
      <ToolbarItem>
        <IconButton {...iconButtonProps} />
      </ToolbarItem>
    );
  }
  // On bigger screens
  return (
    <ToolbarItem style={{...style.toolbarItem, ...style.spacing}}>
      <View style={style.toolbarImg}>
        <ImageIcon
          iconType="plain"
          iconSize={22}
          icon={pollIcons['bar-chart']}
          tintColor={$config.SECONDARY_ACTION_COLOR}
        />
      </View>
      <Text style={style.toolbarText}>Polls</Text>
    </ToolbarItem>
  );
};

export {PollButtonSidePanelTrigger, POLL_SIDEBAR_NAME};

const style = StyleSheet.create({
  toolbarItem: {
    display: 'flex',
    flexDirection: 'row',
  },
  toolbarImg: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
  toolbarText: {
    color: $config.SECONDARY_ACTION_COLOR,
    fontSize: ThemeConfig.FontSize.normal,
    fontWeight: '400',
    fontFamily: ThemeConfig.FontFamily.sansPro,
  },
  spacing: {
    margin: 12,
  },
});