intelicoreact 1.5.40 → 1.5.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/dist/Atomic/FormElements/ActionAlert/ActionAlert.interface.js +0 -4
- package/dist/Atomic/FormElements/ActionAlert/ActionAlert.stories.js +0 -89
- package/dist/Atomic/FormElements/ActionAlert/ActionAlert.test.js +0 -130
- package/dist/Atomic/FormElements/ActionAlert/index.js +0 -17
- package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.interface.js +0 -4
- package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.stories.js +0 -81
- package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.test.js +0 -104
- package/dist/Atomic/FormElements/AdvancedStatus/index.js +0 -17
- package/dist/Atomic/FormElements/Calendar/Calendar.props.js +0 -4
- package/dist/Atomic/FormElements/Calendar/Calendar.stories.js +0 -108
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.interface.js +0 -4
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +0 -100
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.test.js +0 -143
- package/dist/Atomic/FormElements/CheckboxInput/index.js +0 -17
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.interface.js +0 -4
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.stories.js +0 -94
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.test.js +0 -177
- package/dist/Atomic/FormElements/CheckboxesLine/index.js +0 -17
- package/dist/Atomic/FormElements/Datepicker/Datepicker.stories.js +0 -51
- package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +0 -596
- package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.stories.js +0 -272
- package/dist/Atomic/FormElements/FileLoader/FileLoader.stories.js +0 -182
- package/dist/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.stories.js +0 -327
- package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.stories.js +0 -186
- package/dist/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.stories.js +0 -84
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.stories.js +0 -107
- package/dist/Atomic/FormElements/Input/Input.stories.js +0 -251
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +0 -115
- package/dist/Atomic/FormElements/InputColor/InputColor.stories.js +0 -119
- package/dist/Atomic/FormElements/InputCurrency/InputCurrency.interface.js +0 -4
- package/dist/Atomic/FormElements/InputCurrency/InputCurrency.stories.js +0 -178
- package/dist/Atomic/FormElements/InputCurrency/InputCurrency.test.js +0 -129
- package/dist/Atomic/FormElements/InputCurrency/index.js +0 -16
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +0 -123
- package/dist/Atomic/FormElements/InputLink/InputLink.stories.js +0 -140
- package/dist/Atomic/FormElements/InputMask/InputMask.stories.js +0 -303
- package/dist/Atomic/FormElements/InputMask2/InputMask2.stories.js +0 -314
- package/dist/Atomic/FormElements/InputMask3/InputMask3.stories.js +0 -335
- package/dist/Atomic/FormElements/InputWithAction/InputWithAction.stories.js +0 -276
- package/dist/Atomic/FormElements/InputsRow/InputsRow.stories.js +0 -56
- package/dist/Atomic/FormElements/Label/Label.interface.js +0 -4
- package/dist/Atomic/FormElements/Label/Label.stories.js +0 -47
- package/dist/Atomic/FormElements/Label/Label.test.js +0 -167
- package/dist/Atomic/FormElements/Label/index.js +0 -17
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.stories.js +0 -172
- package/dist/Atomic/FormElements/MultiSelect/MultiSelect.stories.js +0 -121
- package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +0 -184
- package/dist/Atomic/FormElements/RadioGroup/RadioGroup.stories.js +0 -79
- package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.stories.js +0 -151
- package/dist/Atomic/FormElements/RadioInput/RadioInput.stories.js +0 -67
- package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.stories.js +0 -116
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +0 -107
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js +0 -92
- package/dist/Atomic/FormElements/RangeList/RangeList.stories.js +0 -169
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.stories.js +0 -401
- package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.stories.js +0 -314
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.stories.js +0 -137
- package/dist/Atomic/FormElements/Switcher/Switcher.stories.js +0 -91
- package/dist/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.stories.js +0 -104
- package/dist/Atomic/FormElements/SwitcherHide/SwitcherHide.stories.js +0 -96
- package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.stories.js +0 -140
- package/dist/Atomic/FormElements/SwitcherRange/SwitcherRange.stories.js +0 -112
- package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.stories.js +0 -145
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.stories.js +0 -158
- package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.stories.js +0 -101
- package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.stories.js +0 -131
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.stories.js +0 -357
- package/dist/Atomic/FormElements/Text/Text.stories.js +0 -80
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.stories.js +0 -106
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.test.js +0 -93
- package/dist/Atomic/FormElements/Textarea/Textarea.stories.js +0 -103
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.stories.js +0 -174
- package/dist/Atomic/FormElements/TimeRange/TimeRange.interface.js +0 -4
- package/dist/Atomic/FormElements/TimeRange/TimeRange.stories.js +0 -40
- package/dist/Atomic/FormElements/TimeRange/TimeRange.test.js +0 -163
- package/dist/Atomic/FormElements/TimeRange/index.js +0 -17
- package/dist/Atomic/FormElements/UserContacts/UserContact.test.js +0 -381
- package/dist/Atomic/FormElements/UserContacts/UserContacts.interface.js +0 -4
- package/dist/Atomic/FormElements/UserContacts/UserContacts.stories.js +0 -74
- package/dist/Atomic/FormElements/UserContacts/index.js +0 -17
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.stories.js +0 -193
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.stories.js +0 -147
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.stories.js +0 -151
- package/dist/Atomic/Layout/Header/Header.stories.js +0 -71
- package/dist/Atomic/Layout/MainMenu/MainMenu.stories.js +0 -115
- package/dist/Atomic/Layout/Spinner/Spinner.interface.js +0 -4
- package/dist/Atomic/Layout/Spinner/Spinner.stories.js +0 -46
- package/dist/Atomic/Layout/Spinner/Spinner.test.js +0 -54
- package/dist/Atomic/Layout/Spinner/index.js +0 -17
- package/dist/Atomic/UI/Accordion/Accordion.interface.js +0 -4
- package/dist/Atomic/UI/Accordion/Accordion.stories.js +0 -168
- package/dist/Atomic/UI/Accordion/Accordion.test.js +0 -54
- package/dist/Atomic/UI/Accordion/AccordionItem.test.js +0 -50
- package/dist/Atomic/UI/Accordion/index.js +0 -17
- package/dist/Atomic/UI/AccordionTable/AccordionTable.stories.js +0 -268
- package/dist/Atomic/UI/AccordionText/AccordionText.stories.js +0 -125
- package/dist/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +0 -115
- package/dist/Atomic/UI/Alert/Alert.stories.js +0 -81
- package/dist/Atomic/UI/Arrow/Arrow.stories.js +0 -62
- package/dist/Atomic/UI/Box/Box.stories.js +0 -114
- package/dist/Atomic/UI/Button/Button.stories.js +0 -105
- package/dist/Atomic/UI/Button/Button.test.js +0 -147
- package/dist/Atomic/UI/ButtonsBar/ButtonsBar.stories.js +0 -129
- package/dist/Atomic/UI/Chart/Chart.stories.js +0 -93
- package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.stories.js +0 -85
- package/dist/Atomic/UI/DateTime/DateTime.stories.js +0 -50
- package/dist/Atomic/UI/DoubleString/DoubleString.stories.js +0 -79
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.interface.js +0 -4
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.stories.js +0 -98
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.test.js +0 -51
- package/dist/Atomic/UI/DynamicIcon/index.js +0 -17
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.stories.js +0 -98
- package/dist/Atomic/UI/Hint/Hint.stories.js +0 -101
- package/dist/Atomic/UI/Hint/index.js +0 -16
- package/dist/Atomic/UI/Modal/Modal.interface.js +0 -4
- package/dist/Atomic/UI/Modal/Modal.stories.js +0 -370
- package/dist/Atomic/UI/Modal/ModalHOC.stories.js +0 -191
- package/dist/Atomic/UI/Modal/ModalHOC.test.js +0 -187
- package/dist/Atomic/UI/Modal/index.js +0 -26
- package/dist/Atomic/UI/Modal/partials/ModalFooter.test.js +0 -118
- package/dist/Atomic/UI/Modal/partials/ModalTitle.test.js +0 -126
- package/dist/Atomic/UI/Modal/partials/useMobileModal.test.js +0 -133
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.interface.js +0 -4
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.stories.js +0 -513
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.test.js +0 -84
- package/dist/Atomic/UI/MonoAccordion/index.js +0 -17
- package/dist/Atomic/UI/NavLine/NavLine.interface.js +0 -4
- package/dist/Atomic/UI/NavLine/NavLine.stories.js +0 -434
- package/dist/Atomic/UI/NavLine/NavLine.test.js +0 -311
- package/dist/Atomic/UI/NavLine/index.js +0 -17
- package/dist/Atomic/UI/PageTitle/PageTitle.interface.js +0 -4
- package/dist/Atomic/UI/PageTitle/PageTitle.stories.js +0 -62
- package/dist/Atomic/UI/PageTitle/PageTitle.test.js +0 -181
- package/dist/Atomic/UI/PageTitle/index.js +0 -17
- package/dist/Atomic/UI/PieChart/PieChar.interface.js +0 -4
- package/dist/Atomic/UI/PieChart/PieChart.stories.js +0 -82
- package/dist/Atomic/UI/PieChart/PieChart.test.js +0 -142
- package/dist/Atomic/UI/PieChart/index.js +0 -26
- package/dist/Atomic/UI/Price/Price.interface.js +0 -4
- package/dist/Atomic/UI/Price/Price.stories.js +0 -52
- package/dist/Atomic/UI/Price/Price.test.js +0 -83
- package/dist/Atomic/UI/Price/index.js +0 -17
- package/dist/Atomic/UI/PriceRange/PriceRange.interface.js +0 -4
- package/dist/Atomic/UI/PriceRange/PriceRange.stories.js +0 -51
- package/dist/Atomic/UI/PriceRange/PriceRange.test.js +0 -72
- package/dist/Atomic/UI/PriceRange/index.js +0 -17
- package/dist/Atomic/UI/ProgressLine/ProgressLine.interface.js +0 -4
- package/dist/Atomic/UI/ProgressLine/ProgressLine.stories.js +0 -163
- package/dist/Atomic/UI/ProgressLine/ProgressLine.test.js +0 -60
- package/dist/Atomic/UI/ProgressLine/index.js +0 -17
- package/dist/Atomic/UI/Status/Status.interface.js +0 -4
- package/dist/Atomic/UI/Status/Status.stories.js +0 -79
- package/dist/Atomic/UI/Status/Status.test.js +0 -103
- package/dist/Atomic/UI/Status/index.js +0 -17
- package/dist/Atomic/UI/Table/Table.stories.js +0 -250
- package/dist/Atomic/UI/Tag/Tag.interface.js +0 -4
- package/dist/Atomic/UI/Tag/Tag.stories.js +0 -108
- package/dist/Atomic/UI/Tag/Tag.test.js +0 -75
- package/dist/Atomic/UI/Tag/index.js +0 -17
- package/dist/Atomic/UI/TagList/TagList.stories.js +0 -169
- package/dist/Atomic/UI/UserBox/UserBox.interface.js +0 -4
- package/dist/Atomic/UI/UserBox/UserBox.stories.js +0 -57
- package/dist/Atomic/UI/UserBox/UserBox.test.js +0 -136
- package/dist/Atomic/UI/UserBox/index.js +0 -17
- package/dist/Atomic/UI/WizardStepper/WizardStepper.stories.js +0 -70
- package/dist/Functions/useIsMobile/index.js +0 -17
- package/dist/Functions/useIsMobile/useIsMobile.js +0 -33
- package/dist/Functions/useIsMobile/useIsMobile.test.js +0 -104
- package/dist/Functions/useKeyPress/useHandleKeyPress.test.js +0 -96
- package/dist/Functions/useKeyPress/useKeyPress.test.js +0 -87
- package/dist/Molecular/FormElement/FormElement.stories.js +0 -92
- package/dist/Molecular/FormWithDependOn/FormWithDependOn.stories.js +0 -301
- package/dist/Molecular/InputAddress/InputAddress.stories.js +0 -541
- package/dist/Molecular/InputPassword/InputPassword.stories.js +0 -86
- package/dist/types/base.interface.js +0 -4
- package/dist/types/base.types.js +0 -4
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("./useIsMobile"));
|
|
7
|
-
function _interop_require_default(obj) {
|
|
8
|
-
return obj && obj.__esModule ? obj : {
|
|
9
|
-
default: obj
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
describe('useIsMobile', ()=>{
|
|
13
|
-
const originalNavigator = window.navigator;
|
|
14
|
-
const originalScreen = window.screen;
|
|
15
|
-
beforeEach(()=>{
|
|
16
|
-
jest.clearAllMocks();
|
|
17
|
-
});
|
|
18
|
-
afterEach(()=>{
|
|
19
|
-
Object.defineProperty(window, 'navigator', {
|
|
20
|
-
value: originalNavigator,
|
|
21
|
-
writable: true
|
|
22
|
-
});
|
|
23
|
-
Object.defineProperty(window, 'screen', {
|
|
24
|
-
value: originalScreen,
|
|
25
|
-
writable: true
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
const mockUserAgent = (userAgent)=>{
|
|
29
|
-
Object.defineProperty(window.navigator, 'userAgent', {
|
|
30
|
-
value: userAgent,
|
|
31
|
-
writable: true
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
const mockScreenWidth = (width)=>{
|
|
35
|
-
Object.defineProperty(window.screen, 'width', {
|
|
36
|
-
value: width,
|
|
37
|
-
writable: true
|
|
38
|
-
});
|
|
39
|
-
};
|
|
40
|
-
it('should detect mobile device based on user agent', ()=>{
|
|
41
|
-
mockUserAgent('iPhone');
|
|
42
|
-
mockScreenWidth(375);
|
|
43
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)());
|
|
44
|
-
expect(result.current.isMobile).toBe(true);
|
|
45
|
-
});
|
|
46
|
-
it('should detect desktop device based on user agent', ()=>{
|
|
47
|
-
mockUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36');
|
|
48
|
-
mockScreenWidth(1920);
|
|
49
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)());
|
|
50
|
-
expect(result.current.isMobile).toBe(false);
|
|
51
|
-
});
|
|
52
|
-
it('should respect width check when isWithoutWidthCheck is false', ()=>{
|
|
53
|
-
mockUserAgent('iPhone');
|
|
54
|
-
mockScreenWidth(1024);
|
|
55
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)({
|
|
56
|
-
isWithoutWidthCheck: false
|
|
57
|
-
}));
|
|
58
|
-
expect(result.current.isMobile).toBe(false);
|
|
59
|
-
});
|
|
60
|
-
it('should ignore width check when isWithoutWidthCheck is true', ()=>{
|
|
61
|
-
mockUserAgent('iPhone');
|
|
62
|
-
mockScreenWidth(1024);
|
|
63
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)({
|
|
64
|
-
isWithoutWidthCheck: true
|
|
65
|
-
}));
|
|
66
|
-
expect(result.current.isMobile).toBe(true);
|
|
67
|
-
});
|
|
68
|
-
describe('mobile devices detection', ()=>{
|
|
69
|
-
const mobileDevices = [
|
|
70
|
-
'Android',
|
|
71
|
-
'webOS',
|
|
72
|
-
'iPhone',
|
|
73
|
-
'iPad',
|
|
74
|
-
'iPod',
|
|
75
|
-
'BlackBerry',
|
|
76
|
-
'IEMobile',
|
|
77
|
-
'Opera Mini'
|
|
78
|
-
];
|
|
79
|
-
mobileDevices.forEach((device)=>{
|
|
80
|
-
it(`should detect ${device} as mobile device`, ()=>{
|
|
81
|
-
mockUserAgent(device);
|
|
82
|
-
mockScreenWidth(375);
|
|
83
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)());
|
|
84
|
-
expect(result.current.isMobile).toBe(true);
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
});
|
|
88
|
-
it('should update isMobile state when userAgent changes', ()=>{
|
|
89
|
-
mockUserAgent('Desktop');
|
|
90
|
-
mockScreenWidth(1920);
|
|
91
|
-
const { result, rerender } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)());
|
|
92
|
-
expect(result.current.isMobile).toBe(false);
|
|
93
|
-
mockUserAgent('iPhone');
|
|
94
|
-
mockScreenWidth(375);
|
|
95
|
-
rerender();
|
|
96
|
-
expect(result.current.isMobile).toBe(true);
|
|
97
|
-
});
|
|
98
|
-
it('should return only isMobile property', ()=>{
|
|
99
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useIsMobile.default)());
|
|
100
|
-
expect(Object.keys(result.current)).toEqual([
|
|
101
|
-
'isMobile'
|
|
102
|
-
]);
|
|
103
|
-
});
|
|
104
|
-
});
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _useHandleKeyPress = /*#__PURE__*/ _interop_require_default(require("./useHandleKeyPress"));
|
|
7
|
-
const _useKeyPress = /*#__PURE__*/ _interop_require_default(require("./useKeyPress"));
|
|
8
|
-
function _interop_require_default(obj) {
|
|
9
|
-
return obj && obj.__esModule ? obj : {
|
|
10
|
-
default: obj
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
// Мокаем хук useKeyPress
|
|
14
|
-
jest.mock('./useKeyPress');
|
|
15
|
-
const mockedUseKeyPress = _useKeyPress.default;
|
|
16
|
-
describe('useHandleKeyPress', ()=>{
|
|
17
|
-
// Очищаем моки перед каждым тестом
|
|
18
|
-
beforeEach(()=>{
|
|
19
|
-
jest.clearAllMocks();
|
|
20
|
-
// По умолчанию клавиши не нажаты
|
|
21
|
-
mockedUseKeyPress.mockReturnValue(false);
|
|
22
|
-
});
|
|
23
|
-
it('should call enterCallback when Enter is pressed', ()=>{
|
|
24
|
-
const enterCallback = jest.fn();
|
|
25
|
-
const escCallback = jest.fn();
|
|
26
|
-
// Симулируем нажатие Enter
|
|
27
|
-
mockedUseKeyPress.mockReturnValueOnce(true) // для Enter
|
|
28
|
-
.mockReturnValueOnce(false); // для Escape
|
|
29
|
-
(0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({
|
|
30
|
-
enterCallback,
|
|
31
|
-
escCallback
|
|
32
|
-
}));
|
|
33
|
-
expect(enterCallback).toHaveBeenCalledTimes(1);
|
|
34
|
-
expect(escCallback).not.toHaveBeenCalled();
|
|
35
|
-
});
|
|
36
|
-
it('should call escCallback when Escape is pressed', ()=>{
|
|
37
|
-
const enterCallback = jest.fn();
|
|
38
|
-
const escCallback = jest.fn();
|
|
39
|
-
// Симулируем нажатие Escape
|
|
40
|
-
mockedUseKeyPress.mockReturnValueOnce(false) // для Enter
|
|
41
|
-
.mockReturnValueOnce(true); // для Escape
|
|
42
|
-
(0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({
|
|
43
|
-
enterCallback,
|
|
44
|
-
escCallback
|
|
45
|
-
}));
|
|
46
|
-
expect(escCallback).toHaveBeenCalledTimes(1);
|
|
47
|
-
expect(enterCallback).not.toHaveBeenCalled();
|
|
48
|
-
});
|
|
49
|
-
it('should not call callbacks when no keys are pressed', ()=>{
|
|
50
|
-
const enterCallback = jest.fn();
|
|
51
|
-
const escCallback = jest.fn();
|
|
52
|
-
// Никакие клавиши не нажаты
|
|
53
|
-
mockedUseKeyPress.mockReturnValue(false);
|
|
54
|
-
(0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({
|
|
55
|
-
enterCallback,
|
|
56
|
-
escCallback
|
|
57
|
-
}));
|
|
58
|
-
expect(enterCallback).not.toHaveBeenCalled();
|
|
59
|
-
expect(escCallback).not.toHaveBeenCalled();
|
|
60
|
-
});
|
|
61
|
-
it('should handle undefined callbacks gracefully', ()=>{
|
|
62
|
-
// Проверяем, что хук не выбрасывает ошибку при отсутствии callback'ов
|
|
63
|
-
expect(()=>{
|
|
64
|
-
(0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({
|
|
65
|
-
withClamping: true
|
|
66
|
-
}));
|
|
67
|
-
}).not.toThrow();
|
|
68
|
-
});
|
|
69
|
-
it('should pass withClamping parameter to useKeyPress', ()=>{
|
|
70
|
-
(0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({
|
|
71
|
-
withClamping: false
|
|
72
|
-
}));
|
|
73
|
-
// Проверяем, что useKeyPress вызывается с правильными параметрами
|
|
74
|
-
expect(mockedUseKeyPress).toHaveBeenCalledWith('Enter', false);
|
|
75
|
-
expect(mockedUseKeyPress).toHaveBeenCalledWith('Escape', false);
|
|
76
|
-
});
|
|
77
|
-
it('should use default withClamping value when not provided', ()=>{
|
|
78
|
-
(0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({}));
|
|
79
|
-
// Проверяем, что useKeyPress вызывается с дефолтным значением withClamping
|
|
80
|
-
expect(mockedUseKeyPress).toHaveBeenCalledWith('Enter', true);
|
|
81
|
-
expect(mockedUseKeyPress).toHaveBeenCalledWith('Escape', true);
|
|
82
|
-
});
|
|
83
|
-
it('should properly handle effect cleanup', ()=>{
|
|
84
|
-
const enterCallback = jest.fn();
|
|
85
|
-
const escCallback = jest.fn();
|
|
86
|
-
const { unmount } = (0, _react.renderHook)(()=>(0, _useHandleKeyPress.default)({
|
|
87
|
-
enterCallback,
|
|
88
|
-
escCallback
|
|
89
|
-
}));
|
|
90
|
-
unmount();
|
|
91
|
-
// После unmount новые нажатия клавиш не должны вызывать callbacks
|
|
92
|
-
mockedUseKeyPress.mockReturnValueOnce(true).mockReturnValueOnce(true);
|
|
93
|
-
expect(enterCallback).not.toHaveBeenCalled();
|
|
94
|
-
expect(escCallback).not.toHaveBeenCalled();
|
|
95
|
-
});
|
|
96
|
-
});
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
const _react = require("@testing-library/react");
|
|
6
|
-
const _useKeyPress = /*#__PURE__*/ _interop_require_default(require("./useKeyPress"));
|
|
7
|
-
function _interop_require_default(obj) {
|
|
8
|
-
return obj && obj.__esModule ? obj : {
|
|
9
|
-
default: obj
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
describe('useKeyPress', ()=>{
|
|
13
|
-
const mockKey = 'Enter';
|
|
14
|
-
// Helper function to simulate keyboard events
|
|
15
|
-
const simulateKeyEvent = (eventType, key, repeat = false)=>{
|
|
16
|
-
const event = new KeyboardEvent(eventType, {
|
|
17
|
-
key,
|
|
18
|
-
repeat
|
|
19
|
-
});
|
|
20
|
-
window.dispatchEvent(event);
|
|
21
|
-
};
|
|
22
|
-
beforeEach(()=>{
|
|
23
|
-
// Clear any previous event listeners
|
|
24
|
-
jest.clearAllMocks();
|
|
25
|
-
});
|
|
26
|
-
it('should initialize with keyPressed as false', ()=>{
|
|
27
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey));
|
|
28
|
-
expect(result.current).toBe(false);
|
|
29
|
-
});
|
|
30
|
-
it('should set keyPressed to true when target key is pressed', ()=>{
|
|
31
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey));
|
|
32
|
-
(0, _react.act)(()=>{
|
|
33
|
-
simulateKeyEvent('keydown', mockKey);
|
|
34
|
-
});
|
|
35
|
-
expect(result.current).toBe(true);
|
|
36
|
-
});
|
|
37
|
-
it('should set keyPressed to false when target key is released', ()=>{
|
|
38
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey));
|
|
39
|
-
(0, _react.act)(()=>{
|
|
40
|
-
simulateKeyEvent('keydown', mockKey);
|
|
41
|
-
simulateKeyEvent('keyup', mockKey);
|
|
42
|
-
});
|
|
43
|
-
expect(result.current).toBe(false);
|
|
44
|
-
});
|
|
45
|
-
it('should not respond to non-target keys', ()=>{
|
|
46
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey));
|
|
47
|
-
(0, _react.act)(()=>{
|
|
48
|
-
simulateKeyEvent('keydown', 'Shift');
|
|
49
|
-
});
|
|
50
|
-
expect(result.current).toBe(false);
|
|
51
|
-
});
|
|
52
|
-
describe('clamping behavior', ()=>{
|
|
53
|
-
it('should handle repeated keys when clamping is true', ()=>{
|
|
54
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey, true));
|
|
55
|
-
(0, _react.act)(()=>{
|
|
56
|
-
simulateKeyEvent('keydown', mockKey, true);
|
|
57
|
-
});
|
|
58
|
-
expect(result.current).toBe(true);
|
|
59
|
-
});
|
|
60
|
-
it('should ignore repeated keys when clamping is false', ()=>{
|
|
61
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey, false));
|
|
62
|
-
(0, _react.act)(()=>{
|
|
63
|
-
simulateKeyEvent('keydown', mockKey, false); // First press
|
|
64
|
-
simulateKeyEvent('keydown', mockKey, true); // Repeated press
|
|
65
|
-
});
|
|
66
|
-
expect(result.current).toBe(true);
|
|
67
|
-
});
|
|
68
|
-
});
|
|
69
|
-
it('should cleanup event listeners on unmount', ()=>{
|
|
70
|
-
const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
|
|
71
|
-
const { unmount } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey));
|
|
72
|
-
unmount();
|
|
73
|
-
expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
|
|
74
|
-
expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
|
|
75
|
-
expect(removeEventListenerSpy).toHaveBeenCalledWith('keyup', expect.any(Function));
|
|
76
|
-
});
|
|
77
|
-
it('should handle multiple key presses correctly', ()=>{
|
|
78
|
-
const { result } = (0, _react.renderHook)(()=>(0, _useKeyPress.default)(mockKey));
|
|
79
|
-
(0, _react.act)(()=>{
|
|
80
|
-
simulateKeyEvent('keydown', mockKey);
|
|
81
|
-
simulateKeyEvent('keyup', mockKey);
|
|
82
|
-
simulateKeyEvent('keydown', mockKey);
|
|
83
|
-
simulateKeyEvent('keyup', mockKey);
|
|
84
|
-
});
|
|
85
|
-
expect(result.current).toBe(false);
|
|
86
|
-
});
|
|
87
|
-
});
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
InputTemplate: function() {
|
|
13
|
-
return InputTemplate;
|
|
14
|
-
},
|
|
15
|
-
default: function() {
|
|
16
|
-
return _default;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _jsxruntime = require("react/jsx-runtime");
|
|
20
|
-
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
|
|
21
|
-
const _Input = /*#__PURE__*/ _interop_require_default(require("../../Atomic/FormElements/Input/Input"));
|
|
22
|
-
const _FormElement = /*#__PURE__*/ _interop_require_default(require("./FormElement"));
|
|
23
|
-
require("../../../../scss/main.scss");
|
|
24
|
-
function _interop_require_default(obj) {
|
|
25
|
-
return obj && obj.__esModule ? obj : {
|
|
26
|
-
default: obj
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
global.lng = "en";
|
|
30
|
-
const _default = {
|
|
31
|
-
title: "Form Elements/Form Element",
|
|
32
|
-
component: _FormElement.default,
|
|
33
|
-
argTypes: {
|
|
34
|
-
label: {
|
|
35
|
-
description: "string/JSX"
|
|
36
|
-
},
|
|
37
|
-
note: {
|
|
38
|
-
description: "string/JSX"
|
|
39
|
-
},
|
|
40
|
-
children: {
|
|
41
|
-
description: "JSX"
|
|
42
|
-
},
|
|
43
|
-
error: {
|
|
44
|
-
description: "string - print error if is errored"
|
|
45
|
-
},
|
|
46
|
-
required: {
|
|
47
|
-
description: "boolean"
|
|
48
|
-
},
|
|
49
|
-
className: {
|
|
50
|
-
description: "string"
|
|
51
|
-
},
|
|
52
|
-
hint: {
|
|
53
|
-
description: "object {text: string, hintSide: bottom/right",
|
|
54
|
-
control: {
|
|
55
|
-
type: "object"
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
alert: {
|
|
59
|
-
description: "optional, object { can receive alert props }"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const Template = (args)=>{
|
|
64
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormElement.default, {
|
|
65
|
-
...args,
|
|
66
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
|
|
67
|
-
error: args.error
|
|
68
|
-
})
|
|
69
|
-
});
|
|
70
|
-
};
|
|
71
|
-
const InputTemplate = Template.bind({});
|
|
72
|
-
InputTemplate.args = {
|
|
73
|
-
label: "Text label",
|
|
74
|
-
isLabelBolt: true,
|
|
75
|
-
error: "error",
|
|
76
|
-
required: true,
|
|
77
|
-
hint: {
|
|
78
|
-
text: "hint",
|
|
79
|
-
hintSide: "bottom"
|
|
80
|
-
},
|
|
81
|
-
numStep: 1,
|
|
82
|
-
min: "0",
|
|
83
|
-
max: "5",
|
|
84
|
-
placeholder: "Placeholder",
|
|
85
|
-
mask: "",
|
|
86
|
-
alert: {
|
|
87
|
-
message: "test",
|
|
88
|
-
variant: "info",
|
|
89
|
-
noDismiss: true
|
|
90
|
-
},
|
|
91
|
-
note: "(note)"
|
|
92
|
-
};
|
|
@@ -1,301 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
FormWithDependOnTemplate: function() {
|
|
13
|
-
return FormWithDependOnTemplate;
|
|
14
|
-
},
|
|
15
|
-
default: function() {
|
|
16
|
-
return _default;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _jsxruntime = require("react/jsx-runtime");
|
|
20
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
21
|
-
const _utils = require("../../Functions/utils");
|
|
22
|
-
const _FormWithDependOn = /*#__PURE__*/ _interop_require_default(require("./FormWithDependOn"));
|
|
23
|
-
const _FormElement = /*#__PURE__*/ _interop_require_default(require("../FormElement/FormElement"));
|
|
24
|
-
const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../../Atomic/FormElements/Dropdown/Dropdown"));
|
|
25
|
-
const _Input = /*#__PURE__*/ _interop_require_default(require("../../Atomic/FormElements/Input/Input"));
|
|
26
|
-
require("../../../../scss/main.scss");
|
|
27
|
-
function _interop_require_default(obj) {
|
|
28
|
-
return obj && obj.__esModule ? obj : {
|
|
29
|
-
default: obj
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
function _getRequireWildcardCache(nodeInterop) {
|
|
33
|
-
if (typeof WeakMap !== "function") return null;
|
|
34
|
-
var cacheBabelInterop = new WeakMap();
|
|
35
|
-
var cacheNodeInterop = new WeakMap();
|
|
36
|
-
return (_getRequireWildcardCache = function(nodeInterop) {
|
|
37
|
-
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
38
|
-
})(nodeInterop);
|
|
39
|
-
}
|
|
40
|
-
function _interop_require_wildcard(obj, nodeInterop) {
|
|
41
|
-
if (!nodeInterop && obj && obj.__esModule) {
|
|
42
|
-
return obj;
|
|
43
|
-
}
|
|
44
|
-
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
45
|
-
return {
|
|
46
|
-
default: obj
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
var cache = _getRequireWildcardCache(nodeInterop);
|
|
50
|
-
if (cache && cache.has(obj)) {
|
|
51
|
-
return cache.get(obj);
|
|
52
|
-
}
|
|
53
|
-
var newObj = {
|
|
54
|
-
__proto__: null
|
|
55
|
-
};
|
|
56
|
-
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
57
|
-
for(var key in obj){
|
|
58
|
-
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
59
|
-
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
60
|
-
if (desc && (desc.get || desc.set)) {
|
|
61
|
-
Object.defineProperty(newObj, key, desc);
|
|
62
|
-
} else {
|
|
63
|
-
newObj[key] = obj[key];
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
newObj.default = obj;
|
|
68
|
-
if (cache) {
|
|
69
|
-
cache.set(obj, newObj);
|
|
70
|
-
}
|
|
71
|
-
return newObj;
|
|
72
|
-
}
|
|
73
|
-
global.lng = 'en';
|
|
74
|
-
const _default = {
|
|
75
|
-
title: 'Form Elements/Form With Depend On',
|
|
76
|
-
component: _FormWithDependOn.default,
|
|
77
|
-
argTypes: {
|
|
78
|
-
ref: {
|
|
79
|
-
description: 'The component is implemented as React.forwardRef and accepts refs'
|
|
80
|
-
},
|
|
81
|
-
form: {
|
|
82
|
-
description: 'Array of Objects. This is the target form, the component render it and mutated it with the passed methods'
|
|
83
|
-
},
|
|
84
|
-
formId: {
|
|
85
|
-
description: 'String, optional. If passed, it will be used as an id attribute for the topmost container from the returned JSX'
|
|
86
|
-
},
|
|
87
|
-
setForm: {
|
|
88
|
-
description: 'Function. The method of direct installation of the form. If it is not passed, then the dependOn system will not work correctly'
|
|
89
|
-
},
|
|
90
|
-
onChange: {
|
|
91
|
-
description: 'Function. The method to be called by the field when changing. If not passed, the form will be rendered, but it will be immutable'
|
|
92
|
-
},
|
|
93
|
-
renderField: {
|
|
94
|
-
description: 'Function. The method for drawing each element of the form. If not passed, the component will return an empty container'
|
|
95
|
-
},
|
|
96
|
-
getAnotherActions: {
|
|
97
|
-
description: 'Function, optional. The function should return an object with methods of the same name as the field keys or with the name "all". ' + 'When changing the field, the method of the same name will be called from this object. The all method will be called for any change to any field'
|
|
98
|
-
},
|
|
99
|
-
className: {
|
|
100
|
-
description: 'String, optional. If passed, it will be added additional to the className attribute of the upper container of the returned JSX'
|
|
101
|
-
},
|
|
102
|
-
isInitializeByDependOn: {
|
|
103
|
-
description: 'Boolean, optional. If true is passed, then useEffect will be triggered by zero dependence. ' + 'In this run, the dependOn logic will be run for each field without running onChange. ' + 'This is convenient when you need the described dependencies to work during initialization as part of initialization.'
|
|
104
|
-
},
|
|
105
|
-
isFormDisabled: {
|
|
106
|
-
description: 'Boolean, optional. If true is passed, the disabled: true property will be passed for each field'
|
|
107
|
-
},
|
|
108
|
-
typeOfUse: {
|
|
109
|
-
description: 'String, optional, default value - "default". Related to the dependOn logic. ' + 'Sometimes, to organize the logic of dependencies, it is important to understand which implementation of the form as a whole works.' + 'This value is passed for each dependOn callback in the object of "additional" property'
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
// ? Пример конструктора в проекте. В филдах прописаны зависимости
|
|
114
|
-
// ? - филды могут быть доминирующими, зависимыми и одновременно доминирующими и зависимыми (как email в примере)
|
|
115
|
-
// ? - филды могут быть зависимы от нескольких полей, как с одной реакцией,
|
|
116
|
-
// ? так и с разными реациями на каждую зависимость (как additionalInfo в примере)
|
|
117
|
-
// ? - филды могут быть зависимы от самих себя
|
|
118
|
-
const fields = [
|
|
119
|
-
{
|
|
120
|
-
key: 'variants',
|
|
121
|
-
label: 'Test dropdown',
|
|
122
|
-
type: 'dropdown',
|
|
123
|
-
options: [
|
|
124
|
-
{
|
|
125
|
-
value: 'account',
|
|
126
|
-
label: 'Account'
|
|
127
|
-
},
|
|
128
|
-
{
|
|
129
|
-
value: 'email',
|
|
130
|
-
label: 'Email'
|
|
131
|
-
}
|
|
132
|
-
],
|
|
133
|
-
isDominantField: true,
|
|
134
|
-
isNotUseInnerHandler: true,
|
|
135
|
-
value: 'account'
|
|
136
|
-
},
|
|
137
|
-
{
|
|
138
|
-
key: 'email',
|
|
139
|
-
label: 'Email',
|
|
140
|
-
isDominantField: true,
|
|
141
|
-
isNotUseInnerHandler: true,
|
|
142
|
-
dependOn: {
|
|
143
|
-
keys: [
|
|
144
|
-
'variants'
|
|
145
|
-
],
|
|
146
|
-
callback: (dominantField, dependField, form, additional)=>{
|
|
147
|
-
const { onChange, assign } = additional;
|
|
148
|
-
const isNotRender = dominantField.value !== 'email';
|
|
149
|
-
if (!isNotRender) {
|
|
150
|
-
setTimeout(()=>{
|
|
151
|
-
onChange('', dependField.key, null, {
|
|
152
|
-
updatedForm: form.map((field)=>field.key === dominantField.key ? dominantField : field)
|
|
153
|
-
});
|
|
154
|
-
}, 0);
|
|
155
|
-
}
|
|
156
|
-
return {
|
|
157
|
-
isNotRender
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
key: 'additionalInfo',
|
|
164
|
-
label: 'Additional',
|
|
165
|
-
isNotUseInnerHandler: true,
|
|
166
|
-
dependOn: {
|
|
167
|
-
keys: [
|
|
168
|
-
'variants',
|
|
169
|
-
'email'
|
|
170
|
-
],
|
|
171
|
-
callbacks: {
|
|
172
|
-
variants: (dominantField, dependField)=>{
|
|
173
|
-
const isAccountCase = dominantField.value === 'account';
|
|
174
|
-
const label = isAccountCase ? 'Account name' : 'Your name';
|
|
175
|
-
return {
|
|
176
|
-
label,
|
|
177
|
-
value: '',
|
|
178
|
-
disabled: isAccountCase ? false : dependField.disabled,
|
|
179
|
-
placeholder: null
|
|
180
|
-
};
|
|
181
|
-
},
|
|
182
|
-
email: (dominantField)=>{
|
|
183
|
-
if (!dominantField.value) return {
|
|
184
|
-
value: '',
|
|
185
|
-
placeholder: 'first, enter your email',
|
|
186
|
-
disabled: true
|
|
187
|
-
};
|
|
188
|
-
else return {
|
|
189
|
-
disabled: false,
|
|
190
|
-
placeholder: `${dominantField.value} owner name`
|
|
191
|
-
};
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
];
|
|
197
|
-
// ? Это НЕ либовская логика. Это описывается на уровне проекта (даже на уровне конкретной реализации) и сводится к вызову для каждого филда FormItem.
|
|
198
|
-
// ? Так же тут можно скорректировать пропы для FormItem, да и вообще).
|
|
199
|
-
// ? Код частично взят из самого FormItem (в целом - без разницы какого проекта)
|
|
200
|
-
const renderField = ({ field, onChange })=>{
|
|
201
|
-
const { fieldChangesMiddleware, isNotUseInnerHandler, isRequired, disclaimer, isNoFormElemLabel, label } = field;
|
|
202
|
-
const handle = {
|
|
203
|
-
change: (value, fieldKey, propKey)=>{
|
|
204
|
-
let newValue;
|
|
205
|
-
if (typeof fieldChangesMiddleware === 'function' && typeof value === 'string') {
|
|
206
|
-
newValue = fieldChangesMiddleware(value);
|
|
207
|
-
} else {
|
|
208
|
-
newValue = value;
|
|
209
|
-
}
|
|
210
|
-
// ! Специально прописал сюда этот кусок, т.к. он есть в КАЖДОЙ реализации FormItem (RenderField для админки)
|
|
211
|
-
// ! Если в конструкторе НЕ прописать КАЖДОМУ филду пропу isNotUseInnerHandler: true, то FormWithDependOn НЕ будет корректно работать
|
|
212
|
-
// ! (смотри код (*) в FormWithDependOn)
|
|
213
|
-
if (!isNotUseInnerHandler) {
|
|
214
|
-
field.error = '';
|
|
215
|
-
field.value = newValue;
|
|
216
|
-
}
|
|
217
|
-
// ! Есть реализации, в которых верхний onChange (самый верхний, базовый, который в примере generalOnChange)
|
|
218
|
-
// ! принимает 4-й аргумент! Это объект с чем угодно. Или НЕ добавляйте ТУТ 4-й аргумен, или добавляйте объектом.
|
|
219
|
-
onChange(newValue, fieldKey || field.key, propKey, {
|
|
220
|
-
isCleaningUpErrors: true
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
};
|
|
224
|
-
const getFieldJSX = (field)=>{
|
|
225
|
-
switch(field.type){
|
|
226
|
-
case 'dropdown':
|
|
227
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
|
|
228
|
-
...field,
|
|
229
|
-
value: field.value,
|
|
230
|
-
onChange: (val)=>handle.change(val)
|
|
231
|
-
});
|
|
232
|
-
default:
|
|
233
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
|
|
234
|
-
...field,
|
|
235
|
-
onChange: (val)=>handle.change(val)
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
};
|
|
239
|
-
if (field.isNotRender) return null;
|
|
240
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormElement.default, {
|
|
241
|
-
alert: disclaimer,
|
|
242
|
-
label: isNoFormElemLabel ? null : label,
|
|
243
|
-
required: isRequired,
|
|
244
|
-
children: getFieldJSX(field)
|
|
245
|
-
}, field.key);
|
|
246
|
-
};
|
|
247
|
-
// ? В целом система dependOn самодостаточна и решает широкий спектр организации зависимостей,
|
|
248
|
-
// ? однако иногда может быть полезным отделить какую-то логику от dependOn и организовать отдельным персональным экшеном
|
|
249
|
-
// ? (или же общим методом all, но отдельно от dependOn)
|
|
250
|
-
// ? Для этого и существует данный метод.
|
|
251
|
-
// ? Формат возврата данного метода - объект методов, либо одноименных ключу филда, либо с названием all (общий)
|
|
252
|
-
// ? На вход getAnotherActions получает объект с методами установки - setForm и assign
|
|
253
|
-
// ? Каждый метод из объекта методов при вызове на вход получит объект с пропами
|
|
254
|
-
// ? - newValue - новое значение изменившегося филда
|
|
255
|
-
// ? - fieldKey - ключ изменившегося филда
|
|
256
|
-
// ? - propKey - ключ изменяемой пропы изменившегося филда (будет undefined если меняется 'value')
|
|
257
|
-
// ? - field - целевой филд ДО применения нового значения
|
|
258
|
-
// ? - form - вся форма ДО применения нового значения к целевому филду
|
|
259
|
-
// ? (если только onChange не вызывали c updatedForm, тогда в этой пропе будет updatedForm, смотри generalOnChange из Template)
|
|
260
|
-
// ? - additional - объект с дополнительной информацией и методами
|
|
261
|
-
// ! Важно !
|
|
262
|
-
// ! Экшены запускает вызов onChange. Назначения через assing НЕ тригирят ни экшенов, ни логики dependOn
|
|
263
|
-
const getAnotherActions = ({ setForm, assign })=>{
|
|
264
|
-
return {
|
|
265
|
-
additionalInfo: ({ newValue, fieldKey, propKey, field, form, additional })=>{
|
|
266
|
-
const { isInitilisation } = additional;
|
|
267
|
-
if (!isInitilisation && !newValue) alert('Стерли руками additionalInfo!');
|
|
268
|
-
}
|
|
269
|
-
};
|
|
270
|
-
};
|
|
271
|
-
const Template = (args)=>{
|
|
272
|
-
const [form, setForm] = (0, _react.useState)(fields);
|
|
273
|
-
const generalOnChange = (newValue, fieldKey, propKey, additionalOfOnChange)=>{
|
|
274
|
-
// ? additionalOfOnChange - возможность прописать какие-либо особенности чтобы реагировать на информацию с мест вызовов,
|
|
275
|
-
const { updatedForm, isCleaningUpErrors } = (0, _utils.getIsOnlyAnObject)(additionalOfOnChange) ? additionalOfOnChange : {};
|
|
276
|
-
// ! Для корректной работы важно в базовом setForm учитывать возможность updatedForm
|
|
277
|
-
// ! Это нужно если из dedpendOn-колбеков делаются повторные вызовы onChange
|
|
278
|
-
// ! (не return объекта изменений, не assign изменения, а именно вызов onChange, для триггера нового витка сработок зависимостей)
|
|
279
|
-
setForm((Array.isArray(updatedForm) ? updatedForm : form).map((field)=>field.key === fieldKey ? {
|
|
280
|
-
...field,
|
|
281
|
-
[propKey || 'value']: newValue,
|
|
282
|
-
...isCleaningUpErrors ? {
|
|
283
|
-
error: ''
|
|
284
|
-
} : {}
|
|
285
|
-
} : field));
|
|
286
|
-
};
|
|
287
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormWithDependOn.default, {
|
|
288
|
-
...args,
|
|
289
|
-
className: "form-with-depend-on_example",
|
|
290
|
-
form: form,
|
|
291
|
-
setForm: setForm,
|
|
292
|
-
onChange: generalOnChange,
|
|
293
|
-
renderField: renderField,
|
|
294
|
-
getAnotherActions: getAnotherActions
|
|
295
|
-
});
|
|
296
|
-
};
|
|
297
|
-
const FormWithDependOnTemplate = Template.bind({});
|
|
298
|
-
FormWithDependOnTemplate.args = {
|
|
299
|
-
isInitializeByDependOn: true,
|
|
300
|
-
isFormDisabled: false
|
|
301
|
-
};
|