@arquimedes.co/eureka-forms 3.0.67 → 3.0.68-test
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/README +1 -33
- package/dist/@Types/FormStep.d.ts +2 -7
- package/dist/@Types/FormStep.js +1 -2
- package/dist/App/App.stories.d.ts +0 -10
- package/dist/App/App.stories.js +0 -189
- package/dist/App/AppHooks.js +0 -8
- package/dist/App/AppHooks.test.js +0 -8
- package/dist/Form/Form.js +6 -7
- package/dist/Form/FormFunctions.d.ts +0 -17
- package/dist/Form/FormFunctions.js +0 -22
- package/dist/Form/FormFunctions.test.js +1 -28
- package/dist/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js +12 -20
- package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js +13 -6
- package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css +13 -2
- package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js +1 -3
- package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js +26 -26
- package/dist/FormSteps/Step.js +0 -16
- package/dist/FormSteps/StepFunctions.js +0 -14
- package/dist/FormSteps/StepFunctions.test.js +0 -54
- package/dist/FormSteps/StepHooks.d.ts +0 -21
- package/dist/FormSteps/StepHooks.js +8 -55
- package/dist/Shared/ErkDatePicker/ErkDatePicker.js +12 -4
- package/dist/Shared/ErkDatePicker/ErkDatePicker.locale.test.js +39 -0
- package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts +3 -2
- package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js +16 -11
- package/dist/Shared/ErkSelect/ErkSelect.js +9 -1
- package/dist/Shared/ErkSelect/ErkSelect.test.d.ts +2 -0
- package/dist/Shared/ErkSelect/ErkSelect.test.js +53 -0
- package/dist/Shared/ErkTimePicker/ErkTimePicker.js +8 -1
- package/dist/Shared/ErkTimePicker/ErkTimePicker.test.d.ts +2 -0
- package/dist/Shared/ErkTimePicker/ErkTimePicker.test.js +24 -0
- package/dist/Utils/AxiosWidget.js +1 -9
- package/dist/Utils/LocaleUtils.d.ts +1 -0
- package/dist/Utils/LocaleUtils.js +10 -3
- package/dist/constants/FormStepTypes.d.ts +1 -5
- package/dist/constants/FormStepTypes.js +0 -4
- package/dist/index.lib.d.ts +2 -4
- package/dist/index.lib.js +1 -3
- package/package.json +1 -2
- package/dist/@Types/AvailabilityFormStep.d.ts +0 -48
- package/dist/@Types/AvailabilityFormStep.js +0 -24
- package/dist/@Types/BankAccountFormStep.d.ts +0 -67
- package/dist/@Types/BankAccountFormStep.js +0 -14
- package/dist/@Types/BookingFormStep.d.ts +0 -187
- package/dist/@Types/BookingFormStep.js +0 -44
- package/dist/@Types/CalendarFormStep.d.ts +0 -209
- package/dist/@Types/CalendarFormStep.js +0 -55
- package/dist/@Types/CommunicationChannelFormStep.d.ts +0 -51
- package/dist/@Types/CommunicationChannelFormStep.js +0 -15
- package/dist/@Types/ConsentFormStep.d.ts +0 -36
- package/dist/@Types/ConsentFormStep.js +0 -8
- package/dist/@Types/EntityFormFormStep.d.ts +0 -66
- package/dist/@Types/EntityFormFormStep.js +0 -20
- package/dist/@Types/EventFormStep.d.ts +0 -52
- package/dist/@Types/EventFormStep.js +0 -13
- package/dist/@Types/ExternalReferenceFormStep.d.ts +0 -74
- package/dist/@Types/ExternalReferenceFormStep.js +0 -20
- package/dist/@Types/LocationFormStep.d.ts +0 -159
- package/dist/@Types/LocationFormStep.js +0 -46
- package/dist/@Types/NumericFormSteps.d.ts +0 -108
- package/dist/@Types/NumericFormSteps.js +0 -20
- package/dist/@Types/PredefinedSelectorFormStep.d.ts +0 -51
- package/dist/@Types/PredefinedSelectorFormStep.js +0 -39
- package/dist/@Types/StepRef.d.ts +0 -135
- package/dist/@Types/StepRef.js +0 -49
- package/dist/FormSteps/AvailabilityStep/AvailabilityStep.d.ts +0 -7
- package/dist/FormSteps/AvailabilityStep/AvailabilityStep.js +0 -14
- package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.d.ts +0 -8
- package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.js +0 -32
- package/dist/FormSteps/BookingStep/BookingStep.d.ts +0 -17
- package/dist/FormSteps/BookingStep/BookingStep.js +0 -14
- package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts +0 -7
- package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js +0 -32
- package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.js +0 -70
- package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.d.ts +0 -12
- package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.js +0 -35
- package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.test.d.ts +0 -1
- package/dist/FormSteps/EntityValueStep/entityValueDependencyValue.test.js +0 -31
- package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.d.ts +0 -27
- package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.js +0 -64
- package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.test.d.ts +0 -1
- package/dist/FormSteps/EntityValueStep/entityValuePickerWatchedSteps.test.js +0 -95
- package/dist/FormSteps/LocationStep/LocationStep.d.ts +0 -10
- package/dist/FormSteps/LocationStep/LocationStep.js +0 -14
- package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts +0 -3
- package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js +0 -54
- package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css +0 -18
- package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts +0 -3
- package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js +0 -170
- package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.module.css +0 -96
- package/dist/FormSteps/NumberStep/NumberStep.d.ts +0 -10
- package/dist/FormSteps/NumberStep/NumberStep.js +0 -14
- package/dist/FormSteps/StepHooks.test.d.ts +0 -1
- package/dist/FormSteps/StepHooks.test.js +0 -92
- package/dist/FormSteps/isStepHiddenByCondition.test.d.ts +0 -1
- package/dist/FormSteps/isStepHiddenByCondition.test.js +0 -42
- package/dist/Icons/AddIcon.d.ts +0 -3
- package/dist/Icons/AddIcon.js +0 -7
- package/dist/Icons/EditIcon.d.ts +0 -3
- package/dist/Icons/EditIcon.js +0 -7
- package/dist/Icons/RemoveIcon.d.ts +0 -3
- package/dist/Icons/RemoveIcon.js +0 -7
- package/dist/Icons/ViewDayIcon.d.ts +0 -3
- package/dist/Icons/ViewDayIcon.js +0 -7
- package/dist/Icons/ViewWeekIcon.d.ts +0 -3
- package/dist/Icons/ViewWeekIcon.js +0 -7
- package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.d.ts +0 -19
- package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.js +0 -80
- package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.module.css +0 -88
- package/dist/Shared/ErkAddressAutocomplete/googlePlaces.d.ts +0 -29
- package/dist/Shared/ErkAddressAutocomplete/googlePlaces.js +0 -139
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.d.ts +0 -25
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.js +0 -112
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.module.css +0 -88
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.test.d.ts +0 -1
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.test.js +0 -73
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.d.ts +0 -31
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js +0 -228
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.module.css +0 -608
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.d.ts +0 -28
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.js +0 -117
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.d.ts +0 -1
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.js +0 -49
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.d.ts +0 -1
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.js +0 -107
- package/dist/Shared/ErkIconButton/ErkIconButton.d.ts +0 -17
- package/dist/Shared/ErkIconButton/ErkIconButton.js +0 -11
- package/dist/Shared/ErkIconButton/ErkIconButton.module.css +0 -41
- package/dist/Shared/ErkLocationField/ErkLocationField.d.ts +0 -24
- package/dist/Shared/ErkLocationField/ErkLocationField.js +0 -128
- package/dist/Shared/ErkLocationField/ErkLocationField.module.css +0 -164
- package/dist/Shared/ErkLocationField/ErkLocationField.test.d.ts +0 -1
- package/dist/Shared/ErkLocationField/ErkLocationField.test.js +0 -82
- package/dist/Shared/ErkLocationField/addressFields.d.ts +0 -12
- package/dist/Shared/ErkLocationField/addressFields.js +0 -34
- package/dist/Shared/ErkLocationField/locationRestrictions.d.ts +0 -6
- package/dist/Shared/ErkLocationField/locationRestrictions.js +0 -51
- package/dist/Shared/ErkLocationInput/ErkLocationInput.d.ts +0 -15
- package/dist/Shared/ErkLocationInput/ErkLocationInput.js +0 -502
- package/dist/Shared/ErkLocationInput/ErkLocationInput.module.css +0 -128
- package/dist/Shared/ErkNumberField/ErkNumberField.d.ts +0 -42
- package/dist/Shared/ErkNumberField/ErkNumberField.js +0 -169
- /package/dist/{FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.d.ts → Shared/ErkDatePicker/ErkDatePicker.locale.test.d.ts} +0 -0
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useContext, useState, useEffect } from 'react';
|
|
3
|
-
import { NumberStepType, } from '../../../@Types/NumericFormSteps';
|
|
4
|
-
import { useFormStep } from '../../StepHooks';
|
|
5
|
-
import FormContext from '../../../Contexts/FormContext';
|
|
6
|
-
import { selectBreakPoint, useAppSelector } from '../../../hooks';
|
|
7
|
-
import { calcStepWidth } from '../../StepFunctions';
|
|
8
|
-
import ErkNumberField from '../../../Shared/ErkNumberField/ErkNumberField';
|
|
9
|
-
import ErkSelect from '../../../Shared/ErkSelect/ErkSelect';
|
|
10
|
-
import ErkMenuItem from '../../../Shared/ErkMenuItem';
|
|
11
|
-
import styles from './MaterialNumberStep.module.css';
|
|
12
|
-
const DEFAULT_CURRENCIES = ['COP', 'USD', 'EUR', 'MXN', 'CLP', 'BRL'];
|
|
13
|
-
const DEFAULT_UNITS = ['unidades', 'kg', 'g', 'm', 'cm', 'l', 'ml', 'hrs', 'mes', 'año'];
|
|
14
|
-
// ---------------------------------------------------------------------------
|
|
15
|
-
// Helpers
|
|
16
|
-
// ---------------------------------------------------------------------------
|
|
17
|
-
function getNumericValue(value) {
|
|
18
|
-
if (value === null || value === undefined)
|
|
19
|
-
return null;
|
|
20
|
-
if (typeof value === 'number')
|
|
21
|
-
return value;
|
|
22
|
-
return value.value;
|
|
23
|
-
}
|
|
24
|
-
// ---------------------------------------------------------------------------
|
|
25
|
-
// Component
|
|
26
|
-
// ---------------------------------------------------------------------------
|
|
27
|
-
function MaterialNumberStep({ step, editable }) {
|
|
28
|
-
const currentBreakPoint = useAppSelector(selectBreakPoint);
|
|
29
|
-
const { postview, formStyle } = useAppSelector((state) => state.global);
|
|
30
|
-
const form = useContext(FormContext);
|
|
31
|
-
const isReadOnly = !editable || postview;
|
|
32
|
-
const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
|
|
33
|
-
const isComposite = step.numberType === NumberStepType.MONEY ||
|
|
34
|
-
step.numberType === NumberStepType.MEASURE ||
|
|
35
|
-
step.numberType === NumberStepType.UNIT_PRICE;
|
|
36
|
-
// Narrowed views — only used after the corresponding numberType check
|
|
37
|
-
const asMoney = step;
|
|
38
|
-
const asMeasure = step;
|
|
39
|
-
const asUnitPrice = step;
|
|
40
|
-
const { ref, value, onChange, error } = useFormStep(step, {
|
|
41
|
-
defaultValue: step.defaultValue ?? null,
|
|
42
|
-
rules: {
|
|
43
|
-
required: step.required ? 'Este campo es obligatorio' : undefined,
|
|
44
|
-
validate: (val) => {
|
|
45
|
-
if (!step.required && (val === null || val === undefined || val === ''))
|
|
46
|
-
return true;
|
|
47
|
-
if (step.required && (val === null || val === undefined || val === ''))
|
|
48
|
-
return 'Este campo es obligatorio';
|
|
49
|
-
const numVal = getNumericValue(val);
|
|
50
|
-
if (numVal === null)
|
|
51
|
-
return 'Formato numérico inválido';
|
|
52
|
-
if (step.min !== undefined && numVal < step.min)
|
|
53
|
-
return `El valor mínimo es ${step.min}`;
|
|
54
|
-
if (step.max !== undefined && numVal > step.max)
|
|
55
|
-
return `El valor máximo es ${step.max}`;
|
|
56
|
-
return true;
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
// Currency/unit selectors
|
|
61
|
-
const [selectedCurrency, setSelectedCurrency] = useState(() => {
|
|
62
|
-
const v = value;
|
|
63
|
-
return v?.currency ?? asMoney.currency ?? asUnitPrice.currency ?? 'COP';
|
|
64
|
-
});
|
|
65
|
-
const [selectedUnit, setSelectedUnit] = useState(() => {
|
|
66
|
-
const v = value;
|
|
67
|
-
return v?.unit ?? asMeasure.unit ?? asUnitPrice.unit ?? 'unidades';
|
|
68
|
-
});
|
|
69
|
-
// Sync when value changes externally
|
|
70
|
-
useEffect(() => {
|
|
71
|
-
if (value && typeof value === 'object') {
|
|
72
|
-
if ('currency' in value && value.currency && value.currency !== selectedCurrency) {
|
|
73
|
-
void Promise.resolve().then(() => setSelectedCurrency(value.currency));
|
|
74
|
-
}
|
|
75
|
-
if ('unit' in value && value.unit && value.unit !== selectedUnit) {
|
|
76
|
-
void Promise.resolve().then(() => setSelectedUnit(value.unit));
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}, [value, selectedCurrency, selectedUnit]);
|
|
80
|
-
// ---------------------------------------------------------------------------
|
|
81
|
-
// Handlers: wrap ErkNumberField's (number | null) into the step value shape
|
|
82
|
-
// ---------------------------------------------------------------------------
|
|
83
|
-
const handleNumberChange = (num) => {
|
|
84
|
-
if (num === null) {
|
|
85
|
-
onChange(null);
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
if (step.numberType === NumberStepType.MONEY) {
|
|
89
|
-
onChange({ value: num, currency: selectedCurrency });
|
|
90
|
-
}
|
|
91
|
-
else if (step.numberType === NumberStepType.MEASURE) {
|
|
92
|
-
onChange({ value: num, unit: selectedUnit });
|
|
93
|
-
}
|
|
94
|
-
else if (step.numberType === NumberStepType.UNIT_PRICE) {
|
|
95
|
-
onChange({ value: num, currency: selectedCurrency, unit: selectedUnit });
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
onChange(num);
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
const handleCurrencyChange = (curr) => {
|
|
102
|
-
const next = curr ?? 'USD';
|
|
103
|
-
setSelectedCurrency(next);
|
|
104
|
-
const num = getNumericValue(value);
|
|
105
|
-
if (num !== null) {
|
|
106
|
-
onChange(step.numberType === NumberStepType.UNIT_PRICE
|
|
107
|
-
? { value: num, currency: next, unit: selectedUnit }
|
|
108
|
-
: { value: num, currency: next });
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
const handleUnitChange = (u) => {
|
|
112
|
-
const next = u ?? 'unidades';
|
|
113
|
-
setSelectedUnit(next);
|
|
114
|
-
const num = getNumericValue(value);
|
|
115
|
-
if (num !== null) {
|
|
116
|
-
onChange(step.numberType === NumberStepType.UNIT_PRICE
|
|
117
|
-
? { value: num, currency: selectedCurrency, unit: next }
|
|
118
|
-
: { value: num, unit: next });
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
// ---------------------------------------------------------------------------
|
|
122
|
-
// Static suffix text shown inside ErkNumberField
|
|
123
|
-
// ---------------------------------------------------------------------------
|
|
124
|
-
const staticSuffix = () => {
|
|
125
|
-
if (step.numberType === NumberStepType.PERCENTAGE)
|
|
126
|
-
return '%';
|
|
127
|
-
if (step.numberType === NumberStepType.MONEY && !asMoney.allowCurrencyChange)
|
|
128
|
-
return asMoney.currency ?? 'USD';
|
|
129
|
-
if (step.numberType === NumberStepType.MEASURE && !asMeasure.allowUnitChange)
|
|
130
|
-
return asMeasure.unit ?? 'unidades';
|
|
131
|
-
// UNIT_PRICE renders its adornment fully inside the field only when neither part is editable.
|
|
132
|
-
if (step.numberType === NumberStepType.UNIT_PRICE &&
|
|
133
|
-
!asUnitPrice.allowCurrencyChange &&
|
|
134
|
-
!asUnitPrice.allowUnitChange)
|
|
135
|
-
return `${asUnitPrice.currency ?? 'USD'} / ${asUnitPrice.unit ?? 'unidades'}`;
|
|
136
|
-
if (!isComposite && step.suffix)
|
|
137
|
-
return step.suffix;
|
|
138
|
-
return undefined;
|
|
139
|
-
};
|
|
140
|
-
// ---------------------------------------------------------------------------
|
|
141
|
-
// Resolved selector lists
|
|
142
|
-
// ---------------------------------------------------------------------------
|
|
143
|
-
const currenciesList = step.numberType === NumberStepType.MONEY || step.numberType === NumberStepType.UNIT_PRICE
|
|
144
|
-
? (step.availableCurrencies ?? DEFAULT_CURRENCIES)
|
|
145
|
-
: [];
|
|
146
|
-
const unitsList = step.numberType === NumberStepType.MEASURE || step.numberType === NumberStepType.UNIT_PRICE
|
|
147
|
-
? (step.availableUnits ?? DEFAULT_UNITS)
|
|
148
|
-
: [];
|
|
149
|
-
const isMoneyDynamic = step.numberType === NumberStepType.MONEY && asMoney.allowCurrencyChange;
|
|
150
|
-
const isMeasureDynamic = step.numberType === NumberStepType.MEASURE && asMeasure.allowUnitChange;
|
|
151
|
-
// UNIT_PRICE has two independent toggles: currency and unit can each be fixed or selectable.
|
|
152
|
-
const isUnitPriceCurrencyDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowCurrencyChange;
|
|
153
|
-
const isUnitPriceUnitDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowUnitChange;
|
|
154
|
-
const isUnitPriceDynamic = isUnitPriceCurrencyDynamic || isUnitPriceUnitDynamic;
|
|
155
|
-
// ---------------------------------------------------------------------------
|
|
156
|
-
// Shared CSS vars
|
|
157
|
-
// ---------------------------------------------------------------------------
|
|
158
|
-
const cssVars = {
|
|
159
|
-
width: widthStyle,
|
|
160
|
-
'--eureka-outline': formStyle.outlineColor,
|
|
161
|
-
'--eureka-primary': formStyle.primaryColor,
|
|
162
|
-
'--eureka-text': formStyle.textColor,
|
|
163
|
-
'--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
|
|
164
|
-
};
|
|
165
|
-
// ---------------------------------------------------------------------------
|
|
166
|
-
// Read-only view
|
|
167
|
-
// ---------------------------------------------------------------------------
|
|
168
|
-
return (_jsx("div", { className: styles.container, style: cssVars, children: _jsxs("div", { className: styles.inputRow, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkNumberField, { label: step.label, value: getNumericValue(value), onChange: handleNumberChange, error: !!error, errorBorder: true, required: step.required, helperText: error?.message ?? step.description ?? undefined, inputRef: ref, min: step.min, max: step.max, decimals: step.numberType === NumberStepType.INTEGER ? 0 : (step.decimals ?? 2), suffix: staticSuffix(), readOnly: isReadOnly, spinner: step.spinner, step: step.step, placeholder: step.placeholder }) }), isMoneyDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })), isMeasureDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })), isUnitPriceDynamic && (_jsxs(_Fragment, { children: [isUnitPriceCurrencyDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.currency ?? 'USD' })), _jsx("span", { className: styles.dividerSlash, children: "/" }), isUnitPriceUnitDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.unit ?? 'unidades' }))] }))] }) }));
|
|
169
|
-
}
|
|
170
|
-
export default MaterialNumberStep;
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
width: 100%;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.inputRow {
|
|
8
|
-
display: flex;
|
|
9
|
-
align-items: flex-start;
|
|
10
|
-
gap: 12px;
|
|
11
|
-
width: 100%;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.selectWrapper {
|
|
15
|
-
width: 100px;
|
|
16
|
-
min-width: 90px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.dividerSlash {
|
|
20
|
-
align-self: flex-start;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: center;
|
|
24
|
-
height: 40px;
|
|
25
|
-
font-size: 20px;
|
|
26
|
-
font-weight: bold;
|
|
27
|
-
color: var(--eureka-text, #333);
|
|
28
|
-
opacity: 0.6;
|
|
29
|
-
margin-left: 2px;
|
|
30
|
-
margin-right: 2px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.suffixText {
|
|
34
|
-
align-self: flex-start;
|
|
35
|
-
display: flex;
|
|
36
|
-
align-items: center;
|
|
37
|
-
height: 40px;
|
|
38
|
-
font-size: 14px;
|
|
39
|
-
font-weight: 600;
|
|
40
|
-
color: var(--eureka-primary, #1976d2);
|
|
41
|
-
padding: 0 4px;
|
|
42
|
-
user-select: none;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* Read-Only Styles */
|
|
46
|
-
.readOnlyContainer {
|
|
47
|
-
width: 100%;
|
|
48
|
-
margin-bottom: 8px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.readOnlyCard {
|
|
52
|
-
display: flex;
|
|
53
|
-
align-items: center;
|
|
54
|
-
padding: 12px 16px;
|
|
55
|
-
border: 1px solid var(--eureka-outline, #e0e0e0);
|
|
56
|
-
border-radius: 12px;
|
|
57
|
-
background-color: var(--eureka-bg, #ffffff);
|
|
58
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
59
|
-
transition:
|
|
60
|
-
box-shadow 0.2s ease,
|
|
61
|
-
border-color 0.2s ease;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.readOnlyCard:hover {
|
|
65
|
-
border-color: var(--eureka-primary, #1976d2);
|
|
66
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.readOnlyDetails {
|
|
70
|
-
display: flex;
|
|
71
|
-
flex-direction: column;
|
|
72
|
-
gap: 2px;
|
|
73
|
-
width: 100%;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.readOnlyLabel {
|
|
77
|
-
font-size: 11px !important;
|
|
78
|
-
text-transform: uppercase;
|
|
79
|
-
letter-spacing: 0.5px;
|
|
80
|
-
color: var(--eureka-text, #333) !important;
|
|
81
|
-
opacity: 0.6;
|
|
82
|
-
font-weight: 600 !important;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.readOnlyValue {
|
|
86
|
-
font-size: 16px !important;
|
|
87
|
-
font-weight: 600 !important;
|
|
88
|
-
color: var(--eureka-primary, #1976d2) !important;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.readOnlyDesc {
|
|
92
|
-
font-size: 12px !important;
|
|
93
|
-
color: var(--eureka-text, #333) !important;
|
|
94
|
-
opacity: 0.5;
|
|
95
|
-
margin-top: 2px !important;
|
|
96
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { NumberStep } from '../../@Types/FormStep';
|
|
2
|
-
import { StepProps } from '../Step';
|
|
3
|
-
export interface NumberStepProps extends StepProps {
|
|
4
|
-
/** The NumberStep to display */
|
|
5
|
-
step: NumberStep;
|
|
6
|
-
/** The icon to display */
|
|
7
|
-
IconComponent?: React.ElementType;
|
|
8
|
-
}
|
|
9
|
-
declare function NumberStepComponent(props: NumberStepProps): JSX.Element;
|
|
10
|
-
export default NumberStepComponent;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { FormStyleTypes } from '../../constants/FormStepTypes';
|
|
3
|
-
import MaterialNumberStep from './MaterialNumberStep/MaterialNumberStep';
|
|
4
|
-
import { useAppSelector } from '../../hooks';
|
|
5
|
-
function NumberStepComponent(props) {
|
|
6
|
-
const { formStyle } = useAppSelector((state) => state.global);
|
|
7
|
-
switch (formStyle.type) {
|
|
8
|
-
case FormStyleTypes.MATERIAL:
|
|
9
|
-
default: {
|
|
10
|
-
return _jsx(MaterialNumberStep, { ...props });
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
export default NumberStepComponent;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { describe, expect, test } from 'vitest';
|
|
2
|
-
import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
|
|
3
|
-
import { calcDeepDependencies } from './StepHooks';
|
|
4
|
-
const form = (steps) => ({
|
|
5
|
-
steps: Object.entries(steps).reduce((acc, [id, step]) => ({
|
|
6
|
-
...acc,
|
|
7
|
-
[id]: { id, idSection: 'section', type: FormStepTypes.TEXTINPUT, ...step },
|
|
8
|
-
}), {}),
|
|
9
|
-
});
|
|
10
|
-
const picker = (step) => ({
|
|
11
|
-
type: FormStepTypes.ENTITYVALUEPICKER,
|
|
12
|
-
idEntity: 'entity',
|
|
13
|
-
path: [],
|
|
14
|
-
filters: [],
|
|
15
|
-
options: {},
|
|
16
|
-
...step,
|
|
17
|
-
});
|
|
18
|
-
const stepFilter = (idStep, required) => ({
|
|
19
|
-
idProperty: 'prop-' + idStep,
|
|
20
|
-
type: EntityValueDataTypes.STEP,
|
|
21
|
-
idStep,
|
|
22
|
-
any: false,
|
|
23
|
-
required,
|
|
24
|
-
});
|
|
25
|
-
describe('calcDeepDependencies', () => {
|
|
26
|
-
test('walks a linear chain deepest first, listing each id once', () => {
|
|
27
|
-
const deps = calcDeepDependencies('a', form({
|
|
28
|
-
a: { dependencies: ['b'] },
|
|
29
|
-
b: { dependencies: ['c'] },
|
|
30
|
-
c: {},
|
|
31
|
-
}));
|
|
32
|
-
expect(deps).toEqual(['c', 'b']);
|
|
33
|
-
});
|
|
34
|
-
test('lists a dependency shared by two branches once', () => {
|
|
35
|
-
const deps = calcDeepDependencies('a', form({
|
|
36
|
-
a: { dependencies: ['b', 'c'] },
|
|
37
|
-
b: { dependencies: ['d'] },
|
|
38
|
-
c: { dependencies: ['d'] },
|
|
39
|
-
d: {},
|
|
40
|
-
}));
|
|
41
|
-
expect(deps).toEqual(['d', 'b', 'c']);
|
|
42
|
-
});
|
|
43
|
-
test('terminates on an A -> B -> A cycle without listing the step itself', () => {
|
|
44
|
-
const deps = calcDeepDependencies('a', form({
|
|
45
|
-
a: { dependencies: ['b'] },
|
|
46
|
-
b: { dependencies: ['a'] },
|
|
47
|
-
}));
|
|
48
|
-
expect(deps).toEqual(['b']);
|
|
49
|
-
});
|
|
50
|
-
test('terminates on a cycle reached deeper in the walk', () => {
|
|
51
|
-
const deps = calcDeepDependencies('a', form({
|
|
52
|
-
a: { dependencies: ['b'] },
|
|
53
|
-
b: { dependencies: ['c'] },
|
|
54
|
-
c: { dependencies: ['b'] },
|
|
55
|
-
}));
|
|
56
|
-
expect(deps).toEqual(['c', 'b']);
|
|
57
|
-
});
|
|
58
|
-
test('terminates on a step that depends on itself', () => {
|
|
59
|
-
const deps = calcDeepDependencies('a', form({
|
|
60
|
-
a: { dependencies: ['b'] },
|
|
61
|
-
b: { dependencies: ['b'] },
|
|
62
|
-
}));
|
|
63
|
-
expect(deps).toEqual(['b']);
|
|
64
|
-
});
|
|
65
|
-
/**
|
|
66
|
-
* A draft an entity picker points back at itself with a required STEP filter: the filter is not
|
|
67
|
-
* in the saved `dependencies` yet, so it only reaches the walk through
|
|
68
|
-
* `entityValuePickerBlockingSteps`.
|
|
69
|
-
*/
|
|
70
|
-
test('terminates on a self reference through a required STEP filter of an entity picker', () => {
|
|
71
|
-
const deps = calcDeepDependencies('a', form({
|
|
72
|
-
a: { dependencies: ['picker'] },
|
|
73
|
-
picker: picker({ filters: [stepFilter('picker', true)] }),
|
|
74
|
-
}));
|
|
75
|
-
expect(deps).toEqual(['picker']);
|
|
76
|
-
});
|
|
77
|
-
test('terminates on a cycle closed by a required STEP filter of an entity picker', () => {
|
|
78
|
-
const deps = calcDeepDependencies('a', form({
|
|
79
|
-
a: { dependencies: ['picker'] },
|
|
80
|
-
picker: picker({ filters: [stepFilter('other', true)] }),
|
|
81
|
-
other: { dependencies: ['picker'] },
|
|
82
|
-
}));
|
|
83
|
-
expect(deps).toEqual(['other', 'picker']);
|
|
84
|
-
});
|
|
85
|
-
test('keeps a dependency whose step the draft has already deleted', () => {
|
|
86
|
-
const deps = calcDeepDependencies('a', form({ a: { dependencies: ['gone'] } }));
|
|
87
|
-
expect(deps).toEqual(['gone']);
|
|
88
|
-
});
|
|
89
|
-
test('answers nothing for a step the form does not hold', () => {
|
|
90
|
-
expect(calcDeepDependencies('missing', form({}))).toEqual([]);
|
|
91
|
-
});
|
|
92
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { describe, expect, test } from 'vitest';
|
|
2
|
-
import { isStepHiddenByCondition } from './StepHooks';
|
|
3
|
-
// A Selector shown only while the Proyecto picker holds a specific value — the shape the editor saves.
|
|
4
|
-
const PROYECTO = 'ENTITYVALUEPICKER-proyecto';
|
|
5
|
-
const condition = {
|
|
6
|
-
type: 'EXPRESSION',
|
|
7
|
-
expression: 'AND',
|
|
8
|
-
conditions: [
|
|
9
|
-
{ type: 'FORM_STEP', stepType: 'ENTITYVALUEPICKER', idStep: PROYECTO, operator: 'EXISTS' },
|
|
10
|
-
{ type: 'FORM_STEP', stepType: 'ENTITYVALUEPICKER', idStep: PROYECTO, operator: 'EQUAL', values: ['kai'] },
|
|
11
|
-
],
|
|
12
|
-
};
|
|
13
|
-
const form = {
|
|
14
|
-
steps: {
|
|
15
|
-
[PROYECTO]: { id: PROYECTO, type: 'ENTITYVALUEPICKER' },
|
|
16
|
-
'SELECTOR-piso': { id: 'SELECTOR-piso', type: 'SELECTOR', condition },
|
|
17
|
-
'SELECTOR-libre': { id: 'SELECTOR-libre', type: 'SELECTOR' },
|
|
18
|
-
},
|
|
19
|
-
};
|
|
20
|
-
const dependency = (value) => ({
|
|
21
|
-
idOriginal: PROYECTO,
|
|
22
|
-
dependents: [],
|
|
23
|
-
value,
|
|
24
|
-
type: 'ENTITYVALUEPICKER',
|
|
25
|
-
});
|
|
26
|
-
describe('isStepHiddenByCondition', () => {
|
|
27
|
-
test('a step without condition is never hidden', () => {
|
|
28
|
-
expect(isStepHiddenByCondition('SELECTOR-libre', form, {})).toBe(false);
|
|
29
|
-
});
|
|
30
|
-
test('a step whose condition evaluates false is hidden', () => {
|
|
31
|
-
expect(isStepHiddenByCondition('SELECTOR-piso', form, { [PROYECTO]: dependency({ _id: 'otro' }) })).toBe(true);
|
|
32
|
-
});
|
|
33
|
-
test('a step whose condition evaluates true is shown', () => {
|
|
34
|
-
expect(isStepHiddenByCondition('SELECTOR-piso', form, { [PROYECTO]: dependency({ _id: 'kai' }) })).toBe(false);
|
|
35
|
-
});
|
|
36
|
-
test('an undecidable condition (its step is not in the store) counts as shown', () => {
|
|
37
|
-
expect(isStepHiddenByCondition('SELECTOR-piso', form, {})).toBe(false);
|
|
38
|
-
});
|
|
39
|
-
test('a step unknown to the form counts as shown', () => {
|
|
40
|
-
expect(isStepHiddenByCondition('MAPPER-x-espacio', form, {})).toBe(false);
|
|
41
|
-
});
|
|
42
|
-
});
|
package/dist/Icons/AddIcon.d.ts
DELETED
package/dist/Icons/AddIcon.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useIconProps } from './@ErkIcon';
|
|
3
|
-
function AddIcon(props) {
|
|
4
|
-
const iconProps = useIconProps(props);
|
|
5
|
-
return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }));
|
|
6
|
-
}
|
|
7
|
-
export default AddIcon;
|
package/dist/Icons/EditIcon.d.ts
DELETED
package/dist/Icons/EditIcon.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useIconProps } from './@ErkIcon';
|
|
3
|
-
function EditIcon(props) {
|
|
4
|
-
const iconProps = useIconProps(props);
|
|
5
|
-
return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) }));
|
|
6
|
-
}
|
|
7
|
-
export default EditIcon;
|
package/dist/Icons/RemoveIcon.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useIconProps } from './@ErkIcon';
|
|
3
|
-
function RemoveIcon(props) {
|
|
4
|
-
const iconProps = useIconProps(props);
|
|
5
|
-
return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19 13H5v-2h14v2z" }) }));
|
|
6
|
-
}
|
|
7
|
-
export default RemoveIcon;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useIconProps } from './@ErkIcon';
|
|
3
|
-
function ViewDayIcon(props) {
|
|
4
|
-
const iconProps = useIconProps(props);
|
|
5
|
-
return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 21h19v-2H2v2zm0-4h19v-8H2v8zm0-10h19V5H2v2z" }) }));
|
|
6
|
-
}
|
|
7
|
-
export default ViewDayIcon;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useIconProps } from './@ErkIcon';
|
|
3
|
-
function ViewWeekIcon(props) {
|
|
4
|
-
const iconProps = useIconProps(props);
|
|
5
|
-
return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z" }) }));
|
|
6
|
-
}
|
|
7
|
-
export default ViewWeekIcon;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { LocationStepValue } from '../../@Types/LocationFormStep';
|
|
3
|
-
export interface ErkAddressAutocompleteProps {
|
|
4
|
-
value?: LocationStepValue | null;
|
|
5
|
-
onChange: (value: LocationStepValue) => void;
|
|
6
|
-
/** ISO-2 para acotar las sugerencias (ej. ['co']). */
|
|
7
|
-
regionCodes?: string[];
|
|
8
|
-
placeholder?: string;
|
|
9
|
-
error?: boolean;
|
|
10
|
-
required?: boolean;
|
|
11
|
-
readOnly?: boolean;
|
|
12
|
-
inputRef?: React.Ref<HTMLInputElement>;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Buscador de direcciones con el `Autocomplete` de Base UI + Google Places.
|
|
16
|
-
* Emite un `LocationStepValue` (source GOOGLE_PLACES) con el desglose estructurado.
|
|
17
|
-
*/
|
|
18
|
-
declare function ErkAddressAutocomplete({ value, onChange, regionCodes, placeholder, error, required, readOnly, inputRef, }: ErkAddressAutocompleteProps): JSX.Element;
|
|
19
|
-
export default ErkAddressAutocomplete;
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Autocomplete } from '@base-ui/react/autocomplete';
|
|
4
|
-
import { fetchAddressSuggestions, loadPlaces, newSessionToken, resolvePrediction, } from './googlePlaces';
|
|
5
|
-
import styles from './ErkAddressAutocomplete.module.css';
|
|
6
|
-
/**
|
|
7
|
-
* Buscador de direcciones con el `Autocomplete` de Base UI + Google Places.
|
|
8
|
-
* Emite un `LocationStepValue` (source GOOGLE_PLACES) con el desglose estructurado.
|
|
9
|
-
*/
|
|
10
|
-
function ErkAddressAutocomplete({ value, onChange, regionCodes = ['co'], placeholder = 'Buscar dirección…', error = false, required = false, readOnly = false, inputRef, }) {
|
|
11
|
-
const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? '';
|
|
12
|
-
const [ready, setReady] = useState(false);
|
|
13
|
-
const [inputValue, setInputValue] = useState(value?.address ?? value?.name ?? '');
|
|
14
|
-
const [options, setOptions] = useState([]);
|
|
15
|
-
const [loading, setLoading] = useState(false);
|
|
16
|
-
const [hasSearched, setHasSearched] = useState(false);
|
|
17
|
-
const debounceRef = useRef(undefined);
|
|
18
|
-
const sessionTokenRef = useRef(undefined);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (readOnly)
|
|
21
|
-
return;
|
|
22
|
-
let active = true;
|
|
23
|
-
void loadPlaces(apiKey)
|
|
24
|
-
.then(() => {
|
|
25
|
-
if (!active)
|
|
26
|
-
return;
|
|
27
|
-
sessionTokenRef.current = newSessionToken();
|
|
28
|
-
setReady(true);
|
|
29
|
-
})
|
|
30
|
-
.catch(() => {
|
|
31
|
-
if (active)
|
|
32
|
-
setReady(false);
|
|
33
|
-
});
|
|
34
|
-
return () => {
|
|
35
|
-
active = false;
|
|
36
|
-
};
|
|
37
|
-
}, [apiKey, readOnly]);
|
|
38
|
-
const handleInput = useCallback((text) => {
|
|
39
|
-
setInputValue(text);
|
|
40
|
-
if (debounceRef.current)
|
|
41
|
-
clearTimeout(debounceRef.current);
|
|
42
|
-
if (!ready || !text || text.length < 3) {
|
|
43
|
-
setOptions([]);
|
|
44
|
-
setHasSearched(false);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
setLoading(true);
|
|
48
|
-
debounceRef.current = setTimeout(() => {
|
|
49
|
-
void (async () => {
|
|
50
|
-
try {
|
|
51
|
-
setOptions(await fetchAddressSuggestions(text, {
|
|
52
|
-
sessionToken: sessionTokenRef.current,
|
|
53
|
-
regionCodes,
|
|
54
|
-
}));
|
|
55
|
-
}
|
|
56
|
-
catch {
|
|
57
|
-
setOptions([]);
|
|
58
|
-
}
|
|
59
|
-
finally {
|
|
60
|
-
setLoading(false);
|
|
61
|
-
setHasSearched(true);
|
|
62
|
-
}
|
|
63
|
-
})();
|
|
64
|
-
}, 300);
|
|
65
|
-
}, [ready, regionCodes]);
|
|
66
|
-
const handleSelect = useCallback(async (prediction) => {
|
|
67
|
-
try {
|
|
68
|
-
const stepValue = await resolvePrediction(prediction);
|
|
69
|
-
setInputValue(stepValue.address ?? stepValue.name ?? prediction.label);
|
|
70
|
-
setOptions([]);
|
|
71
|
-
onChange(stepValue);
|
|
72
|
-
}
|
|
73
|
-
finally {
|
|
74
|
-
// Cada selección cierra la sesión de billing de Google.
|
|
75
|
-
sessionTokenRef.current = newSessionToken();
|
|
76
|
-
}
|
|
77
|
-
}, [onChange]);
|
|
78
|
-
return (_jsxs(Autocomplete.Root, { items: options, mode: "none", value: inputValue, onValueChange: handleInput, disabled: readOnly, children: [_jsx(Autocomplete.Input, { ref: inputRef, placeholder: placeholder, required: required, readOnly: readOnly, className: error ? `${styles.input} ${styles.inputError}` : styles.input }), _jsx(Autocomplete.Portal, { children: _jsx(Autocomplete.Positioner, { className: styles.positioner, sideOffset: 4, children: _jsxs(Autocomplete.Popup, { className: styles.popup, children: [loading && _jsx("div", { className: styles.status, children: "Buscando\u2026" }), _jsx(Autocomplete.Empty, { className: styles.status, children: hasSearched ? 'No se encontraron resultados' : 'Escribe para buscar…' }), _jsx(Autocomplete.List, { className: styles.list, children: (option) => (_jsxs(Autocomplete.Item, { value: option, className: styles.item, onClick: () => void handleSelect(option), children: [_jsx("span", { className: styles.optionLabel, children: option.label }), option.description && (_jsx("span", { className: styles.optionDescription, children: option.description }))] }, option.placeId)) })] }) }) })] }));
|
|
79
|
-
}
|
|
80
|
-
export default ErkAddressAutocomplete;
|