2019-12-05 16:15:10 +08:00
|
|
|
import { placements } from 'rc-tooltip/lib/placements';
|
|
|
|
import { BuildInPlacements } from 'rc-trigger';
|
2016-08-31 13:50:50 +08:00
|
|
|
|
2017-06-30 17:22:01 +08:00
|
|
|
const autoAdjustOverflowEnabled = {
|
2016-03-09 17:23:10 +08:00
|
|
|
adjustX: 1,
|
|
|
|
adjustY: 1,
|
|
|
|
};
|
|
|
|
|
2017-06-30 17:22:01 +08:00
|
|
|
const autoAdjustOverflowDisabled = {
|
|
|
|
adjustX: 0,
|
|
|
|
adjustY: 0,
|
|
|
|
};
|
|
|
|
|
2016-03-09 17:23:10 +08:00
|
|
|
const targetOffset = [0, 0];
|
|
|
|
|
2017-06-30 17:22:01 +08:00
|
|
|
export interface AdjustOverflow {
|
|
|
|
adjustX?: 0 | 1;
|
|
|
|
adjustY?: 0 | 1;
|
|
|
|
}
|
|
|
|
|
2016-11-30 16:43:35 +08:00
|
|
|
export interface PlacementsConfig {
|
2016-08-31 15:00:13 +08:00
|
|
|
arrowWidth?: number;
|
|
|
|
horizontalArrowShift?: number;
|
|
|
|
verticalArrowShift?: number;
|
|
|
|
arrowPointAtCenter?: boolean;
|
2019-06-16 20:51:47 +08:00
|
|
|
autoAdjustOverflow?: boolean | AdjustOverflow;
|
2016-07-29 14:45:06 +08:00
|
|
|
}
|
|
|
|
|
2020-03-04 21:03:08 +08:00
|
|
|
export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
|
2017-06-30 17:22:01 +08:00
|
|
|
if (typeof autoAdjustOverflow === 'boolean') {
|
|
|
|
return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled;
|
2016-08-31 13:50:50 +08:00
|
|
|
}
|
2016-03-09 17:23:10 +08:00
|
|
|
return {
|
2017-06-30 17:22:01 +08:00
|
|
|
...autoAdjustOverflowDisabled,
|
|
|
|
...autoAdjustOverflow,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-03-04 21:03:08 +08:00
|
|
|
export default function getPlacements(config: PlacementsConfig) {
|
2018-12-07 16:17:45 +08:00
|
|
|
const {
|
|
|
|
arrowWidth = 5,
|
|
|
|
horizontalArrowShift = 16,
|
2020-03-04 21:03:08 +08:00
|
|
|
verticalArrowShift = 8,
|
|
|
|
autoAdjustOverflow,
|
2018-12-07 16:17:45 +08:00
|
|
|
} = config;
|
2019-12-05 16:15:10 +08:00
|
|
|
const placementMap: BuildInPlacements = {
|
2016-03-09 17:23:10 +08:00
|
|
|
left: {
|
|
|
|
points: ['cr', 'cl'],
|
|
|
|
offset: [-4, 0],
|
|
|
|
},
|
|
|
|
right: {
|
|
|
|
points: ['cl', 'cr'],
|
|
|
|
offset: [4, 0],
|
|
|
|
},
|
|
|
|
top: {
|
|
|
|
points: ['bc', 'tc'],
|
|
|
|
offset: [0, -4],
|
|
|
|
},
|
|
|
|
bottom: {
|
|
|
|
points: ['tc', 'bc'],
|
|
|
|
offset: [0, 4],
|
|
|
|
},
|
|
|
|
topLeft: {
|
|
|
|
points: ['bl', 'tc'],
|
|
|
|
offset: [-(horizontalArrowShift + arrowWidth), -4],
|
|
|
|
},
|
|
|
|
leftTop: {
|
|
|
|
points: ['tr', 'cl'],
|
|
|
|
offset: [-4, -(verticalArrowShift + arrowWidth)],
|
|
|
|
},
|
|
|
|
topRight: {
|
|
|
|
points: ['br', 'tc'],
|
|
|
|
offset: [horizontalArrowShift + arrowWidth, -4],
|
|
|
|
},
|
|
|
|
rightTop: {
|
|
|
|
points: ['tl', 'cr'],
|
|
|
|
offset: [4, -(verticalArrowShift + arrowWidth)],
|
|
|
|
},
|
|
|
|
bottomRight: {
|
|
|
|
points: ['tr', 'bc'],
|
|
|
|
offset: [horizontalArrowShift + arrowWidth, 4],
|
|
|
|
},
|
|
|
|
rightBottom: {
|
|
|
|
points: ['bl', 'cr'],
|
|
|
|
offset: [4, verticalArrowShift + arrowWidth],
|
|
|
|
},
|
|
|
|
bottomLeft: {
|
|
|
|
points: ['tl', 'bc'],
|
|
|
|
offset: [-(horizontalArrowShift + arrowWidth), 4],
|
|
|
|
},
|
|
|
|
leftBottom: {
|
|
|
|
points: ['br', 'cl'],
|
|
|
|
offset: [-4, verticalArrowShift + arrowWidth],
|
|
|
|
},
|
|
|
|
};
|
2017-06-30 17:22:01 +08:00
|
|
|
Object.keys(placementMap).forEach(key => {
|
2018-12-07 16:17:45 +08:00
|
|
|
placementMap[key] = config.arrowPointAtCenter
|
|
|
|
? {
|
|
|
|
...placementMap[key],
|
|
|
|
overflow: getOverflowOptions(autoAdjustOverflow),
|
|
|
|
targetOffset,
|
|
|
|
}
|
|
|
|
: {
|
2019-12-05 16:15:10 +08:00
|
|
|
...placements[key],
|
2018-12-07 16:17:45 +08:00
|
|
|
overflow: getOverflowOptions(autoAdjustOverflow),
|
|
|
|
};
|
2018-11-06 11:00:07 +08:00
|
|
|
|
|
|
|
placementMap[key].ignoreShake = true;
|
2017-06-30 17:22:01 +08:00
|
|
|
});
|
|
|
|
return placementMap;
|
2016-03-09 17:23:10 +08:00
|
|
|
}
|