@pagamio/frontend-commons-lib 0.8.259 → 0.8.261
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.
|
@@ -3,7 +3,6 @@ import 'react-phone-number-input/style.css';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import type { InputProps } from '../../form-engine';
|
|
5
5
|
interface PhoneInputSpecificProps {
|
|
6
|
-
onCountryChange?: (country: Country) => void;
|
|
7
6
|
defaultCountry?: Country;
|
|
8
7
|
}
|
|
9
8
|
type PhoneInputProps = InputProps & PhoneInputSpecificProps;
|
|
@@ -1,26 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ParseError, isPossiblePhoneNumber, parsePhoneNumberWithError } from 'libphonenumber-js';
|
|
3
|
-
import
|
|
3
|
+
import PhoneNumberInput from 'react-phone-number-input';
|
|
4
4
|
import 'react-phone-number-input/style.css';
|
|
5
|
-
import React, { useState } from 'react';
|
|
6
|
-
const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value
|
|
5
|
+
import React, { useCallback, useState } from 'react';
|
|
6
|
+
const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value }, _ref) => {
|
|
7
|
+
const defaultCountry = field.defaultCountry ?? 'ZA';
|
|
7
8
|
const [isTouched, setIsTouched] = useState(false);
|
|
8
9
|
const [localError, setLocalError] = useState(null);
|
|
9
|
-
const defaultCountry = field.defaultCountry ?? 'ZA';
|
|
10
10
|
const isValid = !value || isPossiblePhoneNumber(value);
|
|
11
|
-
const handleChange = (newValue) => {
|
|
11
|
+
const handleChange = useCallback((newValue) => {
|
|
12
12
|
onChange?.(newValue);
|
|
13
13
|
setLocalError(null);
|
|
14
14
|
if (newValue) {
|
|
15
15
|
try {
|
|
16
|
-
|
|
17
|
-
if (phoneNumber && onCountryChange) {
|
|
18
|
-
onCountryChange(phoneNumber.country);
|
|
19
|
-
}
|
|
16
|
+
parsePhoneNumberWithError(newValue, { defaultCountry });
|
|
20
17
|
}
|
|
21
|
-
catch (
|
|
22
|
-
if (
|
|
23
|
-
switch (
|
|
18
|
+
catch (parseError) {
|
|
19
|
+
if (parseError instanceof ParseError) {
|
|
20
|
+
switch (parseError.message) {
|
|
24
21
|
case 'NOT_A_NUMBER':
|
|
25
22
|
setLocalError('Please enter a valid phone number.');
|
|
26
23
|
break;
|
|
@@ -37,22 +34,18 @@ const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value, on
|
|
|
37
34
|
setLocalError('Invalid phone number.');
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
|
-
else {
|
|
41
|
-
console.error('Unexpected error:', error);
|
|
42
|
-
}
|
|
43
37
|
}
|
|
44
38
|
}
|
|
45
|
-
};
|
|
46
|
-
const handleBlur = () => {
|
|
39
|
+
}, [onChange, defaultCountry]);
|
|
40
|
+
const handleBlur = useCallback(() => {
|
|
47
41
|
setIsTouched(true);
|
|
48
42
|
onBlur?.();
|
|
49
|
-
};
|
|
50
|
-
return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(
|
|
51
|
-
className: `mt-1 block w-full p-2 border rounded-md shadow-sm
|
|
43
|
+
}, [onBlur]);
|
|
44
|
+
return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(PhoneNumberInput, { international: true, defaultCountry: defaultCountry, value: value || undefined, onChange: handleChange, id: field.name, onBlur: handleBlur, placeholder: field.placeholder, numberInputProps: {
|
|
45
|
+
className: `mt-1 block w-full p-2 border rounded-md shadow-sm
|
|
52
46
|
${error || localError ? 'border-red-500' : 'border-input'}
|
|
53
47
|
${field.disabled ? 'text-muted-foreground bg-muted' : ''}`,
|
|
54
48
|
disabled: field.disabled,
|
|
55
|
-
|
|
56
|
-
}, ...props }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
|
|
49
|
+
} }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
|
|
57
50
|
});
|
|
58
51
|
export default PhoneInput;
|
|
@@ -6,7 +6,7 @@ export interface UseImageUploadProps {
|
|
|
6
6
|
project: 'vas' | 'stocklink' | 'events' | 'commerce';
|
|
7
7
|
env: 'dev' | 'uat' | 'prod';
|
|
8
8
|
endpoint: string;
|
|
9
|
-
/** Process image before upload: resize to
|
|
9
|
+
/** Process image before upload: resize to 1920×1920, convert to WebP at 92% quality, strip EXIF. Default: true */
|
|
10
10
|
processImage?: boolean;
|
|
11
11
|
}
|
|
12
12
|
export declare const useImageUpload: ({ project, env, endpoint, processImage }: UseImageUploadProps) => {
|
|
@@ -135,7 +135,7 @@ export function uploadFileWithXHR(url, file, onProgress) {
|
|
|
135
135
|
* - Strips EXIF metadata (canvas read-back discards it)
|
|
136
136
|
* - Converts to WebP at the given quality (0–1)
|
|
137
137
|
*/
|
|
138
|
-
export function processImageForUpload(file, maxDimension =
|
|
138
|
+
export function processImageForUpload(file, maxDimension = 1920, quality = 0.92) {
|
|
139
139
|
return new Promise((resolve, reject) => {
|
|
140
140
|
const img = new window.Image();
|
|
141
141
|
const objectUrl = URL.createObjectURL(file);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.261",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|