Merge pull request #1227 from nyaruka/mobile-friendly

Disallow editing nodes on mobile

Author: ericnewcomer

package.json

@@ -70,7 +70,7 @@
     "@babel/core": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "7.0.0",
-    "@nyaruka/temba-components": "0.72.1",
+    "@nyaruka/temba-components": "0.75.0",
     "@testing-library/jest-dom": "4.0.0",
     "@testing-library/react": "8.0.1",
     "@types/common-tags": "^1.8.0",

src/components/flow/Flow.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { react as bindCallbacks } from 'auto-bind';
 import Button from 'components/button/Button';
 import { Canvas } from 'components/canvas/Canvas';
@@ -146,6 +147,11 @@ export class Flow extends React.PureComponent<FlowStoreProps, {}> {
     return (this.ghost = ref);
   }
 
+  public isMobile() {
+    const win = window as any;
+    return win.isMobile && win.isMobile();
+  }
+
   public componentDidMount(): void {
     this.Plumber.bind('connection', (event: ConnectionEvent) =>
       this.props.updateConnection(event.sourceId, event.targetId)
@@ -407,7 +413,7 @@ export class Flow extends React.PureComponent<FlowStoreProps, {}> {
         {this.getNodeEditor()}
 
         <Canvas
-          mutable={this.context.config.mutable}
+          mutable={!this.isMobile() && this.context.config.mutable}
           draggingNew={!!this.props.ghostNode && !this.props.nodeEditorSettings}
           newDragElement={this.getDragNode()}
           onDragging={this.handleDragging}

src/config/ConfigProvider.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { FlowEditorConfig } from 'flowTypes';
 import * as React from 'react';
 
@@ -27,6 +28,10 @@ export default class ConfigProvider extends React.Component<ConfigProviderProps>
 
   constructor(props: ConfigProviderProps) {
     super(props);
+    const win = window as any;
+    if (win.isMobile && win.isMobile()) {
+      this.props.config.mutable = false;
+    }
 
     if (React.Children.count(props.children) > 1) {
       throw new Error(SINGLE_CHILD_ERROR);

src/testUtils/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // TODO: Remove use of Function
 // tslint:disable:ban-types
 import { ConfigProviderContext, fakePropType } from 'config/ConfigProvider';
@@ -49,6 +50,11 @@ export const getConfigProviderContext = (
   flowType: FlowTypes = FlowTypes.MESSAGING
 ): ConfigProviderContext => {
   const flowEditorConfig = getFlowEditorConfig(flowType);
+  const win = window as any;
+  if (win.isMobile && win.isMobile()) {
+    flowEditorConfig.mutable = false;
+  }
+
   const configProviderContext = { config: flowEditorConfig };
   return configProviderContext;
 };

yarn.lock

@@ -1496,10 +1496,10 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@nyaruka/temba-components@0.72.1":
-  version "0.72.1"
-  resolved "https://registry.yarnpkg.com/@nyaruka/temba-components/-/temba-components-0.72.1.tgz#1ee11d763f1657ea9a038807dcdbe79f08b2e887"
-  integrity sha512-qyVdL10dz50V+rHBXZhlRwrHs428BXj+rhfSFqbtF8WSf8xn8HpVzlHnT+wZHoBnUCAE1h0btPCGfqdhiYmEOA==
+"@nyaruka/temba-components@0.75.0":
+  version "0.75.0"
+  resolved "https://registry.yarnpkg.com/@nyaruka/temba-components/-/temba-components-0.75.0.tgz#3ff7b415c228f32d8b2d3c72f889e5889faf3fc1"
+  integrity sha512-7j4cJK/dy+t21rIGMjSw78zNA8aCmEdbZOjw8w9GThS/SLMSbh4m0DAsDSBSfQDrtjUrCxST+5eIf6XcNqW0xw==
   dependencies:
     "@lit/localize" "^0.11.4"
     color-hash "^2.0.2"