dreaction-react-native 1.3.4 → 1.4.0

package/lib/components/ConfigDialog.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 interface ConfigDialogProps {
     visible: boolean;
-    onConfirm: (value: string) => void;
+    onConfirm: (host: string) => void;
     onCancel: () => void;
 }
 export declare const ConfigDialog: React.FC<ConfigDialogProps>;

package/lib/components/ConfigDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfigDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiCnD,CAAC"}
+{"version":3,"file":"ConfigDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfigDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAenD,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqDnD,CAAC"}

package/lib/components/ConfigDialog.js

@@ -38,13 +38,29 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const getHost_1 = require("../helpers/getHost");
+const dreaction_1 = require("../dreaction");
+const parseURL_1 = require("../helpers/parseURL");
+const LOCAL_CACHE_HOST_NAME = '__dreaction-react-native-host';
 exports.ConfigDialog = react_1.default.memo((props) => {
     const { visible, onConfirm, onCancel } = props;
-    const [inputValue, setInputValue] = (0, react_1.useState)((0, getHost_1.getHost)());
+    const defaultValue = (0, getHost_1.getHost)();
+    const [inputValue, setInputValue] = (0, react_1.useState)(defaultValue);
+    const selectTextOnFocus = inputValue === defaultValue;
+    (0, react_1.useEffect)(() => {
+        dreaction_1.dreaction.asyncStorageHandler
+            ?.getItem(LOCAL_CACHE_HOST_NAME)
+            .then((host) => {
+            if (host) {
+                setInputValue(host);
+            }
+        });
+    }, []);
     const handleConfirm = () => {
-        onConfirm(inputValue);
+        const host = (0, parseURL_1.getHostFromUrl)(inputValue);
+        dreaction_1.dreaction.asyncStorageHandler?.setItem(LOCAL_CACHE_HOST_NAME, host);
+        onConfirm(host);
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { animationType: "fade", transparent: true, visible: visible, onRequestClose: () => onCancel(), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.modalOverlay, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: "DReaction Desktop Application Url" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.input, value: inputValue, keyboardType: "url", onChangeText: setInputValue, placeholder: (0, getHost_1.getHost)() }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.buttonContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "Cancel", onPress: onCancel }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "Confirm", onPress: handleConfirm })] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { animationType: "fade", transparent: true, visible: visible, onRequestClose: () => onCancel(), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.modalOverlay, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: "DReaction Desktop Application Url" }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: styles.input, selectTextOnFocus: selectTextOnFocus, value: inputValue, keyboardType: "url", onChangeText: setInputValue, placeholder: (0, getHost_1.getHost)() }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.buttonContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.buttonView, onPress: onCancel, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.buttonView, onPress: handleConfirm, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Confirm" }) })] })] }) }) }));
 });
 exports.ConfigDialog.displayName = 'ConfigDialog';
 const styles = react_native_1.StyleSheet.create({
@@ -73,6 +89,7 @@ const styles = react_native_1.StyleSheet.create({
         borderWidth: 1,
         borderColor: '#ccc',
         borderRadius: 5,
+        color: 'black',
         padding: 10,
         marginBottom: 20,
     },
@@ -80,4 +97,11 @@ const styles = react_native_1.StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'space-around',
     },
+    buttonView: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+    },
+    buttonText: {
+        color: '#2563eb',
+    },
 });

package/lib/components/DraggableBall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableBall.d.ts","sourceRoot":"","sources":["../../src/components/DraggableBall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAsB3D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA4GhC,CAAC"}
+{"version":3,"file":"DraggableBall.d.ts","sourceRoot":"","sources":["../../src/components/DraggableBall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqB3D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA0GhC,CAAC"}

package/lib/components/DraggableBall.js

@@ -39,7 +39,6 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const ConfigDialog_1 = require("./ConfigDialog");
 const dreaction_1 = require("../dreaction");
-const parseURL_1 = require("../helpers/parseURL");
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
 const BALL_SIZE = 60;
 const CLICK_THRESHOLD = 5;
@@ -61,9 +60,8 @@ exports.DraggableBall = react_1.default.memo(() => {
             clearInterval(timer);
         };
     }, []);
-    const handleClick = (value) => {
+    const handleClick = (host) => {
         try {
-            const host = (0, parseURL_1.getHostFromUrl)(value);
             dreaction_1.dreaction
                 .configure({
                 host,

package/lib/dreaction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,wBAAwB,EAExB,SAAS,EACT,aAAa,EACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,YAAY,EAAE,aAAa,EAAE,CAAC;AAM9B,eAAO,MAAM,sBAAsB,OAOO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,wBAAwB,CACvD,aAAa,EACb,OAAO,sBAAsB,CAC9B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,SAAS,EAEf,yBAAyB;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;IACzC,sBAAsB,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AAkFD,eAAO,MAAM,SAAS,sBAA+C,CAAC"}
+{"version":3,"file":"dreaction.d.ts","sourceRoot":"","sources":["../src/dreaction.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,aAAa,EACb,wBAAwB,EAExB,SAAS,EACT,aAAa,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAqB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAA0B,EACxB,wBAAwB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,YAAY,EAAE,aAAa,EAAE,CAAC;AAM9B,eAAO,MAAM,sBAAsB,OAOO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,wBAAwB,GAAG,OAAO,CAAC;IAC5C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACvC,YAAY,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAC;IAC7C,UAAU,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,yBAAyB,GAAG,wBAAwB,CACvD,aAAa,EACb,OAAO,sBAAsB,CAC9B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,SAAS,EAEf,yBAAyB;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC1D,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;IACzC,sBAAsB,EAAE,CAAC,YAAY,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,mBAAmB,EAAE,CAAC,CAAC,GAAG,OAAO,EAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;QACR;;WAEG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,KACE;QACH,iBAAiB,EAAE,CAAC,GAAG,SAAS,CAAC;QACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;QAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;KAC9C,CAAC;CACH;AAkFD,eAAO,MAAM,SAAS,sBAA+C,CAAC"}

package/lib/plugins/asyncStorage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asyncStorage.d.ts","sourceRoot":"","sources":["../../src/plugins/asyncStorage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,uBAAuB,CAAC;AAGnE,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAMD,QAAA,MAAM,YAAY,aACL,mBAAmB,iBAAiB,aAAa;;;;;CA+M3D,CAAC;AAEJ,eAAe,YAAY,CAAC"}
+{"version":3,"file":"asyncStorage.d.ts","sourceRoot":"","sources":["../../src/plugins/asyncStorage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAU,MAAM,uBAAuB,CAAC;AAEnE,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAMD,QAAA,MAAM,YAAY,aACL,mBAAmB,iBAAiB,aAAa;;;;;CA+M3D,CAAC;AAEJ,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dreaction-react-native",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "private": false,
   "description": "",
   "main": "lib/index.js",
@@ -19,9 +19,13 @@
     "dreaction-protocol": "1.0.1"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^2.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "^5.4.5"
   },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2.0.0"
+  },
   "scripts": {
     "dev": "tsc --watch",
     "build": "tsc",

package/src/components/ConfigDialog.tsx

@@ -1,18 +1,44 @@
-import React, { useState } from 'react';
-import { View, Text, TextInput, Button, Modal, StyleSheet } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
 import { getHost } from '../helpers/getHost';
+import { dreaction } from '../dreaction';
+import { getHostFromUrl } from '../helpers/parseURL';
+
+const LOCAL_CACHE_HOST_NAME = '__dreaction-react-native-host';
 
 interface ConfigDialogProps {
   visible: boolean;
-  onConfirm: (value: string) => void;
+  onConfirm: (host: string) => void;
   onCancel: () => void;
 }
 export const ConfigDialog: React.FC<ConfigDialogProps> = React.memo((props) => {
   const { visible, onConfirm, onCancel } = props;
-  const [inputValue, setInputValue] = useState(getHost());
+  const defaultValue = getHost();
+  const [inputValue, setInputValue] = useState(defaultValue);
+
+  const selectTextOnFocus = inputValue === defaultValue;
+
+  useEffect(() => {
+    dreaction.asyncStorageHandler
+      ?.getItem(LOCAL_CACHE_HOST_NAME)
+      .then((host) => {
+        if (host) {
+          setInputValue(host);
+        }
+      });
+  }, []);
 
   const handleConfirm = () => {
-    onConfirm(inputValue);
+    const host = getHostFromUrl(inputValue);
+    dreaction.asyncStorageHandler?.setItem(LOCAL_CACHE_HOST_NAME, host);
+    onConfirm(host);
   };
 
   return (
@@ -27,14 +53,19 @@ export const ConfigDialog: React.FC<ConfigDialogProps> = React.memo((props) => {
           <Text style={styles.title}>DReaction Desktop Application Url</Text>
           <TextInput
             style={styles.input}
+            selectTextOnFocus={selectTextOnFocus}
             value={inputValue}
             keyboardType="url"
             onChangeText={setInputValue}
             placeholder={getHost()}
           />
           <View style={styles.buttonContainer}>
-            <Button title="Cancel" onPress={onCancel} />
-            <Button title="Confirm" onPress={handleConfirm} />
+            <TouchableOpacity style={styles.buttonView} onPress={onCancel}>
+              <Text style={styles.buttonText}>Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.buttonView} onPress={handleConfirm}>
+              <Text style={styles.buttonText}>Confirm</Text>
+            </TouchableOpacity>
           </View>
         </View>
       </View>
@@ -69,6 +100,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#ccc',
     borderRadius: 5,
+    color: 'black',
     padding: 10,
     marginBottom: 20,
   },
@@ -76,4 +108,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
+  buttonView: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  buttonText: {
+    color: '#2563eb',
+  },
 });

package/src/components/DraggableBall.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import { ConfigDialog } from './ConfigDialog';
 import { dreaction } from '../dreaction';
-import { getHostFromUrl } from '../helpers/parseURL';
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 const BALL_SIZE = 60;
@@ -37,10 +36,8 @@ export const DraggableBall: React.FC = React.memo(() => {
     };
   }, []);
 
-  const handleClick = (value: string) => {
+  const handleClick = (host: string) => {
     try {
-      const host = getHostFromUrl(value);
-
       dreaction
         .configure({
           host,

package/src/dreaction.ts

@@ -7,7 +7,6 @@ import type {
   DReaction,
   DReactionCore,
 } from 'dreaction-client-core';
-// @ts-ignore
 import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
 import getReactNativeVersion from './helpers/getReactNativeVersion';
 import getReactNativeDimensions from './helpers/getReactNativeDimensions';

package/src/plugins/asyncStorage.ts

@@ -1,5 +1,4 @@
 import type { DReactionCore, Plugin } from 'dreaction-client-core';
-// @ts-ignore
 import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
 export interface AsyncStorageOptions {
   ignore?: string[];