[CAES-257] Added LongClickBehaviour component. Fixed components which… (#171)

* [CAES-257] Added LongClickBehaviour component. Fixed components which is using it

* [CAES-257] Removed handler

* [CAES-257] Renamed LongClick to HoldClick

Author: dspiridonov4xxi

components/HoldClickBehaviour/HoldClickBehaviour.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+class HoldClickBehaviour extends Component {
+  timer = null;
+
+  handleButtonPress = () => {
+    const { delay = 250, onHoldStart } = this.props;
+
+    this.timer = setTimeout(onHoldStart, delay);
+  };
+
+  handleButtonRelease = () => {
+    const { onHoldEnd } = this.props;
+
+    clearTimeout(this.timer);
+
+    onHoldEnd();
+  };
+
+  render() {
+    const { onHoldStart, onHoldEnd, ...props } = this.props;
+
+    return (
+      <div
+        {...props}
+        role="presentation"
+        onTouchStart={this.handleButtonPress}
+        onTouchEnd={this.handleButtonRelease}
+        onMouseDown={this.handleButtonPress}
+        onMouseUp={this.handleButtonRelease}
+        onMouseLeave={this.handleButtonRelease}
+      />
+    );
+  }
+}
+
+export default HoldClickBehaviour;

components/HoldClickBehaviour/index.js

@@ -0,0 +1 @@
+export { default as HoldClickBehaviour } from './HoldClickBehaviour';

components/Input/PasswordInput.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import Input from './Input';
 import { Icon } from '../Icon';
+import { HoldClickBehaviour } from '../HoldClickBehaviour';
 
 const StyledIcon = styled(Icon)`
   cursor: pointer;
@@ -12,10 +13,10 @@ class PasswordInput extends PureComponent {
     visible: false,
   };
 
-  handleChangeVisible = () => {
-    this.setState(prevState => ({
-      visible: !prevState.visible,
-    }));
+  handleToggleVisible = visible => () => {
+    this.setState({
+      visible,
+    });
   };
 
   render() {
@@ -32,12 +33,12 @@ class PasswordInput extends PureComponent {
         type={type}
         postfix={
           value && (
-            <StyledIcon
-              name={iconName}
-              width={18}
-              height={18}
-              onClick={this.handleChangeVisible}
-            />
+            <HoldClickBehaviour
+              onHoldStart={this.handleToggleVisible(true)}
+              onHoldEnd={this.handleToggleVisible(false)}
+            >
+              <StyledIcon name={iconName} width={18} height={18} />
+            </HoldClickBehaviour>
           )
         }
       />

components/Item/Types/Credentials/Credentials.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import copy from 'copy-text-to-clipboard';
-import { Icon, Label } from 'components';
+import { Icon, Label, HoldClickBehaviour } from 'components';
 import {
   Wrapper,
   Row,
@@ -47,7 +47,7 @@ class Credentials extends Component {
     isPasswordVisible: false,
   };
 
-  handleTogglePasswordVisibility = visible => {
+  handleToggleVisibility = visible => () => {
     this.setState(() => ({
       isPasswordVisible: visible,
     }));
@@ -124,20 +124,12 @@ class Credentials extends Component {
               <FieldValue>
                 <FixedSizeField>{pwd}</FixedSizeField>
                 <Row>
-                  <StyledEyeIcon
-                    name={eyeIconName}
-                    width={20}
-                    height={20}
-                    onMouseDown={() => {
-                      return this.handleTogglePasswordVisibility(true);
-                    }}
-                    onMouseUp={() => {
-                      return this.handleTogglePasswordVisibility(false);
-                    }}
-                    onMouseOver={() => {
-                      return this.handleTogglePasswordVisibility(false);
-                    }}
-                  />
+                  <HoldClickBehaviour
+                    onHoldStart={this.handleToggleVisibility(true)}
+                    onHoldEnd={this.handleToggleVisibility(false)}
+                  >
+                    <StyledEyeIcon name={eyeIconName} width={20} height={20} />
+                  </HoldClickBehaviour>
                   <StyledIcon
                     name="copy"
                     width={19}

components/index.js

@@ -70,3 +70,4 @@ export { Toggle } from './Toggle';
 export { RangeInput } from './RangeInput';
 export { PasswordIndicator } from './PasswordIndicator';
 export { TagsInput } from './TagsInput';
+export { HoldClickBehaviour } from './HoldClickBehaviour';