Skip to content

Commit

Permalink
Merge pull request #99 from sebgroup/refactor/tooltip
Browse files Browse the repository at this point in the history 
Refactor/tooltip
  • Loading branch information
@kherP
kherP committed Feb 28, 2020
2 parents b87c8a9 + b30d8b6 commit 101fe4d
Show file tree
Hide file tree
Showing 12 changed files with 1,523 additions and 532 deletions.
154 changes: 118 additions & 36 deletions develop/components/pages/TooltipPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,54 @@
import * as React from "react";
import { Tooltip } from "../../../src/Tooltip/Tooltip";
import { Tooltip, TooltipTrigger, TooltipTheme, TooltipPosition, TooltipMessageGroupItem } from "../../../src/Tooltip/Tooltip";
import { RadioListModel, RadioGroup } from "../../../src/RadioGroup/RadioGroup";
import { CheckBox } from "../../../src/CheckBox/CheckBox";
import { Notification } from "../../../src/Notification/Notification";
import Highlight from "react-highlight";
const docMD: string = require("../../../src/Tooltip/readme.md");

const moneySVG: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170"><title>regular_black</title><path d="M137.5,102.1V40.4a3,3,0,0,0-3-3H8a3,3,0,0,0-3,3v61.7a3,3,0,0,0,3,3H134.5A3,3,0,0,0,137.5,102.1ZM112,91.3v7.7H30.5V91.3a3,3,0,0,0-3-3,6.1,6.1,0,0,1-6.1-6.1,3,3,0,0,0-3-3H11V63h7.5a3,3,0,0,0,3-3,6.1,6.1,0,0,1,6.1-6.1,3,3,0,0,0,3-3V43.4H112v7.5a3,3,0,0,0,3,3A6.1,6.1,0,0,1,121,60a3,3,0,0,0,3,3h7.5V79.3H124a3,3,0,0,0-3,3,6.1,6.1,0,0,1-6.1,6.1A3,3,0,0,0,112,91.3ZM131.5,57h-4.9a12.1,12.1,0,0,0-8.7-8.7V43.4h13.6ZM24.5,43.4v4.9A12.1,12.1,0,0,0,15.9,57H11V43.4ZM11,85.3h4.9A12.1,12.1,0,0,0,24.5,94v5.1H11ZM118,99.1V94a12.1,12.1,0,0,0,8.7-8.7h4.9V99.1Z" /><path d="M151.3,115.8V54.2h-6v58.7H21.7v6H148.3A3,3,0,0,0,151.3,115.8Z" /><path d="M159,67.9v58.7H35.5v6H162a3,3,0,0,0,3-3V67.9Z" /><path d="M71.3,88.8A17.5,17.5,0,1,1,88.8,71.3,17.5,17.5,0,0,1,71.3,88.8Zm0-29A11.5,11.5,0,1,0,82.8,71.3,11.5,11.5,0,0,0,71.3,59.8Z" /></svg>;
const docMD: string = require("../../../src/Tooltip/readme.md");

const TooltipPage: React.FunctionComponent = () => {
let myTooltip: Tooltip;

function dismissTooltip(e?: React.MouseEvent<HTMLDivElement>): void {
const dismissableTooltip: HTMLElement = document.getElementById("dismissable-tooltip");
if (event.target !== dismissableTooltip.firstChild) {
myTooltip.forceDismiss(e);
}
}
const triggerList: Array<RadioListModel<TooltipTrigger>> = [
{ label: "Click", value: "click" },
{ label: "Hover", value: "hover" },
{ label: "Focus", value: "focus" }
];
const themeList: Array<RadioListModel<TooltipTheme>> = [
{ label: "Primary", value: "primary" },
{ label: "Danger", value: "danger" },
{ label: "Default", value: "default" },
{ label: "Light", value: "light" },
{ label: "Purple", value: "purple" },
{ label: "Success", value: "success" },
{ label: "Warning", value: "warning" },
];
const positionList: Array<RadioListModel<TooltipPosition>> = [
{ label: "Top", value: "top" },
{ label: "Top Left", value: "top-left" },
{ label: "Top Right", value: "top-right" },
{ label: "Right", value: "right" },
{ label: "Right Top", value: "right-top" },
{ label: "Right Bottom", value: "right-bottom" },
{ label: "Bottom", value: "bottom" },
{ label: "Bottom Left", value: "bottom-left" },
{ label: "Bottom Right", value: "bottom-right" },
{ label: "Left", value: "left" },
{ label: "Left Top", value: "left-top" },
{ label: "Left Bottom", value: "left-bottom" },
];
const defaultTooltipContent: string = "Tooltip content could be long, therefore, controlling the position and width is important";
const nodeTooltipContent: React.ReactNode = (<div><h1>Tooltip Header</h1><div>tooltip content</div></div>);
const [theme, setTheme] = React.useState<TooltipTheme>(themeList[0].value);
const [position, setPosition] = React.useState<TooltipPosition>(positionList[0].value);
const [trigger, setTrigger] = React.useState<TooltipTrigger>(triggerList[0].value);
const [hasCallback, setHasCallback] = React.useState<boolean>(false);
const [hasNodeAsContent, setHasNodeAsContent] = React.useState<boolean>(false);
const [hasCustomReference, setHasCustomReference] = React.useState<boolean>(false);
const [disableAutoPosition, setDisableAutoPosition] = React.useState<boolean>(false);
const [notifcationToggle, setNotifcationToggle] = React.useState<boolean>(false);

return (
<div className="route-template container" onClick={dismissTooltip}>
<div className="route-template container">
<div className="info-holder">

<div className="info">
Expand All @@ -30,35 +62,85 @@ const TooltipPage: React.FunctionComponent = () => {
<p>Here are sample outputs</p>
<div className="result">
<Tooltip
message="Tooltip message could be long, therefore, controlling the position and width is important"
position="right"
width={200}
/>
content={hasNodeAsContent ? nodeTooltipContent : defaultTooltipContent}
position={position}
theme={theme}
trigger={trigger}
disableAutoPosition={disableAutoPosition}
onVisibleChange={hasCallback && (() => setNotifcationToggle(true))}
>
{hasCustomReference && <div>This is custom tooltip reference</div>}
</ Tooltip>
</div>

<p>Custom svg and can be dismissed when clicked outside</p>
<div className="result">
<Tooltip
message="Tooltip message could be long, therefore, controlling the position and width is important"
position="right"
width={200}
customSvg={moneySVG}
id="dismissable-tooltip"
ref={(el: Tooltip) => { myTooltip = el; }}
/>
<p>Options</p>
<div className="row">
<div className="col-md-6 col-sm-12">
<CheckBox label="Callback on visibility change" name="hasCallback" checked={hasCallback} onChange={(e) => setHasCallback(e.target.checked)} condensed />
</div>
<div className="col-md-6 col-sm-12">
<CheckBox
label="Render node as tooltip content (only works with content attribute)"
name="hasNodeAsContent"
checked={hasNodeAsContent}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setHasNodeAsContent(e.target.checked)}
condensed
/>
</div>
<div className="col-md-6 col-sm-12">
<CheckBox label="Disable auto position" name="disableAutoPosition" checked={disableAutoPosition} onChange={(e) => setDisableAutoPosition(e.target.checked)} condensed />
</div>
<div className="col-md-6 col-sm-12">
<CheckBox
label="Define custom tooltip reference"
name="hasCustomReference"
checked={hasCustomReference}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setHasCustomReference(e.target.checked)}
condensed
/>
</div>
</div>

<p>Triggered on hover</p>
<div className="result">
<Tooltip
message="Tooltip message could be long, therefore, controlling the position and width is important"
position="right"
width={200}
triggerOnHover={true}
/>
<div className="row">
<div className="col">
<p>Position</p>
<RadioGroup
name="position"
list={positionList}
value={position}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPosition(e.currentTarget.value as TooltipPosition)}
condensed
/>
</div>
<div className="col">
<p>Themes</p>
<RadioGroup
name="theme"
list={themeList}
value={theme}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTheme(e.currentTarget.value as TooltipTheme)}
condensed
/>
</div>
<div className="col">
<p>Triggers</p>
<RadioGroup
name="trigger"
list={triggerList}
value={trigger}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTrigger(e.currentTarget.value as TooltipTrigger)}
condensed
/>
</div>
</div>
</div>
</div>
<Notification
toggle={notifcationToggle}
style="slide-in"
dismissTimeout={3000}
onDismiss={() => setNotifcationToggle(false)}
>
<div>Tooltip visibility changed!</div>
</Notification>
</div>
);
};
Expand Down
3 changes: 2 additions & 1 deletion develop/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"noImplicitReturns": false,
"noImplicitThis": false,
"noImplicitAny": false,
"strictNullChecks": false
"strictNullChecks": false,
"allowSyntheticDefaultImports": true
},
"exclude": [
"**/*.test.tsx"
Expand Down
Loading

0 comments on commit 101fe4d

Please sign in to comment.