@lichens-innovation/react-native-common 3.1.0 → 3.2.0
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/dist/components/drop-down-selector/drop-down-selector.d.ts +1 -0
- package/dist/components/drop-down-selector/drop-down-selector.js +23 -14
- package/dist/components/drop-down-selector/drop-down-selector.js.map +1 -1
- package/dist/components/drop-down-selector/drop-down-selector.utils.d.ts +22 -0
- package/dist/components/drop-down-selector/drop-down-selector.utils.js +37 -0
- package/dist/components/drop-down-selector/drop-down-selector.utils.js.map +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/voice-recognition/index.d.ts +2 -0
- package/dist/components/voice-recognition/index.js +3 -0
- package/dist/components/voice-recognition/index.js.map +1 -0
- package/dist/components/voice-recognition/voice-recognition-text-input.d.ts +10 -0
- package/dist/components/voice-recognition/voice-recognition-text-input.js +104 -0
- package/dist/components/voice-recognition/voice-recognition-text-input.js.map +1 -0
- package/dist/components/voice-recognition/voice-recognition.utils.d.ts +7 -0
- package/dist/components/voice-recognition/voice-recognition.utils.js +24 -0
- package/dist/components/voice-recognition/voice-recognition.utils.js.map +1 -0
- package/dist/i18n/en/common.json +1 -0
- package/dist/i18n/fr/common.json +1 -0
- package/package.json +3 -1
|
@@ -4,46 +4,55 @@ import { StyleSheet, View } from 'react-native';
|
|
|
4
4
|
import { Dropdown } from 'react-native-element-dropdown';
|
|
5
5
|
import { Text } from 'react-native-paper';
|
|
6
6
|
import { useAppTheme } from '../../theme/theme';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const [isFocus, setIsFocus] = useState(false);
|
|
7
|
+
import { getBorderColor, getLabelColor, getTextColor } from './drop-down-selector.utils';
|
|
8
|
+
export const DropDownSelector = ({ label, value, onChange, isError, options, placeholder, searchPlaceholder, disabled, }) => {
|
|
9
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
11
10
|
const hasLabel = !!label;
|
|
12
|
-
const styles = useStyles({
|
|
13
|
-
return (_jsxs(View, { children: [hasLabel && (_jsx(Text, { variant: 'bodySmall', style:
|
|
11
|
+
const styles = useStyles({ isFocused, disabled, isError });
|
|
12
|
+
return (_jsxs(View, { children: [hasLabel && (_jsx(Text, { variant: 'bodySmall', style: styles.dropdownTitle, children: label })), _jsx(Dropdown, { style: styles.dropdown, autoScroll: false, placeholderStyle: styles.placeholderStyle, selectedTextStyle: styles.selectedTextStyle, inputSearchStyle: styles.inputSearchStyle, iconStyle: styles.iconStyle, data: options, search: false, maxHeight: 300, labelField: "label", valueField: "value", placeholder: isFocused ? '' : placeholder, searchPlaceholder: searchPlaceholder, value: value, disable: disabled, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onChange: ({ value }) => {
|
|
14
13
|
onChange(value);
|
|
15
|
-
|
|
14
|
+
setIsFocused(false);
|
|
16
15
|
} })] }));
|
|
17
16
|
};
|
|
18
|
-
const useStyles = ({
|
|
17
|
+
const useStyles = ({ isFocused, disabled, isError }) => {
|
|
19
18
|
const theme = useAppTheme();
|
|
19
|
+
const { surface, surfaceDisabled } = theme.colors;
|
|
20
|
+
const isDisabled = disabled === true;
|
|
21
|
+
const isFocusedAndEnabled = isFocused && !isDisabled;
|
|
22
|
+
// Priority: error > disabled > focus > normal
|
|
23
|
+
const labelColor = getLabelColor({ theme, isError: !!isError, isDisabled, isFocusedAndEnabled });
|
|
24
|
+
const borderColor = getBorderColor({ theme, isError: !!isError, isDisabled, isFocused });
|
|
25
|
+
const borderWidth = isFocusedAndEnabled ? 2 : 1;
|
|
26
|
+
const backgroundColor = isDisabled ? surfaceDisabled : 'transparent';
|
|
27
|
+
const textColor = getTextColor({ theme, isFocused, isDisabled });
|
|
20
28
|
return StyleSheet.create({
|
|
21
29
|
dropdownTitle: {
|
|
22
30
|
position: 'absolute',
|
|
23
31
|
top: -theme.spacing(1),
|
|
24
32
|
left: theme.spacing(1),
|
|
25
|
-
backgroundColor:
|
|
33
|
+
backgroundColor: surface,
|
|
26
34
|
paddingHorizontal: theme.spacing(0.75),
|
|
27
|
-
color:
|
|
35
|
+
color: labelColor,
|
|
28
36
|
zIndex: 1,
|
|
29
37
|
},
|
|
30
38
|
dropdown: {
|
|
31
39
|
height: 50,
|
|
32
|
-
borderColor
|
|
33
|
-
borderWidth
|
|
40
|
+
borderColor,
|
|
41
|
+
borderWidth,
|
|
34
42
|
borderRadius: theme.roundness,
|
|
35
43
|
paddingHorizontal: theme.spacing(1),
|
|
44
|
+
backgroundColor,
|
|
36
45
|
},
|
|
37
46
|
icon: {
|
|
38
47
|
marginRight: 5,
|
|
39
48
|
},
|
|
40
49
|
placeholderStyle: {
|
|
41
50
|
fontSize: 16,
|
|
42
|
-
color:
|
|
51
|
+
color: textColor,
|
|
43
52
|
},
|
|
44
53
|
selectedTextStyle: {
|
|
45
54
|
fontSize: 16,
|
|
46
|
-
color:
|
|
55
|
+
color: textColor,
|
|
47
56
|
paddingLeft: theme.spacing(1),
|
|
48
57
|
},
|
|
49
58
|
iconStyle: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down-selector.js","sourceRoot":"","sources":["../../../src/components/drop-down-selector/drop-down-selector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"drop-down-selector.js","sourceRoot":"","sources":["../../../src/components/drop-down-selector/drop-down-selector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { AppTheme } from '~/theme';
|
|
2
|
+
interface GetTextColorArgs {
|
|
3
|
+
theme: AppTheme;
|
|
4
|
+
isFocused: boolean;
|
|
5
|
+
isDisabled: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const getTextColor: ({ theme, isFocused, isDisabled }: GetTextColorArgs) => string;
|
|
8
|
+
interface GetLabelColorArgs {
|
|
9
|
+
theme: AppTheme;
|
|
10
|
+
isError: boolean;
|
|
11
|
+
isDisabled: boolean;
|
|
12
|
+
isFocusedAndEnabled: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const getLabelColor: ({ theme, isError, isDisabled, isFocusedAndEnabled }: GetLabelColorArgs) => string;
|
|
15
|
+
interface GetBorderColorArgs {
|
|
16
|
+
theme: AppTheme;
|
|
17
|
+
isError: boolean;
|
|
18
|
+
isDisabled: boolean;
|
|
19
|
+
isFocused: boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare const getBorderColor: ({ theme, isError, isDisabled, isFocused }: GetBorderColorArgs) => string;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export const getTextColor = ({ theme, isFocused, isDisabled }) => {
|
|
2
|
+
const { onSurfaceDisabled, primary, secondary } = theme.colors;
|
|
3
|
+
if (isDisabled) {
|
|
4
|
+
return onSurfaceDisabled;
|
|
5
|
+
}
|
|
6
|
+
if (isFocused) {
|
|
7
|
+
return primary;
|
|
8
|
+
}
|
|
9
|
+
return secondary;
|
|
10
|
+
};
|
|
11
|
+
export const getLabelColor = ({ theme, isError, isDisabled, isFocusedAndEnabled }) => {
|
|
12
|
+
const { error, onSurfaceDisabled, primary, onSurface } = theme.colors;
|
|
13
|
+
if (isError) {
|
|
14
|
+
return error;
|
|
15
|
+
}
|
|
16
|
+
if (isDisabled) {
|
|
17
|
+
return onSurfaceDisabled;
|
|
18
|
+
}
|
|
19
|
+
if (isFocusedAndEnabled) {
|
|
20
|
+
return primary;
|
|
21
|
+
}
|
|
22
|
+
return onSurface;
|
|
23
|
+
};
|
|
24
|
+
export const getBorderColor = ({ theme, isError, isDisabled, isFocused }) => {
|
|
25
|
+
const { error, surfaceDisabled, primary, outline } = theme.colors;
|
|
26
|
+
if (isError) {
|
|
27
|
+
return error;
|
|
28
|
+
}
|
|
29
|
+
if (isDisabled) {
|
|
30
|
+
return surfaceDisabled;
|
|
31
|
+
}
|
|
32
|
+
if (isFocused) {
|
|
33
|
+
return primary;
|
|
34
|
+
}
|
|
35
|
+
return outline;
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=drop-down-selector.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drop-down-selector.utils.js","sourceRoot":"","sources":["../../../src/components/drop-down-selector/drop-down-selector.utils.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAoB,EAAE,EAAE;IACjF,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAE/D,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAqB,EAAE,EAAE;IACtG,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAEtE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IAED,IAAI,mBAAmB,EAAE,CAAC;QACxB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAsB,EAAE,EAAE;IAC9F,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;IAElE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,eAAe,CAAC;IACzB,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/voice-recognition/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { TextInputProps } from 'react-native-paper';
|
|
3
|
+
interface VoiceRecognitionTextInputProps extends TextInputProps {
|
|
4
|
+
label: string;
|
|
5
|
+
value: string;
|
|
6
|
+
onValueChange: (value: string) => void;
|
|
7
|
+
onValueSubmit: (value: string) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const VoiceRecognitionTextInput: FunctionComponent<VoiceRecognitionTextInputProps>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { isBlank, isNotBlank } from '@lichens-innovation/ts-common';
|
|
14
|
+
import { ExpoSpeechRecognitionModule, useSpeechRecognitionEvent } from 'expo-speech-recognition';
|
|
15
|
+
import { useState } from 'react';
|
|
16
|
+
import { useTranslation } from 'react-i18next';
|
|
17
|
+
import { Keyboard, StyleSheet, View } from 'react-native';
|
|
18
|
+
import { IconButton, TextInput } from 'react-native-paper';
|
|
19
|
+
import { logger } from '../../logger/logger';
|
|
20
|
+
import { useAppTheme } from '../../theme/theme';
|
|
21
|
+
import { buildFinalValue, ensureVoiceRecognitionPermissions } from './voice-recognition.utils';
|
|
22
|
+
export const VoiceRecognitionTextInput = (_a) => {
|
|
23
|
+
var { label, value, onValueChange, onValueSubmit } = _a, rest = __rest(_a, ["label", "value", "onValueChange", "onValueSubmit"]);
|
|
24
|
+
const styles = useStyles();
|
|
25
|
+
const [isRecording, setIsRecording] = useState(false);
|
|
26
|
+
const [recordingValue, setRecordingValue] = useState('');
|
|
27
|
+
const { t } = useTranslation();
|
|
28
|
+
const speechToTextLanguageCode = t('common:speechToTextLanguageCode');
|
|
29
|
+
const finalValue = buildFinalValue({ query: value, recordingValue });
|
|
30
|
+
const triggerOnSearch = () => {
|
|
31
|
+
Keyboard.dismiss();
|
|
32
|
+
onValueSubmit(finalValue.trim());
|
|
33
|
+
setIsRecording(false);
|
|
34
|
+
setRecordingValue('');
|
|
35
|
+
};
|
|
36
|
+
useSpeechRecognitionEvent('result', (event) => {
|
|
37
|
+
if (!isRecording)
|
|
38
|
+
return;
|
|
39
|
+
const transcript = event.results[0].transcript;
|
|
40
|
+
if (isNotBlank(transcript)) {
|
|
41
|
+
setRecordingValue(transcript);
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
useSpeechRecognitionEvent('error', (event) => {
|
|
45
|
+
const { error, message } = event;
|
|
46
|
+
logger.error(`[useSpeechRecognitionEvent] error: ${error} - ${message}`);
|
|
47
|
+
setIsRecording(false);
|
|
48
|
+
setRecordingValue('');
|
|
49
|
+
});
|
|
50
|
+
const handleStartRecording = async () => {
|
|
51
|
+
const hasPermissions = await ensureVoiceRecognitionPermissions();
|
|
52
|
+
if (!hasPermissions)
|
|
53
|
+
return;
|
|
54
|
+
setIsRecording(true);
|
|
55
|
+
setRecordingValue('');
|
|
56
|
+
Keyboard.dismiss();
|
|
57
|
+
ExpoSpeechRecognitionModule.start({
|
|
58
|
+
lang: speechToTextLanguageCode,
|
|
59
|
+
interimResults: true,
|
|
60
|
+
continuous: true,
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
const handleStopRecording = async () => {
|
|
64
|
+
if (!isRecording)
|
|
65
|
+
return;
|
|
66
|
+
setIsRecording(false);
|
|
67
|
+
ExpoSpeechRecognitionModule.stop();
|
|
68
|
+
if (isNotBlank(recordingValue)) {
|
|
69
|
+
onValueChange(buildFinalValue({ query: value, recordingValue }));
|
|
70
|
+
}
|
|
71
|
+
setRecordingValue('');
|
|
72
|
+
};
|
|
73
|
+
const toggleRecording = () => {
|
|
74
|
+
if (isRecording) {
|
|
75
|
+
handleStopRecording();
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
handleStartRecording();
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
const clearValue = () => {
|
|
82
|
+
onValueChange('');
|
|
83
|
+
setRecordingValue('');
|
|
84
|
+
};
|
|
85
|
+
return (_jsxs(View, { style: styles.container, children: [_jsx(TextInput, Object.assign({}, rest, { style: styles.textInput, label: label, value: finalValue, readOnly: isRecording, onChangeText: onValueChange, multiline: true, numberOfLines: 4, left: _jsx(TextInput.Icon, { icon: isRecording ? 'stop' : 'microphone-outline', onPress: toggleRecording }), right: _jsx(TextInput.Icon, { icon: "close", onPress: clearValue, disabled: isBlank(finalValue) }) })), _jsx(View, { style: styles.actionsContainer, children: _jsx(IconButton, { icon: "send", onPress: triggerOnSearch, disabled: isBlank(finalValue), iconColor: styles.sendIcon.color }) })] }));
|
|
86
|
+
};
|
|
87
|
+
const useStyles = () => {
|
|
88
|
+
const theme = useAppTheme();
|
|
89
|
+
return StyleSheet.create({
|
|
90
|
+
container: {
|
|
91
|
+
flexDirection: 'row',
|
|
92
|
+
},
|
|
93
|
+
textInput: {
|
|
94
|
+
flex: 1,
|
|
95
|
+
},
|
|
96
|
+
actionsContainer: {
|
|
97
|
+
flexDirection: 'row',
|
|
98
|
+
},
|
|
99
|
+
sendIcon: {
|
|
100
|
+
color: theme.colors.primary,
|
|
101
|
+
},
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
//# sourceMappingURL=voice-recognition-text-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"voice-recognition-text-input.js","sourceRoot":"","sources":["../../../src/components/voice-recognition/voice-recognition-text-input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface BuildFinalValueArgs {
|
|
2
|
+
query: string;
|
|
3
|
+
recordingValue: string;
|
|
4
|
+
}
|
|
5
|
+
export declare const buildFinalValue: ({ query, recordingValue }: BuildFinalValueArgs) => string;
|
|
6
|
+
export declare const ensureVoiceRecognitionPermissions: () => Promise<boolean>;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { isNotBlank } from '@lichens-innovation/ts-common';
|
|
2
|
+
import { ExpoSpeechRecognitionModule } from 'expo-speech-recognition';
|
|
3
|
+
import { logger } from '../../logger/logger';
|
|
4
|
+
export const buildFinalValue = ({ query, recordingValue }) => {
|
|
5
|
+
return [query, recordingValue].filter(isNotBlank).join(' ');
|
|
6
|
+
};
|
|
7
|
+
export const ensureVoiceRecognitionPermissions = async () => {
|
|
8
|
+
try {
|
|
9
|
+
const permissions = await ExpoSpeechRecognitionModule.getPermissionsAsync();
|
|
10
|
+
if (!permissions.granted) {
|
|
11
|
+
const result = await ExpoSpeechRecognitionModule.requestPermissionsAsync();
|
|
12
|
+
if (!result.granted) {
|
|
13
|
+
logger.info('[ensureVoiceRecognitionPermissions] Permissions not granted', result);
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return true;
|
|
18
|
+
}
|
|
19
|
+
catch (e) {
|
|
20
|
+
logger.error('[ensureVoiceRecognitionPermissions] Error getting permissions', e);
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=voice-recognition.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"voice-recognition.utils.js","sourceRoot":"","sources":["../../../src/components/voice-recognition/voice-recognition.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,EAAuB,EAAU,EAAE;IACxF,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,KAAK,IAAsB,EAAE;IAC5E,IAAI,CAAC;QACH,MAAM,WAAW,GAAG,MAAM,2BAA2B,CAAC,mBAAmB,EAAE,CAAC;QAC5E,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YACzB,MAAM,MAAM,GAAG,MAAM,2BAA2B,CAAC,uBAAuB,EAAE,CAAC;YAE3E,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBACpB,MAAM,CAAC,IAAI,CAAC,6DAA6D,EAAE,MAAM,CAAC,CAAC;gBACnF,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,CAAU,EAAE,CAAC;QACpB,MAAM,CAAC,KAAK,CAAC,+DAA+D,EAAE,CAAC,CAAC,CAAC;QACjF,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC,CAAC"}
|
package/dist/i18n/en/common.json
CHANGED
package/dist/i18n/fr/common.json
CHANGED
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Lichens Innovation React Native Expo shared components, utilities, hooks and services",
|
|
4
4
|
"repository": "https://github.com/Lichens-Innovation/react-native-common",
|
|
5
5
|
"author": "Lichens Innovation",
|
|
6
|
-
"version": "3.
|
|
6
|
+
"version": "3.2.0",
|
|
7
7
|
"private": false,
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"types": "dist/index.d.ts",
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
"expo-router": "~6.0.10",
|
|
83
83
|
"expo-secure-store": "~15.0.7",
|
|
84
84
|
"expo-sharing": "~14.0.7",
|
|
85
|
+
"expo-speech-recognition": "~3.0.1",
|
|
85
86
|
"expo-splash-screen": "~31.0.10",
|
|
86
87
|
"expo-sqlite": "~16.0.8",
|
|
87
88
|
"expo-status-bar": "~3.0.8",
|
|
@@ -143,6 +144,7 @@
|
|
|
143
144
|
"expo-router": ">=6.0.10",
|
|
144
145
|
"expo-secure-store": ">=15.0.7",
|
|
145
146
|
"expo-sharing": ">=14.0.7",
|
|
147
|
+
"expo-speech-recognition": ">=3.0.1",
|
|
146
148
|
"expo-splash-screen": ">=31.0.10",
|
|
147
149
|
"expo-sqlite": ">=16.0.8",
|
|
148
150
|
"expo-status-bar": ">=3.0.8",
|