@rc-component/trigger 1.8.0 → 1.10.0

package/es/Popup/Arrow.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import type { AlignType } from '../interface';
+import type { AlignType, ArrowType } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
-    arrowX?: number;
-    arrowY?: number;
+    arrow: ArrowType;
 }
 export default function Arrow(props: ArrowProps): JSX.Element;

package/es/Popup/Arrow.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
+import classNames from 'classnames';
 export default function Arrow(props) {
   var prefixCls = props.prefixCls,
     align = props.align,
-    _props$arrowX = props.arrowX,
-    arrowX = _props$arrowX === void 0 ? 0 : _props$arrowX,
-    _props$arrowY = props.arrowY,
-    arrowY = _props$arrowY === void 0 ? 0 : _props$arrowY;
+    arrow = props.arrow;
+  var _ref = arrow || {},
+    _ref$x = _ref.x,
+    x = _ref$x === void 0 ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === void 0 ? 0 : _ref$y,
+    className = _ref.className;
   var arrowRef = React.useRef();
 
   // Skip if no align
@@ -27,7 +31,7 @@ export default function Arrow(props) {
 
     // Top & Bottom
     if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
-      alignStyle.top = arrowY;
+      alignStyle.top = y;
     } else if (popupTB === 't') {
       alignStyle.top = 0;
     } else {
@@ -36,7 +40,7 @@ export default function Arrow(props) {
 
     // Left & Right
     if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
-      alignStyle.left = arrowX;
+      alignStyle.left = x;
     } else if (popupLR === 'l') {
       alignStyle.left = 0;
     } else {
@@ -45,7 +49,7 @@ export default function Arrow(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
-    className: "".concat(prefixCls, "-arrow"),
+    className: classNames("".concat(prefixCls, "-arrow"), className),
     style: alignStyle
   });
 }

package/es/Popup/PopupContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PopupContentProps {
+    children?: React.ReactNode;
+    cache?: boolean;
+}
+declare const PopupContent: React.MemoExoticComponent<({ children }: PopupContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default PopupContent;

package/es/Popup/PopupContent.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+var PopupContent = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children;
+  return children;
+}, function (_, next) {
+  return next.cache;
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+export default PopupContent;

package/es/Popup/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
-import type { AlignType } from '../interface';
+import type { AlignType, ArrowType } from '../interface';
 export interface PopupProps {
     prefixCls: string;
     className?: string;
@@ -14,9 +14,7 @@ export interface PopupProps {
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;
     align?: AlignType;
-    arrow?: boolean;
-    arrowX?: number;
-    arrowY?: number;
+    arrow?: ArrowType;
     open: boolean;
     /** Tell Portal that should keep in screen. e.g. should wait all motion end */
     keepDom: boolean;

package/es/Popup/index.js

@@ -9,6 +9,7 @@ import { composeRef } from "rc-util/es/ref";
 import * as React from 'react';
 import Arrow from "./Arrow";
 import Mask from "./Mask";
+import PopupContent from "./PopupContent";
 var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var popup = props.popup,
     className = props.className,
@@ -22,8 +23,6 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     mask = props.mask,
     arrow = props.arrow,
     align = props.align,
-    arrowX = props.arrowX,
-    arrowY = props.arrowY,
     motion = props.motion,
     maskMotion = props.maskMotion,
     forceRender = props.forceRender,
@@ -139,10 +138,11 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onClick: onClick
       }, arrow && /*#__PURE__*/React.createElement(Arrow, {
         prefixCls: prefixCls,
-        align: align,
-        arrowX: arrowX,
-        arrowY: arrowY
-      }), childNode);
+        arrow: arrow,
+        align: align
+      }), /*#__PURE__*/React.createElement(PopupContent, {
+        cache: !open
+      }, childNode));
     });
   }));
 });

package/es/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { ActionType, AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType };
+import type { ActionType, AlignType, ArrowTypeOuter, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
+export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType };
 export interface TriggerRef {
     forceAlign: VoidFunction;
 }
@@ -50,7 +50,7 @@ export interface TriggerProps {
     getPopupClassNameFromAlign?: (align: AlignType) => string;
     onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
     alignPoint?: boolean;
-    arrow?: boolean;
+    arrow?: boolean | ArrowTypeOuter;
     /** @deprecated Add `className` on `children`. Please add `className` directly instead. */
     className?: string;
     /**

package/es/index.js

@@ -436,6 +436,10 @@ export function generateTrigger() {
 
     // Child Node
     var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
+    var innerArrow = arrow ? _objectSpread(_objectSpread({}, arrow !== true ? arrow : {}), {}, {
+      x: arrowX,
+      y: arrowY
+    }) : null;
 
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
@@ -481,14 +485,12 @@ export function generateTrigger() {
       // Arrow
       ,
       align: alignInfo,
-      arrow: arrow
+      arrow: innerArrow
       // Align
       ,
       ready: ready,
       offsetX: offsetX,
       offsetY: offsetY,
-      arrowX: arrowX,
-      arrowY: arrowY,
       onAlign: triggerAlign
       // Stretch
       ,

package/es/interface.d.ts

@@ -54,6 +54,13 @@ export interface AlignType {
     useCssTransform?: boolean;
     ignoreShake?: boolean;
 }
+export interface ArrowTypeOuter {
+    className?: string;
+}
+export declare type ArrowType = ArrowTypeOuter & {
+    x?: number;
+    y?: number;
+};
 export declare type BuildInPlacements = Record<string, AlignType>;
 export declare type StretchType = string;
 export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';

package/lib/Popup/Arrow.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import type { AlignType } from '../interface';
+import type { AlignType, ArrowType } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
-    arrowX?: number;
-    arrowY?: number;
+    arrow: ArrowType;
 }
 export default function Arrow(props: ArrowProps): JSX.Element;

package/lib/Popup/Arrow.js

@@ -1,18 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Arrow;
 var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 function Arrow(props) {
   var prefixCls = props.prefixCls,
     align = props.align,
-    _props$arrowX = props.arrowX,
-    arrowX = _props$arrowX === void 0 ? 0 : _props$arrowX,
-    _props$arrowY = props.arrowY,
-    arrowY = _props$arrowY === void 0 ? 0 : _props$arrowY;
+    arrow = props.arrow;
+  var _ref = arrow || {},
+    _ref$x = _ref.x,
+    x = _ref$x === void 0 ? 0 : _ref$x,
+    _ref$y = _ref.y,
+    y = _ref$y === void 0 ? 0 : _ref$y,
+    className = _ref.className;
   var arrowRef = React.useRef();
 
   // Skip if no align
@@ -34,7 +39,7 @@ function Arrow(props) {
 
     // Top & Bottom
     if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
-      alignStyle.top = arrowY;
+      alignStyle.top = y;
     } else if (popupTB === 't') {
       alignStyle.top = 0;
     } else {
@@ -43,7 +48,7 @@ function Arrow(props) {
 
     // Left & Right
     if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
-      alignStyle.left = arrowX;
+      alignStyle.left = x;
     } else if (popupLR === 'l') {
       alignStyle.left = 0;
     } else {
@@ -52,7 +57,7 @@ function Arrow(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
-    className: "".concat(prefixCls, "-arrow"),
+    className: (0, _classnames.default)("".concat(prefixCls, "-arrow"), className),
     style: alignStyle
   });
 }

package/lib/Popup/PopupContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PopupContentProps {
+    children?: React.ReactNode;
+    cache?: boolean;
+}
+declare const PopupContent: React.MemoExoticComponent<({ children }: PopupContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default PopupContent;

package/lib/Popup/PopupContent.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var PopupContent = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children;
+  return children;
+}, function (_, next) {
+  return next.cache;
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+var _default = PopupContent;
+exports.default = _default;

package/lib/Popup/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
-import type { AlignType } from '../interface';
+import type { AlignType, ArrowType } from '../interface';
 export interface PopupProps {
     prefixCls: string;
     className?: string;
@@ -14,9 +14,7 @@ export interface PopupProps {
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;
     align?: AlignType;
-    arrow?: boolean;
-    arrowX?: number;
-    arrowY?: number;
+    arrow?: ArrowType;
     open: boolean;
     /** Tell Portal that should keep in screen. e.g. should wait all motion end */
     keepDom: boolean;

package/lib/Popup/index.js

@@ -17,6 +17,7 @@ var _ref2 = require("rc-util/lib/ref");
 var React = _interopRequireWildcard(require("react"));
 var _Arrow = _interopRequireDefault(require("./Arrow"));
 var _Mask = _interopRequireDefault(require("./Mask"));
+var _PopupContent = _interopRequireDefault(require("./PopupContent"));
 var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var popup = props.popup,
     className = props.className,
@@ -30,8 +31,6 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     mask = props.mask,
     arrow = props.arrow,
     align = props.align,
-    arrowX = props.arrowX,
-    arrowY = props.arrowY,
     motion = props.motion,
     maskMotion = props.maskMotion,
     forceRender = props.forceRender,
@@ -147,10 +146,11 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onClick: onClick
       }, arrow && /*#__PURE__*/React.createElement(_Arrow.default, {
         prefixCls: prefixCls,
-        align: align,
-        arrowX: arrowX,
-        arrowY: arrowY
-      }), childNode);
+        arrow: arrow,
+        align: align
+      }), /*#__PURE__*/React.createElement(_PopupContent.default, {
+        cache: !open
+      }, childNode));
     });
   }));
 });

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { ActionType, AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType };
+import type { ActionType, AlignType, ArrowTypeOuter, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
+export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType };
 export interface TriggerRef {
     forceAlign: VoidFunction;
 }
@@ -50,7 +50,7 @@ export interface TriggerProps {
     getPopupClassNameFromAlign?: (align: AlignType) => string;
     onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
     alignPoint?: boolean;
-    arrow?: boolean;
+    arrow?: boolean | ArrowTypeOuter;
     /** @deprecated Add `className` on `children`. Please add `className` directly instead. */
     className?: string;
     /**

package/lib/index.js

@@ -445,6 +445,10 @@ function generateTrigger() {
 
     // Child Node
     var triggerNode = /*#__PURE__*/React.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedChildrenProps), passedProps));
+    var innerArrow = arrow ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, arrow !== true ? arrow : {}), {}, {
+      x: arrowX,
+      y: arrowY
+    }) : null;
 
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
@@ -490,14 +494,12 @@ function generateTrigger() {
       // Arrow
       ,
       align: alignInfo,
-      arrow: arrow
+      arrow: innerArrow
       // Align
       ,
       ready: ready,
       offsetX: offsetX,
       offsetY: offsetY,
-      arrowX: arrowX,
-      arrowY: arrowY,
       onAlign: triggerAlign
       // Stretch
       ,

package/lib/interface.d.ts

@@ -54,6 +54,13 @@ export interface AlignType {
     useCssTransform?: boolean;
     ignoreShake?: boolean;
 }
+export interface ArrowTypeOuter {
+    className?: string;
+}
+export declare type ArrowType = ArrowTypeOuter & {
+    x?: number;
+    y?: number;
+};
 export declare type BuildInPlacements = Record<string, AlignType>;
 export declare type StretchType = string;
 export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"