From 9ae765a3cc38b36ce5ea77edd8fcc0f7bd9646a6 Mon Sep 17 00:00:00 2001 From: pvcresin Date: Fri, 29 May 2020 23:38:43 +0900 Subject: [PATCH] feat(component): adding "padding" property to customize padding style --- README.md | 1 + src/decorators/defaultStyles.js | 2 ++ src/decorators/styler.js | 9 +++++---- src/index.js | 11 ++++++++++- src/index.scss | 1 - 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 84130097..7f64c4be 100755 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ Check example: [React-tooltip Test](https://react-tooltip.netlify.com/) | globalEventOff | | String | e.g. click | global event to hide tooltip (global only) | | isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture | | offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global | +| padding | data-padding | String | e.g. `8px 21px` | Popup padding style | | multiline | data-multiline | Bool | true, false | support `
`, `
` to make multiline | | className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class | | html | data-html | Bool | true, false | `

` or ``, but see [Security Note](#security-note) below. | diff --git a/src/decorators/defaultStyles.js b/src/decorators/defaultStyles.js index 33d7e30f..f5f41f4e 100755 --- a/src/decorators/defaultStyles.js +++ b/src/decorators/defaultStyles.js @@ -13,3 +13,5 @@ const defaultColors = { export function getDefaultPopupColors (type) { return defaultColors[type] ? { ...defaultColors[type] } : undefined; } + +export const DEFAULT_PADDING = "8px 21px"; diff --git a/src/decorators/styler.js b/src/decorators/styler.js index 3a734e67..d8cb0e2d 100755 --- a/src/decorators/styler.js +++ b/src/decorators/styler.js @@ -1,16 +1,16 @@ -import { getDefaultPopupColors } from "./defaultStyles"; +import { getDefaultPopupColors, DEFAULT_PADDING } from "./defaultStyles"; /** * Generates the specific tooltip style for use on render. */ -export function generateTooltipStyle(uuid, customColors, type, hasBorder) { - return generateStyle(uuid, getPopupColors(customColors, type, hasBorder)); +export function generateTooltipStyle(uuid, customColors, type, hasBorder, padding) { + return generateStyle(uuid, getPopupColors(customColors, type, hasBorder), padding); } /** * Generates the tooltip style rules based on the element-specified "data-type" property. */ -function generateStyle(uuid, colors) { +function generateStyle(uuid, colors, padding = DEFAULT_PADDING) { const textColor = colors.text; const backgroundColor = colors.background; const borderColor = colors.border; @@ -21,6 +21,7 @@ function generateStyle(uuid, colors) { color: ${textColor}; background: ${backgroundColor}; border: 1px solid ${borderColor}; + padding: ${padding}; } .${uuid}.place-top { diff --git a/src/index.js b/src/index.js index 9790198f..47c31865 100755 --- a/src/index.js +++ b/src/index.js @@ -38,6 +38,7 @@ class ReactTooltip extends React.Component { type: PropTypes.string, effect: PropTypes.string, offset: PropTypes.object, + padding: PropTypes.string, multiline: PropTypes.bool, border: PropTypes.bool, textColor: PropTypes.string, @@ -95,6 +96,7 @@ class ReactTooltip extends React.Component { border: false, customColors: {}, offset: {}, + padding: props.padding, extraClass: "", html: false, delayHide: 0, @@ -426,6 +428,7 @@ class ReactTooltip extends React.Component { }, effect: effect, offset: offset, + padding: target.getAttribute("data-padding") || self.props.padding, html: (target.getAttribute("data-html") ? target.getAttribute("data-html") === "true" : self.props.html) || false, delayShow: target.getAttribute("data-delay-show") || @@ -674,7 +677,13 @@ class ReactTooltip extends React.Component { const { extraClass, html, ariaProps, disable } = this.state; const content = this.getTooltipContent(); const isEmptyTip = this.isEmptyTip(content); - const style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border); + const style = generateTooltipStyle( + this.state.uuid, + this.state.customColors, + this.state.type, + this.state.border, + this.state.padding + ); const tooltipClass = "__react_component_tooltip" + diff --git a/src/index.scss b/src/index.scss index 8f6849ae..22344586 100755 --- a/src/index.scss +++ b/src/index.scss @@ -4,7 +4,6 @@ font-size: 13px; left: -999em; opacity: 0; - padding: 8px 21px; position: fixed; pointer-events: none; transition: opacity 0.3s ease-out;