Skip to content

Commit ce30d05

Browse files
dhewzulladhewzulla
committed
widget-seperation
1 parent c234b31 commit ce30d05

File tree

5 files changed

+239
-225
lines changed

5 files changed

+239
-225
lines changed

‎index.d.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ export type ConnectQRProps = {
5252
maxSize?: number;
5353
vspace?: number;
5454
hspace?: number;
55+
mobile:GlobalInputData;
5556
};
5657
export interface GlobalInputData {
57-
ConnectQR: React.FC<ConnectQRProps>,
58-
PairingQR: React.FC<ConnectQRProps>,
5958
connectionCode: string;
59+
pairingCode: string;
6060
field: FormField;
6161
errorMessage: string;
6262
isLoading: boolean;
@@ -77,3 +77,5 @@ export interface GlobalInputData {
7777
export function generateRandomString(length?: number): string;
7878
export function encrypt(content: string, password: string): string;
7979
export function decrypt(content: string, password: string): string;
80+
export const ConnectQR:React.FC<ConnectQRProps>;
81+
export const PairingQR:React.FC<ConnectQRProps>;

‎src/globalinput.js

Lines changed: 4 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11

2-
import React, { useState, useEffect } from "react";
3-
import QRCode from "qrcode.react";
42
import { createMessageConnector } from 'global-input-message';
53

64
const ACTION_TYPES = {
@@ -27,6 +25,7 @@ const MobileState = {
2725

2826
export const initialState = {
2927
connectionCode: null,
28+
pairingCode: null,
3029
errorMessage: null,
3130
field: null,
3231
isLoading: true,
@@ -271,7 +270,7 @@ export const startConnect = (config, notify) => {
271270
notify({ type: ACTION_TYPES.START_CONNECT });
272271
};
273272

274-
export const getParingCode = () => {
273+
const getParingCode = () => {
275274
return mobileData.session && mobileData.session.buildPairingData();
276275
};
277276

@@ -283,7 +282,7 @@ export const reducer = (state, action) => {
283282
state = { ...state, errorMessage: '', field: null, isConnectionDenied: false };
284283
break;
285284
case ACTION_TYPES.REGISTERED:
286-
state = { ...state, errorMessage: '', field: null, connectionCode: action.connectionCode, isConnectionDenied: false };
285+
state = { ...state, errorMessage: '', field: null, connectionCode: action.connectionCode, pairingCode: getParingCode(), isConnectionDenied: false };
287286
break;
288287
case ACTION_TYPES.RECEIVED_FIELD:
289288
state = { ...state, field: action.field, isConnectionDenied: false };
@@ -308,7 +307,7 @@ export const reducer = (state, action) => {
308307
...getStateData()
309308
};
310309
};
311-
export const getStateData = () => {
310+
const getStateData = () => {
312311
return {
313312
isLoading: mobileData.mobileState === MobileState.INITIALIZING,
314313
isReady: mobileData.mobileState === MobileState.WAITING_FOR_MOBILE,
@@ -321,77 +320,3 @@ export const getStateData = () => {
321320
}
322321

323322
export const keepConnection = () => !!mobileData.sender;
324-
const styles = {
325-
label: {
326-
paddingTop: 20,
327-
color: "#A9C8E6", //#4880ED
328-
},
329-
qrCode: {
330-
display: "flex",
331-
flexDirection: 'column',
332-
justifyContent: 'center',
333-
alignItems: 'center',
334-
padding: 5,
335-
backgroundColor: "white"
336-
}
337-
};
338-
339-
export const loading = (<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
340-
<path fill="#C779D0" d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z">
341-
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite" />
342-
</path>
343-
</svg>);
344-
345-
346-
export const qrCodeLabel = (
347-
<div style={styles.label}>
348-
Scan with <a href="https://globalinput.co.uk/global-input-app/get-app" rel="noopener noreferrer" target="_blank"> Global Input App</a>
349-
</div>
350-
);
351-
352-
export const displayQRCode = (codeContent, level, size, label, maxSize, vspace, hspace) => {
353-
if ((!codeContent) || size === 0) {
354-
return null;
355-
}
356-
if (size) {
357-
return (
358-
<div style={styles.qrCode}>
359-
<QRCode value={codeContent} level={level} size={size} />
360-
{label}
361-
</div>
362-
);
363-
}
364-
else {
365-
return (
366-
<div style={styles.qrCode}>
367-
<ResizeQRCode value={codeContent} level={level} maxSize={maxSize} vspace={vspace} hspace={hspace} />
368-
{label}
369-
</div>
370-
);
371-
}
372-
}
373-
374-
const ResizeQRCode = ({ value, level, maxSize, vspace, hspace }) => {
375-
const [size, setSize] = useState(0);
376-
useEffect(() => {
377-
const handleResize = () => {
378-
let size = 0;
379-
if (window && window.innerWidth && window.innerHeight) {
380-
if (window.innerWidth < window.innerHeight) {
381-
size = window.innerWidth - hspace;
382-
}
383-
else {
384-
size = window.innerHeight - vspace;
385-
}
386-
}
387-
setSize(size > maxSize ? maxSize : size);
388-
};
389-
handleResize();
390-
window.addEventListener('resize', handleResize);
391-
return () => { window.removeEventListener('resize', handleResize) }
392-
});
393-
if (!size) {
394-
return null;
395-
}
396-
return (<QRCode value={value} level={level} size={size} />);
397-
};

‎src/index.js

Lines changed: 2 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,3 @@
1-
import * as globalInput from './globalinput';
2-
import { useReducer, useRef, useEffect, useCallback } from "react";
31
export * from 'global-input-message';
4-
export const useGlobalInputApp = (config, canConnect = true, configId = "") => {
5-
const [{
6-
connectionCode,
7-
errorMessage,
8-
field,
9-
isLoading,
10-
isReady,
11-
isError,
12-
isDisconnected,
13-
isConnected,
14-
isConnectionDenied,
15-
initData,
16-
senders
17-
}, dispatch] = useReducer(globalInput.reducer, globalInput.initialState);
18-
19-
const attached = useRef(true);
20-
const notify = (st) => {
21-
if (attached.current) {
22-
dispatch(st);
23-
}
24-
else {
25-
console.log(` after-detach-${st.type} `);
26-
};
27-
};
28-
useEffect(() => {
29-
attached.current = true;
30-
return () => {
31-
attached.current = false;
32-
}
33-
}, []);
34-
const configRef = useRef(null);
35-
configRef.current = config;
36-
useEffect(() => {
37-
if (typeof configRef.current === 'function') {
38-
configRef.current = configRef.current();
39-
}
40-
if (typeof configRef.current.initData === 'function') {
41-
configRef.current.initData = configRef.current.initData();
42-
}
43-
if (canConnect || globalInput.keepConnection()) {
44-
globalInput.startConnect(configRef.current, notify);
45-
}
46-
// eslint-disable-next-line react-hooks/exhaustive-deps
47-
}, [canConnect, configId]); //You don't need to memoize the input parameter of this hook.
48-
49-
const restart = useCallback((config) => {
50-
if (!attached.current) {
51-
console.log(" -restart-not-attached- ");
52-
return;
53-
}
54-
globalInput.disconnect(notify);
55-
globalInput.startConnect(config ? config : configRef.current, notify);
56-
}, [])
57-
58-
59-
const sendInitData = useCallback((initData) => {
60-
if (!attached.current) {
61-
return;
62-
}
63-
if (typeof initData === 'function') {
64-
initData = initData();
65-
}
66-
if (!globalInput.isValidInitData(initData)) {
67-
console.log(" init-data-set-empty ");
68-
return;
69-
}
70-
globalInput.sendInitData(initData, notify);
71-
}, []);
72-
73-
74-
const disconnect = useCallback(() => {
75-
globalInput.disconnect(notify);
76-
}, []);
77-
78-
79-
const sendValue = globalInput.sendValue;
80-
81-
82-
const onchange = useRef(null);
83-
const setOnchange = useCallback((listener) => onchange.current = listener, []);
84-
useEffect(() => {
85-
if (field && onchange.current && attached.current) {
86-
onchange.current({
87-
field,
88-
initData,
89-
sendInitData,
90-
sendValue
91-
});
92-
}
93-
}, [field, initData, sendInitData, sendValue]);
94-
95-
const ConnectQR = useCallback(({ level = 'H', size, label = globalInput.qrCodeLabel, loading = globalInput.loading, maxSize = 400, vspace = 130, hspace = 50 }) => {
96-
if (isLoading) {
97-
return loading;
98-
}
99-
if (!isReady) {
100-
return null;
101-
}
102-
if ((!connectionCode) || size === 0) {
103-
return null;
104-
}
105-
return globalInput.displayQRCode(connectionCode, level, size, label, maxSize, vspace, hspace);
106-
}, [connectionCode, isReady, isLoading]);
107-
const PairingQR = useCallback(({ level = 'H', size, label = globalInput.qrCodeLabel, loading = globalInput.loading, maxSize = 400, vspace = 130, hspace = 50 }) => {
108-
if (isLoading) {
109-
return loading;
110-
}
111-
if (!isReady) {
112-
return null;
113-
}
114-
const pairingCode = globalInput.getParingCode();
115-
if ((!pairingCode) || size === 0) {
116-
return null;
117-
}
118-
return globalInput.displayQRCode(pairingCode, level, size, label, maxSize, vspace, hspace);
119-
}, [isReady, isLoading]);
120-
121-
122-
return {
123-
ConnectQR,
124-
PairingQR,
125-
connectionCode,
126-
field,
127-
errorMessage,
128-
isLoading,
129-
isReady,
130-
isError,
131-
isDisconnected,
132-
isConnected,
133-
isConnectionDenied,
134-
initData,
135-
senders,
136-
sendValue,
137-
sendInitData,
138-
setOnchange,
139-
disconnect,
140-
restart,
141-
};
142-
};
143-
144-
const getGlobalInputState = globalInput.getStateData;
145-
export { getGlobalInputState };
2+
export * from './useGlobalInputApp';
3+
export * from './widgets';

0 commit comments

Comments
 (0)