rc-trigger - npm Package Compare versions

Comparing version 5.0.9 to 5.1.0

es/index.d.ts

 import * as React from 'react';
 import { CSSMotionProps } from 'rc-motion';
-import { ActionType, AlignType, BuildInPlacements, TransitionNameType, AnimationType } from './interface';
+import { ActionType, AlignType, BuildInPlacements, TransitionNameType, AnimationType, MobileConfig } from './interface';
 export interface TriggerProps {
@@ -54,2 +54,5 @@ children: React.ReactElement;
     getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
+    /** @private Bump fixed position at bottom in mobile.
+     * This is internal usage currently, do not use in your prod */
+    mobile?: MobileConfig;
 }
@@ -56,0 +59,0 @@ /**

es/index.js

@@ -259,3 +259,4 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
             stretch = _this$props2.stretch,
-            alignPoint = _this$props2.alignPoint;
+            alignPoint = _this$props2.alignPoint,
+            mobile = _this$props2.mobile;
         var _this$state = _this.state,
@@ -300,3 +301,4 @@ popupVisible = _this$state.popupVisible,
           ref: _this.popupRef,
-          motion: popupMotion
+          motion: popupMotion,
+          mobile: mobile
         }), typeof popup === 'function' ? popup() : popup);
@@ -468,2 +470,3 @@ };
       value: function setPopupVisible(popupVisible, event) {
+        console.error('Change:::', popupVisible);
         var alignPoint = this.props.alignPoint;
@@ -652,3 +655,4 @@ var prevPopupVisible = this.state.popupVisible;
           key: 'trigger'
-        };
+        }; // ============================== Visible Handlers ==============================
+        // >>> ContextMenu
 
@@ -659,4 +663,5 @@ if (this.isContextMenuToShow()) {
           newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
-        }
+        } // >>> Click
 
+
         if (this.isClickToHide() || this.isClickToShow()) {
@@ -670,6 +675,7 @@ newChildProps.onClick = this.onClick;
           newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
-        }
+        } // >>> Hover(enter)
 
+
         if (this.isMouseEnterToShow()) {
-          newChildProps.onMouseEnter = this.onMouseEnter;
+          newChildProps.onMouseEnter = this.onMouseEnter; // Point align
 
@@ -681,4 +687,5 @@ if (alignPoint) {
           newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
-        }
+        } // >>> Hover(leave)
 
+
         if (this.isMouseLeaveToHide()) {
@@ -688,4 +695,5 @@ newChildProps.onMouseLeave = this.onMouseLeave;
           newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
-        }
+        } // >>> Focus
 
+
         if (this.isFocusToShow() || this.isBlurToHide()) {
@@ -697,4 +705,5 @@ newChildProps.onFocus = this.onFocus;
           newChildProps.onBlur = this.createTwoChains('onBlur');
-        }
+        } // =================================== Render ===================================
 
+
         var childrenClassName = classNames(child && child.props && child.props.className, className);
@@ -701,0 +710,0 @@

es/interface.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="react" />
+import { CSSMotionProps } from 'rc-motion';
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
@@ -56,1 +58,8 @@ export declare type AlignPoint = string;
 }
+export interface MobileConfig {
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    popupMotion?: CSSMotionProps;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    popupRender?: (originNode: React.ReactNode) => React.ReactNode;
+}

es/Popup/index.d.ts

 import * as React from 'react';
 import { CSSMotionProps } from 'rc-motion';
-import { StretchType, AlignType, TransitionNameType, AnimationType, Point } from '../interface';
+import { StretchType, AlignType, TransitionNameType, AnimationType, Point, MobileConfig } from '../interface';
 import { PopupInnerRef } from './PopupInner';
@@ -30,4 +30,5 @@ export interface PopupProps {
     maskTransitionName: TransitionNameType;
+    mobile?: MobileConfig;
 }
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupInnerRef>>;
 export default Popup;

es/Popup/index.js

@@ -1,14 +0,48 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
+import { useState, useEffect } from 'react';
+import isMobile from "rc-util/es/isMobile";
 import Mask from './Mask';
 import PopupInner from './PopupInner';
-var Popup = React.forwardRef(function (props, ref) {
-  var cloneProps = _extends({}, props); // We can use fragment directly but this may failed some selector usage. Keep as origin logic
+import MobilePopupInner from './MobilePopupInner';
+var Popup = React.forwardRef(function (_ref, ref) {
+  var visible = _ref.visible,
+      mobile = _ref.mobile,
+      props = _objectWithoutProperties(_ref, ["visible", "mobile"]);
 
+  var _useState = useState(visible),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerVisible = _useState2[0],
+      serInnerVisible = _useState2[1];
 
-  return React.createElement("div", null, React.createElement(Mask, Object.assign({}, cloneProps)), React.createElement(PopupInner, Object.assign({}, cloneProps, {
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inMobile = _useState4[0],
+      setInMobile = _useState4[1];
+
+  var cloneProps = _objectSpread(_objectSpread({}, props), {}, {
+    visible: innerVisible
+  }); // We check mobile in visible changed here.
+  // And this also delay set `innerVisible` to avoid popup component render flash
+
+
+  useEffect(function () {
+    serInnerVisible(visible);
+
+    if (visible && mobile) {
+      setInMobile(isMobile());
+    }
+  }, [visible, !!mobile]);
+  var popupNode = inMobile ? React.createElement(MobilePopupInner, Object.assign({}, cloneProps, {
+    mobile: mobile,
     ref: ref
-  })));
+  })) : React.createElement(PopupInner, Object.assign({}, cloneProps, {
+    ref: ref
+  })); // We can use fragment directly but this may failed some selector usage. Keep as origin logic
+
+  return React.createElement("div", null, React.createElement(Mask, Object.assign({}, cloneProps)), popupNode);
 });
 Popup.displayName = 'Popup';
 export default Popup;

lib/index.d.ts

 import * as React from 'react';
 import { CSSMotionProps } from 'rc-motion';
-import { ActionType, AlignType, BuildInPlacements, TransitionNameType, AnimationType } from './interface';
+import { ActionType, AlignType, BuildInPlacements, TransitionNameType, AnimationType, MobileConfig } from './interface';
 export interface TriggerProps {
@@ -54,2 +54,5 @@ children: React.ReactElement;
     getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
+    /** @private Bump fixed position at bottom in mobile.
+     * This is internal usage currently, do not use in your prod */
+    mobile?: MobileConfig;
 }
@@ -56,0 +59,0 @@ /**

lib/index.js

@@ -287,3 +287,4 @@ "use strict";
             stretch = _this$props2.stretch,
-            alignPoint = _this$props2.alignPoint;
+            alignPoint = _this$props2.alignPoint,
+            mobile = _this$props2.mobile;
         var _this$state = _this.state,
@@ -328,3 +329,4 @@ popupVisible = _this$state.popupVisible,
           ref: _this.popupRef,
-          motion: popupMotion
+          motion: popupMotion,
+          mobile: mobile
         }), typeof popup === 'function' ? popup() : popup);
@@ -498,2 +500,3 @@ };
       value: function setPopupVisible(popupVisible, event) {
+        console.error('Change:::', popupVisible);
         var alignPoint = this.props.alignPoint;
@@ -682,3 +685,4 @@ var prevPopupVisible = this.state.popupVisible;
           key: 'trigger'
-        };
+        }; // ============================== Visible Handlers ==============================
+        // >>> ContextMenu
 
@@ -689,4 +693,5 @@ if (this.isContextMenuToShow()) {
           newChildProps.onContextMenu = this.createTwoChains('onContextMenu');
-        }
+        } // >>> Click
 
+
         if (this.isClickToHide() || this.isClickToShow()) {
@@ -700,6 +705,7 @@ newChildProps.onClick = this.onClick;
           newChildProps.onTouchStart = this.createTwoChains('onTouchStart');
-        }
+        } // >>> Hover(enter)
 
+
         if (this.isMouseEnterToShow()) {
-          newChildProps.onMouseEnter = this.onMouseEnter;
+          newChildProps.onMouseEnter = this.onMouseEnter; // Point align
 
@@ -711,4 +717,5 @@ if (alignPoint) {
           newChildProps.onMouseEnter = this.createTwoChains('onMouseEnter');
-        }
+        } // >>> Hover(leave)
 
+
         if (this.isMouseLeaveToHide()) {
@@ -718,4 +725,5 @@ newChildProps.onMouseLeave = this.onMouseLeave;
           newChildProps.onMouseLeave = this.createTwoChains('onMouseLeave');
-        }
+        } // >>> Focus
 
+
         if (this.isFocusToShow() || this.isBlurToHide()) {
@@ -727,4 +735,5 @@ newChildProps.onFocus = this.onFocus;
           newChildProps.onBlur = this.createTwoChains('onBlur');
-        }
+        } // =================================== Render ===================================
 
+
         var childrenClassName = (0, _classnames.default)(child && child.props && child.props.className, className);
@@ -731,0 +740,0 @@

lib/interface.d.ts

@@ -0,1 +1,3 @@
+/// <reference types="react" />
+import { CSSMotionProps } from 'rc-motion';
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
@@ -56,1 +58,8 @@ export declare type AlignPoint = string;
 }
+export interface MobileConfig {
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    popupMotion?: CSSMotionProps;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    popupRender?: (originNode: React.ReactNode) => React.ReactNode;
+}

lib/Popup/index.d.ts

 import * as React from 'react';
 import { CSSMotionProps } from 'rc-motion';
-import { StretchType, AlignType, TransitionNameType, AnimationType, Point } from '../interface';
+import { StretchType, AlignType, TransitionNameType, AnimationType, Point, MobileConfig } from '../interface';
 import { PopupInnerRef } from './PopupInner';
@@ -30,4 +30,5 @@ export interface PopupProps {
     maskTransitionName: TransitionNameType;
+    mobile?: MobileConfig;
 }
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupInnerRef>>;
 export default Popup;

lib/Popup/index.js

@@ -12,6 +12,12 @@ "use strict";
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var React = _interopRequireWildcard(require("react"));
 
+var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
+
 var _Mask = _interopRequireDefault(require("./Mask"));
@@ -21,8 +27,39 @@
 
-var Popup = React.forwardRef(function (props, ref) {
-  var cloneProps = (0, _extends2.default)({}, props); // We can use fragment directly but this may failed some selector usage. Keep as origin logic
+var _MobilePopupInner = _interopRequireDefault(require("./MobilePopupInner"));
 
-  return React.createElement("div", null, React.createElement(_Mask.default, Object.assign({}, cloneProps)), React.createElement(_PopupInner.default, Object.assign({}, cloneProps, {
+var Popup = React.forwardRef(function (_ref, ref) {
+  var visible = _ref.visible,
+      mobile = _ref.mobile,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["visible", "mobile"]);
+
+  var _useState = (0, React.useState)(visible),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      innerVisible = _useState2[0],
+      serInnerVisible = _useState2[1];
+
+  var _useState3 = (0, React.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inMobile = _useState4[0],
+      setInMobile = _useState4[1];
+
+  var cloneProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    visible: innerVisible
+  }); // We check mobile in visible changed here.
+  // And this also delay set `innerVisible` to avoid popup component render flash
+
+  (0, React.useEffect)(function () {
+    serInnerVisible(visible);
+
+    if (visible && mobile) {
+      setInMobile((0, _isMobile.default)());
+    }
+  }, [visible, !!mobile]);
+  var popupNode = inMobile ? React.createElement(_MobilePopupInner.default, Object.assign({}, cloneProps, {
+    mobile: mobile,
     ref: ref
-  })));
+  })) : React.createElement(_PopupInner.default, Object.assign({}, cloneProps, {
+    ref: ref
+  })); // We can use fragment directly but this may failed some selector usage. Keep as origin logic
+
+  return React.createElement("div", null, React.createElement(_Mask.default, Object.assign({}, cloneProps)), popupNode);
 });
@@ -29,0 +66,0 @@ Popup.displayName = 'Popup';

package.json

 {
   "name": "rc-trigger",
-  "version": "5.0.9",
+  "version": "5.1.0",
   "description": "base abstract trigger component for react",
@@ -44,3 +44,4 @@ "engines": {
     "@types/classnames": "^2.2.10",
-    "@types/jest": "^26.0.13",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.15",
     "@types/react": "^16.8.19",
@@ -65,4 +66,4 @@ "@types/react-dom": "^16.8.4",
     "rc-motion": "^2.0.0",
-    "rc-util": "^5.3.4"
+    "rc-util": "^5.5.0"
   }
 }

README.md

@@ -7,3 +7,3 @@ # rc-trigger
 [![NPM version][npm-image]][npm-url]
-[![build status][travis-image]][travis-url]
+[![build status][github-actions-image]][github-actions-url]
 [![Test coverage][coveralls-image]][coveralls-url]
@@ -17,4 +17,4 @@ [![Dependencies][david-image]][david-url]
 [npm-url]: http://npmjs.org/package/rc-trigger
-[travis-image]: https://img.shields.io/travis/react-component/trigger/master?style=flat-square
-[travis-url]: https://travis-ci.org/react-component/trigger
+[github-actions-image]: https://github.com/react-component/trigger/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/trigger/actions
 [circleci-image]: https://img.shields.io/circleci/react-component/trigger/master?style=flat-square
@@ -21,0 +21,0 @@ [circleci-url]: https://circleci.com/gh/react-component/trigger

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125115

increased by9.16%

Number of package files

55

increased by10%

Lines of code

2737

increased by8.78%

Worsened metrics

Dev dependency count

16

increased by6.67%

Dependency changes

• Updatedrc-util@^5.5.0