ordering-ui-react-native 0.23.0 → 0.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
|
+
import { useTheme } from 'styled-components/native'
|
|
3
|
+
import { OText } from '../shared'
|
|
4
|
+
|
|
5
|
+
export const MessageAlert = ({ message, resetMsg }: any) => {
|
|
6
|
+
const theme = useTheme()
|
|
7
|
+
|
|
8
|
+
const [text, setText] = useState(message)
|
|
9
|
+
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
setText(message)
|
|
12
|
+
}, [message])
|
|
13
|
+
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (text) {
|
|
16
|
+
setTimeout(() => {
|
|
17
|
+
setText(null)
|
|
18
|
+
resetMsg()
|
|
19
|
+
}, 2000);
|
|
20
|
+
}
|
|
21
|
+
}, [text])
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
text ? (
|
|
25
|
+
<OText
|
|
26
|
+
size={14}
|
|
27
|
+
color={theme.colors.danger500}
|
|
28
|
+
>
|
|
29
|
+
{text}
|
|
30
|
+
</OText>
|
|
31
|
+
) : null
|
|
32
|
+
)
|
|
33
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { StarPRNT } from 'react-native-star-prnt';
|
|
3
|
+
import { ActivityIndicator, Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
|
|
3
4
|
import SelectDropdown from 'react-native-select-dropdown'
|
|
4
5
|
import { useLanguage } from 'ordering-components/native'
|
|
5
6
|
import { useTheme } from 'styled-components/native'
|
|
@@ -20,47 +21,36 @@ import {
|
|
|
20
21
|
import { Container } from '../../layouts/Container'
|
|
21
22
|
import { OText, OInput, OIcon, OButton } from '../shared'
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
{ nickname: 'SM-S230i', model: 'SM-S230i', emulation: 'EscosMobile', portName1: 'BT:SMS230i', type: 1, ip: '', printMode: 'append' },
|
|
35
|
-
{ nickname: 'SM-T300i/T300', model: 'SM-T300i/T300', emulation: 'EscPosMobile', portName1: 'BT:SMT300i/T300', type: 1, ip: '', printMode: 'append' },
|
|
36
|
-
{ nickname: 'SM-T400i', model: 'SM-T400i', emulation: 'EscosMobile', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
|
|
37
|
-
{ nickname: 'SM-L200', model: 'SM-L200', emulation: 'StarPRNT', portName1: 'BT:SML200', type: 1, ip: '', printMode: 'append' },
|
|
38
|
-
{ nickname: 'SM-L300', model: 'SM-L300', emulation: 'StarPRNT', portName1: 'BT:SML300', type: 1, ip: '', printMode: 'append' },
|
|
39
|
-
{ nickname: 'BSC10', model: 'BSC10', emulation: 'EscPos', portName1: 'BT:BSC10', type: 1, ip: '', printMode: 'append' },
|
|
40
|
-
{ nickname: 'SM-S210i StarPRNT', model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS210i', type: 1, ip: '', printMode: 'append' },
|
|
41
|
-
{ nickname: 'SM-S220i StarPRNT', model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS220i', type: 1, ip: '', printMode: 'append' },
|
|
42
|
-
{ nickname: 'SM-S230i StarPRNT', model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMS230i', type: 1, ip: '', printMode: 'append' },
|
|
43
|
-
{ nickname: 'SM-T300i/T300 StarPRNT', model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT300i', type: 1, ip: '', printMode: 'append' },
|
|
44
|
-
{ nickname: 'SM-T400i StarPRNT', model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', portName1: 'BT:SMT400i', type: 1, ip: '', printMode: 'append' },
|
|
45
|
-
]
|
|
24
|
+
import { PRINTERS } from './printerList'
|
|
25
|
+
import { MessageAlert } from './MessageAlert'
|
|
26
|
+
|
|
27
|
+
const printerList = PRINTERS.map(printer => ({
|
|
28
|
+
...printer,
|
|
29
|
+
ip: '',
|
|
30
|
+
type: 1,
|
|
31
|
+
nickname: printer.model,
|
|
32
|
+
portName1: `BT:${printer.model.split(' ')[0]}`,
|
|
33
|
+
bt: `BT:${printer.model.split(' ')[0]}`
|
|
34
|
+
}))
|
|
46
35
|
|
|
47
36
|
export const PrinterEdition = (props: any) => {
|
|
48
|
-
const {
|
|
49
|
-
printer,
|
|
50
|
-
onClose
|
|
51
|
-
} = props
|
|
37
|
+
const { printer, onClose } = props
|
|
52
38
|
|
|
53
39
|
const HEIGHT_SCREEN = Dimensions.get('window').height
|
|
54
40
|
const [, t] = useLanguage()
|
|
55
41
|
const theme = useTheme()
|
|
56
|
-
const {
|
|
42
|
+
const { control, setValue, watch } = useForm()
|
|
43
|
+
|
|
44
|
+
const [currentPrinter, setCurrentPrinter] = useState(printer)
|
|
45
|
+
const [discoverPort, setDiscoverPort] = useState({ loading: false, msg: null })
|
|
57
46
|
|
|
58
47
|
const watchIp = watch('ip')
|
|
48
|
+
const watchBt = watch('bt')
|
|
59
49
|
const watchNickname = watch('nickname')
|
|
60
|
-
const
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
const
|
|
50
|
+
const errorIP = !/^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i.test(watchIp)
|
|
51
|
+
const errorBT = !/^[^\n]*$/i.test(watchBt) || !watchBt
|
|
52
|
+
const isErrorInput = currentPrinter?.type === 2 ? errorIP : errorBT
|
|
53
|
+
const isErrorNickname = watchNickname && !/^[^\n]*$/i.test(watchNickname)
|
|
64
54
|
|
|
65
55
|
const styles = StyleSheet.create({
|
|
66
56
|
icons: {
|
|
@@ -98,6 +88,36 @@ export const PrinterEdition = (props: any) => {
|
|
|
98
88
|
})
|
|
99
89
|
}
|
|
100
90
|
|
|
91
|
+
const portDiscovery = async () => {
|
|
92
|
+
try {
|
|
93
|
+
setDiscoverPort({ ...discoverPort, loading: true })
|
|
94
|
+
let printers = await StarPRNT.portDiscovery('Bluetooth');
|
|
95
|
+
|
|
96
|
+
if (printers?.length) {
|
|
97
|
+
setValue('bt', printers[0]?.portName)
|
|
98
|
+
setCurrentPrinter({
|
|
99
|
+
...currentPrinter,
|
|
100
|
+
['bt']: printers[0]?.portName
|
|
101
|
+
})
|
|
102
|
+
}
|
|
103
|
+
setTimeout(() => {
|
|
104
|
+
setDiscoverPort({
|
|
105
|
+
...discoverPort,
|
|
106
|
+
loading: false,
|
|
107
|
+
msg: !printers?.length
|
|
108
|
+
? t('NO_PRINTERS_FOUND', 'No printers found')
|
|
109
|
+
: null
|
|
110
|
+
})
|
|
111
|
+
}, 1000);
|
|
112
|
+
} catch (e) {
|
|
113
|
+
setValue('bt', currentPrinter?.portName)
|
|
114
|
+
setCurrentPrinter({
|
|
115
|
+
...currentPrinter,
|
|
116
|
+
['bt']: currentPrinter?.portName
|
|
117
|
+
})
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
101
121
|
const onSubmit = () => {
|
|
102
122
|
handleChangePrinter({ edit: !!printer, isAdd: !printer })
|
|
103
123
|
onClose && onClose()
|
|
@@ -105,6 +125,7 @@ export const PrinterEdition = (props: any) => {
|
|
|
105
125
|
|
|
106
126
|
useEffect(() => {
|
|
107
127
|
currentPrinter?.ip && setValue('ip', currentPrinter?.ip)
|
|
128
|
+
currentPrinter?.bt && setValue('bt', currentPrinter?.bt)
|
|
108
129
|
currentPrinter?.nickname && setValue('nickname', currentPrinter?.nickname)
|
|
109
130
|
}, [currentPrinter?.type])
|
|
110
131
|
|
|
@@ -281,51 +302,93 @@ export const PrinterEdition = (props: any) => {
|
|
|
281
302
|
{t('CONNECTION_VIA_LAN', 'Via LAN')}
|
|
282
303
|
</OText>
|
|
283
304
|
</WrapperIcon>
|
|
284
|
-
{
|
|
285
|
-
|
|
286
|
-
<View style={{ flexDirection: 'row' }}>
|
|
287
|
-
<Controller
|
|
288
|
-
control={control}
|
|
289
|
-
name={'ip'}
|
|
290
|
-
rules={{
|
|
291
|
-
required: t('VALIDATION_ERROR_IP_ADDRESS_REQUIRED', 'Ip address is required'),
|
|
292
|
-
pattern: {
|
|
293
|
-
value: /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i,
|
|
294
|
-
message: t('INVALID_ERROR_IP_ADDRESS', 'Invalid ip address')
|
|
295
|
-
}
|
|
296
|
-
}}
|
|
297
|
-
defaultValue={currentPrinter?.ip ?? ''}
|
|
298
|
-
render={() => (
|
|
299
|
-
<OInput
|
|
300
|
-
placeholder={t('IP_ADDRESS', 'Ip address')}
|
|
301
|
-
placeholderTextColor={theme.colors.arrowColor}
|
|
302
|
-
style={{
|
|
303
|
-
...styles.inputStyle,
|
|
304
|
-
borderColor: isErrorIp ? theme.colors.danger500 : theme.colors.tabBar
|
|
305
|
-
}}
|
|
306
|
-
value={currentPrinter?.ip ?? ''}
|
|
307
|
-
selectionColor={theme.colors.primary}
|
|
308
|
-
color={theme.colors.textGray}
|
|
309
|
-
onChange={(value: any) => {
|
|
310
|
-
setValue('ip', value)
|
|
311
|
-
setCurrentPrinter({
|
|
312
|
-
...currentPrinter,
|
|
313
|
-
ip: value
|
|
314
|
-
})
|
|
315
|
-
}}
|
|
316
|
-
/>
|
|
317
|
-
)}
|
|
318
|
-
/>
|
|
319
|
-
</View>
|
|
305
|
+
<View style={{ flexDirection: 'column', marginTop: 30 }}>
|
|
306
|
+
{currentPrinter?.type === 1 && (
|
|
320
307
|
<OText
|
|
321
308
|
size={14}
|
|
322
|
-
color={theme.colors.
|
|
323
|
-
style={{
|
|
309
|
+
color={theme.colors.toastInfo}
|
|
310
|
+
style={{ marginBottom: 10 }}
|
|
324
311
|
>
|
|
325
|
-
{
|
|
312
|
+
{t('SEARCH_AVAILABLE_PRINTER_MESSAGE', 'Use the search icon to find an available printer')}
|
|
326
313
|
</OText>
|
|
327
|
-
|
|
328
|
-
|
|
314
|
+
)}
|
|
315
|
+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
316
|
+
<Controller
|
|
317
|
+
control={control}
|
|
318
|
+
name={currentPrinter?.type === 2 ? 'ip' : 'bt'}
|
|
319
|
+
rules={{
|
|
320
|
+
required: currentPrinter?.type === 2
|
|
321
|
+
? t('VALIDATION_ERROR_IP_ADDRESS_REQUIRED', 'Ip address is required')
|
|
322
|
+
: t('VALIDATION_ERROR_BLUETOOTH_PORN_REQUIRED', 'Bluetooth port name is required'),
|
|
323
|
+
pattern: {
|
|
324
|
+
value: currentPrinter?.type === 2
|
|
325
|
+
? /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/i
|
|
326
|
+
: /^[a-zA-Z0-9]+$/i,
|
|
327
|
+
message: currentPrinter?.type === 2
|
|
328
|
+
? t('INVALID_ERROR_IP_ADDRESS', 'Invalid ip address')
|
|
329
|
+
: t('INVALID_ERROR_BLUETOOTH_PORT_NAME', 'Invalid bluetooth port name')
|
|
330
|
+
}
|
|
331
|
+
}}
|
|
332
|
+
defaultValue={currentPrinter?.type === 2 ? currentPrinter?.ip ?? '' : currentPrinter?.bt ?? ''}
|
|
333
|
+
render={() => (
|
|
334
|
+
<OInput
|
|
335
|
+
placeholder={currentPrinter?.type === 2
|
|
336
|
+
? t('IP_ADDRESS', 'Ip address')
|
|
337
|
+
: t('BLUETOOTH_PORT', 'Bluetooth port')
|
|
338
|
+
}
|
|
339
|
+
placeholderTextColor={theme.colors.arrowColor}
|
|
340
|
+
style={{
|
|
341
|
+
...styles.inputStyle,
|
|
342
|
+
borderColor: isErrorInput ? theme.colors.danger500 : theme.colors.tabBar
|
|
343
|
+
}}
|
|
344
|
+
value={currentPrinter?.type === 2 ? currentPrinter?.ip ?? '' : currentPrinter?.bt ?? ''}
|
|
345
|
+
selectionColor={theme.colors.primary}
|
|
346
|
+
color={theme.colors.textGray}
|
|
347
|
+
onChange={(value: any) => {
|
|
348
|
+
setValue(currentPrinter?.type === 2 ? 'ip' : 'bt', value)
|
|
349
|
+
setCurrentPrinter({
|
|
350
|
+
...currentPrinter,
|
|
351
|
+
[currentPrinter?.type === 2 ? 'ip' : 'bt']: value
|
|
352
|
+
})
|
|
353
|
+
}}
|
|
354
|
+
/>
|
|
355
|
+
)}
|
|
356
|
+
/>
|
|
357
|
+
{currentPrinter?.type === 1 && (
|
|
358
|
+
<>
|
|
359
|
+
{!discoverPort.loading ? (
|
|
360
|
+
<FAIcons
|
|
361
|
+
name='search'
|
|
362
|
+
size={22}
|
|
363
|
+
color={theme.colors.primary}
|
|
364
|
+
style={{ marginLeft: 10 }}
|
|
365
|
+
onPress={() => portDiscovery()}
|
|
366
|
+
/>
|
|
367
|
+
) : (
|
|
368
|
+
<ActivityIndicator
|
|
369
|
+
size="small"
|
|
370
|
+
style={{ marginLeft: 10 }}
|
|
371
|
+
color={theme.colors.primary}
|
|
372
|
+
/>
|
|
373
|
+
)}
|
|
374
|
+
</>
|
|
375
|
+
)}
|
|
376
|
+
</View>
|
|
377
|
+
</View>
|
|
378
|
+
<OText
|
|
379
|
+
size={14}
|
|
380
|
+
color={theme.colors.tabBar}
|
|
381
|
+
style={{ paddingTop: 5, paddingLeft: 10 }}
|
|
382
|
+
>
|
|
383
|
+
{discoverPort.msg ? (
|
|
384
|
+
<MessageAlert
|
|
385
|
+
message={discoverPort.msg}
|
|
386
|
+
resetMsg={() => setDiscoverPort({ ...discoverPort, msg: null })}
|
|
387
|
+
/>
|
|
388
|
+
) : (
|
|
389
|
+
`${t('EXAMPLE_SHORT', 'Ex:')} ${currentPrinter?.type === 2 ? '8.8.8.8' : currentPrinter?.portName1}`
|
|
390
|
+
)}
|
|
391
|
+
</OText>
|
|
329
392
|
</WrapperIcons>
|
|
330
393
|
)}
|
|
331
394
|
</ContainerEdition>
|
|
@@ -341,6 +404,7 @@ export const PrinterEdition = (props: any) => {
|
|
|
341
404
|
isDisabled={
|
|
342
405
|
isErrorNickname ||
|
|
343
406
|
!currentPrinter?.model ||
|
|
407
|
+
currentPrinter?.type === 1 && !currentPrinter?.bt ||
|
|
344
408
|
currentPrinter?.type === 2 && !currentPrinter?.ip
|
|
345
409
|
}
|
|
346
410
|
onClick={() => onSubmit()}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export const PRINTERS = [
|
|
2
|
+
{ model: 'mPOP', emulation: 'StarPRNT', printMode: 'append' },
|
|
3
|
+
{ model: 'FVP10', emulation: 'StarLine', printMode: 'append' },
|
|
4
|
+
{ model: 'TSP100', emulation: 'StarGraphic', printMode: 'appendBitmapText' },
|
|
5
|
+
{ model: 'TSP100IV', emulation: 'StarLine', printMode: 'append' },
|
|
6
|
+
{ model: 'TSP65011', emulation: 'StarLine', printMode: 'append' },
|
|
7
|
+
{ model: 'TSP7001', emulation: 'StarLine', printMode: 'append' },
|
|
8
|
+
{ model: 'TSP80011', emulation: 'StarLine', printMode: 'append' },
|
|
9
|
+
{ model: 'SP700', emulation: 'StarDotImpact', printMode: 'append' },
|
|
10
|
+
{ model: 'SM-S210i', emulation: 'EscPosMobile', printMode: 'append' },
|
|
11
|
+
{ model: 'SM-S220i', emulation: 'EscPosMobile', printMode: 'append' },
|
|
12
|
+
{ model: 'SM-S230i', emulation: 'EscosMobile', printMode: 'append' },
|
|
13
|
+
{ model: 'SM-T300i/T300', emulation: 'EscPosMobile', printMode: 'append' },
|
|
14
|
+
{ model: 'SM-T400i', emulation: 'EscosMobile', printMode: 'append' },
|
|
15
|
+
{ model: 'SM-L200', emulation: 'StarPRNT', printMode: 'append' },
|
|
16
|
+
{ model: 'SM-L300', emulation: 'StarPRNT', printMode: 'append' },
|
|
17
|
+
{ model: 'BSC10', emulation: 'EscPos', bt: 'BT:BSC10', printMode: 'append' },
|
|
18
|
+
{ model: 'SM-S210i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
|
|
19
|
+
{ model: 'SM-S220i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
|
|
20
|
+
{ model: 'SM-S230i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
|
|
21
|
+
{ model: 'SM-T300i/T300 StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
|
|
22
|
+
{ model: 'SM-T400i StarPRNT', emulation: 'StarPRNT', printMode: 'append' },
|
|
23
|
+
]
|