123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.MAX_VERTICAL_CONTENT_RADIUS = void 0;
- exports.default = getArrowStyle;
- exports.getArrowOffsetToken = getArrowOffsetToken;
- var _cssinjs = require("@ant-design/cssinjs");
- var _roundedArrow = require("./roundedArrow");
- const MAX_VERTICAL_CONTENT_RADIUS = exports.MAX_VERTICAL_CONTENT_RADIUS = 8;
- function getArrowOffsetToken(options) {
- const {
- contentRadius,
- limitVerticalRadius
- } = options;
- const arrowOffset = contentRadius > 12 ? contentRadius + 2 : 12;
- const arrowOffsetVertical = limitVerticalRadius ? MAX_VERTICAL_CONTENT_RADIUS : arrowOffset;
- return {
- arrowOffsetHorizontal: arrowOffset,
- arrowOffsetVertical
- };
- }
- function isInject(valid, code) {
- if (!valid) {
- return {};
- }
- return code;
- }
- function getArrowStyle(token, colorBg, options) {
- const {
- componentCls,
- boxShadowPopoverArrow,
- arrowOffsetVertical,
- arrowOffsetHorizontal
- } = token;
- const {
- arrowDistance = 0,
- arrowPlacement = {
- left: true,
- right: true,
- top: true,
- bottom: true
- }
- } = options || {};
- return {
- [componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({
- // ============================ Basic ============================
- [`${componentCls}-arrow`]: [Object.assign(Object.assign({
- position: 'absolute',
- zIndex: 1,
- display: 'block'
- }, (0, _roundedArrow.genRoundedArrow)(token, colorBg, boxShadowPopoverArrow)), {
- '&:before': {
- background: colorBg
- }
- })]
- }, isInject(!!arrowPlacement.top, {
- [[`&-placement-top > ${componentCls}-arrow`, `&-placement-topLeft > ${componentCls}-arrow`, `&-placement-topRight > ${componentCls}-arrow`].join(',')]: {
- bottom: arrowDistance,
- transform: 'translateY(100%) rotate(180deg)'
- },
- [`&-placement-top > ${componentCls}-arrow`]: {
- left: {
- _skip_check_: true,
- value: '50%'
- },
- transform: 'translateX(-50%) translateY(100%) rotate(180deg)'
- },
- '&-placement-topLeft': {
- '--arrow-offset-horizontal': arrowOffsetHorizontal,
- [`> ${componentCls}-arrow`]: {
- left: {
- _skip_check_: true,
- value: arrowOffsetHorizontal
- }
- }
- },
- '&-placement-topRight': {
- '--arrow-offset-horizontal': `calc(100% - ${(0, _cssinjs.unit)(arrowOffsetHorizontal)})`,
- [`> ${componentCls}-arrow`]: {
- right: {
- _skip_check_: true,
- value: arrowOffsetHorizontal
- }
- }
- }
- })), isInject(!!arrowPlacement.bottom, {
- [[`&-placement-bottom > ${componentCls}-arrow`, `&-placement-bottomLeft > ${componentCls}-arrow`, `&-placement-bottomRight > ${componentCls}-arrow`].join(',')]: {
- top: arrowDistance,
- transform: `translateY(-100%)`
- },
- [`&-placement-bottom > ${componentCls}-arrow`]: {
- left: {
- _skip_check_: true,
- value: '50%'
- },
- transform: `translateX(-50%) translateY(-100%)`
- },
- '&-placement-bottomLeft': {
- '--arrow-offset-horizontal': arrowOffsetHorizontal,
- [`> ${componentCls}-arrow`]: {
- left: {
- _skip_check_: true,
- value: arrowOffsetHorizontal
- }
- }
- },
- '&-placement-bottomRight': {
- '--arrow-offset-horizontal': `calc(100% - ${(0, _cssinjs.unit)(arrowOffsetHorizontal)})`,
- [`> ${componentCls}-arrow`]: {
- right: {
- _skip_check_: true,
- value: arrowOffsetHorizontal
- }
- }
- }
- })), isInject(!!arrowPlacement.left, {
- [[`&-placement-left > ${componentCls}-arrow`, `&-placement-leftTop > ${componentCls}-arrow`, `&-placement-leftBottom > ${componentCls}-arrow`].join(',')]: {
- right: {
- _skip_check_: true,
- value: arrowDistance
- },
- transform: 'translateX(100%) rotate(90deg)'
- },
- [`&-placement-left > ${componentCls}-arrow`]: {
- top: {
- _skip_check_: true,
- value: '50%'
- },
- transform: 'translateY(-50%) translateX(100%) rotate(90deg)'
- },
- [`&-placement-leftTop > ${componentCls}-arrow`]: {
- top: arrowOffsetVertical
- },
- [`&-placement-leftBottom > ${componentCls}-arrow`]: {
- bottom: arrowOffsetVertical
- }
- })), isInject(!!arrowPlacement.right, {
- [[`&-placement-right > ${componentCls}-arrow`, `&-placement-rightTop > ${componentCls}-arrow`, `&-placement-rightBottom > ${componentCls}-arrow`].join(',')]: {
- left: {
- _skip_check_: true,
- value: arrowDistance
- },
- transform: 'translateX(-100%) rotate(-90deg)'
- },
- [`&-placement-right > ${componentCls}-arrow`]: {
- top: {
- _skip_check_: true,
- value: '50%'
- },
- transform: 'translateY(-50%) translateX(-100%) rotate(-90deg)'
- },
- [`&-placement-rightTop > ${componentCls}-arrow`]: {
- top: arrowOffsetVertical
- },
- [`&-placement-rightBottom > ${componentCls}-arrow`]: {
- bottom: arrowOffsetVertical
- }
- }))
- };
- }
|