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