Web: Components: fixed tooltip documentation, added offsets properties
This commit is contained in:
parent
11cba99123
commit
38b1a1c543
@ -4,6 +4,8 @@
|
||||
|
||||
Custom tooltip
|
||||
|
||||
#### See documentation: https://github.com/wwayne/react-tooltip
|
||||
|
||||
#### Usage with IconButton
|
||||
|
||||
```js
|
||||
@ -14,6 +16,8 @@ import { Tooltip, IconButton, Text } from "asc-web-components";
|
||||
data-for="tooltipContent"
|
||||
data-tip="You tooltip content"
|
||||
data-event="click focus"
|
||||
data-offset="{'top': 100, 'right': 100}"
|
||||
data-place="top"
|
||||
>
|
||||
<IconButton isClickable={true} size={20} iconName="QuestionIcon" />
|
||||
</div>
|
||||
@ -49,7 +53,7 @@ const arrayUsers = [
|
||||
|
||||
<Tooltip
|
||||
id="group"
|
||||
offset={{ right: 90 }}
|
||||
offsetRight={90}
|
||||
getContent={dataTip =>
|
||||
dataTip ? (
|
||||
<div>
|
||||
@ -65,17 +69,23 @@ const arrayUsers = [
|
||||
#### YouComponent Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | -------- | :------: | ------ | ------- | --------------------------------- |
|
||||
| ------------- | -------- | :------: | ------------------------------------ | ------- | --------------------------------- |
|
||||
| `data-tip` | `string` | - | - | - | Required if you need to component |
|
||||
| `data-event` | `string` | - | - | - | Custom event to trigger tooltip |
|
||||
| `data-event` | `string` | - | `click, focus` | - | Custom event to trigger tooltip |
|
||||
| `data-offset` | `string` | - | `{'top', 'left', 'right', 'bottom'}` | - | Offset of current tooltip |
|
||||
| `data-place` | `string` | - | `top, right, bottom, left` | - | Tooltip placement |
|
||||
| `data-for` | `string` | ✅ | - | - | Corresponds to the id of Tooltip |
|
||||
|
||||
#### ReactTooltip Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ------------ | -------- | :------: | -------------------------------------- | ------- | ------------------------------------ |
|
||||
| -------------- | -------- | :------: | -------------------------- | ------- | ------------------------------------ |
|
||||
| `id` | `string` | ✅ | - | - | Used as HTML id property |
|
||||
| `getContent` | `func` | - | | - | Generate the tip content dynamically |
|
||||
| `effect` | `string` | - | `float, solid` | `float` | Behaviour of tooltip |
|
||||
| `offset` | `object` | - | `top, left, right, bottom` | - | Offset of tooltip |
|
||||
| `place` | `string` | - | `top, right, bottom, left` | `top` | Global tooltip placement |
|
||||
| `offsetTop` | `number` | - | - | - | Offset top all tooltips on page |
|
||||
| `offsetRight` | `number` | - | - | - | Offset right all tooltips on page |
|
||||
| `offsetBottom` | `number` | - | - | - | Offset bottom all tooltips on page |
|
||||
| `offsetLeft` | `number` | - | - | - | Offset left all tooltips on page |
|
||||
| `maxWidth` | `number` | - | - | `340` | Set max width of tooltip |
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { withKnobs, select, number } from "@storybook/addon-knobs/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import Tooltip from "./";
|
||||
import IconButton from "../icon-button";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
@ -13,9 +10,6 @@ const BodyStyle = { marginTop: 70, marginLeft: 50, position: "absolute" };
|
||||
const BodyStyle_2 = { marginTop: 70, marginLeft: 200, position: "absolute" };
|
||||
const BodyStyle_3 = { marginTop: 70, marginLeft: 400 };
|
||||
|
||||
const arrayEffects = ["float", "solid"];
|
||||
const arrayPlaces = ["top", "right", "bottom", "left"];
|
||||
|
||||
const arrayUsers = [
|
||||
{
|
||||
key: "user_1",
|
||||
@ -50,8 +44,8 @@ const arrayUsers = [
|
||||
];
|
||||
|
||||
storiesOf("Components|Tooltip", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.addParameters({ viewport: { defaultViewport: "responsive" } })
|
||||
.addParameters({ options: { showAddonPanel: false } })
|
||||
.add("all", () => {
|
||||
return (
|
||||
<Section>
|
||||
@ -62,13 +56,13 @@ storiesOf("Components|Tooltip", module)
|
||||
data-event="click focus"
|
||||
>
|
||||
<h5 style={{ marginLeft: -30 }}>Click on me</h5>
|
||||
<IconButton isClickable={true} size={20} iconName="QuestionIcon" />
|
||||
<IconButton isClickable={true} size={13} iconName="QuestionIcon" />
|
||||
</div>
|
||||
<Tooltip
|
||||
id="tooltipContent"
|
||||
effect={select("effect", arrayEffects, "float")}
|
||||
place={select("place", arrayPlaces, "top")}
|
||||
maxWidth={number("maxWidth", 320)}
|
||||
effect="float"
|
||||
place="top"
|
||||
maxWidth={320}
|
||||
/>
|
||||
|
||||
<div style={BodyStyle_2}>
|
||||
@ -79,7 +73,8 @@ storiesOf("Components|Tooltip", module)
|
||||
</div>
|
||||
<Tooltip
|
||||
id="link"
|
||||
offset={{ right: 90 }}
|
||||
offsetRight={90}
|
||||
effect="solid"
|
||||
getContent={dataTip => (
|
||||
<div>
|
||||
<Text.Body isBold={true} fontSize={16}>
|
||||
@ -118,7 +113,7 @@ storiesOf("Components|Tooltip", module)
|
||||
|
||||
<Tooltip
|
||||
id="group"
|
||||
offset={{ right: 90 }}
|
||||
offsetRight={90}
|
||||
getContent={dataTip =>
|
||||
dataTip ? (
|
||||
<div>
|
||||
|
||||
@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import { withKnobs, select, number } from "@storybook/addon-knobs/react";
|
||||
import withReadme from "storybook-readme/with-readme";
|
||||
import Readme from "./README.md";
|
||||
import Tooltip from "./";
|
||||
import Section from "../../../.storybook/decorators/section";
|
||||
import Link from "../link";
|
||||
import { Text } from "../text";
|
||||
|
||||
const BodyStyle = { marginTop: 100, marginLeft: 200, position: "absolute" };
|
||||
|
||||
const arrayEffects = ["float", "solid"];
|
||||
const arrayPlaces = ["top", "right", "bottom", "left"];
|
||||
|
||||
storiesOf("Components|Tooltip", module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(withReadme(Readme))
|
||||
.add("base", () => {
|
||||
return (
|
||||
<Section>
|
||||
<div style={BodyStyle}>
|
||||
<Link
|
||||
data-for="link"
|
||||
data-tip="Bob Johnston"
|
||||
>
|
||||
Bob Johnston
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Tooltip
|
||||
id="link"
|
||||
effect={select("effect", arrayEffects, "float")}
|
||||
place={select("place", arrayPlaces, "top")}
|
||||
offsetTop={number("offsetTop", 0)}
|
||||
offsetRight={number("offsetRight", 0)}
|
||||
offsetBottom={number("offsetBottom", 0)}
|
||||
offsetLeft={number("offsetLeft", 0)}
|
||||
getContent={dataTip => (
|
||||
<div>
|
||||
<Text.Body isBold={true} fontSize={16}>
|
||||
{dataTip}
|
||||
</Text.Body>
|
||||
<Text.Body color="#A3A9AE" fontSize={13}>
|
||||
BobJohnston@gmail.com
|
||||
</Text.Body>
|
||||
<Text.Body fontSize={13}>Developer</Text.Body>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Section>
|
||||
);
|
||||
});
|
||||
@ -33,7 +33,17 @@ class Tooltip extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { effect, place, maxWidth, id, getContent, offset } = this.props;
|
||||
const {
|
||||
effect,
|
||||
place,
|
||||
maxWidth,
|
||||
id,
|
||||
getContent,
|
||||
offsetTop,
|
||||
offsetRight,
|
||||
offsetBottom,
|
||||
offsetLeft
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<TooltipStyle maxWidth={maxWidth}>
|
||||
@ -44,7 +54,12 @@ class Tooltip extends Component {
|
||||
effect={effect}
|
||||
place={place}
|
||||
globalEventOff="click"
|
||||
offset={offset}
|
||||
offset={{
|
||||
top: offsetTop,
|
||||
right: offsetRight,
|
||||
bottom: offsetBottom,
|
||||
left: offsetLeft
|
||||
}}
|
||||
wrapper="span"
|
||||
/>
|
||||
</TooltipStyle>
|
||||
@ -57,14 +72,20 @@ Tooltip.propTypes = {
|
||||
effect: PropTypes.oneOf(["float", "solid"]),
|
||||
place: PropTypes.oneOf(["top", "right", "bottom", "left"]),
|
||||
maxWidth: PropTypes.number,
|
||||
offset: PropTypes.object,
|
||||
getContent: PropTypes.func
|
||||
getContent: PropTypes.func,
|
||||
offsetTop: PropTypes.number,
|
||||
offsetRight: PropTypes.number,
|
||||
offsetBottom: PropTypes.number,
|
||||
offsetLeft: PropTypes.number
|
||||
};
|
||||
|
||||
Tooltip.defaultProps = {
|
||||
effect: "float",
|
||||
place: "top",
|
||||
offset: { right: 70 }
|
||||
offsetTop: 0,
|
||||
offsetRight: 0,
|
||||
offsetBottom: 0,
|
||||
offsetLeft: 0
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user