intelicoreact 1.8.8 → 1.8.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.jsx +18 -1
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN_old.jsx +121 -1
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.jsx +507 -1
- package/dist/Atomic/FormElements/MultiSelect/MultiSelect.jsx +46 -1
- package/dist/Atomic/FormElements/NumericInput/NumericInput.jsx +337 -1
- package/dist/Atomic/FormElements/RadioGroup/RadioGroup.jsx +66 -1
- package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.jsx +78 -1
- package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.jsx +54 -1
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.jsx +183 -1
- package/dist/Atomic/FormElements/RangeList/RangeList.jsx +181 -1
- package/dist/Atomic/FormElements/RangeList/partial/RangeListRow.jsx +41 -1
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.jsx +449 -1
- package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.jsx +865 -1
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.jsx +37 -1
- package/dist/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.jsx +48 -1
- package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.jsx +62 -1
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.jsx +175 -1
- package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.jsx +65 -1
- package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.jsx +118 -1
- package/dist/Atomic/FormElements/Text/Text.jsx +126 -1
- package/dist/Atomic/FormElements/Textarea/Textarea.jsx +61 -1
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.jsx +181 -1
- package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.jsx +60 -1
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.jsx +83 -1
- package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.jsx +80 -1
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.jsx +103 -1
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.jsx +115 -1
- package/dist/Atomic/Layout/Header/Header.jsx +86 -1
- package/dist/Atomic/Layout/MainMenu/MainMenu.jsx +164 -1
- package/dist/Atomic/UI/AccordionTable/AccordionTable.jsx +250 -1
- package/dist/Atomic/UI/AccordionText/AccordionText.jsx +68 -1
- package/dist/Atomic/UI/Arrow/Arrow.jsx +134 -1
- package/dist/Atomic/UI/Box/Box.jsx +53 -1
- package/dist/Atomic/UI/Chart/Chart.jsx +178 -1
- package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.jsx +78 -1
- package/dist/Atomic/UI/Chart/partial/optionsConstructor.jsx +334 -1
- package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.jsx +111 -1
- package/dist/Atomic/UI/DateTime/DateTime.jsx +57 -1
- package/dist/Atomic/UI/DebugContainer/DebugContainer.jsx +44 -1
- package/dist/Atomic/UI/DebugContainer/useDebugContainer.jsx +15 -1
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.jsx +223 -1
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion._test.jsx +75 -1
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.jsx +86 -1
- package/dist/Atomic/UI/PieChart/PieChart.jsx +41 -1
- package/dist/Atomic/UI/Table/Partials/TdCell.jsx +87 -1
- package/dist/Atomic/UI/Table/Partials/TdHeader.jsx +36 -1
- package/dist/Atomic/UI/Table/Partials/TdRow.jsx +103 -1
- package/dist/Atomic/UI/Table/Partials/TdTitle.jsx +55 -1
- package/dist/Atomic/UI/Table/Table.jsx +63 -1
- package/dist/Atomic/UI/Table/TdTypes/TdActions.jsx +80 -1
- package/dist/Atomic/UI/Table/TdTypes/TdPriority.jsx +26 -1
- package/dist/Atomic/UI/Table/TdTypes/TdRange.jsx +13 -1
- package/dist/Atomic/UI/Table/TdTypes/TdWeight.jsx +56 -1
- package/dist/Atomic/UI/TagList/TagList.jsx +256 -1
- package/dist/Atomic/UI/WizardStepper/constructor.jsx +86 -1
- package/dist/Classes/RESTAPI/partials/CredentialsProcessing.jsx +254 -1
- package/dist/Functions/customEventListener.jsx +96 -1
- package/dist/Functions/operations.jsx +138 -1
- package/dist/Functions/useFormTools/functions/RenderFields.jsx +108 -1
- package/dist/Functions/useFormTools/index.jsx +777 -1
- package/dist/Functions/usePasswordChecker.jsx +128 -1
- package/dist/Functions/utils.jsx +492 -1
- package/dist/Molecular/CustomIcons/components/AffiliateNetworks.jsx +22 -1
- package/dist/Molecular/CustomIcons/components/AlertCircle.jsx +24 -1
- package/dist/Molecular/CustomIcons/components/AppStore.jsx +30 -1
- package/dist/Molecular/CustomIcons/components/Arrow.jsx +33 -1
- package/dist/Molecular/CustomIcons/components/ArrowDown.jsx +18 -1
- package/dist/Molecular/CustomIcons/components/ArrowLeft.jsx +23 -1
- package/dist/Molecular/CustomIcons/components/ArrowRight.jsx +23 -1
- package/dist/Molecular/CustomIcons/components/ArrowUp.jsx +18 -1
- package/dist/Molecular/CustomIcons/components/Bell.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/Button.jsx +13 -1
- package/dist/Molecular/CustomIcons/components/Campaigns.jsx +17 -1
- package/dist/Molecular/CustomIcons/components/Check.jsx +15 -1
- package/dist/Molecular/CustomIcons/components/Check2.jsx +13 -1
- package/dist/Molecular/CustomIcons/components/ChevronDown.jsx +13 -1
- package/dist/Molecular/CustomIcons/components/ChevronDownDisabled.jsx +12 -1
- package/dist/Molecular/CustomIcons/components/ChevronLeft.jsx +12 -1
- package/dist/Molecular/CustomIcons/components/ChevronRight.jsx +12 -1
- package/dist/Molecular/CustomIcons/components/ChevronUp.jsx +12 -1
- package/dist/Molecular/CustomIcons/components/ChevronUpDown.jsx +28 -1
- package/dist/Molecular/CustomIcons/components/Close.jsx +15 -1
- package/dist/Molecular/CustomIcons/components/ColumnsOrder.jsx +18 -1
- package/dist/Molecular/CustomIcons/components/Delete.jsx +17 -1
- package/dist/Molecular/CustomIcons/components/Edit.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/Email.jsx +32 -1
- package/dist/Molecular/CustomIcons/components/FinturfLogo.jsx +19 -1
- package/dist/Molecular/CustomIcons/components/FinturfLogo2.jsx +36 -1
- package/dist/Molecular/CustomIcons/components/Flows.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/Gift.jsx +26 -1
- package/dist/Molecular/CustomIcons/components/GoogleAuth.jsx +30 -1
- package/dist/Molecular/CustomIcons/components/GooglePlay.jsx +30 -1
- package/dist/Molecular/CustomIcons/components/HelpCircle.jsx +20 -1
- package/dist/Molecular/CustomIcons/components/HelpCircle2.jsx +21 -1
- package/dist/Molecular/CustomIcons/components/HelpCircleFilled.jsx +20 -1
- package/dist/Molecular/CustomIcons/components/Home.jsx +17 -1
- package/dist/Molecular/CustomIcons/components/Home2.jsx +23 -1
- package/dist/Molecular/CustomIcons/components/Key.jsx +24 -1
- package/dist/Molecular/CustomIcons/components/Landers.jsx +21 -1
- package/dist/Molecular/CustomIcons/components/Lock.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/Mail.jsx +27 -1
- package/dist/Molecular/CustomIcons/components/Mastercard.jsx +74 -1
- package/dist/Molecular/CustomIcons/components/Minus.jsx +26 -1
- package/dist/Molecular/CustomIcons/components/Offers.jsx +17 -1
- package/dist/Molecular/CustomIcons/components/Pause.jsx +29 -1
- package/dist/Molecular/CustomIcons/components/PayPal.jsx +42 -1
- package/dist/Molecular/CustomIcons/components/PayPalLightLarge.jsx +29 -1
- package/dist/Molecular/CustomIcons/components/Phone.jsx +31 -1
- package/dist/Molecular/CustomIcons/components/Play.jsx +26 -1
- package/dist/Molecular/CustomIcons/components/Plus.jsx +26 -1
- package/dist/Molecular/CustomIcons/components/Profile.jsx +17 -1
- package/dist/Molecular/CustomIcons/components/QRCode.jsx +30 -1
- package/dist/Molecular/CustomIcons/components/Rectangle.jsx +13 -1
- package/dist/Molecular/CustomIcons/components/Revert.jsx +14 -1
- package/dist/Molecular/CustomIcons/components/Star.jsx +15 -1
- package/dist/Molecular/CustomIcons/components/Star2.jsx +17 -1
- package/dist/Molecular/CustomIcons/components/TrafficSources.jsx +15 -1
- package/dist/Molecular/CustomIcons/components/Trash.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/TrashRed.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/Triggers.jsx +16 -1
- package/dist/Molecular/CustomIcons/components/User.jsx +26 -1
- package/dist/Molecular/CustomIcons/components/Visa.jsx +32 -1
- package/dist/Molecular/CustomIcons/components/X.jsx +13 -1
- package/dist/Molecular/FormElement/FormElement.jsx +52 -1
- package/dist/Molecular/FormWithDependOn/FormWithDependOn.jsx +161 -1
- package/dist/Molecular/InputAddress/InputAddress.jsx +641 -1
- package/dist/Molecular/InputPassword/InputPassword.jsx +50 -1
- package/package.json +1 -1
|
@@ -1 +1,256 @@
|
|
|
1
|
-
|
|
1
|
+
import cn from 'classnames';
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
createRef,
|
|
5
|
+
useEffect,
|
|
6
|
+
useLayoutEffect,
|
|
7
|
+
useRef,
|
|
8
|
+
useState,
|
|
9
|
+
} from 'react';
|
|
10
|
+
import { Edit3 } from 'react-feather';
|
|
11
|
+
|
|
12
|
+
import { checkedRef } from '../../../Functions/utils';
|
|
13
|
+
import Tag from '../Tag/Tag';
|
|
14
|
+
|
|
15
|
+
import './TagList.scss';
|
|
16
|
+
|
|
17
|
+
function TagList({
|
|
18
|
+
disabled,
|
|
19
|
+
className,
|
|
20
|
+
onTagClick,
|
|
21
|
+
removeItem = null,
|
|
22
|
+
items = [],
|
|
23
|
+
withToggle = true,
|
|
24
|
+
disableShowMore = false,
|
|
25
|
+
shownItemsCount = 'auto',
|
|
26
|
+
testId = 'test-taglist',
|
|
27
|
+
refProp,
|
|
28
|
+
|
|
29
|
+
renderOrder,
|
|
30
|
+
|
|
31
|
+
onEditClick,
|
|
32
|
+
onToggleRenderAll,
|
|
33
|
+
}) {
|
|
34
|
+
const wrapperRef = useRef(null);
|
|
35
|
+
const [tagList, setTagList] = useState([]);
|
|
36
|
+
|
|
37
|
+
const [staticTagsCount, setStaticTagsCount] = useState(-1);
|
|
38
|
+
const [renderItemsCount, setRenderItemsCount] = useState(-1);
|
|
39
|
+
const [renderAll, setRenderAll] = useState(!withToggle);
|
|
40
|
+
|
|
41
|
+
const wrapperWidth
|
|
42
|
+
= wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;
|
|
43
|
+
|
|
44
|
+
const setRenderAllInterceptor = (v) => {
|
|
45
|
+
setRenderAll(v);
|
|
46
|
+
onToggleRenderAll?.(v);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const getStaticTagsCount = (computedWidth) => {
|
|
50
|
+
if (typeof shownItemsCount === 'number') return shownItemsCount;
|
|
51
|
+
|
|
52
|
+
const delta = typeof onEditClick === 'function' ? 60 : 32;
|
|
53
|
+
const result = tagList.reduce(
|
|
54
|
+
(result, { itemRef }, index) => {
|
|
55
|
+
if (result.skip) return result;
|
|
56
|
+
|
|
57
|
+
const itemStyle
|
|
58
|
+
= itemRef?.current && window.getComputedStyle(itemRef.current);
|
|
59
|
+
|
|
60
|
+
const itemWidth = [
|
|
61
|
+
Number.parseInt(itemRef.current?.getBoundingClientRect()?.width, 10),
|
|
62
|
+
Number.parseInt(itemStyle?.marginLeft, 10),
|
|
63
|
+
Number.parseInt(itemStyle?.marginRight, 10),
|
|
64
|
+
].reduce((result, item) => {
|
|
65
|
+
if (!isNaN(item)) result += item;
|
|
66
|
+
return result;
|
|
67
|
+
}, 0);
|
|
68
|
+
|
|
69
|
+
if (
|
|
70
|
+
(!isNaN(itemWidth)
|
|
71
|
+
&& itemWidth > 0
|
|
72
|
+
&& itemWidth + result.width < computedWidth - delta)
|
|
73
|
+
|| index === 0
|
|
74
|
+
) {
|
|
75
|
+
result = {
|
|
76
|
+
count: result.count + 1,
|
|
77
|
+
width: result.width + itemWidth,
|
|
78
|
+
items: [...result.items, { w: itemWidth, r: itemRef?.current }],
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
result.skip = true;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
return result;
|
|
86
|
+
},
|
|
87
|
+
{ count: 0, width: 0, items: [], skip: false },
|
|
88
|
+
);
|
|
89
|
+
if (result?.items?.length === 1 && tagList.length > 1) {
|
|
90
|
+
result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
return result?.count;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const cancelDefault = (e, cb = () => {}) => {
|
|
97
|
+
e?.preventDefault();
|
|
98
|
+
e?.stopPropagation();
|
|
99
|
+
|
|
100
|
+
cb(e);
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
const renderTags = () => {
|
|
104
|
+
const tagsRenderOrder
|
|
105
|
+
= renderOrder ?? tagList.map(({ value, id }) => value ?? id);
|
|
106
|
+
|
|
107
|
+
return tagsRenderOrder.map((v, i) => {
|
|
108
|
+
const item = tagList.find(({ value, id }) => {
|
|
109
|
+
if (id) return id === v; // сначала ищем по id
|
|
110
|
+
if (value) return value === v; // потом по value
|
|
111
|
+
return false;
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
if (!item) return null;
|
|
115
|
+
|
|
116
|
+
const isHidden
|
|
117
|
+
= renderItemsCount !== -1 && staticTagsCount !== -1
|
|
118
|
+
? i >= renderItemsCount
|
|
119
|
+
: false;
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<div
|
|
123
|
+
className={`tag-list_wrapper_item ${isHidden ? 'tag-list_wrapper_item--hidden' : ''}`}
|
|
124
|
+
key={`tag-list-item-${item?.id ?? item?.value}`}
|
|
125
|
+
ref={checkedRef(item?.itemRef)}
|
|
126
|
+
>
|
|
127
|
+
<Tag
|
|
128
|
+
testId={`test-taglist-item-${item?.id ?? item?.value}`}
|
|
129
|
+
{...item}
|
|
130
|
+
onClick={onTagClick}
|
|
131
|
+
removeItem={removeItem}
|
|
132
|
+
/>
|
|
133
|
+
</div>
|
|
134
|
+
);
|
|
135
|
+
});
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
const renderMoreTags = () => {
|
|
139
|
+
if (
|
|
140
|
+
tagList?.length < shownItemsCount
|
|
141
|
+
|| !tagList?.length
|
|
142
|
+
|| disableShowMore
|
|
143
|
+
) {
|
|
144
|
+
return null;
|
|
145
|
+
}
|
|
146
|
+
const restItems = tagList.length - renderItemsCount;
|
|
147
|
+
|
|
148
|
+
if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
|
|
149
|
+
|
|
150
|
+
return (
|
|
151
|
+
<Tag
|
|
152
|
+
label={`+${restItems}`}
|
|
153
|
+
className="tag-list_wrapper_render-more"
|
|
154
|
+
onClick={
|
|
155
|
+
disableShowMore
|
|
156
|
+
? () => {}
|
|
157
|
+
: e => cancelDefault(e, () => setRenderAllInterceptor(true))
|
|
158
|
+
}
|
|
159
|
+
/>
|
|
160
|
+
);
|
|
161
|
+
};
|
|
162
|
+
const renderHideTags = () => {
|
|
163
|
+
if (
|
|
164
|
+
renderItemsCount !== tagList?.length
|
|
165
|
+
|| !withToggle
|
|
166
|
+
|| staticTagsCount === -1
|
|
167
|
+
|| staticTagsCount === tagList?.length
|
|
168
|
+
) {
|
|
169
|
+
return null;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
return (
|
|
173
|
+
<Tag
|
|
174
|
+
label="..."
|
|
175
|
+
className="tag-list_wrapper_hide-more"
|
|
176
|
+
onClick={e => cancelDefault(e, () => setRenderAllInterceptor(false))}
|
|
177
|
+
/>
|
|
178
|
+
);
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
// Set TagList Items
|
|
182
|
+
useEffect(() => {
|
|
183
|
+
setStaticTagsCount(-1);
|
|
184
|
+
setRenderItemsCount(-1);
|
|
185
|
+
setRenderAllInterceptor(false);
|
|
186
|
+
const itemsWithRef = items.map(item => ({ ...item, itemRef: createRef() }));
|
|
187
|
+
setTagList(itemsWithRef);
|
|
188
|
+
}, [items]);
|
|
189
|
+
|
|
190
|
+
// Count Row Tags
|
|
191
|
+
useLayoutEffect(() => {
|
|
192
|
+
if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
|
|
193
|
+
let computedWidth = wrapperWidth;
|
|
194
|
+
|
|
195
|
+
if (computedWidth === 0) {
|
|
196
|
+
computedWidth = Number.parseInt(
|
|
197
|
+
wrapperRef?.current
|
|
198
|
+
? window.getComputedStyle(wrapperRef?.current)?.width
|
|
199
|
+
: 0,
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
if (!isNaN(computedWidth)) {
|
|
204
|
+
setStaticTagsCount(getStaticTagsCount(computedWidth));
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}, [tagList, wrapperWidth, wrapperRef?.current]);
|
|
208
|
+
|
|
209
|
+
//
|
|
210
|
+
useLayoutEffect(() => {
|
|
211
|
+
setRenderItemsCount(staticTagsCount);
|
|
212
|
+
}, [staticTagsCount]);
|
|
213
|
+
|
|
214
|
+
// Toggle Show/Hide More Tags
|
|
215
|
+
useEffect(() => {
|
|
216
|
+
setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);
|
|
217
|
+
}, [renderAll]);
|
|
218
|
+
|
|
219
|
+
useEffect(() => {
|
|
220
|
+
if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;
|
|
221
|
+
}, [wrapperRef?.current]);
|
|
222
|
+
|
|
223
|
+
return (
|
|
224
|
+
<div
|
|
225
|
+
className={cn(
|
|
226
|
+
'tag-list_wrapper',
|
|
227
|
+
`${
|
|
228
|
+
renderItemsCount !== tagList?.length
|
|
229
|
+
|| !withToggle
|
|
230
|
+
|| staticTagsCount === -1
|
|
231
|
+
|| staticTagsCount === tagList?.length
|
|
232
|
+
? 'tag-list_wrapper--only-static-items'
|
|
233
|
+
: 'tag-list_wrapper--all-items'
|
|
234
|
+
}`,
|
|
235
|
+
className,
|
|
236
|
+
{ 'tag-list_wrapper--disabled': disabled },
|
|
237
|
+
)}
|
|
238
|
+
style={{
|
|
239
|
+
visibility: staticTagsCount === -1 ? 'hidden' : 'visible',
|
|
240
|
+
zIndex: staticTagsCount === -1 ? '-1' : 'auto',
|
|
241
|
+
}}
|
|
242
|
+
ref={wrapperRef}
|
|
243
|
+
>
|
|
244
|
+
{renderTags()}
|
|
245
|
+
{renderMoreTags()}
|
|
246
|
+
{renderHideTags()}
|
|
247
|
+
{typeof onEditClick === 'function' && (
|
|
248
|
+
<div className="tag-list__edit-trigger">
|
|
249
|
+
<Edit3 onClick={onEditClick} />
|
|
250
|
+
</div>
|
|
251
|
+
)}
|
|
252
|
+
</div>
|
|
253
|
+
);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
export default TagList;
|
|
@@ -1 +1,86 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Status from '../Status/Status';
|
|
2
|
+
|
|
3
|
+
export const WIZARD_STEP_VARIANTS = Object.freeze({
|
|
4
|
+
DEFAULT: 'default',
|
|
5
|
+
DONE: 'done',
|
|
6
|
+
ACTIVE: 'active',
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
function JSXMockComponent() {
|
|
10
|
+
const arr = [
|
|
11
|
+
{ title: 'Requested Amont', value: '$15,000' },
|
|
12
|
+
{ title: 'Repayment Amount', value: '$15,001' },
|
|
13
|
+
{ title: 'Repayment Date', value: '12/12/2021' },
|
|
14
|
+
]
|
|
15
|
+
|
|
16
|
+
const textStyles = {
|
|
17
|
+
fontSize: '14px',
|
|
18
|
+
fontWeight: 400,
|
|
19
|
+
lineHeight: '20px',
|
|
20
|
+
letterSpacing: '0.2px',
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
return arr.map((row) => {
|
|
24
|
+
return (
|
|
25
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '250px' }}>
|
|
26
|
+
<span style={textStyles}>{row.title}</span>
|
|
27
|
+
<span style={textStyles}>{row.value}</span>
|
|
28
|
+
</div>
|
|
29
|
+
)
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export const mockData = [
|
|
34
|
+
{
|
|
35
|
+
key: 'businessInfo',
|
|
36
|
+
label: 'Provide Business Info',
|
|
37
|
+
description: 'This information will help us to evaluate your application',
|
|
38
|
+
isFinished: true,
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
key: 'principal',
|
|
42
|
+
label: 'Add Principal Information',
|
|
43
|
+
description: 'A principal is essentially another name for a company owner. At some corporations, the principal is also the founder, CEO, or even the chief investor',
|
|
44
|
+
isFinished: true,
|
|
45
|
+
isOptional: true,
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
key: 'coOwners',
|
|
49
|
+
label: 'Add Co-Owners',
|
|
50
|
+
description: '{merchantName} will receive that amount from {lenderNmae}',
|
|
51
|
+
isActive: true,
|
|
52
|
+
titleSlot: <span className="custom-title-slot">$15,001</span>,
|
|
53
|
+
contentSlot: <JSXMockComponent />,
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
key: 'bankAccount',
|
|
57
|
+
label: 'Add a Bank Account',
|
|
58
|
+
description: 'Your bank account information will be used to securely and automatically transfer the funds',
|
|
59
|
+
titleSlot: <Status label="Some JSX" status="draft" />,
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
key: 'documents',
|
|
63
|
+
label: 'Upload Documents',
|
|
64
|
+
description: 'Please upload the required documents',
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
key: 'review',
|
|
68
|
+
label: 'Review & Submit',
|
|
69
|
+
description: 'Please review the information and submit your application',
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
key: 'success',
|
|
73
|
+
label: 'Success',
|
|
74
|
+
description: 'Your application has been submitted successfully',
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
key: 'failure',
|
|
78
|
+
label: 'Failure',
|
|
79
|
+
description: 'Your application has been failed',
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
key: 'pending',
|
|
83
|
+
label: 'Pending',
|
|
84
|
+
description: 'Your application is under review',
|
|
85
|
+
},
|
|
86
|
+
]
|
|
@@ -1 +1,254 @@
|
|
|
1
|
-
|
|
1
|
+
import outerDependencies from './_outerDependencies';
|
|
2
|
+
import { getIsOnlyAnObject } from './_utils';
|
|
3
|
+
|
|
4
|
+
const { jwt } = outerDependencies;
|
|
5
|
+
|
|
6
|
+
class CredentialsProcessing {
|
|
7
|
+
constructor(settings) {
|
|
8
|
+
const { credentialsProcessing } = settings;
|
|
9
|
+
const {
|
|
10
|
+
// ? Для корректной работы установки токенов в запросы от API
|
|
11
|
+
// ? нужно передавать методы getCredentials и getHeadersForAuthorize
|
|
12
|
+
getCredentials,
|
|
13
|
+
getHeadersForAuthorize, // ? На вход получит токен, должна вернуть объект для коструктора Headers
|
|
14
|
+
|
|
15
|
+
// ? Так же опционально можно передавать
|
|
16
|
+
importCredentials, // ? если он передается, то он будет применяться к выводу от вызова getCredentials
|
|
17
|
+
saveCredentials, // ? можно будет найти в объекте credentialsProcessing, чтобы использовать кастомными методами
|
|
18
|
+
|
|
19
|
+
// ! Либо вызов getCredentials, либо цепочка вызовов importCredentials(getCredentials())
|
|
20
|
+
// ! должна возвращать требуемую классом структуру
|
|
21
|
+
// ! Класс требует структуры
|
|
22
|
+
// ! - { token }, если флоу рефреш токена НЕ используется
|
|
23
|
+
// ! - { token, refreshToken, expires }, если используется флоу рефреш токена
|
|
24
|
+
|
|
25
|
+
// *********
|
|
26
|
+
|
|
27
|
+
// ? Подключает флоу рефреша токенов
|
|
28
|
+
isUseRefreshTokensPropcessing = false,
|
|
29
|
+
|
|
30
|
+
// ! Для корректной работы флоу рефреша токенов передача метода saveCredentials становится ОБЯЗАТЕЛЬНОЙ
|
|
31
|
+
|
|
32
|
+
// ? Так же для корректной работы флоу рефреша токенов нужно
|
|
33
|
+
// ? - либо
|
|
34
|
+
refreshCredentials, // ! метод должен возвращать такую же структуру как и метод getCredentials,
|
|
35
|
+
// ? на вход получит текущие креды, к выходу будет применен importCredentials, если этот метод передавался
|
|
36
|
+
// ? - либо
|
|
37
|
+
REFRESH_TOKEN_PATH, // ! REFRESH_TOKEN_PATH передается ПОЛНОСТЬЮ (глобальная адресация)!
|
|
38
|
+
CODES_USING_THE_REFRESH_ATTEMPT, // ? указывает по каким кодам ответа триггериться рефреш, массив чисел
|
|
39
|
+
|
|
40
|
+
// ? Опционально
|
|
41
|
+
REFRESH_TOKEN_FLAG = 'refreshTokenFlag',
|
|
42
|
+
INTERVAL_FOR_CHECKING_TOKEN_UPDATE = 50, // ms
|
|
43
|
+
callbackAfterRejectRefresh,
|
|
44
|
+
} = credentialsProcessing || {};
|
|
45
|
+
|
|
46
|
+
if (typeof getCredentials !== 'function')
|
|
47
|
+
throw new Error('No getCredentials method [CredentialsProcessing]');
|
|
48
|
+
if (typeof getHeadersForAuthorize !== 'function') {
|
|
49
|
+
throw new TypeError(
|
|
50
|
+
'No getHeadersForAuthorize method [CredentialsProcessing]',
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
if (importCredentials && typeof importCredentials !== 'function') {
|
|
54
|
+
throw new Error('Bad importCredentials method [CredentialsProcessing]');
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
this.isUseRefreshTokensPropcessing = isUseRefreshTokensPropcessing;
|
|
58
|
+
this.DEFAULT_CREDENTIALS = {};
|
|
59
|
+
this.getCredentialsByOuter = getCredentials;
|
|
60
|
+
this.getHeadersForAuthorize = getHeadersForAuthorize;
|
|
61
|
+
this.importCredentials = importCredentials;
|
|
62
|
+
|
|
63
|
+
// ? Если метод передан или если не передан, но включен флоу обновления токенов (тогда saveCredentials обязателен)
|
|
64
|
+
if (saveCredentials || isUseRefreshTokensPropcessing) {
|
|
65
|
+
if (typeof saveCredentials !== 'function')
|
|
66
|
+
throw new Error('No saveCredentials method [CredentialsProcessing]');
|
|
67
|
+
else this.saveCredentials = saveCredentials;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
if (isUseRefreshTokensPropcessing) {
|
|
71
|
+
if (typeof refreshCredentials === 'function') {
|
|
72
|
+
this.refreshCredentialsByOuter = refreshCredentials;
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
if (
|
|
76
|
+
typeof this.refreshCredentialsByOuter === 'function'
|
|
77
|
+
&& typeof REFRESH_TOKEN_PATH !== 'string'
|
|
78
|
+
) {
|
|
79
|
+
throw new TypeError('No REFRESH_TOKEN_PATH [CredentialsProcessing]');
|
|
80
|
+
}
|
|
81
|
+
this.REFRESH_TOKEN_PATH = REFRESH_TOKEN_PATH;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
if (!Array.isArray(CODES_USING_THE_REFRESH_ATTEMPT)) {
|
|
85
|
+
throw new TypeError(
|
|
86
|
+
'No CODES_USING_THE_REFRESH_ATTEMPT [CredentialsProcessing]',
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
if (
|
|
90
|
+
!CODES_USING_THE_REFRESH_ATTEMPT.every(i => typeof i === 'number')
|
|
91
|
+
) {
|
|
92
|
+
throw new Error(
|
|
93
|
+
'Invalid format of CODES_USING_THE_REFRESH_ATTEMPT elements [CredentialsProcessing]',
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if (typeof REFRESH_TOKEN_FLAG !== 'string')
|
|
98
|
+
throw new Error('Bad REFRESH_TOKEN_FLAG [CredentialsProcessing]');
|
|
99
|
+
if (typeof INTERVAL_FOR_CHECKING_TOKEN_UPDATE !== 'number') {
|
|
100
|
+
throw new TypeError(
|
|
101
|
+
'Bad INTERVAL_FOR_CHECKING_TOKEN_UPDATE [CredentialsProcessing]',
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
if (typeof INTERVAL_FOR_CHECKING_TOKEN_UPDATE !== 'number') {
|
|
105
|
+
throw new TypeError(
|
|
106
|
+
'Bad INTERVAL_FOR_CHECKING_TOKEN_UPDATE [CredentialsProcessing]',
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
if (
|
|
110
|
+
callbackAfterRejectRefresh
|
|
111
|
+
&& typeof callbackAfterRejectRefresh !== 'function'
|
|
112
|
+
) {
|
|
113
|
+
throw new Error(
|
|
114
|
+
'Bad INTERVAL_FOR_CHECKING_TOKEN_UPDATE [CredentialsProcessing]',
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
this.CODES_USING_THE_REFRESH_ATTEMPT = CODES_USING_THE_REFRESH_ATTEMPT;
|
|
119
|
+
this.REFRESH_TOKEN_FLAG = REFRESH_TOKEN_FLAG;
|
|
120
|
+
this.INTERVAL_FOR_CHECKING_TOKEN_UPDATE
|
|
121
|
+
= INTERVAL_FOR_CHECKING_TOKEN_UPDATE;
|
|
122
|
+
|
|
123
|
+
if (callbackAfterRejectRefresh)
|
|
124
|
+
this.callbackAfterRejectRefresh = callbackAfterRejectRefresh;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
getIsTokenStartRefresh() {
|
|
129
|
+
return localStorage.getItem(this.REFRESH_TOKEN_FLAG);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
setIsTokenStartRefresh() {
|
|
133
|
+
localStorage.setItem(this.REFRESH_TOKEN_FLAG, true);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
removeIsTokenStartRefresh() {
|
|
137
|
+
localStorage.removeItem(this.REFRESH_TOKEN_FLAG);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
async getCredentials(isCatchCallbackProcess, callback) {
|
|
141
|
+
let credentials = await this.getCredentialsByOuter();
|
|
142
|
+
|
|
143
|
+
if (typeof this.importCredentials === 'function')
|
|
144
|
+
credentials = await this.importCredentials(credentials);
|
|
145
|
+
if (!getIsOnlyAnObject(credentials)) credentials = {};
|
|
146
|
+
|
|
147
|
+
const token = credentials.token || null;
|
|
148
|
+
|
|
149
|
+
if (token && !isCatchCallbackProcess) {
|
|
150
|
+
let decoded;
|
|
151
|
+
try {
|
|
152
|
+
decoded = jwt.decode(token);
|
|
153
|
+
}
|
|
154
|
+
catch {
|
|
155
|
+
decoded = null;
|
|
156
|
+
}
|
|
157
|
+
const currentTime = Date.now() / 1000;
|
|
158
|
+
if (decoded !== null && Number(decoded.exp) < currentTime)
|
|
159
|
+
credentials = { ...credentials, isNeedRefresh: true };
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
if (callback) await callback({ ...credentials, isCatchCallbackProcess });
|
|
163
|
+
return { ...credentials, isCatchCallbackProcess };
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
async refreshCredentials(currentCredentials, callback) {
|
|
167
|
+
const CONTEXT = this;
|
|
168
|
+
|
|
169
|
+
async function finalize(cred) {
|
|
170
|
+
if (callback) await callback(cred);
|
|
171
|
+
return Promise.resolve(cred).then(async (res) => {
|
|
172
|
+
CONTEXT.removeIsTokenStartRefresh();
|
|
173
|
+
return res;
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
if (!currentCredentials?.token || !currentCredentials?.refreshToken)
|
|
178
|
+
return finalize(CONTEXT.DEFAULT_CREDENTIALS);
|
|
179
|
+
|
|
180
|
+
// ! ВНИМАНИЕ! Данный механизм рефреша принят на проекте finturfreactfrontend (админка)
|
|
181
|
+
// ! На кабинете он ТОЧНО НЕ ТАКОЙ
|
|
182
|
+
async function refreshCredentialsByDefault() {
|
|
183
|
+
const { token, refreshToken } = currentCredentials;
|
|
184
|
+
const headers = new Headers();
|
|
185
|
+
headers.append(...Object.entries(CONTEXT.getHeadersForAuthorize(token)));
|
|
186
|
+
|
|
187
|
+
const body = new FormData();
|
|
188
|
+
body.append('grant_type', 'refresh_token');
|
|
189
|
+
body.append('refresh_token', refreshToken);
|
|
190
|
+
body.append('client_id', 'oauth');
|
|
191
|
+
body.append('client_secret', 'secret');
|
|
192
|
+
body.append('access_type', 'offline');
|
|
193
|
+
|
|
194
|
+
return fetch(`${CONTEXT.REFRESH_TOKEN_PATH}`, {
|
|
195
|
+
mode: 'cors',
|
|
196
|
+
method: 'POST',
|
|
197
|
+
headers,
|
|
198
|
+
body,
|
|
199
|
+
redirect: 'follow',
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
// ? Передавайте собственный refreshCredentials при получении экземляра RESTAPI, если не уверены,
|
|
204
|
+
// ? что механизм рефреша токенов ИМЕННО ТАКОЙ как в ф-и refreshCredentialsByDefault!
|
|
205
|
+
// ! currentCredentials передаются в формате класса! ({ token, refreshToken, expires })
|
|
206
|
+
const newCredentials
|
|
207
|
+
= typeof CONTEXT.refreshCredentialsByOuter === 'function'
|
|
208
|
+
? await CONTEXT.refreshCredentialsByOuter(currentCredentials)
|
|
209
|
+
: await refreshCredentialsByDefault();
|
|
210
|
+
|
|
211
|
+
return finalize(newCredentials);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
async waitRefresh(isNeedRefresh) {
|
|
215
|
+
return new Promise((resolve) => {
|
|
216
|
+
if (!this.getIsTokenStartRefresh()) {
|
|
217
|
+
if (isNeedRefresh) this.setIsTokenStartRefresh();
|
|
218
|
+
resolve();
|
|
219
|
+
}
|
|
220
|
+
else {
|
|
221
|
+
const intervalId = setInterval(() => {
|
|
222
|
+
if (!this.getIsTokenStartRefresh()) {
|
|
223
|
+
clearInterval(intervalId);
|
|
224
|
+
resolve();
|
|
225
|
+
}
|
|
226
|
+
}, this.INTERVAL_FOR_CHECKING_TOKEN_UPDATE);
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
async processCredentials(cred) {
|
|
232
|
+
if (!cred.isNeedRefresh && !cred.isCatchCallbackProcess) return cred;
|
|
233
|
+
|
|
234
|
+
const CONTEXT = this;
|
|
235
|
+
|
|
236
|
+
return CONTEXT.refreshCredentials(cred, response =>
|
|
237
|
+
CONTEXT.saveCredentials(response)).then(() => {
|
|
238
|
+
return new Promise((resolve) => {
|
|
239
|
+
setTimeout(async () => {
|
|
240
|
+
const newCredentials = await CONTEXT.getCredentials();
|
|
241
|
+
if (!newCredentials?.token) {
|
|
242
|
+
newCredentials.isRefreshFailed = true;
|
|
243
|
+
setTimeout(() => {
|
|
244
|
+
CONTEXT?.callbackAfterRejectRefresh?.();
|
|
245
|
+
}, 0);
|
|
246
|
+
}
|
|
247
|
+
resolve(newCredentials);
|
|
248
|
+
}, 0);
|
|
249
|
+
});
|
|
250
|
+
});
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
export default CredentialsProcessing;
|