Skip to content

Commit 2a36416

Browse files
aronhelseraronhelser
authored
Merge pull request #743 from proda-ai/desired-place-list
feat(getposition): support desired-place-list (by priority)
2 parents 420ca5f + 06dbda3 commit 2a36416

File tree

3 files changed

+26
-17
lines changed

3 files changed

+26
-17
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -73,18 +73,18 @@ Notes:
7373

7474
| Global | Specific | Type | Values | Description |
7575
| :--------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
76-
| place | data-place | String | top, right, bottom, left | placement |
76+
| place | data-place | String | "top", "right", "bottom", "left", or comma-separated e.g. "left,right" | placement - can specify a comma-separated list of preferences that will be attempted in order |
7777
| type | data-type | String | dark, success, warning, error, info, light | theme |
7878
| effect | data-effect | String | float, solid | behaviour of tooltip |
7979
| event | data-event | String | e.g. click | custom event to trigger tooltip |
8080
| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |
8181
| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |
8282
| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |
83-
| offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global |
83+
| offset | data-offset | Object | { top?: number, right?: number, bottom?: number, left?: number } | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global |
8484
| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |
8585
| multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline |
8686
| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |
87-
| html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below. |
87+
| html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below. |
8888
| delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` |
8989
| delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` |
9090
| delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |

‎src/index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ class ReactTooltip extends React.Component {
428428
e,
429429
e.currentTarget,
430430
this.tooltipRef,
431-
desiredPlace,
431+
desiredPlace.split(',')[0],
432432
desiredPlace,
433433
effect,
434434
offset
@@ -446,7 +446,9 @@ class ReactTooltip extends React.Component {
446446
);
447447
}
448448

449-
const place = result.isNewState ? result.newState.place : desiredPlace;
449+
const place = result.isNewState
450+
? result.newState.place
451+
: desiredPlace.split(',')[0];
450452

451453
// To prevent previously created timers from triggering
452454
this.clearTimer();

‎src/utils/getPosition.js

+19-12
Original file line numberDiff line numberDiff line change
@@ -76,24 +76,31 @@ export default function(e, target, node, place, desiredPlace, effect, offset) {
7676
outsideLeft(p) || outsideRight(p) || outsideTop(p) || outsideBottom(p);
7777
const inside = p => !outside(p);
7878

79-
const placesList = ['top', 'bottom', 'left', 'right'];
80-
const insideList = [];
81-
for (let i = 0; i < 4; i++) {
82-
const p = placesList[i];
83-
if (inside(p)) {
84-
insideList.push(p);
79+
const placeIsInside = {
80+
top: inside('top'),
81+
bottom: inside('bottom'),
82+
left: inside('left'),
83+
right: inside('right')
84+
};
85+
86+
function choose() {
87+
const allPlaces = desiredPlace
88+
.split(',')
89+
.concat(place, ['top', 'bottom', 'left', 'right']);
90+
for (const d of allPlaces) {
91+
if (placeIsInside[d]) return d;
8592
}
93+
// if nothing is inside, just use the old place.
94+
return place;
8695
}
8796

97+
const chosen = choose();
98+
8899
let isNewState = false;
89100
let newPlace;
90-
const shouldUpdatePlace = desiredPlace !== place;
91-
if (inside(desiredPlace) && shouldUpdatePlace) {
92-
isNewState = true;
93-
newPlace = desiredPlace;
94-
} else if (insideList.length > 0 && outside(desiredPlace) && outside(place)) {
101+
if (chosen && chosen !== place) {
95102
isNewState = true;
96-
newPlace = insideList[0];
103+
newPlace = chosen;
97104
}
98105

99106
if (isNewState) {

0 commit comments

Comments
 (0)