From d59c77c876a8b4a1f9d4b1fb6e3a788a253268d1 Mon Sep 17 00:00:00 2001 From: Eric Newcomer Date: Sun, 17 Mar 2024 22:53:31 +0000 Subject: [PATCH 1/3] Tweaks to be more mobile friendly --- src/components/flow/Flow.tsx | 6 +++++- src/config/ConfigProvider.tsx | 5 +++++ src/testUtils/index.tsx | 5 +++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/flow/Flow.tsx b/src/components/flow/Flow.tsx index afda8de4c..c0e265b36 100644 --- a/src/components/flow/Flow.tsx +++ b/src/components/flow/Flow.tsx @@ -146,6 +146,10 @@ export class Flow extends React.PureComponent { return (this.ghost = ref); } + public isMobile() { + return (window as any).isMobile(); + } + public componentDidMount(): void { this.Plumber.bind('connection', (event: ConnectionEvent) => this.props.updateConnection(event.sourceId, event.targetId) @@ -407,7 +411,7 @@ export class Flow extends React.PureComponent { {this.getNodeEditor()} constructor(props: ConfigProviderProps) { super(props); + if ((window as any).isMobile()) { + this.props.config.mutable = false; + } + if (React.Children.count(props.children) > 1) { throw new Error(SINGLE_CHILD_ERROR); } else if (!React.isValidElement(props.children)) { diff --git a/src/testUtils/index.tsx b/src/testUtils/index.tsx index eaee163dd..cb67ee8d3 100644 --- a/src/testUtils/index.tsx +++ b/src/testUtils/index.tsx @@ -49,6 +49,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; }; From cdb61cea9057198a077913cceef25efb18c57f74 Mon Sep 17 00:00:00 2001 From: Eric Newcomer Date: Sun, 17 Mar 2024 23:28:43 +0000 Subject: [PATCH 2/3] Update components --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index c79f4306a..3d5c74aec 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 1a3a96bf1..48a3ceda1 100644 --- a/yarn.lock +++ b/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" From 89f19bc32b0a44a846149acb9875210091725c4a Mon Sep 17 00:00:00 2001 From: Eric Newcomer Date: Sun, 17 Mar 2024 23:37:08 +0000 Subject: [PATCH 3/3] Fix mobile state check --- src/components/flow/Flow.tsx | 4 +++- src/config/ConfigProvider.tsx | 4 ++-- src/testUtils/index.tsx | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/flow/Flow.tsx b/src/components/flow/Flow.tsx index c0e265b36..b82aad3b5 100644 --- a/src/components/flow/Flow.tsx +++ b/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'; @@ -147,7 +148,8 @@ export class Flow extends React.PureComponent { } public isMobile() { - return (window as any).isMobile(); + const win = window as any; + return win.isMobile && win.isMobile(); } public componentDidMount(): void { diff --git a/src/config/ConfigProvider.tsx b/src/config/ConfigProvider.tsx index 49e74b423..782826fe2 100644 --- a/src/config/ConfigProvider.tsx +++ b/src/config/ConfigProvider.tsx @@ -28,8 +28,8 @@ export default class ConfigProvider extends React.Component constructor(props: ConfigProviderProps) { super(props); - - if ((window as any).isMobile()) { + const win = window as any; + if (win.isMobile && win.isMobile()) { this.props.config.mutable = false; } diff --git a/src/testUtils/index.tsx b/src/testUtils/index.tsx index cb67ee8d3..94feca471 100644 --- a/src/testUtils/index.tsx +++ b/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';