v1.5.8

ListItem: returned onClick in selectable mode Button: stopPropagation={true} for Tappable Tappable: added new property stopPropagation ScrollView: optimized property pass prevented
VKCOM · May 25, 2018 · 4c33c4e · 4c33c4e
1 parent 92975ee
commit 4c33c4e
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "main": "dist/vkui.js",
   "repository": "https://github.com/VKCOM/VKUI",
   "description": "VKUI library",

diff --git a/src/components/ButtonNew/ButtonNew.js b/src/components/ButtonNew/ButtonNew.js
@@ -45,7 +45,7 @@ export default class ButtonNew extends React.Component {
     });
 
     return (
-      <Tappable className={classNames} {...restProps}>
+      <Tappable className={classNames} stopPropagation {...restProps}>
         <div className="ButtonNew__in">
           {before && <div className="ButtonNew__before">{before}</div>}
           {children && <div className="ButtonNew__content">{children}</div>}

diff --git a/src/components/ButtonOld/ButtonOld.js b/src/components/ButtonOld/ButtonOld.js
@@ -67,6 +67,7 @@ export default class ButtonOld extends Component {
         component={component}
         className={classnames(baseClassNames, className, modifiers)}
         style={style}
+        stopPropagation
         {...nativeProps}
       >
         {children}

diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
@@ -55,7 +55,13 @@ export default class ListItem extends Component {
 
   get document () { return this.context.document || document; }
 
-  emptyClickHandler () {}
+  onSelectableClick = (e) => {
+    if (e.target.tagName.toLowerCase() === 'input') {
+      e.stopPropagation();
+    } else {
+      this.props.onClick && this.props.onClick(e);
+    }
+  };
 
   activateRemove = () => {
     this.setState({ isRemoveActivated: true, height: this.rootEl.offsetHeight });
@@ -133,7 +139,7 @@ export default class ListItem extends Component {
         <Tappable
           component={selectable ? 'label' : 'div'}
           className="ListItem__in"
-          onClick={selectable ? this.emptyClickHandler : onClick}
+          onClick={selectable ? this.onSelectableClick : onClick}
           style={{ transform: `translateX(-${this.state.removeOffset}px)` }}
         >
           {selectable &&

diff --git a/src/components/ScrollView/ScrollView.js b/src/components/ScrollView/ScrollView.js
@@ -82,7 +82,7 @@ export default class ScrollView extends Component {
         className={classnames(baseClassNames, className, {
           'ScrollView--centered': this.props.centered
         })}
-        {...removeObjectKeys(this.props, ['header', 'onPull', 'className', 'activePanel', 'prevPanel', 'nextPanel', 'fixedLayout', 'theme', 'centered'])}
+        {...removeObjectKeys(this.props, ['header', 'onPull', 'className', 'activePanel', 'prevPanel', 'nextPanel', 'fixedLayout', 'theme', 'centered', 'optimized'])}
         ref={this.getRef}
       >
         <div className="ScrollView__in" style={{ paddingBottom: this.insets.bottom || null }}>

diff --git a/src/components/Tappable/Tappable.js b/src/components/Tappable/Tappable.js
@@ -54,12 +54,14 @@ export default class Tappable extends Component {
       PropTypes.element
     ]),
     role: PropTypes.string,
-    activeEffectDelay: PropTypes.number
+    activeEffectDelay: PropTypes.number,
+    stopPropagation: PropTypes.bool
   };
 
   static defaultProps = {
     component: 'div',
     role: 'button',
+    stopPropagation: false,
     activeEffectDelay: ACTIVE_EFFECT_DELAY
   };
 
@@ -71,6 +73,7 @@ export default class Tappable extends Component {
    * @returns {void}
    */
   onStart = ({ originalEvent }) => {
+    this.props.stopPropagation && originalEvent.stopPropagation();
     if (originalEvent.touches && originalEvent.touches.length > 1) {
       return deactivateOtherInstances();
     }
@@ -89,8 +92,9 @@ export default class Tappable extends Component {
    *
    * @returns {void}
    */
-  onMove = (e) => {
-    if (e.shiftXAbs > 20 || e.shiftYAbs > 20) {
+  onMove = ({ originalEvent, shiftXAbs, shiftYAbs }) => {
+    this.props.stopPropagation && originalEvent.stopPropagation();
+    if (shiftXAbs > 20 || shiftYAbs > 20) {
       this.isSlide = true;
       this.stop();
     }
@@ -102,6 +106,7 @@ export default class Tappable extends Component {
    * @returns {void}
    */
   onEnd = ({ originalEvent }) => {
+    this.props.stopPropagation && originalEvent.stopPropagation();
     const now = ts();
 
     if (originalEvent.touches && originalEvent.touches.length > 0) {
@@ -168,10 +173,6 @@ export default class Tappable extends Component {
     }, 225);
   };
 
-  onClick = (e) => {
-    this.props.onClick && this.props.onClick(e);
-  };
-
   /**
    * Устанавливает активное выделение
    *
@@ -256,16 +257,16 @@ export default class Tappable extends Component {
     }
 
     const nativeProps = removeObjectKeys(Object.assign({}, this.props), [
-      'onClick',
       'children',
       'className',
       'propagation',
       'component',
-      'activeEffectDelay'
+      'activeEffectDelay',
+      'stopPropagation'
     ]);
 
     return (
-      <Component className={classes} {...props} {...nativeProps} onClick={this.onClick}>
+      <Component className={classes} {...props} {...nativeProps}>
         {osname === ANDROID && (
           <span className="Tappable__waves" ref={this.getContainer}>
             {Object.keys(clicks).map(k => (