@pega/cosmos-react-core 10.0.0-build.4.22 → 10.0.0-build.4.24
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/lib/components/ComboBox/ComboBox.styles.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.styles.js +0 -3
- package/lib/components/ComboBox/ComboBox.styles.js.map +1 -1
- package/lib/components/Scanner/Scanner.d.ts +21 -0
- package/lib/components/Scanner/Scanner.d.ts.map +1 -0
- package/lib/components/Scanner/Scanner.js +177 -0
- package/lib/components/Scanner/Scanner.js.map +1 -0
- package/lib/components/Scanner/Scanner.styles.d.ts +4 -0
- package/lib/components/Scanner/Scanner.styles.d.ts.map +1 -0
- package/lib/components/Scanner/Scanner.styles.js +17 -0
- package/lib/components/Scanner/Scanner.styles.js.map +1 -0
- package/lib/components/Scanner/Scanner.test-ids.d.ts +2 -0
- package/lib/components/Scanner/Scanner.test-ids.d.ts.map +1 -0
- package/lib/components/Scanner/Scanner.test-ids.js +3 -0
- package/lib/components/Scanner/Scanner.test-ids.js.map +1 -0
- package/lib/components/Scanner/index.d.ts +3 -0
- package/lib/components/Scanner/index.d.ts.map +1 -0
- package/lib/components/Scanner/index.js +2 -0
- package/lib/components/Scanner/index.js.map +1 -0
- package/lib/hooks/useI18n.d.ts +7 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +7 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +7 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +7 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -1
- package/lib/theme/index.d.ts +2 -0
- package/lib/theme/index.d.ts.map +1 -1
- package/lib/theme/index.js +2 -0
- package/lib/theme/index.js.map +1 -1
- package/lib/theme/themes/aurigaDarkTheme.json +21 -2
- package/lib/theme/themes/aurigaTheme.json +12 -0
- package/lib/theme/themes/velaDarkTheme.json +175 -0
- package/lib/theme/themes/velaTheme.json +169 -0
- package/lib/theme/themes/virgoDarkTheme.json +2 -2
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ComboBox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;2JA+B/B,CAAC;AAIH,eAAO,MAAM,iBAAiB,6NAyD5B,CAAC;AAIH,eAAO,MAAM,cAAc;;;;mBAkBzB,CAAC"}
|
|
@@ -42,10 +42,7 @@ export const StyledSelectInput = styled.div(({ theme: { base, components } }) =>
|
|
|
42
42
|
return css `
|
|
43
43
|
height: ${components.input.height};
|
|
44
44
|
max-height: ${components.input.height};
|
|
45
|
-
|
|
46
|
-
/* Clip overflowing content, but leave room for a focus ring. */
|
|
47
45
|
overflow: clip;
|
|
48
|
-
overflow-clip-margin: 0.3rem;
|
|
49
46
|
|
|
50
47
|
@media (pointer: coarse) {
|
|
51
48
|
height: ${base['hit-area']['finger-min']};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,KAAK,CAAC,MAAM;kBACnB,UAAU,CAAC,KAAK,CAAC,MAAM
|
|
1
|
+
{"version":3,"file":"ComboBox.styles.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAC;IAElF,OAAO,GAAG,CAAA;;;;;;oCAMwB,gBAAgB,MAAM,uBAAuB;;kCAE/C,gBAAgB,MAAM,uBAAuB;;;;;;;iCAO9C,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;eAElE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;0BACrC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;8BAE5C,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;;;;GAMzF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,KAAK,CAAC,MAAM;kBACnB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;gBAIzB,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;;cAQpC,cAAc,KAAK,cAAc;;UAErC,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;MAI/E,kBAAkB;oBACJ,UAAU,CAAC,KAAK,CAAC,MAAM;qBACtB,UAAU,CAAC,KAAK,CAAC,MAAM;;;;sBAItB,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC;oBACtD,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;;;;;;;;qBAUjD,UAAU,CAAC,KAAK,CAAC,MAAM,UAAU,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;eACjF,UAAU,CAAC,cAAc,CAAC,CAAC,kBAAkB,CAAC;;wBAErC,IAAI,CAAC,OAAO;;;;;;;;;;;;;;GAcjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,GAAG,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;;MAON,aAAa;;;;QAIX,UAAU;QACV,qBAAqB;;;;GAI1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { StyledFormControl } from '../FormControl';\nimport { StyledPopover } from '../Popover';\nimport { StyledMenu, StyledMenuListWrapper } from '../Menu/Menu.styles';\nimport { StyledBackdrop } from '../Backdrop';\nimport { StyledProgressRing } from '../Progress';\n\nexport const StyledDropdownButton = styled(Button)(({ theme }) => {\n const baseBorderRadius = theme.base['border-radius'];\n const formControlBorderRadius = theme.components['form-control']['border-radius'];\n\n return css`\n align-self: stretch;\n height: auto;\n margin-block: -0.0625rem;\n margin-inline-end: -0.0625rem;\n border-start-start-radius: 0;\n border-start-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n border-end-start-radius: 0;\n border-end-end-radius: calc(${baseBorderRadius} * ${formControlBorderRadius});\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n z-index: 1;\n inset-inline-start: calc(${theme.components['form-control']['border-width']} * -1);\n inset-block: 0;\n width: ${theme.components['form-control']['border-width']};\n background-color: ${theme.components['form-control']['border-color']};\n transform: scaleY(0.5);\n transition: transform ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n &:hover::after {\n transform: scaleY(1);\n }\n `;\n});\n\nStyledDropdownButton.defaultProps = defaultThemeProp;\n\nexport const StyledSelectInput = styled.div(({ theme: { base, components } }) => {\n return css`\n height: ${components.input.height};\n max-height: ${components.input.height};\n overflow: clip;\n\n @media (pointer: coarse) {\n height: ${base['hit-area']['finger-min']};\n max-height: ${base['hit-area']['finger-min']};\n }\n\n /*\n FIXME\n :not selectors needed to prevent greedy div selector affecting Progress styles.\n Best if div could be more targeted to specific classes.\n */\n div:not(${StyledBackdrop}, ${StyledBackdrop} div) {\n min-height: calc(\n ${components.input.height} - 2 * ${components['form-control']['border-width']}\n );\n }\n\n ${StyledProgressRing} svg {\n width: calc(${components.input.height} - 0.5rem);\n height: calc(${components.input.height} - 0.5rem);\n }\n\n &:focus-within {\n border-color: ${components['form-control'][':focus']['border-color']};\n box-shadow: ${components['form-control'][':focus']['box-shadow']};\n }\n\n &:hover:not([readonly]):not([disabled]):focus-within {\n border-color: transparent;\n }\n\n input {\n min-width: 0;\n width: 100%;\n height: calc(${components.input.height} - 2 * ${components['form-control']['border-width']});\n color: ${components['form-control']['foreground-color']};\n text-overflow: ellipsis;\n padding-inline: ${base.spacing};\n }\n\n input,\n input:focus {\n border: none;\n outline: none;\n flex-grow: 1;\n background-color: transparent;\n\n &:read-only {\n cursor: default;\n }\n }\n `;\n});\n\nStyledSelectInput.defaultProps = defaultThemeProp;\n\nexport const StyledComboBox = styled(StyledFormControl)(() => {\n return css`\n border: 0;\n\n &:focus {\n z-index: 1;\n }\n\n ${StyledPopover} {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n\n ${StyledMenu},\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n }\n `;\n});\n\nStyledComboBox.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ChangeEvent, FocusEvent } from 'react';
|
|
2
|
+
import type { InputProps } from '../Input';
|
|
3
|
+
import type { OmitStrict } from '../../types';
|
|
4
|
+
export interface ScannerProps extends OmitStrict<InputProps, 'type' | 'actions' | 'onChange' | 'value' | 'defaultValue'> {
|
|
5
|
+
/** Current value of the input. */
|
|
6
|
+
value?: string;
|
|
7
|
+
/** Called when the user types into the input. Not fired for scans — see `onScan`. */
|
|
8
|
+
onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
|
|
9
|
+
/** Called when a barcode or QR code is successfully scanned. */
|
|
10
|
+
onScan?: (value: string) => void;
|
|
11
|
+
/** Called on the input's blur event. */
|
|
12
|
+
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
|
|
13
|
+
/**
|
|
14
|
+
* Optional native scan handler. When provided, it is invoked in place of the
|
|
15
|
+
* web-camera fallback — allowing host apps to wire in a platform-native
|
|
16
|
+
* barcode scanner. Should resolve with the scanned value.
|
|
17
|
+
*/
|
|
18
|
+
nativeScan?: () => Promise<string>;
|
|
19
|
+
}
|
|
20
|
+
export default function Scanner({ value, onChange, onScan, onBlur, disabled, readOnly, info, status, nativeScan, ...inputProps }: ScannerProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
//# sourceMappingURL=Scanner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scanner.d.ts","sourceRoot":"","sources":["../../../src/components/Scanner/Scanner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO9C,MAAM,WAAW,YACf,SAAQ,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CAAC;IAC1F,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzE,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wCAAwC;IACxC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CACpC;AAyJD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAU,EACV,GAAG,UAAU,EACd,EAAE,YAAY,2CAuEd"}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { Html5Qrcode } from 'html5-qrcode';
|
|
4
|
+
import Modal from '../Modal';
|
|
5
|
+
import Flex from '../Flex';
|
|
6
|
+
import Text from '../Text';
|
|
7
|
+
import Input from '../Input';
|
|
8
|
+
import { registerIcon } from '../Icon';
|
|
9
|
+
import * as qrIcon from '../Icon/icons/qr.icon';
|
|
10
|
+
import { useI18n, useModalContext, useModalManager, useUID } from '../../hooks';
|
|
11
|
+
import { StyledVideo, StyledHiddenCanvas, StyledHiddenDiv } from './Scanner.styles';
|
|
12
|
+
registerIcon(qrIcon);
|
|
13
|
+
const CameraScanModal = ({ onScan, onError }) => {
|
|
14
|
+
const t = useI18n();
|
|
15
|
+
const { dismiss } = useModalContext();
|
|
16
|
+
const scannerId = useUID();
|
|
17
|
+
const videoRef = useRef(null);
|
|
18
|
+
const canvasRef = useRef(null);
|
|
19
|
+
const streamRef = useRef(null);
|
|
20
|
+
const html5QrcodeRef = useRef(null);
|
|
21
|
+
const [cameraReady, setCameraReady] = useState(false);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
let cancelled = false;
|
|
24
|
+
const start = async () => {
|
|
25
|
+
try {
|
|
26
|
+
let stream;
|
|
27
|
+
try {
|
|
28
|
+
stream = await navigator.mediaDevices.getUserMedia({
|
|
29
|
+
video: { facingMode: 'environment' }
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
catch {
|
|
33
|
+
stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
34
|
+
}
|
|
35
|
+
if (cancelled) {
|
|
36
|
+
stream.getTracks().forEach(track => track.stop());
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
streamRef.current = stream;
|
|
40
|
+
if (videoRef.current) {
|
|
41
|
+
videoRef.current.srcObject = stream;
|
|
42
|
+
await videoRef.current.play();
|
|
43
|
+
if (!cancelled)
|
|
44
|
+
setCameraReady(true);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
catch {
|
|
48
|
+
if (cancelled)
|
|
49
|
+
return;
|
|
50
|
+
onError();
|
|
51
|
+
dismiss();
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
start();
|
|
55
|
+
return () => {
|
|
56
|
+
cancelled = true;
|
|
57
|
+
if (videoRef.current) {
|
|
58
|
+
videoRef.current.pause();
|
|
59
|
+
videoRef.current.srcObject = null;
|
|
60
|
+
}
|
|
61
|
+
if (streamRef.current) {
|
|
62
|
+
streamRef.current.getTracks().forEach(track => track.stop());
|
|
63
|
+
streamRef.current = null;
|
|
64
|
+
}
|
|
65
|
+
html5QrcodeRef.current = null;
|
|
66
|
+
};
|
|
67
|
+
}, [dismiss, onError]);
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (!cameraReady)
|
|
70
|
+
return;
|
|
71
|
+
let active = true;
|
|
72
|
+
let timeoutId;
|
|
73
|
+
const scanFrame = async () => {
|
|
74
|
+
if (!active || !videoRef.current || !canvasRef.current)
|
|
75
|
+
return;
|
|
76
|
+
const video = videoRef.current;
|
|
77
|
+
const canvas = canvasRef.current;
|
|
78
|
+
if (video.videoWidth === 0 || video.videoHeight === 0) {
|
|
79
|
+
timeoutId = setTimeout(scanFrame, 200);
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
canvas.width = video.videoWidth;
|
|
83
|
+
canvas.height = video.videoHeight;
|
|
84
|
+
const ctx = canvas.getContext('2d');
|
|
85
|
+
if (!ctx) {
|
|
86
|
+
timeoutId = setTimeout(scanFrame, 200);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
90
|
+
try {
|
|
91
|
+
const blob = await new Promise(resolve => {
|
|
92
|
+
canvas.toBlob(resolve, 'image/png');
|
|
93
|
+
});
|
|
94
|
+
if (blob && active) {
|
|
95
|
+
const file = new File([blob], 'scan.png', { type: 'image/png' });
|
|
96
|
+
if (!html5QrcodeRef.current) {
|
|
97
|
+
html5QrcodeRef.current = new Html5Qrcode(scannerId, { verbose: false });
|
|
98
|
+
}
|
|
99
|
+
try {
|
|
100
|
+
const result = await html5QrcodeRef.current.scanFileV2(file, false);
|
|
101
|
+
if (result?.decodedText && active) {
|
|
102
|
+
active = false;
|
|
103
|
+
onScan(result.decodedText);
|
|
104
|
+
dismiss();
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
catch {
|
|
109
|
+
// No barcode found in this frame; keep scanning.
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
catch {
|
|
114
|
+
// Capture failed; keep scanning.
|
|
115
|
+
}
|
|
116
|
+
if (active)
|
|
117
|
+
timeoutId = setTimeout(scanFrame, 200);
|
|
118
|
+
};
|
|
119
|
+
scanFrame();
|
|
120
|
+
return () => {
|
|
121
|
+
active = false;
|
|
122
|
+
if (timeoutId)
|
|
123
|
+
clearTimeout(timeoutId);
|
|
124
|
+
};
|
|
125
|
+
}, [cameraReady, dismiss, onScan, scannerId]);
|
|
126
|
+
return (_jsxs(Modal, { heading: t('scan'), progress: cameraReady ? undefined : { message: t('starting_camera') }, onRequestDismiss: () => {
|
|
127
|
+
dismiss();
|
|
128
|
+
return true;
|
|
129
|
+
}, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(StyledVideo, { ref: videoRef, autoPlay: true, playsInline: true, muted: true }), cameraReady && _jsx(Text, { variant: 'secondary', children: t('point_camera_at_barcode') })] }), _jsx(StyledHiddenCanvas, { ref: canvasRef }), _jsx(StyledHiddenDiv, { id: scannerId })] }));
|
|
130
|
+
};
|
|
131
|
+
export default function Scanner({ value, onChange, onScan, onBlur, disabled, readOnly, info, status, nativeScan, ...inputProps }) {
|
|
132
|
+
const t = useI18n();
|
|
133
|
+
const { create } = useModalManager();
|
|
134
|
+
const [scanning, setScanning] = useState(false);
|
|
135
|
+
const [scanError, setScanError] = useState();
|
|
136
|
+
const isWebCameraAvailable = typeof navigator !== 'undefined' &&
|
|
137
|
+
'mediaDevices' in navigator &&
|
|
138
|
+
typeof navigator.mediaDevices.getUserMedia === 'function';
|
|
139
|
+
const canScan = !!nativeScan || isWebCameraAvailable;
|
|
140
|
+
const commitScan = useCallback((scanned) => {
|
|
141
|
+
onScan?.(scanned);
|
|
142
|
+
}, [onScan]);
|
|
143
|
+
const handleScanClick = useCallback(() => {
|
|
144
|
+
setScanError(undefined);
|
|
145
|
+
if (nativeScan) {
|
|
146
|
+
setScanning(true);
|
|
147
|
+
Promise.resolve()
|
|
148
|
+
.then(() => nativeScan())
|
|
149
|
+
.then(scanned => commitScan(scanned))
|
|
150
|
+
.catch(() => setScanError(t('barcode_scan_failed')))
|
|
151
|
+
.finally(() => setScanning(false));
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
create(CameraScanModal, {
|
|
155
|
+
onScan: commitScan,
|
|
156
|
+
onError: () => setScanError(t('camera_access_denied'))
|
|
157
|
+
});
|
|
158
|
+
}, [commitScan, create, nativeScan, t]);
|
|
159
|
+
const inputActions = canScan
|
|
160
|
+
? [
|
|
161
|
+
{
|
|
162
|
+
id: 'scan',
|
|
163
|
+
icon: 'qr',
|
|
164
|
+
text: scanning ? t('scanning') : t('scan_barcode_or_qr_code'),
|
|
165
|
+
onClick: handleScanClick,
|
|
166
|
+
disabled: !!disabled || !!readOnly || scanning
|
|
167
|
+
}
|
|
168
|
+
]
|
|
169
|
+
: undefined;
|
|
170
|
+
const resolvedInfo = scanError ?? info;
|
|
171
|
+
const resolvedStatus = scanError ? 'error' : status;
|
|
172
|
+
return (_jsx(Input, { ...inputProps, type: 'text', value: value, disabled: disabled, readOnly: readOnly, info: resolvedInfo, status: resolvedStatus, actions: inputActions, onChange: (e) => {
|
|
173
|
+
setScanError(undefined);
|
|
174
|
+
onChange?.(e.currentTarget.value, e);
|
|
175
|
+
}, onBlur: onBlur }));
|
|
176
|
+
}
|
|
177
|
+
//# sourceMappingURL=Scanner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scanner.js","sourceRoot":"","sources":["../../../src/components/Scanner/Scanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent, FocusEvent } from 'react';\nimport { Html5Qrcode } from 'html5-qrcode';\n\nimport Modal from '../Modal';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Input from '../Input';\nimport type { InputProps } from '../Input';\nimport { registerIcon } from '../Icon';\nimport * as qrIcon from '../Icon/icons/qr.icon';\nimport type { OmitStrict } from '../../types';\nimport { useI18n, useModalContext, useModalManager, useUID } from '../../hooks';\n\nimport { StyledVideo, StyledHiddenCanvas, StyledHiddenDiv } from './Scanner.styles';\n\nregisterIcon(qrIcon);\n\nexport interface ScannerProps\n extends OmitStrict<InputProps, 'type' | 'actions' | 'onChange' | 'value' | 'defaultValue'> {\n /** Current value of the input. */\n value?: string;\n /** Called when the user types into the input. Not fired for scans — see `onScan`. */\n onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;\n /** Called when a barcode or QR code is successfully scanned. */\n onScan?: (value: string) => void;\n /** Called on the input's blur event. */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Optional native scan handler. When provided, it is invoked in place of the\n * web-camera fallback — allowing host apps to wire in a platform-native\n * barcode scanner. Should resolve with the scanned value.\n */\n nativeScan?: () => Promise<string>;\n}\n\ninterface CameraScanModalProps {\n onScan: (value: string) => void;\n onError: () => void;\n}\n\nconst CameraScanModal = ({ onScan, onError }: CameraScanModalProps) => {\n const t = useI18n();\n const { dismiss } = useModalContext();\n const scannerId = useUID();\n\n const videoRef = useRef<HTMLVideoElement | null>(null);\n const canvasRef = useRef<HTMLCanvasElement | null>(null);\n const streamRef = useRef<MediaStream | null>(null);\n const html5QrcodeRef = useRef<Html5Qrcode | null>(null);\n\n const [cameraReady, setCameraReady] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n\n const start = async () => {\n try {\n let stream: MediaStream;\n try {\n stream = await navigator.mediaDevices.getUserMedia({\n video: { facingMode: 'environment' }\n });\n } catch {\n stream = await navigator.mediaDevices.getUserMedia({ video: true });\n }\n\n if (cancelled) {\n stream.getTracks().forEach(track => track.stop());\n return;\n }\n\n streamRef.current = stream;\n\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n await videoRef.current.play();\n if (!cancelled) setCameraReady(true);\n }\n } catch {\n if (cancelled) return;\n onError();\n dismiss();\n }\n };\n\n start();\n\n return () => {\n cancelled = true;\n if (videoRef.current) {\n videoRef.current.pause();\n videoRef.current.srcObject = null;\n }\n if (streamRef.current) {\n streamRef.current.getTracks().forEach(track => track.stop());\n streamRef.current = null;\n }\n html5QrcodeRef.current = null;\n };\n }, [dismiss, onError]);\n\n useEffect(() => {\n if (!cameraReady) return;\n\n let active = true;\n let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n const scanFrame = async () => {\n if (!active || !videoRef.current || !canvasRef.current) return;\n\n const video = videoRef.current;\n const canvas = canvasRef.current;\n\n if (video.videoWidth === 0 || video.videoHeight === 0) {\n timeoutId = setTimeout(scanFrame, 200);\n return;\n }\n\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n timeoutId = setTimeout(scanFrame, 200);\n return;\n }\n\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\n try {\n const blob = await new Promise<Blob | null>(resolve => {\n canvas.toBlob(resolve, 'image/png');\n });\n\n if (blob && active) {\n const file = new File([blob], 'scan.png', { type: 'image/png' });\n if (!html5QrcodeRef.current) {\n html5QrcodeRef.current = new Html5Qrcode(scannerId, { verbose: false });\n }\n\n try {\n const result = await html5QrcodeRef.current.scanFileV2(file, false);\n if (result?.decodedText && active) {\n active = false;\n onScan(result.decodedText);\n dismiss();\n return;\n }\n } catch {\n // No barcode found in this frame; keep scanning.\n }\n }\n } catch {\n // Capture failed; keep scanning.\n }\n\n if (active) timeoutId = setTimeout(scanFrame, 200);\n };\n\n scanFrame();\n\n return () => {\n active = false;\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [cameraReady, dismiss, onScan, scannerId]);\n\n return (\n <Modal\n heading={t('scan')}\n progress={cameraReady ? undefined : { message: t('starting_camera') }}\n onRequestDismiss={() => {\n dismiss();\n return true;\n }}\n >\n <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n <StyledVideo ref={videoRef} autoPlay playsInline muted />\n {cameraReady && <Text variant='secondary'>{t('point_camera_at_barcode')}</Text>}\n </Flex>\n <StyledHiddenCanvas ref={canvasRef} />\n <StyledHiddenDiv id={scannerId} />\n </Modal>\n );\n};\n\nexport default function Scanner({\n value,\n onChange,\n onScan,\n onBlur,\n disabled,\n readOnly,\n info,\n status,\n nativeScan,\n ...inputProps\n}: ScannerProps) {\n const t = useI18n();\n const { create } = useModalManager();\n\n const [scanning, setScanning] = useState(false);\n const [scanError, setScanError] = useState<string | undefined>();\n\n const isWebCameraAvailable =\n typeof navigator !== 'undefined' &&\n 'mediaDevices' in navigator &&\n typeof navigator.mediaDevices.getUserMedia === 'function';\n const canScan = !!nativeScan || isWebCameraAvailable;\n\n const commitScan = useCallback(\n (scanned: string) => {\n onScan?.(scanned);\n },\n [onScan]\n );\n\n const handleScanClick = useCallback(() => {\n setScanError(undefined);\n\n if (nativeScan) {\n setScanning(true);\n Promise.resolve()\n .then(() => nativeScan())\n .then(scanned => commitScan(scanned))\n .catch(() => setScanError(t('barcode_scan_failed')))\n .finally(() => setScanning(false));\n return;\n }\n\n create(CameraScanModal, {\n onScan: commitScan,\n onError: () => setScanError(t('camera_access_denied'))\n });\n }, [commitScan, create, nativeScan, t]);\n\n const inputActions = canScan\n ? [\n {\n id: 'scan',\n icon: 'qr',\n text: scanning ? t('scanning') : t('scan_barcode_or_qr_code'),\n onClick: handleScanClick,\n disabled: !!disabled || !!readOnly || scanning\n }\n ]\n : undefined;\n\n const resolvedInfo = scanError ?? info;\n const resolvedStatus = scanError ? 'error' : status;\n\n return (\n <Input\n {...inputProps}\n type='text'\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n info={resolvedInfo}\n status={resolvedStatus}\n actions={inputActions}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setScanError(undefined);\n onChange?.(e.currentTarget.value, e);\n }}\n onBlur={onBlur}\n />\n );\n}\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const StyledVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>> & string;
|
|
2
|
+
export declare const StyledHiddenCanvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>> & string;
|
|
3
|
+
export declare const StyledHiddenDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
|
+
//# sourceMappingURL=Scanner.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scanner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Scanner/Scanner.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,sOAMvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,yOAE9B,CAAC;AAIF,eAAO,MAAM,eAAe,6NAE3B,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { defaultThemeProp } from '../../theme';
|
|
3
|
+
export const StyledVideo = styled.video(({ theme }) => css `
|
|
4
|
+
width: 100%;
|
|
5
|
+
display: block;
|
|
6
|
+
border-radius: ${theme.base['border-radius']};
|
|
7
|
+
`);
|
|
8
|
+
StyledVideo.defaultProps = defaultThemeProp;
|
|
9
|
+
export const StyledHiddenCanvas = styled.canvas `
|
|
10
|
+
display: none;
|
|
11
|
+
`;
|
|
12
|
+
StyledHiddenCanvas.defaultProps = defaultThemeProp;
|
|
13
|
+
export const StyledHiddenDiv = styled.div `
|
|
14
|
+
display: none;
|
|
15
|
+
`;
|
|
16
|
+
StyledHiddenDiv.defaultProps = defaultThemeProp;
|
|
17
|
+
//# sourceMappingURL=Scanner.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scanner.styles.js","sourceRoot":"","sources":["../../../src/components/Scanner/Scanner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;qBAGC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAA;;CAE9C,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const StyledVideo = styled.video(\n ({ theme }) => css`\n width: 100%;\n display: block;\n border-radius: ${theme.base['border-radius']};\n `\n);\n\nStyledVideo.defaultProps = defaultThemeProp;\n\nexport const StyledHiddenCanvas = styled.canvas`\n display: none;\n`;\n\nStyledHiddenCanvas.defaultProps = defaultThemeProp;\n\nexport const StyledHiddenDiv = styled.div`\n display: none;\n`;\n\nStyledHiddenDiv.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scanner.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Scanner/Scanner.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,mGAAwC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Scanner.test-ids.js","sourceRoot":"","sources":["../../../src/components/Scanner/Scanner.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getScannerTestIds = createTestIds('scanner', [] as const);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Scanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Scanner';\nexport type { ScannerProps } from './Scanner';\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -84,6 +84,13 @@ declare const useI18n: () => import("..").TranslationFunction<Readonly<{
|
|
|
84
84
|
unfollow: string;
|
|
85
85
|
add: string;
|
|
86
86
|
cancel: string;
|
|
87
|
+
scanning: string;
|
|
88
|
+
scan: string;
|
|
89
|
+
scan_barcode_or_qr_code: string;
|
|
90
|
+
point_camera_at_barcode: string;
|
|
91
|
+
starting_camera: string;
|
|
92
|
+
barcode_scan_failed: string;
|
|
93
|
+
camera_access_denied: string;
|
|
87
94
|
try_again: string;
|
|
88
95
|
update: string;
|
|
89
96
|
submit: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -80,6 +80,13 @@ declare const _default: {
|
|
|
80
80
|
unfollow: string;
|
|
81
81
|
add: string;
|
|
82
82
|
cancel: string;
|
|
83
|
+
scanning: string;
|
|
84
|
+
scan: string;
|
|
85
|
+
scan_barcode_or_qr_code: string;
|
|
86
|
+
point_camera_at_barcode: string;
|
|
87
|
+
starting_camera: string;
|
|
88
|
+
barcode_scan_failed: string;
|
|
89
|
+
camera_access_denied: string;
|
|
83
90
|
try_again: string;
|
|
84
91
|
update: string;
|
|
85
92
|
submit: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqxDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkQxB,6CAA6C;;;;;;;;;;;;;;IAgB7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;;;;;IAWpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;IAUvC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhvE3C,wBAgyEE"}
|
package/lib/i18n/default.js
CHANGED
|
@@ -85,6 +85,13 @@ export default {
|
|
|
85
85
|
unfollow: 'Unfollow',
|
|
86
86
|
add: 'Add',
|
|
87
87
|
cancel: 'Cancel',
|
|
88
|
+
scanning: 'Scanning...',
|
|
89
|
+
scan: 'Scan',
|
|
90
|
+
scan_barcode_or_qr_code: 'Scan barcode or QR code',
|
|
91
|
+
point_camera_at_barcode: 'Point your camera at a barcode or QR code',
|
|
92
|
+
starting_camera: 'Starting camera...',
|
|
93
|
+
barcode_scan_failed: 'Barcode scanning failed or was cancelled',
|
|
94
|
+
camera_access_denied: 'Camera access was denied or unavailable. Please allow access and try again.',
|
|
88
95
|
try_again: 'Try again',
|
|
89
96
|
update: 'Update',
|
|
90
97
|
submit: 'Submit',
|