zmp-react - npm Package Compare versions

Comparing version 2.2.10-1 to 2.2.10-2

cjs/zalo-ui-kits/list-item.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _useIsomorphicLayoutEffect = require("../shared/use-isomorphic-layout-effect");
+
 var _listItem = _interopRequireDefault(require("../components/list-item"));
@@ -21,2 +23,4 @@
 
+var _utils2 = require("../shared/utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -79,2 +83,3 @@
   onClick? : (event?: any) => void
+  onTapHold?: (...args: any[]) => void
   onSwipeoutOverswipeEnter? : (...args: any[]) => void
@@ -99,5 +104,2 @@ onSwipeoutOverswipeExit? : (...args: any[]) => void
   var itemRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return itemRef.current;
-  });
   var description = props.description,
@@ -107,3 +109,5 @@ footer = props.footer,
       href = props.href,
-      others = (0, _objectWithoutPropertiesLoose2.default)(props, ["description", "footer", "link", "href"]);
+      onTapHold = props.onTapHold,
+      className = props.className,
+      others = (0, _objectWithoutPropertiesLoose2.default)(props, ["description", "footer", "link", "href", "onTapHold", "className"]);
 
@@ -116,2 +120,29 @@ var handleClickLink = function handleClickLink(e, _link) {
 
+  function preventContextMenu(e) {
+    if (onTapHold) {
+      e.preventDefault();
+    }
+
+    return true;
+  }
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return itemRef.current;
+  });
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+    var _itemRef$current$el, _itemRef$current$el2;
+
+    itemRef == null ? void 0 : (_itemRef$current$el = itemRef.current.el) == null ? void 0 : _itemRef$current$el.addEventListener('taphold', onTapHold);
+    itemRef == null ? void 0 : (_itemRef$current$el2 = itemRef.current.el) == null ? void 0 : _itemRef$current$el2.addEventListener('contextmenu', preventContextMenu, false);
+    return function () {
+      var _itemRef$current$el3, _itemRef$current$el4;
+
+      itemRef == null ? void 0 : (_itemRef$current$el3 = itemRef.current.el) == null ? void 0 : _itemRef$current$el3.removeEventListener('taphold', onTapHold);
+      itemRef == null ? void 0 : (_itemRef$current$el4 = itemRef.current.el) == null ? void 0 : _itemRef$current$el4.removeEventListener('contextmenu', preventContextMenu);
+    };
+  }, []);
+  var classes = (0, _utils2.classNames)({
+    'list-item-taphold': onTapHold
+  }, className);
+
   if (link || href) {
@@ -129,2 +160,3 @@ var _zmp$routes = _zmp.zmp.routes,
       return /*#__PURE__*/_react.default.createElement(_listItem.default, (0, _extends2.default)({}, others, {
+        className: classes,
         header: null,
@@ -142,2 +174,3 @@ footer: description || footer,
   return /*#__PURE__*/_react.default.createElement(_listItem.default, (0, _extends2.default)({}, others, {
+    className: classes,
     link: false,
@@ -144,0 +177,0 @@ header: null,

cjs/zmp-react.js

 /**
- * ZMP React 2.2.10-1
+ * ZMP React 2.2.10-2
  * Build full featured iOS & Android apps using ZMP & React
@@ -10,3 +10,3 @@ * https://h5.zalo.me/react/
  *
- * Released on: August 18, 2021
+ * Released on: August 20, 2021
  */
@@ -13,0 +13,0 @@ "use strict";

components/list-item/list-item.d.ts

@@ -100,2 +100,3 @@
   onClick ?: (event?: any) => void;
+  onTapHold?: (...args: any[]) => void;
   onSwipeoutOverswipeEnter ?: (...args: any[]) => void;
@@ -102,0 +103,0 @@ onSwipeoutOverswipeExit ?: (...args: any[]) => void;

esm/zalo-ui-kits/list-item.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import React, { useImperativeHandle, useRef, forwardRef, useMemo } from 'react';
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
 import ListItem from '../components/list-item';
 import { zmp } from '../shared/zmp';
 import { validateUrl } from '../../common/utils';
+import { classNames } from '../shared/utils';
 /* dts-imports
@@ -60,2 +62,3 @@ import { SmartSelect } from 'zmp-core/types';
   onClick? : (event?: any) => void
+  onTapHold?: (...args: any[]) => void
   onSwipeoutOverswipeEnter? : (...args: any[]) => void
@@ -81,5 +84,2 @@ onSwipeoutOverswipeExit? : (...args: any[]) => void
   var itemRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return itemRef.current;
-  });
 
@@ -90,3 +90,5 @@ var description = props.description,
       href = props.href,
-      others = _objectWithoutPropertiesLoose(props, ["description", "footer", "link", "href"]);
+      onTapHold = props.onTapHold,
+      className = props.className,
+      others = _objectWithoutPropertiesLoose(props, ["description", "footer", "link", "href", "onTapHold", "className"]);
 
@@ -98,2 +100,29 @@ var handleClickLink = function handleClickLink(e, _link) {
 
+  function preventContextMenu(e) {
+    if (onTapHold) {
+      e.preventDefault();
+    }
+
+    return true;
+  }
+
+  useImperativeHandle(ref, function () {
+    return itemRef.current;
+  });
+  useIsomorphicLayoutEffect(function () {
+    var _itemRef$current$el, _itemRef$current$el2;
+
+    itemRef == null ? void 0 : (_itemRef$current$el = itemRef.current.el) == null ? void 0 : _itemRef$current$el.addEventListener('taphold', onTapHold);
+    itemRef == null ? void 0 : (_itemRef$current$el2 = itemRef.current.el) == null ? void 0 : _itemRef$current$el2.addEventListener('contextmenu', preventContextMenu, false);
+    return function () {
+      var _itemRef$current$el3, _itemRef$current$el4;
+
+      itemRef == null ? void 0 : (_itemRef$current$el3 = itemRef.current.el) == null ? void 0 : _itemRef$current$el3.removeEventListener('taphold', onTapHold);
+      itemRef == null ? void 0 : (_itemRef$current$el4 = itemRef.current.el) == null ? void 0 : _itemRef$current$el4.removeEventListener('contextmenu', preventContextMenu);
+    };
+  }, []);
+  var classes = classNames({
+    'list-item-taphold': onTapHold
+  }, className);
+
   if (link || href) {
@@ -111,2 +140,3 @@ var _zmp$routes = zmp.routes,
       return /*#__PURE__*/React.createElement(ListItem, _extends({}, others, {
+        className: classes,
         header: null,
@@ -124,2 +154,3 @@ footer: description || footer,
   return /*#__PURE__*/React.createElement(ListItem, _extends({}, others, {
+    className: classes,
     link: false,
@@ -126,0 +157,0 @@ header: null,

esm/zmp-react.js

 /**
- * ZMP React 2.2.10-1
+ * ZMP React 2.2.10-2
  * Build full featured iOS & Android apps using ZMP & React
@@ -10,3 +10,3 @@ * https://h5.zalo.me/react/
  *
- * Released on: August 18, 2021
+ * Released on: August 20, 2021
  */
@@ -13,0 +13,0 @@ /* eslint-disable no-proto */

package.json

 {
   "name": "zmp-react",
-  "version": "2.2.10-1",
+  "version": "2.2.10-2",
   "description": "Build full featured iOS & Android apps using ZMP & React",
@@ -5,0 +5,0 @@ "main": "cjs/zmp-react.js",

No alert changes

Improved metrics

Total package byte prevSize

1776612

increased by0.18%

Lines of code

39918

increased by0.15%

No dependency changes