@rc-component/trigger 1.0.3 → 1.1.0

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 (7) hide show
  1. package/es/Popup/Arrow.js +25 -21
  2. package/es/interface.d.ts +2 -55
  3. package/es/mock.js +16 -2
  4. package/lib/Popup/Arrow.js +25 -21
  5. package/lib/interface.d.ts +2 -55
  6. package/lib/mock.js +17 -2
  7. 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' */
@@ -86,6 +31,8 @@ export interface AlignType {
86
31
  shiftX?: boolean | number;
87
32
  shiftY?: boolean | number;
88
33
  };
34
+ /** Auto adjust arrow position */
35
+ autoArrow?: boolean;
89
36
  /**
90
37
  * Whether use css right instead of left to position
91
38
  */
package/es/mock.js CHANGED
@@ -1,11 +1,25 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
1
2
  import * as React from 'react';
2
3
  import { generateTrigger } from "./index";
3
4
  var MockPortal = function MockPortal(_ref) {
4
- var children = _ref.children,
5
+ var open = _ref.open,
6
+ autoDestroy = _ref.autoDestroy,
7
+ children = _ref.children,
5
8
  getContainer = _ref.getContainer;
9
+ var _React$useState = React.useState(open),
10
+ _React$useState2 = _slicedToArray(_React$useState, 2),
11
+ visible = _React$useState2[0],
12
+ setVisible = _React$useState2[1];
6
13
  React.useEffect(function () {
7
14
  getContainer === null || getContainer === void 0 ? void 0 : getContainer();
8
15
  });
9
- return children;
16
+ React.useEffect(function () {
17
+ if (open) {
18
+ setVisible(true);
19
+ } else if (!open && autoDestroy) {
20
+ setVisible(false);
21
+ }
22
+ }, [open, autoDestroy]);
23
+ return visible ? children : null;
10
24
  };
11
25
  export default generateTrigger(MockPortal);
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' */
@@ -86,6 +31,8 @@ export interface AlignType {
86
31
  shiftX?: boolean | number;
87
32
  shiftY?: boolean | number;
88
33
  };
34
+ /** Auto adjust arrow position */
35
+ autoArrow?: boolean;
89
36
  /**
90
37
  * Whether use css right instead of left to position
91
38
  */
package/lib/mock.js CHANGED
@@ -1,19 +1,34 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
8
10
  var React = _interopRequireWildcard(require("react"));
9
11
  var _index = require("./index");
10
12
  var MockPortal = function MockPortal(_ref) {
11
- var children = _ref.children,
13
+ var open = _ref.open,
14
+ autoDestroy = _ref.autoDestroy,
15
+ children = _ref.children,
12
16
  getContainer = _ref.getContainer;
17
+ var _React$useState = React.useState(open),
18
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
19
+ visible = _React$useState2[0],
20
+ setVisible = _React$useState2[1];
13
21
  React.useEffect(function () {
14
22
  getContainer === null || getContainer === void 0 ? void 0 : getContainer();
15
23
  });
16
- return children;
24
+ React.useEffect(function () {
25
+ if (open) {
26
+ setVisible(true);
27
+ } else if (!open && autoDestroy) {
28
+ setVisible(false);
29
+ }
30
+ }, [open, autoDestroy]);
31
+ return visible ? children : null;
17
32
  };
18
33
  var _default = (0, _index.generateTrigger)(MockPortal);
19
34
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"