fix(rn): prevent double clicking submit buttons

fix #799

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>

client/react-native/common/components/Library/Flex.js

@@ -1,5 +1,7 @@
+import { View } from 'react-native'
 import React from 'react'
-import { View, TouchableOpacity } from 'react-native'
+
+import Touchable from './Touchable'
 
 const getDirection = (key, directions = { rows: 'column', cols: 'row' }) =>
   directions[key] || null
@@ -49,7 +51,7 @@ const getProps = ({
 
 export const Block = props => {
   return props.onPress ? (
-    <TouchableOpacity {...getProps(props)} style={getStyle(props)} />
+    <Touchable {...getProps(props)} style={getStyle(props)} />
   ) : (
     <View {...getProps(props)} style={getStyle(props)} />
   )
@@ -58,7 +60,7 @@ export const Block = props => {
 export const Rows = ({ direction, ...props }) => {
   props.direction = 'rows'
   return props.onPress ? (
-    <TouchableOpacity {...getProps(props)} style={getStyle(props)} />
+    <Touchable {...getProps(props)} style={getStyle(props)} />
   ) : (
     <View {...getProps(props)} style={getStyle(props)} />
   )
@@ -67,7 +69,7 @@ export const Rows = ({ direction, ...props }) => {
 export const Cols = ({ direction, ...props }) => {
   props.direction = 'cols'
   return props.onPress ? (
-    <TouchableOpacity {...getProps(props)} style={getStyle(props)} />
+    <Touchable {...getProps(props)} style={getStyle(props)} />
   ) : (
     <View {...getProps(props)} style={getStyle(props)} />
   )

client/react-native/common/components/Library/Touchable.js

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react'
+import { TouchableOpacity } from 'react-native'
+
+export default class Touchable extends PureComponent {
+  state = {
+    loading: false,
+  }
+
+  preventDoubleClicking = onPress => () => {
+    this.setState({ loading: true }, async () => {
+      if (!onPress) {
+        return
+      }
+      await onPress()
+      this.setState({ loading: false })
+    })
+  }
+
+  render () {
+    const { loading } = this.state
+    const {
+      style = {},
+      onPress,
+      opacity,
+      activeOpacity = 0.3,
+      ...props
+    } = this.props
+    style.opacity = opacity || onPress ? 1 : activeOpacity
+    return (
+      <TouchableOpacity
+        onPress={!loading ? this.preventDoubleClicking(onPress) : undefined}
+        activeOpacity={activeOpacity}
+        style={style}
+        {...props}
+      />
+    )
+  }
+}