65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import styled, { createGlobalStyle } from "styled-components";
|
||
|
|
import { Popover, Position } from "@blueprintjs/core";
|
||
|
|
|
||
|
|
import DocumentationSearch from "components/designSystems/appsmith/help/DocumentationSearch";
|
||
|
|
import Icon, { IconSize } from "components/ads/Icon";
|
||
|
|
|
||
|
|
import { HELP_MODAL_WIDTH } from "constants/HelpConstants";
|
||
|
|
import AnalyticsUtil from "utils/AnalyticsUtil";
|
||
|
|
|
||
|
|
const HelpPopoverStyle = createGlobalStyle`
|
||
|
|
.bp3-popover.bp3-minimal.navbar-help-popover {
|
||
|
|
margin-top: 0 !important;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const StyledTrigger = styled.div`
|
||
|
|
cursor: pointer;
|
||
|
|
width: 25px;
|
||
|
|
height: 25px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 0 ${(props) => props.theme.spaces[2]}px;
|
||
|
|
background: ${(props) =>
|
||
|
|
props.theme.colors.globalSearch.helpButtonBackground};
|
||
|
|
`;
|
||
|
|
|
||
|
|
const Trigger = () => (
|
||
|
|
<StyledTrigger>
|
||
|
|
<Icon name="help" size={IconSize.XS} />
|
||
|
|
</StyledTrigger>
|
||
|
|
);
|
||
|
|
|
||
|
|
const onOpened = () => {
|
||
|
|
AnalyticsUtil.logEvent("OPEN_HELP", { page: "Editor" });
|
||
|
|
};
|
||
|
|
const HelpButton = () => {
|
||
|
|
return (
|
||
|
|
<Popover
|
||
|
|
modifiers={{
|
||
|
|
offset: {
|
||
|
|
enabled: true,
|
||
|
|
offset: "0, 6",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
minimal
|
||
|
|
position={Position.BOTTOM_RIGHT}
|
||
|
|
onOpened={onOpened}
|
||
|
|
popoverClassName="navbar-help-popover"
|
||
|
|
>
|
||
|
|
<>
|
||
|
|
<HelpPopoverStyle />
|
||
|
|
<Trigger />
|
||
|
|
</>
|
||
|
|
<div style={{ width: HELP_MODAL_WIDTH }}>
|
||
|
|
<DocumentationSearch hitsPerPage={4} hideSearch hideMinimizeBtn />
|
||
|
|
</div>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default HelpButton;
|