@botonic/react
Version:
Build Chatbots using React
79 lines • 3.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from 'framer-motion';
import React, { useContext } from 'react';
import styled from 'styled-components';
import { COLORS, ROLES, WEBCHAT } from '../constants';
import { WebchatContext } from '../contexts';
import { resolveImage } from '../util/environment';
import { ConditionalWrapper } from '../util/react';
const Header = styled.div `
display: flex;
background: linear-gradient(
90deg,
${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
${props => props.color} 100%
);
height: 55px;
border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
z-index: 2;
`;
const ImageContainer = styled.div `
padding: 10px;
align-items: center;
`;
const Image = styled.img `
width: 32px;
border-radius: 50%;
`;
const TextContainer = styled.div `
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
`;
const Title = styled.div `
display: flex;
font-family: inherit;
font-size: 15px;
font-weight: bold;
color: ${COLORS.SOLID_WHITE};
`;
const Subtitle = styled.div `
display: flex;
font-family: inherit;
font-size: 11px;
color: ${COLORS.SOLID_WHITE};
`;
const CloseHeader = styled.div `
padding: 0px 16px;
cursor: pointer;
color: ${COLORS.SOLID_WHITE};
font-family: inherit;
font-size: 36px;
`;
export const DefaultHeader = props => {
const { getThemeProperty } = props;
const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
const headerImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage, WEBCHAT.DEFAULTS.LOGO));
const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle, WEBCHAT.DEFAULTS.TITLE);
const headerSubtitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle, '');
return (_jsxs(Header, Object.assign({ role: ROLES.HEADER, color: props.color, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle)) }, { children: [headerImage && (_jsx(ImageContainer, { children: _jsx(Image, { src: resolveImage(headerImage) }) })), _jsxs(TextContainer, Object.assign({ ml: headerImage ? '0px' : '16px' }, { children: [_jsx(Title, Object.assign({ mb: headerSubtitle ? '6px' : '0px' }, { children: headerTitle })), _jsx(Subtitle, { children: headerSubtitle })] })), _jsx(ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => (_jsx(motion.div, Object.assign({ whileHover: { scale: 1.2 } }, { children: children }))) }, { children: _jsx(CloseHeader, Object.assign({ onClick: props.onCloseClick }, { children: "\u2A2F" })) }))] })));
};
export const WebchatHeader = props => {
const { webchatState, getThemeProperty } = useContext(WebchatContext);
const handleCloseWebchat = event => {
props.onCloseClick(event.target.value);
};
const CustomHeader = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customHeader);
if (CustomHeader) {
return _jsx(CustomHeader, { onCloseClick: handleCloseWebchat });
}
return (_jsx(DefaultHeader, { webchatState: webchatState, getThemeProperty: getThemeProperty, color: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor, COLORS.BOTONIC_BLUE), onCloseClick: handleCloseWebchat }));
};
export const StyledWebchatHeader = styled(WebchatHeader) `
border-radius: 8px 8px 0px 0px;
box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
height: 36px;
flex: none;
`;
//# sourceMappingURL=header.js.map