@geneui/components 2.11.2 → 2.12.1
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/{ActionableList.js → ActionableList/index.js} +83 -152
- package/{AdvancedSearch.js → AdvancedSearch/index.js} +291 -304
- package/Alert/index.js +97 -0
- package/Avatar/index.js +30 -0
- package/Badge/index.js +75 -0
- package/{Breadcrumb.js → Breadcrumb/index.js} +32 -31
- package/BusyLoader/index.js +68 -0
- package/Button/index.js +129 -0
- package/CHANGELOG.md +40 -0
- package/{Card.js → Card/index.js} +82 -94
- package/{CardList.js → CardList/index.js} +118 -165
- package/{CellMeasurerCache-b786dd93.js → CellMeasurerCache-bc2163c1.js} +2 -2
- package/{index-9164a86d.js → Charts/index.js} +17103 -30447
- package/{Checkbox.js → Checkbox/index.js} +37 -38
- package/{CheckboxGroup.js → CheckboxGroup/index.js} +41 -42
- package/{CheckboxGroupWithSearch.js → CheckboxGroupWithSearch/index.js} +64 -65
- package/{Collapse.js → Collapse/index.js} +28 -29
- package/{ColorPicker.js → ColorPicker/index.js} +16 -16
- package/ComboBox/index.js +525 -0
- package/Counter/index.js +310 -0
- package/{DateFilter.js → DateFilter/index.js} +46 -43
- package/{DatePicker.js → DatePicker/index.js} +106 -108
- package/{index-0199942c.js → DatePickerInput/index.js} +103 -89
- package/{Divider.js → Divider/index.js} +9 -10
- package/{Drawer.js → Drawer/index.js} +40 -41
- package/Dropdown/index.js +41 -0
- package/{Editor.js → Editor/index.js} +165 -164
- package/{Empty.js → Empty/index.js} +12 -13
- package/{ExtendedInput.js → ExtendedInput/index.js} +81 -71
- package/Form/index.js +86 -0
- package/{FormContainer.js → FormContainer/index.js} +25 -26
- package/FormableCheckbox/index.js +26 -0
- package/FormableDatePicker/index.js +42 -0
- package/FormableDropdown/index.js +48 -0
- package/FormableEditor/index.js +24 -0
- package/{FormableHOC-21051057.js → FormableHOC-55263162.js} +3 -3
- package/FormableMultiSelectDropdown/index.js +48 -0
- package/FormableNumberInput/index.js +32 -0
- package/FormableRadio/index.js +22 -0
- package/FormableSwitcher/index.js +22 -0
- package/FormableTextInput/index.js +32 -0
- package/FormableUploader/index.js +42 -0
- package/GeneUIProvider/index.js +282 -0
- package/{Grid.js → Grid/index.js} +27 -27
- package/Holder/index.js +261 -0
- package/{Icon.js → Icon/index.js} +9 -10
- package/Image/index.js +129 -0
- package/ImagePreview/index.js +481 -0
- package/{KeyValue.js → KeyValue/index.js} +11 -12
- package/LICENSE +21 -0
- package/Label/index.js +57 -0
- package/LinkButton/index.js +67 -0
- package/{Menu.js → Menu/index.js} +27 -28
- package/MobileNavigation/index.js +94 -0
- package/{MobilePopup.js → MobilePopup/index.js} +42 -41
- package/{Modal.js → Modal/index.js} +39 -40
- package/ModuleTitle/index.js +143 -0
- package/{NavigationMenu.js → NavigationMenu/index.js} +30 -29
- package/Notification/index.js +119 -0
- package/Option/index.js +184 -0
- package/Overlay/index.js +189 -0
- package/Overspread/index.js +287 -0
- package/{Pagination.js → Pagination/index.js} +35 -34
- package/Paper/index.js +96 -0
- package/{index-084588e9.js → Popover/index.js} +48 -58
- package/{index-5e96cb4d.js → PopoverV2/index.js} +57 -1006
- package/{Portal.js → Portal/index.js} +7 -8
- package/{Products.js → Products/index.js} +20 -21
- package/Profile/index.js +585 -0
- package/Progress/index.js +199 -0
- package/{QRCode.js → QRCode/index.js} +4 -6
- package/{Radio.js → Radio/index.js} +25 -26
- package/{RadioGroup.js → RadioGroup/index.js} +17 -18
- package/{index-00fe8887.js → Range/index.js} +29 -32
- package/RichEditor/index.js +13 -0
- package/{RichEditor-98accead.js → RichEditor-8b9c3afa.js} +18 -18
- package/{Scrollbar.js → Scrollbar/index.js} +15 -17
- package/{Search.js → Search/index.js} +25 -24
- package/SearchWithDropdown/index.js +138 -0
- package/Section/index.js +61 -0
- package/{SkeletonLoader.js → SkeletonLoader/index.js} +13 -14
- package/{Slider.js → Slider/index.js} +46 -43
- package/Status/index.js +103 -0
- package/Steps/index.js +313 -0
- package/{index-897d8240.js → SuggestionList/index.js} +15 -38
- package/{Switcher.js → Switcher/index.js} +30 -31
- package/Table/index.js +53 -0
- package/{TableCompositions.js → TableCompositions/index.js} +132 -168
- package/Tabs/index.js +235 -0
- package/Tag/index.js +102 -0
- package/{TextLink.js → TextLink/index.js} +3 -3
- package/{Textarea.js → Textarea/index.js} +66 -65
- package/{Time.js → Time/index.js} +13 -14
- package/TimePicker/index.js +556 -0
- package/Timeline/index.js +113 -0
- package/Title/index.js +65 -0
- package/{Toaster.js → Toaster/index.js} +19 -20
- package/{Tooltip.js → Tooltip/index.js} +27 -28
- package/{TransferList.js → TransferList/index.js} +44 -55
- package/{index-135b9d17.js → Uploader/index.js} +119 -116
- package/{ValidatableCheckbox.js → ValidatableCheckbox/index.js} +23 -24
- package/{ValidatableDatePicker.js → ValidatableDatePicker/index.js} +45 -42
- package/ValidatableDropdown/index.js +139 -0
- package/ValidatableElements/index.js +68 -0
- package/ValidatableMultiSelectDropdown/index.js +150 -0
- package/{ValidatableNumberInput.js → ValidatableNumberInput/index.js} +34 -33
- package/{ValidatableRadio.js → ValidatableRadio/index.js} +19 -20
- package/{ValidatableSwitcher.js → ValidatableSwitcher/index.js} +19 -20
- package/{ValidatableTextInput.js → ValidatableTextInput/index.js} +32 -31
- package/{ValidatableTimeInput.js → ValidatableTimeInput/index.js} +31 -30
- package/{ValidatableUploader.js → ValidatableUploader/index.js} +36 -34
- package/Widget/index.js +227 -0
- package/config-0ca92874.js +31 -0
- package/{configs-91c86664.js → configs-fed6ac34.js} +28 -1
- package/hooks/useBodyScroll.js +16 -0
- package/hooks/useClick.js +18 -0
- package/{useClickOutside-5183e396.js → hooks/useClickOutside.js} +1 -1
- package/hooks/useDebounceHook.js +16 -0
- package/{useDeviceType-dd51db38.js → hooks/useDeviceType.js} +4 -3
- package/hooks/useDidMount.js +15 -0
- package/{useEllipsisDetection-ef536015.js → hooks/useEllipsisDetection.js} +1 -1
- package/hooks/useForceUpdate.js +8 -0
- package/hooks/useImgDownload.js +18 -0
- package/{useKeyDown-38102ae7.js → hooks/useKeyDown.js} +1 -1
- package/hooks/useMount.js +13 -0
- package/hooks/useMutationObserver.js +21 -0
- package/hooks/usePrevious.js +10 -0
- package/hooks/useThrottle.js +16 -0
- package/hooks/useToggle.js +11 -0
- package/hooks/useUpdatableRef.js +14 -0
- package/hooks/useUpdate.js +10 -0
- package/{useWidth-9f4647f8.js → hooks/useWidth.js} +2 -2
- package/{useWindowSize-80369d76.js → hooks/useWindowSize.js} +1 -1
- package/index-45eafea6.js +90 -0
- package/index-583e0b30.js +4 -0
- package/{index-8c98317a.js → index-78d2ea5b.js} +678 -752
- package/{index-ac59cb10.js → index-a0e4e333.js} +6 -6
- package/{index-e8776f3d.js → index-b1e429a7.js} +1 -1
- package/index-bd525a3a.js +10054 -0
- package/index.d.ts +115 -0
- package/index.js +138 -113
- package/index.mobile.d.ts +16 -0
- package/jsx-runtime-57b40d9e.js +957 -0
- package/lib/atoms/Avatar/Avatar.d.ts +34 -0
- package/lib/atoms/Avatar/index.d.ts +1 -0
- package/lib/atoms/LinkButton/LinkButton.d.ts +46 -0
- package/lib/atoms/LinkButton/index.d.ts +1 -0
- package/{objectWithoutPropertiesLoose-299691d8.js → objectWithoutPropertiesLoose-d8a4a68c.js} +12 -12
- package/package.json +42 -22
- package/{rangeAndSlider-20599da4.js → rangeAndSlider-0301a458.js} +220 -375
- package/{react-beautiful-dnd.esm-38c37304.js → react-beautiful-dnd.esm-04c14563.js} +9 -9
- package/react-lifecycles-compat.es-6e1f3768.js +158 -0
- package/Alert.js +0 -98
- package/Avatar.js +0 -77
- package/Badge.js +0 -76
- package/BusyLoader.js +0 -69
- package/Button.js +0 -130
- package/Charts.js +0 -99
- package/ComboBox.js +0 -99
- package/Counter.js +0 -99
- package/DatePickerInput.js +0 -30
- package/Dropdown.js +0 -99
- package/Form.js +0 -116
- package/FormableCheckbox.js +0 -27
- package/FormableDatePicker.js +0 -39
- package/FormableDropdown.js +0 -105
- package/FormableEditor.js +0 -24
- package/FormableMultiSelectDropdown.js +0 -105
- package/FormableNumberInput.js +0 -31
- package/FormableRadio.js +0 -23
- package/FormableSwitcher.js +0 -23
- package/FormableTextInput.js +0 -31
- package/FormableUploader.js +0 -40
- package/GeneUIProvider.js +0 -256
- package/Holder.js +0 -99
- package/Image.js +0 -130
- package/ImagePreview.js +0 -99
- package/Label.js +0 -58
- package/LinkButton.js +0 -104
- package/MobileNavigation.js +0 -95
- package/ModuleTitle.js +0 -99
- package/Notification.js +0 -120
- package/Option.js +0 -186
- package/Overlay.js +0 -99
- package/Overspread.js +0 -343
- package/Paper.js +0 -97
- package/Popover.js +0 -20
- package/PopoverV2.js +0 -19
- package/Profile.js +0 -99
- package/Progress.js +0 -200
- package/Range.js +0 -14
- package/RichEditor.js +0 -13
- package/SearchWithDropdown.js +0 -195
- package/Section.js +0 -62
- package/Status.js +0 -104
- package/Steps.js +0 -312
- package/SuggestionList.js +0 -15
- package/Table.js +0 -102
- package/Tabs.js +0 -236
- package/Tag.js +0 -103
- package/TimePicker.js +0 -99
- package/Timeline.js +0 -114
- package/Title.js +0 -66
- package/Uploader.js +0 -32
- package/ValidatableDropdown.js +0 -99
- package/ValidatableElements.js +0 -99
- package/ValidatableMultiSelectDropdown.js +0 -99
- package/Widget.js +0 -99
- package/globalStyling-9c60a159.js +0 -4
- package/index-2030e31c.js +0 -4
- package/index-b7a33c58.js +0 -11
- package/index-e0af0caf.js +0 -1182
- package/useMount-6fef51a5.js +0 -9
|
@@ -1,35 +1,38 @@
|
|
|
1
|
-
import { _ as _extends } from '
|
|
1
|
+
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
2
2
|
import React__default, { forwardRef, useCallback, useState, useEffect } from 'react';
|
|
3
|
-
import
|
|
4
|
-
import { n as noop } from '
|
|
5
|
-
import
|
|
6
|
-
import '
|
|
7
|
-
import
|
|
8
|
-
import { d as dayjsWithPlugins, v as validateDatePickerField } from '
|
|
9
|
-
import { c as checkTimeValidation } from '
|
|
10
|
-
import { g as getBrowserDateFormat } from '
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import { n as noop } from '../index-a0e4e333.js';
|
|
5
|
+
import useMount from '../hooks/useMount.js';
|
|
6
|
+
import '../configs-fed6ac34.js';
|
|
7
|
+
import DatePickerInput from '../DatePickerInput/index.js';
|
|
8
|
+
import { d as dayjsWithPlugins, v as validateDatePickerField } from '../dateValidation-67caec66.js';
|
|
9
|
+
import { c as checkTimeValidation } from '../checkTimeValidation-e56771be.js';
|
|
10
|
+
import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
|
|
11
11
|
import 'react-dom';
|
|
12
|
-
import '
|
|
13
|
-
import '
|
|
14
|
-
import '
|
|
15
|
-
import '
|
|
16
|
-
import '
|
|
17
|
-
import '
|
|
18
|
-
import '
|
|
19
|
-
import '
|
|
20
|
-
import '
|
|
21
|
-
import '
|
|
22
|
-
import '
|
|
23
|
-
import '
|
|
24
|
-
import '
|
|
25
|
-
import '
|
|
26
|
-
import '
|
|
27
|
-
import '
|
|
28
|
-
import '
|
|
29
|
-
import '
|
|
30
|
-
import '
|
|
31
|
-
import '
|
|
32
|
-
import '
|
|
12
|
+
import '../_commonjsHelpers-24198af3.js';
|
|
13
|
+
import '../style-inject.es-746bb8ed.js';
|
|
14
|
+
import '../index-6ff23041.js';
|
|
15
|
+
import '../hooks/useClick.js';
|
|
16
|
+
import '../hooks/useKeyDown.js';
|
|
17
|
+
import '../hooks/useDeviceType.js';
|
|
18
|
+
import '../hooks/useWindowSize.js';
|
|
19
|
+
import '../PopoverV2/index.js';
|
|
20
|
+
import '../jsx-runtime-57b40d9e.js';
|
|
21
|
+
import '../index-122432cd.js';
|
|
22
|
+
import '../hooks/useClickOutside.js';
|
|
23
|
+
import '../Scrollbar/index.js';
|
|
24
|
+
import '../GeneUIProvider/index.js';
|
|
25
|
+
import '../debounce-4419bc2f.js';
|
|
26
|
+
import '../ExtendedInput/index.js';
|
|
27
|
+
import '../hooks/useEllipsisDetection.js';
|
|
28
|
+
import '../Icon/index.js';
|
|
29
|
+
import '../SuggestionList/index.js';
|
|
30
|
+
import '../config-0ca92874.js';
|
|
31
|
+
import '../Tooltip/index.js';
|
|
32
|
+
import '../Popover-f4d1cac0.js';
|
|
33
|
+
import '../DatePicker/index.js';
|
|
34
|
+
import '../guid-8ddf77b3.js';
|
|
35
|
+
import '../Button/index.js';
|
|
33
36
|
|
|
34
37
|
const nonLettersRegex = /[\W_]+/g;
|
|
35
38
|
const hourFormats = ['H', 'HH', 'h', 'hh'];
|
|
@@ -257,51 +260,51 @@ DatePicker.propTypes = {
|
|
|
257
260
|
/**
|
|
258
261
|
* Value for date picker
|
|
259
262
|
*/
|
|
260
|
-
value:
|
|
263
|
+
value: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
|
261
264
|
/**
|
|
262
265
|
* Callback fires when date changes
|
|
263
266
|
*/
|
|
264
|
-
onChange:
|
|
267
|
+
onChange: PropTypes.func,
|
|
265
268
|
/**
|
|
266
269
|
* Callback fires when input blur
|
|
267
270
|
*/
|
|
268
|
-
onBlur:
|
|
271
|
+
onBlur: PropTypes.func,
|
|
269
272
|
/**
|
|
270
273
|
* Define is field required or no.
|
|
271
274
|
*/
|
|
272
|
-
required:
|
|
275
|
+
required: PropTypes.bool,
|
|
273
276
|
/**
|
|
274
277
|
* Define is range picker with time or no
|
|
275
278
|
*/
|
|
276
|
-
withTime:
|
|
279
|
+
withTime: PropTypes.bool,
|
|
277
280
|
/**
|
|
278
281
|
* Define is single date picker or with range
|
|
279
282
|
*/
|
|
280
|
-
withRange:
|
|
283
|
+
withRange: PropTypes.bool,
|
|
281
284
|
/**
|
|
282
285
|
* Callback fires when field validation state changes
|
|
283
286
|
*/
|
|
284
|
-
isFieldValid:
|
|
287
|
+
isFieldValid: PropTypes.func,
|
|
285
288
|
/**
|
|
286
289
|
* Additional validation state
|
|
287
290
|
*/
|
|
288
|
-
isValid:
|
|
291
|
+
isValid: PropTypes.bool,
|
|
289
292
|
/**
|
|
290
293
|
* Minimum date value
|
|
291
294
|
*/
|
|
292
|
-
min:
|
|
295
|
+
min: PropTypes.string,
|
|
293
296
|
/**
|
|
294
297
|
* Maximum date value
|
|
295
298
|
*/
|
|
296
|
-
max:
|
|
299
|
+
max: PropTypes.string,
|
|
297
300
|
/**
|
|
298
301
|
* Date format
|
|
299
302
|
*/
|
|
300
|
-
format:
|
|
303
|
+
format: PropTypes.string,
|
|
301
304
|
/**
|
|
302
305
|
* Allow validation without onBlur, validate field when mount
|
|
303
306
|
*/
|
|
304
|
-
forceAllowValidation:
|
|
307
|
+
forceAllowValidation: PropTypes.bool
|
|
305
308
|
};
|
|
306
309
|
DatePicker.defaultProps = {
|
|
307
310
|
isValid: true,
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
2
|
+
import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import useMount from '../hooks/useMount.js';
|
|
5
|
+
import '../configs-fed6ac34.js';
|
|
6
|
+
import { n as noop } from '../index-a0e4e333.js';
|
|
7
|
+
import { D as Dropdown } from '../index-bd525a3a.js';
|
|
8
|
+
import '../dateValidation-67caec66.js';
|
|
9
|
+
import '../_commonjsHelpers-24198af3.js';
|
|
10
|
+
import 'react-dom';
|
|
11
|
+
import '../objectWithoutPropertiesLoose-d8a4a68c.js';
|
|
12
|
+
import '../react-lifecycles-compat.es-6e1f3768.js';
|
|
13
|
+
import '../clsx.m-2bb6df4b.js';
|
|
14
|
+
import '../index-6ff23041.js';
|
|
15
|
+
import '../hooks/useClick.js';
|
|
16
|
+
import '../hooks/useKeyDown.js';
|
|
17
|
+
import '../hooks/useDeviceType.js';
|
|
18
|
+
import '../hooks/useWindowSize.js';
|
|
19
|
+
import '../hooks/useClickOutside.js';
|
|
20
|
+
import '../hooks/useUpdatableRef.js';
|
|
21
|
+
import '../hooks/useForceUpdate.js';
|
|
22
|
+
import '../hooks/useEllipsisDetection.js';
|
|
23
|
+
import '../BusyLoader/index.js';
|
|
24
|
+
import '../Icon/index.js';
|
|
25
|
+
import '../style-inject.es-746bb8ed.js';
|
|
26
|
+
import '../Empty/index.js';
|
|
27
|
+
import '../Popover/index.js';
|
|
28
|
+
import '../Popover-f4d1cac0.js';
|
|
29
|
+
import '../index-122432cd.js';
|
|
30
|
+
import '../GeneUIProvider/index.js';
|
|
31
|
+
import '../Portal/index.js';
|
|
32
|
+
import '../Scrollbar/index.js';
|
|
33
|
+
import '../guid-8ddf77b3.js';
|
|
34
|
+
import '../Tooltip/index.js';
|
|
35
|
+
import '../ExtendedInput/index.js';
|
|
36
|
+
import '../SuggestionList/index.js';
|
|
37
|
+
import '../config-0ca92874.js';
|
|
38
|
+
import '../Checkbox/index.js';
|
|
39
|
+
import '../checkboxRadioSwitcher-5b69d7bd.js';
|
|
40
|
+
import '../index-583e0b30.js';
|
|
41
|
+
import '../Tag/index.js';
|
|
42
|
+
|
|
43
|
+
function checkValidation(required, isValid, value) {
|
|
44
|
+
if (isValid === false) return {
|
|
45
|
+
key: 'customValidation',
|
|
46
|
+
isValid: false
|
|
47
|
+
};
|
|
48
|
+
if ((value === 'undefined' || value === null) && required) return {
|
|
49
|
+
key: 'required',
|
|
50
|
+
isValid: false
|
|
51
|
+
};
|
|
52
|
+
return {
|
|
53
|
+
key: null,
|
|
54
|
+
isValid: true
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
const DropdownField = /*#__PURE__*/forwardRef((props, ref) => {
|
|
58
|
+
const {
|
|
59
|
+
onChange,
|
|
60
|
+
value,
|
|
61
|
+
isValid,
|
|
62
|
+
required,
|
|
63
|
+
isFieldValid,
|
|
64
|
+
forceAllowValidation,
|
|
65
|
+
valueKey,
|
|
66
|
+
...restProps
|
|
67
|
+
} = props;
|
|
68
|
+
const isControlled = 'value' in props && typeof value !== 'undefined';
|
|
69
|
+
const [val, setVal] = useState(value || null);
|
|
70
|
+
const [validationState, setValidationState] = useState(true);
|
|
71
|
+
const [allowValidation, setAllowValidation] = useState(false);
|
|
72
|
+
const validate = useCallback(() => checkValidation(required, isValid, val).isValid, [val, required, isValid]);
|
|
73
|
+
const handleChange = useCallback(param => {
|
|
74
|
+
const {
|
|
75
|
+
[valueKey]: value = null
|
|
76
|
+
} = param || {};
|
|
77
|
+
const validation = checkValidation(required, isValid, value);
|
|
78
|
+
setValidationState(validation.isValid);
|
|
79
|
+
setVal(value);
|
|
80
|
+
onChange(param, validation.isValid, validation.key);
|
|
81
|
+
}, [onChange, required, isValid, valueKey]);
|
|
82
|
+
|
|
83
|
+
// we use this because need to show field validation after onClose
|
|
84
|
+
const onBlur = useCallback(() => setAllowValidation(true), []);
|
|
85
|
+
const onClear = useCallback(() => {
|
|
86
|
+
const validState = checkValidation(required, isValid, null).isValid;
|
|
87
|
+
setValidationState(validState);
|
|
88
|
+
}, [required, isValid]);
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
isControlled && setValidationState(validate());
|
|
91
|
+
}, [isControlled, validate]);
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
setVal(value);
|
|
94
|
+
}, [value]);
|
|
95
|
+
|
|
96
|
+
// need this for handling user's `isValid` prop
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
setValidationState(isValid);
|
|
99
|
+
}, [isValid]);
|
|
100
|
+
|
|
101
|
+
// call function when validation state changes
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
isFieldValid(validationState);
|
|
104
|
+
}, [validationState]);
|
|
105
|
+
|
|
106
|
+
// set Allow validation true if submit button clicked
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
forceAllowValidation && setAllowValidation(true);
|
|
109
|
+
}, [forceAllowValidation]);
|
|
110
|
+
useMount(() => setValidationState(validate()));
|
|
111
|
+
return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
|
|
112
|
+
required: required,
|
|
113
|
+
ref: ref,
|
|
114
|
+
value: val,
|
|
115
|
+
isValid: !allowValidation || validationState,
|
|
116
|
+
onChange: handleChange,
|
|
117
|
+
onBlur: onBlur,
|
|
118
|
+
onClear: onClear,
|
|
119
|
+
valueKey: valueKey
|
|
120
|
+
}, restProps));
|
|
121
|
+
});
|
|
122
|
+
DropdownField.propTypes = {
|
|
123
|
+
value: PropTypes.any,
|
|
124
|
+
onChange: PropTypes.func,
|
|
125
|
+
required: PropTypes.bool,
|
|
126
|
+
readOnly: PropTypes.bool,
|
|
127
|
+
isValid: PropTypes.bool,
|
|
128
|
+
forceAllowValidation: PropTypes.bool,
|
|
129
|
+
isFieldValid: PropTypes.func
|
|
130
|
+
};
|
|
131
|
+
DropdownField.defaultProps = {
|
|
132
|
+
required: false,
|
|
133
|
+
readOnly: false,
|
|
134
|
+
valueKey: 'value',
|
|
135
|
+
isFieldValid: noop,
|
|
136
|
+
onChange: noop
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
export { DropdownField as default };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
export { default as ValidatableDropdown } from '../ValidatableDropdown/index.js';
|
|
2
|
+
export { default as MultiSelectDropdownField } from '../ValidatableMultiSelectDropdown/index.js';
|
|
3
|
+
export { default as ValidatableEditor } from '../Editor/index.js';
|
|
4
|
+
export { default as ValidatableUploader } from '../ValidatableUploader/index.js';
|
|
5
|
+
export { default as ValidatableRadio } from '../ValidatableRadio/index.js';
|
|
6
|
+
export { default as ValidatableCheckbox } from '../ValidatableCheckbox/index.js';
|
|
7
|
+
export { default as ValidatableSwitcher } from '../ValidatableSwitcher/index.js';
|
|
8
|
+
export { default as ValidatableNumberInput } from '../ValidatableNumberInput/index.js';
|
|
9
|
+
export { default as ValidatableTextInput } from '../ValidatableTextInput/index.js';
|
|
10
|
+
export { default as ValidatableDatePicker } from '../ValidatableDatePicker/index.js';
|
|
11
|
+
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
12
|
+
import 'react';
|
|
13
|
+
import 'prop-types';
|
|
14
|
+
import '../hooks/useMount.js';
|
|
15
|
+
import '../index-a0e4e333.js';
|
|
16
|
+
import '../dateValidation-67caec66.js';
|
|
17
|
+
import '../_commonjsHelpers-24198af3.js';
|
|
18
|
+
import 'react-dom';
|
|
19
|
+
import '../configs-fed6ac34.js';
|
|
20
|
+
import '../index-bd525a3a.js';
|
|
21
|
+
import '../objectWithoutPropertiesLoose-d8a4a68c.js';
|
|
22
|
+
import '../react-lifecycles-compat.es-6e1f3768.js';
|
|
23
|
+
import '../clsx.m-2bb6df4b.js';
|
|
24
|
+
import '../index-6ff23041.js';
|
|
25
|
+
import '../hooks/useClick.js';
|
|
26
|
+
import '../hooks/useKeyDown.js';
|
|
27
|
+
import '../hooks/useDeviceType.js';
|
|
28
|
+
import '../hooks/useWindowSize.js';
|
|
29
|
+
import '../hooks/useClickOutside.js';
|
|
30
|
+
import '../hooks/useUpdatableRef.js';
|
|
31
|
+
import '../hooks/useForceUpdate.js';
|
|
32
|
+
import '../hooks/useEllipsisDetection.js';
|
|
33
|
+
import '../BusyLoader/index.js';
|
|
34
|
+
import '../Icon/index.js';
|
|
35
|
+
import '../style-inject.es-746bb8ed.js';
|
|
36
|
+
import '../Empty/index.js';
|
|
37
|
+
import '../Popover/index.js';
|
|
38
|
+
import '../Popover-f4d1cac0.js';
|
|
39
|
+
import '../index-122432cd.js';
|
|
40
|
+
import '../GeneUIProvider/index.js';
|
|
41
|
+
import '../Portal/index.js';
|
|
42
|
+
import '../Scrollbar/index.js';
|
|
43
|
+
import '../guid-8ddf77b3.js';
|
|
44
|
+
import '../Tooltip/index.js';
|
|
45
|
+
import '../ExtendedInput/index.js';
|
|
46
|
+
import '../SuggestionList/index.js';
|
|
47
|
+
import '../config-0ca92874.js';
|
|
48
|
+
import '../Checkbox/index.js';
|
|
49
|
+
import '../checkboxRadioSwitcher-5b69d7bd.js';
|
|
50
|
+
import '../index-583e0b30.js';
|
|
51
|
+
import '../Tag/index.js';
|
|
52
|
+
import '../index-45eafea6.js';
|
|
53
|
+
import '../Button/index.js';
|
|
54
|
+
import '../Uploader/index.js';
|
|
55
|
+
import '../Grid/index.js';
|
|
56
|
+
import '../hooks/useWidth.js';
|
|
57
|
+
import '../hooks/useImgDownload.js';
|
|
58
|
+
import '../Image/index.js';
|
|
59
|
+
import '../RadioGroup/index.js';
|
|
60
|
+
import '../Radio/index.js';
|
|
61
|
+
import '../Switcher/index.js';
|
|
62
|
+
import '../DatePickerInput/index.js';
|
|
63
|
+
import '../PopoverV2/index.js';
|
|
64
|
+
import '../jsx-runtime-57b40d9e.js';
|
|
65
|
+
import '../debounce-4419bc2f.js';
|
|
66
|
+
import '../DatePicker/index.js';
|
|
67
|
+
import '../localization-4ba17032.js';
|
|
68
|
+
import '../checkTimeValidation-e56771be.js';
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
2
|
+
import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import useMount from '../hooks/useMount.js';
|
|
5
|
+
import '../configs-fed6ac34.js';
|
|
6
|
+
import { n as noop } from '../index-a0e4e333.js';
|
|
7
|
+
import { D as Dropdown } from '../index-bd525a3a.js';
|
|
8
|
+
import '../dateValidation-67caec66.js';
|
|
9
|
+
import '../_commonjsHelpers-24198af3.js';
|
|
10
|
+
import 'react-dom';
|
|
11
|
+
import '../objectWithoutPropertiesLoose-d8a4a68c.js';
|
|
12
|
+
import '../react-lifecycles-compat.es-6e1f3768.js';
|
|
13
|
+
import '../clsx.m-2bb6df4b.js';
|
|
14
|
+
import '../index-6ff23041.js';
|
|
15
|
+
import '../hooks/useClick.js';
|
|
16
|
+
import '../hooks/useKeyDown.js';
|
|
17
|
+
import '../hooks/useDeviceType.js';
|
|
18
|
+
import '../hooks/useWindowSize.js';
|
|
19
|
+
import '../hooks/useClickOutside.js';
|
|
20
|
+
import '../hooks/useUpdatableRef.js';
|
|
21
|
+
import '../hooks/useForceUpdate.js';
|
|
22
|
+
import '../hooks/useEllipsisDetection.js';
|
|
23
|
+
import '../BusyLoader/index.js';
|
|
24
|
+
import '../Icon/index.js';
|
|
25
|
+
import '../style-inject.es-746bb8ed.js';
|
|
26
|
+
import '../Empty/index.js';
|
|
27
|
+
import '../Popover/index.js';
|
|
28
|
+
import '../Popover-f4d1cac0.js';
|
|
29
|
+
import '../index-122432cd.js';
|
|
30
|
+
import '../GeneUIProvider/index.js';
|
|
31
|
+
import '../Portal/index.js';
|
|
32
|
+
import '../Scrollbar/index.js';
|
|
33
|
+
import '../guid-8ddf77b3.js';
|
|
34
|
+
import '../Tooltip/index.js';
|
|
35
|
+
import '../ExtendedInput/index.js';
|
|
36
|
+
import '../SuggestionList/index.js';
|
|
37
|
+
import '../config-0ca92874.js';
|
|
38
|
+
import '../Checkbox/index.js';
|
|
39
|
+
import '../checkboxRadioSwitcher-5b69d7bd.js';
|
|
40
|
+
import '../index-583e0b30.js';
|
|
41
|
+
import '../Tag/index.js';
|
|
42
|
+
|
|
43
|
+
function checkValidation(required, isValid, value, min, max) {
|
|
44
|
+
const length = value === null || value === void 0 ? void 0 : value.length;
|
|
45
|
+
if (isValid === false) return {
|
|
46
|
+
key: 'customValidation',
|
|
47
|
+
isValid: false
|
|
48
|
+
};
|
|
49
|
+
if (!length && required) return {
|
|
50
|
+
key: 'required',
|
|
51
|
+
isValid: false
|
|
52
|
+
};
|
|
53
|
+
if (min && length < min) return {
|
|
54
|
+
key: 'min',
|
|
55
|
+
isValid: false
|
|
56
|
+
};
|
|
57
|
+
if (max && length > max) return {
|
|
58
|
+
key: 'max',
|
|
59
|
+
isValid: false
|
|
60
|
+
};
|
|
61
|
+
return {
|
|
62
|
+
key: null,
|
|
63
|
+
isValid: true
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
const MultiSelectDropdownField = /*#__PURE__*/forwardRef((props, ref) => {
|
|
67
|
+
const {
|
|
68
|
+
onChange,
|
|
69
|
+
value,
|
|
70
|
+
isValid,
|
|
71
|
+
required,
|
|
72
|
+
min,
|
|
73
|
+
max,
|
|
74
|
+
isFieldValid,
|
|
75
|
+
valueKey,
|
|
76
|
+
forceAllowValidation,
|
|
77
|
+
...restProps
|
|
78
|
+
} = props;
|
|
79
|
+
const isControlled = 'value' in props && typeof value !== 'undefined';
|
|
80
|
+
const [val, setVal] = useState(value || []);
|
|
81
|
+
const [validationState, setValidationState] = useState(true);
|
|
82
|
+
const [allowValidation, setAllowValidation] = useState(false);
|
|
83
|
+
const validate = useCallback(() => checkValidation(required, isValid, val, min, max).isValid, [required, isValid, val, min, max]);
|
|
84
|
+
const handleChange = useCallback(e => {
|
|
85
|
+
const validation = checkValidation(required, isValid, e, min, max);
|
|
86
|
+
setValidationState(validation.isValid);
|
|
87
|
+
setVal(e.map(item => item[valueKey]));
|
|
88
|
+
onChange && onChange(e, validation.isValid, validation.key);
|
|
89
|
+
}, [required, isValid, min, max, onChange, valueKey]);
|
|
90
|
+
|
|
91
|
+
// we use this because need to show field validation after onClose
|
|
92
|
+
const onBlur = useCallback(() => setAllowValidation(true), []);
|
|
93
|
+
const onClear = useCallback(() => {
|
|
94
|
+
const validState = checkValidation(required, isValid, []).isValid;
|
|
95
|
+
setValidationState(validState);
|
|
96
|
+
}, [required, isValid]);
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
isControlled && setValidationState(validate());
|
|
99
|
+
}, [isControlled, validate]);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
setVal(value);
|
|
102
|
+
}, [value]);
|
|
103
|
+
|
|
104
|
+
// need this for handling user's `isValid` prop
|
|
105
|
+
useEffect(() => {
|
|
106
|
+
setValidationState(isValid);
|
|
107
|
+
}, [isValid]);
|
|
108
|
+
|
|
109
|
+
// call function when validation state changes
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
isFieldValid(validationState);
|
|
112
|
+
}, [validationState]);
|
|
113
|
+
|
|
114
|
+
// set Allow validation true if submit button clicked
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
forceAllowValidation && setAllowValidation(true);
|
|
117
|
+
}, [forceAllowValidation]);
|
|
118
|
+
useMount(() => setValidationState(validate()));
|
|
119
|
+
return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
|
|
120
|
+
required: required,
|
|
121
|
+
ref: ref,
|
|
122
|
+
value: val,
|
|
123
|
+
isMultiSelect: true,
|
|
124
|
+
isValid: !allowValidation || validationState,
|
|
125
|
+
onChange: handleChange,
|
|
126
|
+
onBlur: onBlur,
|
|
127
|
+
valueKey: valueKey,
|
|
128
|
+
onClear: onClear
|
|
129
|
+
}, restProps));
|
|
130
|
+
});
|
|
131
|
+
MultiSelectDropdownField.propTypes = {
|
|
132
|
+
min: PropTypes.number,
|
|
133
|
+
max: PropTypes.number,
|
|
134
|
+
valueKey: PropTypes.string,
|
|
135
|
+
value: PropTypes.any,
|
|
136
|
+
onChange: PropTypes.func,
|
|
137
|
+
required: PropTypes.bool,
|
|
138
|
+
readOnly: PropTypes.bool,
|
|
139
|
+
isValid: PropTypes.bool,
|
|
140
|
+
forceAllowValidation: PropTypes.bool,
|
|
141
|
+
isFieldValid: PropTypes.func
|
|
142
|
+
};
|
|
143
|
+
MultiSelectDropdownField.defaultProps = {
|
|
144
|
+
required: false,
|
|
145
|
+
readOnly: false,
|
|
146
|
+
isFieldValid: noop,
|
|
147
|
+
valueKey: 'value'
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
export { MultiSelectDropdownField as default };
|
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import { _ as _extends } from '
|
|
1
|
+
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
2
2
|
import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
-
import
|
|
4
|
-
import { n as noop } from '
|
|
5
|
-
import
|
|
6
|
-
import '
|
|
7
|
-
import ExtendedInput from '
|
|
8
|
-
import '
|
|
9
|
-
import '
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import { n as noop } from '../index-a0e4e333.js';
|
|
5
|
+
import useMount from '../hooks/useMount.js';
|
|
6
|
+
import '../configs-fed6ac34.js';
|
|
7
|
+
import ExtendedInput from '../ExtendedInput/index.js';
|
|
8
|
+
import '../dateValidation-67caec66.js';
|
|
9
|
+
import '../_commonjsHelpers-24198af3.js';
|
|
10
10
|
import 'react-dom';
|
|
11
|
-
import '
|
|
12
|
-
import '
|
|
13
|
-
import '
|
|
14
|
-
import '
|
|
15
|
-
import '
|
|
16
|
-
import '
|
|
17
|
-
import '
|
|
18
|
-
import '
|
|
19
|
-
import '
|
|
20
|
-
import '
|
|
21
|
-
import '
|
|
22
|
-
import '
|
|
23
|
-
import '
|
|
11
|
+
import '../index-6ff23041.js';
|
|
12
|
+
import '../hooks/useDeviceType.js';
|
|
13
|
+
import '../hooks/useWindowSize.js';
|
|
14
|
+
import '../hooks/useEllipsisDetection.js';
|
|
15
|
+
import '../Icon/index.js';
|
|
16
|
+
import '../style-inject.es-746bb8ed.js';
|
|
17
|
+
import '../SuggestionList/index.js';
|
|
18
|
+
import '../hooks/useKeyDown.js';
|
|
19
|
+
import '../hooks/useClickOutside.js';
|
|
20
|
+
import '../config-0ca92874.js';
|
|
21
|
+
import '../Scrollbar/index.js';
|
|
22
|
+
import '../Tooltip/index.js';
|
|
23
|
+
import '../Popover-f4d1cac0.js';
|
|
24
|
+
import '../GeneUIProvider/index.js';
|
|
24
25
|
|
|
25
26
|
const validateMin = (value, min) => value >= min;
|
|
26
27
|
const validateMax = (value, max) => value <= max;
|
|
@@ -137,51 +138,51 @@ NumberInput.propTypes = {
|
|
|
137
138
|
/**
|
|
138
139
|
* Maximum value
|
|
139
140
|
*/
|
|
140
|
-
min:
|
|
141
|
+
min: PropTypes.number,
|
|
141
142
|
/**
|
|
142
143
|
* Minimum value
|
|
143
144
|
*/
|
|
144
|
-
max:
|
|
145
|
+
max: PropTypes.number,
|
|
145
146
|
/**
|
|
146
147
|
* Value for number field
|
|
147
148
|
*/
|
|
148
|
-
value:
|
|
149
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
149
150
|
/**
|
|
150
151
|
* Callback fires when field changes
|
|
151
152
|
*/
|
|
152
|
-
onChange:
|
|
153
|
+
onChange: PropTypes.func,
|
|
153
154
|
/**
|
|
154
155
|
* Callback fires when input loose focus
|
|
155
156
|
*/
|
|
156
|
-
onBlur:
|
|
157
|
+
onBlur: PropTypes.func,
|
|
157
158
|
/**
|
|
158
159
|
* Callback fires when field validation state changes
|
|
159
160
|
*/
|
|
160
|
-
isFieldValid:
|
|
161
|
+
isFieldValid: PropTypes.func,
|
|
161
162
|
/**
|
|
162
163
|
* Additional validation state
|
|
163
164
|
*/
|
|
164
|
-
isValid:
|
|
165
|
+
isValid: PropTypes.bool,
|
|
165
166
|
/**
|
|
166
167
|
* Allow validation without onBlur, validate field when mount
|
|
167
168
|
*/
|
|
168
|
-
forceAllowValidation:
|
|
169
|
+
forceAllowValidation: PropTypes.bool,
|
|
169
170
|
/**
|
|
170
171
|
* Define number type
|
|
171
172
|
*/
|
|
172
|
-
numberType:
|
|
173
|
+
numberType: PropTypes.oneOf(['integer', 'float']),
|
|
173
174
|
/**
|
|
174
175
|
* Precision minimum count
|
|
175
176
|
*/
|
|
176
|
-
precisionMin:
|
|
177
|
+
precisionMin: PropTypes.number,
|
|
177
178
|
/**
|
|
178
179
|
* Precision maximum count
|
|
179
180
|
*/
|
|
180
|
-
precisionMax:
|
|
181
|
+
precisionMax: PropTypes.number,
|
|
181
182
|
/**
|
|
182
183
|
* We use this props if we need to show validation of a field during onChange
|
|
183
184
|
*/
|
|
184
|
-
forceValidateDuringChange:
|
|
185
|
+
forceValidateDuringChange: PropTypes.bool
|
|
185
186
|
};
|
|
186
187
|
NumberInput.defaultProps = {
|
|
187
188
|
isValid: true,
|
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
import { _ as _extends } from '
|
|
1
|
+
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
2
2
|
import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
|
|
3
|
-
import
|
|
4
|
-
import { n as noop } from '
|
|
5
|
-
import
|
|
6
|
-
import '
|
|
7
|
-
import RadioGroup from '
|
|
8
|
-
import '
|
|
9
|
-
import '
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import { n as noop } from '../index-a0e4e333.js';
|
|
5
|
+
import useMount from '../hooks/useMount.js';
|
|
6
|
+
import '../configs-fed6ac34.js';
|
|
7
|
+
import RadioGroup from '../RadioGroup/index.js';
|
|
8
|
+
import '../dateValidation-67caec66.js';
|
|
9
|
+
import '../_commonjsHelpers-24198af3.js';
|
|
10
10
|
import 'react-dom';
|
|
11
|
-
import '
|
|
12
|
-
import '
|
|
13
|
-
import '
|
|
14
|
-
import '
|
|
15
|
-
import '
|
|
16
|
-
import './guid-8ddf77b3.js';
|
|
11
|
+
import '../index-6ff23041.js';
|
|
12
|
+
import '../Radio/index.js';
|
|
13
|
+
import '../checkboxRadioSwitcher-5b69d7bd.js';
|
|
14
|
+
import '../style-inject.es-746bb8ed.js';
|
|
15
|
+
import '../guid-8ddf77b3.js';
|
|
17
16
|
|
|
18
17
|
function checkValidation(required, isValid) {
|
|
19
18
|
let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
@@ -86,27 +85,27 @@ Radio.propTypes = {
|
|
|
86
85
|
/**
|
|
87
86
|
* Value for radio field
|
|
88
87
|
*/
|
|
89
|
-
value:
|
|
88
|
+
value: PropTypes.string,
|
|
90
89
|
/**
|
|
91
90
|
* Callback fires when radio field changes
|
|
92
91
|
*/
|
|
93
|
-
onChange:
|
|
92
|
+
onChange: PropTypes.func,
|
|
94
93
|
/**
|
|
95
94
|
* Define is field required or no.
|
|
96
95
|
*/
|
|
97
|
-
required:
|
|
96
|
+
required: PropTypes.bool,
|
|
98
97
|
/**
|
|
99
98
|
* Callback fires when field validation state changes
|
|
100
99
|
*/
|
|
101
|
-
isFieldValid:
|
|
100
|
+
isFieldValid: PropTypes.func,
|
|
102
101
|
/**
|
|
103
102
|
* Additional validation state
|
|
104
103
|
*/
|
|
105
|
-
isValid:
|
|
104
|
+
isValid: PropTypes.bool,
|
|
106
105
|
/**
|
|
107
106
|
* Allow validation without onBlur, validate field when mount
|
|
108
107
|
*/
|
|
109
|
-
forceAllowValidation:
|
|
108
|
+
forceAllowValidation: PropTypes.bool
|
|
110
109
|
};
|
|
111
110
|
Radio.defaultProps = {
|
|
112
111
|
isValid: true,
|