@rc-component/trigger 1.0.4 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/es/Popup/Arrow.js +25 -21
  2. package/es/interface.d.ts +2 -56
  3. package/lib/Popup/Arrow.js +25 -21
  4. package/lib/interface.d.ts +2 -56
  5. package/package.json +1 -1
package/es/Popup/Arrow.js CHANGED
@@ -15,29 +15,33 @@ export default function Arrow(props) {
15
15
  var alignStyle = {
16
16
  position: 'absolute'
17
17
  };
18
- var popupPoints = align.points[0];
19
- var targetPoints = align.points[1];
20
- var popupTB = popupPoints[0];
21
- var popupLR = popupPoints[1];
22
- var targetTB = targetPoints[0];
23
- var targetLR = targetPoints[1];
24
18
 
25
- // Top & Bottom
26
- if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
27
- alignStyle.top = arrowY;
28
- } else if (popupTB === 't') {
29
- alignStyle.top = 0;
30
- } else {
31
- alignStyle.bottom = 0;
32
- }
19
+ // Skip if no need to align
20
+ if (align.autoArrow !== false) {
21
+ var popupPoints = align.points[0];
22
+ var targetPoints = align.points[1];
23
+ var popupTB = popupPoints[0];
24
+ var popupLR = popupPoints[1];
25
+ var targetTB = targetPoints[0];
26
+ var targetLR = targetPoints[1];
27
+
28
+ // Top & Bottom
29
+ if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
30
+ alignStyle.top = arrowY;
31
+ } else if (popupTB === 't') {
32
+ alignStyle.top = 0;
33
+ } else {
34
+ alignStyle.bottom = 0;
35
+ }
33
36
 
34
- // Left & Right
35
- if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
36
- alignStyle.left = arrowX;
37
- } else if (popupLR === 'l') {
38
- alignStyle.left = 0;
39
- } else {
40
- alignStyle.right = 0;
37
+ // Left & Right
38
+ if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
39
+ alignStyle.left = arrowX;
40
+ } else if (popupLR === 'l') {
41
+ alignStyle.left = 0;
42
+ } else {
43
+ alignStyle.right = 0;
44
+ }
41
45
  }
42
46
  return /*#__PURE__*/React.createElement("div", {
43
47
  ref: arrowRef,
package/es/interface.d.ts CHANGED
@@ -1,61 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { CSSMotionProps } from 'rc-motion';
3
3
  export declare type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
4
- export interface TriggerProps {
5
- children: React.ReactElement;
6
- action?: ActionType | ActionType[];
7
- showAction?: ActionType[];
8
- hideAction?: ActionType[];
9
- getPopupClassNameFromAlign?: (align: AlignType) => string;
10
- onPopupVisibleChange?: (visible: boolean) => void;
11
- onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
12
- afterPopupVisibleChange?: (visible: boolean) => void;
13
- popup: React.ReactNode | (() => React.ReactNode);
14
- popupStyle?: React.CSSProperties;
15
- prefixCls?: string;
16
- popupClassName?: string;
17
- className?: string;
18
- popupPlacement?: string;
19
- builtinPlacements?: BuildInPlacements;
20
- mouseEnterDelay?: number;
21
- mouseLeaveDelay?: number;
22
- zIndex?: number;
23
- focusDelay?: number;
24
- blurDelay?: number;
25
- getPopupContainer?: (node: HTMLElement) => HTMLElement;
26
- getDocument?: (element?: HTMLElement) => HTMLDocument;
27
- forceRender?: boolean;
28
- destroyPopupOnHide?: boolean;
29
- mask?: boolean;
30
- maskClosable?: boolean;
31
- onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
32
- popupAlign?: AlignType;
33
- popupVisible?: boolean;
34
- defaultPopupVisible?: boolean;
35
- autoDestroy?: boolean;
36
- stretch?: string;
37
- alignPoint?: boolean;
38
- /** Set popup motion. You can ref `rc-motion` for more info. */
39
- popupMotion?: CSSMotionProps;
40
- /** Set mask motion. You can ref `rc-motion` for more info. */
41
- maskMotion?: CSSMotionProps;
42
- /** @deprecated Please us `popupMotion` instead. */
43
- popupTransitionName?: TransitionNameType;
44
- /** @deprecated Please us `popupMotion` instead. */
45
- popupAnimation?: AnimationType;
46
- /** @deprecated Please us `maskMotion` instead. */
47
- maskTransitionName?: TransitionNameType;
48
- /** @deprecated Please us `maskMotion` instead. */
49
- maskAnimation?: string;
50
- /**
51
- * @private Get trigger DOM node.
52
- * Used for some component is function component which can not access by `findDOMNode`
53
- */
54
- getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
55
- /** @private Bump fixed position at bottom in mobile.
56
- * This is internal usage currently, do not use in your prod */
57
- mobile?: MobileConfig;
58
- }
59
4
  export declare type AlignPointTopBottom = 't' | 'b' | 'c';
60
5
  export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
61
6
  /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
@@ -75,7 +20,6 @@ export interface AlignType {
75
20
  * offset target node by offset[0] in x and offset[1] in y.
76
21
  * If targetOffset contains percentage string value, it is relative to targetNode region.
77
22
  */
78
- targetOffset?: number[];
79
23
  /**
80
24
  * If adjustX field is true, will adjust source node in x direction if source node is invisible.
81
25
  * If adjustY field is true, will adjust source node in y direction if source node is invisible.
@@ -86,6 +30,8 @@ export interface AlignType {
86
30
  shiftX?: boolean | number;
87
31
  shiftY?: boolean | number;
88
32
  };
33
+ /** Auto adjust arrow position */
34
+ autoArrow?: boolean;
89
35
  /**
90
36
  * Whether use css right instead of left to position
91
37
  */
package/lib/Popup/Arrow.js CHANGED
@@ -22,29 +22,33 @@ function Arrow(props) {
22
22
  var alignStyle = {
23
23
  position: 'absolute'
24
24
  };
25
- var popupPoints = align.points[0];
26
- var targetPoints = align.points[1];
27
- var popupTB = popupPoints[0];
28
- var popupLR = popupPoints[1];
29
- var targetTB = targetPoints[0];
30
- var targetLR = targetPoints[1];
31
25
 
32
- // Top & Bottom
33
- if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
34
- alignStyle.top = arrowY;
35
- } else if (popupTB === 't') {
36
- alignStyle.top = 0;
37
- } else {
38
- alignStyle.bottom = 0;
39
- }
26
+ // Skip if no need to align
27
+ if (align.autoArrow !== false) {
28
+ var popupPoints = align.points[0];
29
+ var targetPoints = align.points[1];
30
+ var popupTB = popupPoints[0];
31
+ var popupLR = popupPoints[1];
32
+ var targetTB = targetPoints[0];
33
+ var targetLR = targetPoints[1];
34
+
35
+ // Top & Bottom
36
+ if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
37
+ alignStyle.top = arrowY;
38
+ } else if (popupTB === 't') {
39
+ alignStyle.top = 0;
40
+ } else {
41
+ alignStyle.bottom = 0;
42
+ }
40
43
 
41
- // Left & Right
42
- if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
43
- alignStyle.left = arrowX;
44
- } else if (popupLR === 'l') {
45
- alignStyle.left = 0;
46
- } else {
47
- alignStyle.right = 0;
44
+ // Left & Right
45
+ if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
46
+ alignStyle.left = arrowX;
47
+ } else if (popupLR === 'l') {
48
+ alignStyle.left = 0;
49
+ } else {
50
+ alignStyle.right = 0;
51
+ }
48
52
  }
49
53
  return /*#__PURE__*/React.createElement("div", {
50
54
  ref: arrowRef,
package/lib/interface.d.ts CHANGED
@@ -1,61 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { CSSMotionProps } from 'rc-motion';
3
3
  export declare type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
4
- export interface TriggerProps {
5
- children: React.ReactElement;
6
- action?: ActionType | ActionType[];
7
- showAction?: ActionType[];
8
- hideAction?: ActionType[];
9
- getPopupClassNameFromAlign?: (align: AlignType) => string;
10
- onPopupVisibleChange?: (visible: boolean) => void;
11
- onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
12
- afterPopupVisibleChange?: (visible: boolean) => void;
13
- popup: React.ReactNode | (() => React.ReactNode);
14
- popupStyle?: React.CSSProperties;
15
- prefixCls?: string;
16
- popupClassName?: string;
17
- className?: string;
18
- popupPlacement?: string;
19
- builtinPlacements?: BuildInPlacements;
20
- mouseEnterDelay?: number;
21
- mouseLeaveDelay?: number;
22
- zIndex?: number;
23
- focusDelay?: number;
24
- blurDelay?: number;
25
- getPopupContainer?: (node: HTMLElement) => HTMLElement;
26
- getDocument?: (element?: HTMLElement) => HTMLDocument;
27
- forceRender?: boolean;
28
- destroyPopupOnHide?: boolean;
29
- mask?: boolean;
30
- maskClosable?: boolean;
31
- onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
32
- popupAlign?: AlignType;
33
- popupVisible?: boolean;
34
- defaultPopupVisible?: boolean;
35
- autoDestroy?: boolean;
36
- stretch?: string;
37
- alignPoint?: boolean;
38
- /** Set popup motion. You can ref `rc-motion` for more info. */
39
- popupMotion?: CSSMotionProps;
40
- /** Set mask motion. You can ref `rc-motion` for more info. */
41
- maskMotion?: CSSMotionProps;
42
- /** @deprecated Please us `popupMotion` instead. */
43
- popupTransitionName?: TransitionNameType;
44
- /** @deprecated Please us `popupMotion` instead. */
45
- popupAnimation?: AnimationType;
46
- /** @deprecated Please us `maskMotion` instead. */
47
- maskTransitionName?: TransitionNameType;
48
- /** @deprecated Please us `maskMotion` instead. */
49
- maskAnimation?: string;
50
- /**
51
- * @private Get trigger DOM node.
52
- * Used for some component is function component which can not access by `findDOMNode`
53
- */
54
- getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
55
- /** @private Bump fixed position at bottom in mobile.
56
- * This is internal usage currently, do not use in your prod */
57
- mobile?: MobileConfig;
58
- }
59
4
  export declare type AlignPointTopBottom = 't' | 'b' | 'c';
60
5
  export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
61
6
  /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
@@ -75,7 +20,6 @@ export interface AlignType {
75
20
  * offset target node by offset[0] in x and offset[1] in y.
76
21
  * If targetOffset contains percentage string value, it is relative to targetNode region.
77
22
  */
78
- targetOffset?: number[];
79
23
  /**
80
24
  * If adjustX field is true, will adjust source node in x direction if source node is invisible.
81
25
  * If adjustY field is true, will adjust source node in y direction if source node is invisible.
@@ -86,6 +30,8 @@ export interface AlignType {
86
30
  shiftX?: boolean | number;
87
31
  shiftY?: boolean | number;
88
32
  };
33
+ /** Auto adjust arrow position */
34
+ autoArrow?: boolean;
89
35
  /**
90
36
  * Whether use css right instead of left to position
91
37
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.0.4",
3
+ "version": "1.1.1",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"