agora-appbuilder-core 3.0.9 → 4.0.0-api.0

package/template/src/atoms/Tooltip.native.tsx

@@ -0,0 +1,65 @@
+import RNTooltip from 'react-native-walkthrough-tooltip';
+import React, {useState} from 'react';
+import {Pressable, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
+import ThemeConfig from '../theme';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+interface TooltipProps {
+  activeBgStyle?: ViewStyle;
+  defaultBgStyle?: ViewStyle;
+  renderContent: (
+    isToolTipVisible: boolean,
+    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => React.ReactNode;
+  toolTipMessage: string;
+  toolTipIcon?: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+}
+const Tooltip = (props: TooltipProps) => {
+  const [isToolTipVisible, setToolTipVisible] = useState(false);
+  const {placement = 'top'} = props;
+  return (
+    <RNTooltip
+      arrowSize={{width: 25, height: 15}}
+      contentStyle={{
+        borderRadius: 8,
+        padding: 12,
+        backgroundColor: $config.CARD_LAYER_3_COLOR,
+      }}
+      tooltipStyle={{
+        shadowColor: $config.HARD_CODED_BLACK_COLOR,
+        shadowOffset: {
+          height: 4,
+          width: 0,
+        },
+        shadowOpacity: 0.1,
+        elevation: 5,
+        shadowRadius: 2,
+      }}
+      backgroundColor={'transparent'}
+      isVisible={isToolTipVisible}
+      content={
+        <View style={{flex: 1, flexDirection: 'row'}}>
+          {props?.toolTipIcon ? props.toolTipIcon : <></>}
+          <Text
+            style={{
+              color: $config.FONT_COLOR,
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              fontSize: 16,
+              fontWeight: '400',
+            }}>
+            {props.toolTipMessage}
+          </Text>
+        </View>
+      }
+      placement={placement}
+      onClose={() => setToolTipVisible(false)}>
+      <Pressable
+        style={isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle}
+        onPress={() => setToolTipVisible(true)}>
+        {props.renderContent(isToolTipVisible, setToolTipVisible)}
+      </Pressable>
+    </RNTooltip>
+  );
+};
+export default Tooltip;

package/template/src/atoms/Tooltip.tsx

@@ -0,0 +1,94 @@
+import ReactTooltip from 'react-tooltip';
+import React, {useState} from 'react';
+import {Text, View, ViewStyle} from 'react-native';
+
+interface TooltipProps {
+  activeBgStyle?: ViewStyle;
+  defaultBgStyle?: ViewStyle;
+  renderContent: (
+    isToolTipVisible: boolean,
+    setToolTipVisible: React.Dispatch<React.SetStateAction<boolean>>,
+  ) => React.ReactNode;
+  toolTipMessage: string;
+  toolTipIcon?: React.ReactNode;
+  isClickable?: boolean;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  onPress?: () => void;
+}
+const Tooltip = (props: TooltipProps) => {
+  const [isToolTipVisible, setToolTipVisible] = useState(false);
+  const {isClickable = false, placement = 'top'} = props;
+  const css = `
+  .custom-tool-tip{
+    padding:12px;
+    border-radius: 8px;
+  }
+  .custom-tool-tip div{
+    font-family: "Source Sans Pro";
+    font-weight: 400;
+    font-size: 16px;
+  }
+  .__react_component_tooltip.show{
+    opacity:1;
+  }
+  .custom-tool-tip::after {
+    width: 20px !important;
+    height: 20px !important;
+    border-top-right-radius: 5px !important;
+    bottom: -10px !important;
+    margin-left: -10px !important;
+  }`;
+  const randomString = (
+    length = 5,
+    chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  ) => {
+    var result = '';
+    for (var i = length; i > 0; --i)
+      result += chars[Math.floor(Math.random() * chars.length)];
+    return result;
+  };
+
+  const toolTipId = randomString();
+
+  return (
+    <>
+      <div
+        style={{cursor: isClickable ? 'pointer' : 'auto'}}
+        data-tip
+        data-event={isClickable ? 'click focus' : 'mouseenter'}
+        data-event-off={isClickable ? '' : 'mouseleave'}
+        data-for={toolTipId}
+        onMouseEnter={() => setToolTipVisible(true)}
+        onMouseLeave={() => {
+          setToolTipVisible(false);
+        }}>
+        <View
+          style={
+            isToolTipVisible ? props?.activeBgStyle : props?.defaultBgStyle
+          }>
+          {props.renderContent(isToolTipVisible, setToolTipVisible)}
+        </View>
+      </div>
+      <ReactTooltip
+        afterShow={() => {
+          isClickable && props?.onPress && props.onPress();
+        }}
+        globalEventOff="click"
+        id={toolTipId}
+        backgroundColor={$config.CARD_LAYER_3_COLOR}
+        className="custom-tool-tip"
+        place={'top'}
+        type="dark"
+        effect="solid">
+        <style type="text/css">{css}</style>
+        <View style={{flex: 1, flexDirection: 'row'}}>
+          {props?.toolTipIcon ? props.toolTipIcon : null}
+          <Text style={{color: $config.FONT_COLOR}}>
+            {props.toolTipMessage}
+          </Text>
+        </View>
+      </ReactTooltip>
+    </>
+  );
+};
+export default Tooltip;

package/template/src/atoms/UserAvatar.tsx

@@ -0,0 +1,60 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import ThemeConfig from '../theme';
+import {isWeb} from '../utils/common';
+
+function getInitials(name: string) {
+  if (name && name?.length) {
+    return name[0].toUpperCase();
+  }
+  return 'U';
+}
+
+const UserAvatar = ({name, containerStyle, textStyle}) => {
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          alignSelf: 'center',
+          alignContent: 'center',
+          justifyContent: 'center',
+        },
+      ]}>
+      <PlatformWrapper>
+        <Text
+          style={[
+            textStyle,
+            {
+              fontFamily: ThemeConfig.FontFamily.sansPro,
+              alignSelf: 'center',
+              textAlign: 'center',
+            },
+          ]}>
+          {getInitials(name)}
+        </Text>
+      </PlatformWrapper>
+    </View>
+  );
+};
+
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default UserAvatar;
+
+const styles = StyleSheet.create({});