@jobber/components 2.85.8 → 2.86.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/CHANGELOG.md +19 -0
- package/dist/Autocomplete/Autocomplete.d.ts +47 -47
- package/dist/Autocomplete/Menu.d.ts +9 -9
- package/dist/Autocomplete/Option.d.ts +15 -15
- package/dist/Autocomplete/index.d.ts +2 -2
- package/dist/Autocomplete/index.js +215 -211
- package/dist/Avatar/Avatar.d.ts +37 -37
- package/dist/Avatar/index.d.ts +1 -1
- package/dist/Avatar/index.js +7 -74
- package/dist/Avatar/utilities.d.ts +1 -1
- package/dist/Avatar-cfd04e86.js +82 -0
- package/dist/Banner/Banner.d.ts +19 -19
- package/dist/Banner/index.d.ts +1 -1
- package/dist/Banner/index.js +67 -65
- package/dist/Button/Button.d.ts +64 -64
- package/dist/Button/index.d.ts +1 -1
- package/dist/Button/index.js +9 -53
- package/dist/Button-5b2f1636.js +60 -0
- package/dist/ButtonDismiss/ButtonDismiss.d.ts +7 -7
- package/dist/ButtonDismiss/index.d.ts +1 -1
- package/dist/ButtonDismiss/index.js +10 -15
- package/dist/ButtonDismiss-4cde8f7c.js +15 -0
- package/dist/Card/Card.d.ts +31 -31
- package/dist/Card/CardClickable.d.ts +12 -12
- package/dist/Card/index.d.ts +1 -1
- package/dist/Card/index.js +7 -61
- package/dist/Card-368e01a3.js +68 -0
- package/dist/Checkbox/Checkbox.d.ts +52 -52
- package/dist/Checkbox/index.d.ts +1 -1
- package/dist/Checkbox/index.js +34 -32
- package/dist/Chips/Chip.d.ts +8 -8
- package/dist/Chips/ChipDismissible.d.ts +7 -7
- package/dist/Chips/ChipTypes.d.ts +59 -59
- package/dist/Chips/Chips.d.ts +2 -2
- package/dist/Chips/ChipsTypes.d.ts +82 -82
- package/dist/Chips/InternalChip.d.ts +2 -2
- package/dist/Chips/InternalChipAffix.d.ts +10 -10
- package/dist/Chips/InternalChipButton.d.ts +10 -10
- package/dist/Chips/InternalChipDismissible/InternalChipDismissible.d.ts +2 -2
- package/dist/Chips/InternalChipDismissible/InternalChipDismissibleInput.d.ts +2 -2
- package/dist/Chips/InternalChipDismissible/InternalChipDismissibleTypes.d.ts +13 -13
- package/dist/Chips/InternalChipDismissible/hooks/index.d.ts +5 -5
- package/dist/Chips/InternalChipDismissible/hooks/useInView.d.ts +5 -5
- package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissible.d.ts +15 -15
- package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts +28 -28
- package/dist/Chips/InternalChipDismissible/hooks/useRepositionMenu.d.ts +16 -16
- package/dist/Chips/InternalChipDismissible/hooks/useScrollToActive.d.ts +2 -2
- package/dist/Chips/InternalChipDismissible/index.d.ts +1 -1
- package/dist/Chips/InternalChipMultiSelect.d.ts +4 -4
- package/dist/Chips/InternalChipSingleSelect.d.ts +4 -4
- package/dist/Chips/index.d.ts +3 -3
- package/dist/Chips/index.js +493 -491
- package/dist/Chips/utils/mdxUtils.d.ts +9 -9
- package/dist/ConfirmationModal/ConfirmationModal.d.ts +62 -62
- package/dist/ConfirmationModal/index.d.ts +1 -1
- package/dist/ConfirmationModal/index.js +20 -109
- package/dist/ConfirmationModal-b7ef110f.js +103 -0
- package/dist/Content/Content.d.ts +13 -13
- package/dist/Content/index.d.ts +1 -1
- package/dist/Content/index.js +5 -19
- package/dist/Content-18de5fbb.js +26 -0
- package/dist/Countdown/Countdown.d.ts +31 -31
- package/dist/Countdown/computeTimeUnit.d.ts +3 -3
- package/dist/Countdown/index.d.ts +1 -1
- package/dist/Countdown/index.js +63 -61
- package/dist/DataDump/DataDump.d.ts +20 -20
- package/dist/DataDump/index.d.ts +1 -1
- package/dist/DataDump/index.js +18 -17
- package/dist/DatePicker/DatePicker.d.ts +50 -50
- package/dist/DatePicker/DatePickerActivator.d.ts +12 -12
- package/dist/DatePicker/DatePickerCustomHeader.d.ts +2 -2
- package/dist/DatePicker/index.d.ts +1 -1
- package/dist/DatePicker/index.js +13 -97
- package/dist/DatePicker/useFocusOnSelectedDate.d.ts +5 -5
- package/dist/DatePicker-ad6f8630.js +103 -0
- package/dist/DescriptionList/DescriptionList.d.ts +10 -10
- package/dist/DescriptionList/index.d.ts +1 -1
- package/dist/DescriptionList/index.js +16 -15
- package/dist/Disclosure/Disclosure.d.ts +20 -20
- package/dist/Disclosure/index.d.ts +1 -1
- package/dist/Disclosure/index.js +32 -31
- package/dist/Divider/Divider.d.ts +16 -16
- package/dist/Divider/index.d.ts +1 -1
- package/dist/Divider/index.js +19 -17
- package/dist/Drawer/Drawer.d.ts +13 -13
- package/dist/Drawer/DrawerGrid.d.ts +6 -6
- package/dist/Drawer/index.d.ts +2 -2
- package/dist/Drawer/index.js +39 -37
- package/dist/Emphasis/Emphasis.d.ts +11 -11
- package/dist/Emphasis/index.d.ts +1 -1
- package/dist/Emphasis/index.js +7 -17
- package/dist/Emphasis-fd845639.js +21 -0
- package/dist/FeatureSwitch/FeatureSwitch.d.ts +51 -51
- package/dist/FeatureSwitch/index.d.ts +1 -1
- package/dist/FeatureSwitch/index.js +57 -55
- package/dist/Form/Form.d.ts +18 -18
- package/dist/Form/index.d.ts +1 -1
- package/dist/Form/index.js +58 -57
- package/dist/FormField/FormField.d.ts +2 -2
- package/dist/FormField/FormFieldAffix.d.ts +13 -13
- package/dist/FormField/FormFieldDescription.d.ts +6 -6
- package/dist/FormField/FormFieldPostFix.d.ts +5 -5
- package/dist/FormField/FormFieldTypes.d.ts +160 -160
- package/dist/FormField/FormFieldWrapper.d.ts +9 -9
- package/dist/FormField/index.d.ts +2 -2
- package/dist/FormField/index.js +15 -208
- package/dist/FormField-a92c7bac.js +213 -0
- package/dist/FormatDate/FormatDate.d.ts +12 -12
- package/dist/FormatDate/index.d.ts +1 -1
- package/dist/FormatDate/index.js +24 -23
- package/dist/FormatEmail/FormatEmail.d.ts +8 -8
- package/dist/FormatEmail/index.d.ts +1 -1
- package/dist/FormatEmail/index.js +12 -10
- package/dist/FormatFile/FormatFile.d.ts +30 -30
- package/dist/FormatFile/FormatFileDeleteButton.d.ts +6 -6
- package/dist/FormatFile/InternalThumbnail.d.ts +9 -9
- package/dist/FormatFile/index.d.ts +1 -1
- package/dist/FormatFile/index.js +21 -112
- package/dist/FormatFile-5391d4cf.js +112 -0
- package/dist/FormatRelativeDateTime/FormatRelativeDateTime.d.ts +11 -11
- package/dist/FormatRelativeDateTime/index.d.ts +1 -1
- package/dist/FormatRelativeDateTime/index.js +64 -63
- package/dist/FormatTime/FormatTime.d.ts +15 -15
- package/dist/FormatTime/index.d.ts +1 -1
- package/dist/FormatTime/index.js +28 -27
- package/dist/Gallery/Gallery.d.ts +2 -2
- package/dist/Gallery/GalleryTypes.d.ts +31 -31
- package/dist/Gallery/index.d.ts +1 -1
- package/dist/Gallery/index.js +82 -80
- package/dist/Heading/Heading.d.ts +14 -14
- package/dist/Heading/index.d.ts +1 -1
- package/dist/Heading/index.js +7 -53
- package/dist/Heading-56750113.js +57 -0
- package/dist/Icon/Icon.d.ts +22 -22
- package/dist/Icon/index.d.ts +1 -1
- package/dist/Icon/index.js +4 -35
- package/dist/Icon-d5ad1a6d.js +41 -0
- package/dist/InlineLabel/InlineLabel.d.ts +17 -17
- package/dist/InlineLabel/index.d.ts +1 -1
- package/dist/InlineLabel/index.js +20 -18
- package/dist/InputAvatar/InputAvatar.d.ts +22 -22
- package/dist/InputAvatar/index.d.ts +1 -1
- package/dist/InputAvatar/index.js +57 -56
- package/dist/InputDate/InputDate.d.ts +19 -19
- package/dist/InputDate/index.d.ts +1 -1
- package/dist/InputDate/index.js +34 -33
- package/dist/InputEmail/InputEmail.d.ts +5 -5
- package/dist/InputEmail/index.d.ts +1 -1
- package/dist/InputEmail/index.js +29 -28
- package/dist/InputFile/InputFile.d.ts +121 -121
- package/dist/InputFile/index.d.ts +1 -1
- package/dist/InputFile/index.js +15 -168
- package/dist/InputFile-b5cf90c3.js +174 -0
- package/dist/InputGroup/InputGroup.d.ts +11 -11
- package/dist/InputGroup/index.d.ts +1 -1
- package/dist/InputGroup/index.js +24 -22
- package/dist/InputNumber/InputNumber.d.ts +11 -11
- package/dist/InputNumber/index.d.ts +1 -1
- package/dist/InputNumber/index.js +52 -51
- package/dist/InputPassword/InputPassword.d.ts +12 -12
- package/dist/InputPassword/index.d.ts +1 -1
- package/dist/InputPassword/index.js +28 -27
- package/dist/InputText/InputText.d.ts +29 -29
- package/dist/InputText/index.d.ts +1 -1
- package/dist/InputText/index.js +15 -95
- package/dist/InputText-cb3be15c.js +91 -0
- package/dist/InputTime/InputTime.d.ts +2 -2
- package/dist/InputTime/InputTimeProps.d.ts +18 -18
- package/dist/InputTime/InputTimeSafari.d.ts +2 -2
- package/dist/InputTime/civilTimeConversions.d.ts +3 -3
- package/dist/InputTime/index.d.ts +1 -1
- package/dist/InputTime/index.js +402 -257
- package/dist/InputValidation/InputValidation.d.ts +8 -8
- package/dist/InputValidation/index.d.ts +1 -1
- package/dist/InputValidation/index.js +8 -24
- package/dist/InputValidation-24d3621a.js +28 -0
- package/dist/LightBox/LightBox.d.ts +37 -37
- package/dist/LightBox/index.d.ts +1 -1
- package/dist/LightBox/index.js +6 -34
- package/dist/LightBox-b893b656.js +42 -0
- package/dist/List/List.d.ts +11 -11
- package/dist/List/ListItem.d.ts +54 -54
- package/dist/List/index.d.ts +1 -1
- package/dist/List/index.js +76 -74
- package/dist/Markdown/Markdown.d.ts +17 -17
- package/dist/Markdown/index.d.ts +1 -1
- package/dist/Markdown/index.js +12 -64
- package/dist/Markdown-69986c49.js +68 -0
- package/dist/Menu/Menu.d.ts +46 -46
- package/dist/Menu/index.d.ts +1 -1
- package/dist/Menu/index.js +13 -128
- package/dist/Menu-6a392af6.js +134 -0
- package/dist/Modal/Modal.d.ts +22 -22
- package/dist/Modal/index.d.ts +1 -1
- package/dist/Modal/index.js +14 -127
- package/dist/Modal/useFocusTrap.d.ts +10 -10
- package/dist/Modal-aaaaf2df.js +132 -0
- package/dist/Page/Page.d.ts +59 -59
- package/dist/Page/index.d.ts +1 -1
- package/dist/Page/index.js +63 -61
- package/dist/Popover/Popover.d.ts +26 -26
- package/dist/Popover/index.d.ts +1 -1
- package/dist/Popover/index.js +49 -48
- package/dist/ProgressBar/ProgressBar.d.ts +18 -18
- package/dist/ProgressBar/index.d.ts +1 -1
- package/dist/ProgressBar/index.js +5 -22
- package/dist/ProgressBar-e9a49129.js +29 -0
- package/dist/RadioGroup/RadioGroup.d.ts +27 -27
- package/dist/RadioGroup/RadioOption.d.ts +34 -34
- package/dist/RadioGroup/index.d.ts +2 -2
- package/dist/RadioGroup/index.js +38 -37
- package/dist/RecurringSelect/CurrentRecurrenceComponent.d.ts +8 -8
- package/dist/RecurringSelect/RecurringSelect.d.ts +8 -8
- package/dist/RecurringSelect/components/DayOfMonthSelect.d.ts +8 -8
- package/dist/RecurringSelect/components/MonthlyDayOfWeekSelect.d.ts +8 -8
- package/dist/RecurringSelect/components/MonthlySelect.d.ts +8 -8
- package/dist/RecurringSelect/components/WeeklySelect.d.ts +8 -8
- package/dist/RecurringSelect/components/index.d.ts +4 -4
- package/dist/RecurringSelect/index.d.ts +2 -2
- package/dist/RecurringSelect/types.d.ts +65 -65
- package/dist/Select/Option.d.ts +17 -17
- package/dist/Select/Select.d.ts +10 -10
- package/dist/Select/index.d.ts +2 -2
- package/dist/Select/index.js +20 -19
- package/dist/Spinner/Spinner.d.ts +15 -15
- package/dist/Spinner/index.d.ts +1 -1
- package/dist/Spinner/index.js +5 -19
- package/dist/Spinner-18d3dee6.js +26 -0
- package/dist/StatusLabel/StatusLabel.d.ts +25 -25
- package/dist/StatusLabel/index.d.ts +1 -1
- package/dist/StatusLabel/index.js +21 -19
- package/dist/Switch/Switch.d.ts +14 -14
- package/dist/Switch/index.d.ts +1 -1
- package/dist/Switch/index.js +7 -53
- package/dist/Switch-d2bec677.js +60 -0
- package/dist/Table/Body.d.ts +6 -6
- package/dist/Table/Cells/Cell.d.ts +7 -7
- package/dist/Table/Cells/CellCurrency.d.ts +8 -8
- package/dist/Table/Cells/CellNumeric.d.ts +4 -4
- package/dist/Table/Footer.d.ts +6 -6
- package/dist/Table/Header.d.ts +6 -6
- package/dist/Table/Row.d.ts +6 -6
- package/dist/Table/Table.d.ts +6 -6
- package/dist/Table/index.d.ts +8 -8
- package/dist/Table/index.js +41 -39
- package/dist/Tabs/Tabs.d.ts +19 -19
- package/dist/Tabs/index.d.ts +1 -1
- package/dist/Tabs/index.js +69 -67
- package/dist/Text/Text.d.ts +9 -9
- package/dist/Text/index.d.ts +1 -1
- package/dist/Text/index.js +7 -29
- package/dist/Text-9bc093e9.js +32 -0
- package/dist/Toast/Toast.d.ts +17 -17
- package/dist/Toast/index.d.ts +1 -1
- package/dist/Toast/index.js +93 -93
- package/dist/Toast/showToast.d.ts +2 -2
- package/dist/Tooltip/Tooltip.d.ts +10 -10
- package/dist/Tooltip/index.d.ts +1 -1
- package/dist/Tooltip/index.js +11 -110
- package/dist/Tooltip/useTooltipPositioning.d.ts +18 -18
- package/dist/Tooltip-4396164d.js +116 -0
- package/dist/Typography/Typography.d.ts +38 -38
- package/dist/Typography/index.d.ts +1 -1
- package/dist/Typography/index.js +6 -57
- package/dist/Typography-7e542a72.js +64 -0
- package/dist/{chunk-17e02351.js → style-inject.es-dcee06b6.js} +0 -0
- package/dist/{chunk-b67af3cb.js → tslib.es6-5b50eb8e.js} +0 -0
- package/package.json +6 -8
- package/rollup.config.js +28 -3
package/dist/InputFile/index.js
CHANGED
|
@@ -2,175 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
require('
|
|
14
|
-
require('../Icon/index.js');
|
|
15
|
-
var uuid = require('uuid');
|
|
5
|
+
var InputFile = require('../InputFile-b5cf90c3.js');
|
|
6
|
+
require('../tslib.es6-5b50eb8e.js');
|
|
7
|
+
require('react');
|
|
8
|
+
require('classnames');
|
|
9
|
+
require('react-dropzone');
|
|
10
|
+
require('axios');
|
|
11
|
+
require('uuid');
|
|
12
|
+
require('../style-inject.es-dcee06b6.js');
|
|
13
|
+
require('../Button-5b2f1636.js');
|
|
16
14
|
require('react-router-dom');
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
require('../Icon-d5ad1a6d.js');
|
|
16
|
+
require('@jobber/design');
|
|
17
|
+
require('../Typography-7e542a72.js');
|
|
18
|
+
require('../Content-18de5fbb.js');
|
|
21
19
|
|
|
22
|
-
var css = "._2CgKZHQp30gXtQyW8h2Ex_ {\n font-size: 0;\n line-height: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_[focus-within] {\n border-color: var(--color-focus);\n outline: none;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_[focus-within] {\n border-color: var(--color-focus);\n outline: none;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_:focus-within {\n border-color: var(--color-focus);\n outline: none;\n}\n\n._3nre5MPe67v_oDs44x2IDC {\n padding: var(--space-base);\n border: var(--color-border) dashed var(--border-thick);\n border-radius: var(--radius-larger);\n text-align: center;\n}\n\n._3nre5MPe67v_oDs44x2IDC._1wLTm5Es7oqZzzwFiOySeN {\n border-color: var(--color-focus);\n background-color: var(--color-surface--hover);\n}\n";
|
|
23
|
-
var styles = {"dropZoneBase":"_2CgKZHQp30gXtQyW8h2Ex_","dropZone":"_3nre5MPe67v_oDs44x2IDC","active":"_1wLTm5Es7oqZzzwFiOySeN"};
|
|
24
|
-
__chunk_2.styleInject(css);
|
|
25
20
|
|
|
26
|
-
function InputFile(_a) {
|
|
27
|
-
var _b;
|
|
28
|
-
var _c = _a.variation, variation = _c === void 0 ? "dropzone" : _c, _d = _a.size, size = _d === void 0 ? "base" : _d, providedButtonLabel = _a.buttonLabel, _e = _a.allowMultiple, allowMultiple = _e === void 0 ? false : _e, _f = _a.allowedTypes, allowedTypes = _f === void 0 ? "all" : _f, getUploadParams = _a.getUploadParams, onUploadStart = _a.onUploadStart, onUploadProgress = _a.onUploadProgress, onUploadComplete = _a.onUploadComplete;
|
|
29
|
-
var options = {
|
|
30
|
-
multiple: allowMultiple,
|
|
31
|
-
onDrop: React.useCallback(handleDrop, []),
|
|
32
|
-
};
|
|
33
|
-
if (allowedTypes === "images") {
|
|
34
|
-
options.accept = "image/*";
|
|
35
|
-
}
|
|
36
|
-
else if (allowedTypes === "basicImages") {
|
|
37
|
-
options.accept = "image/png, image/jpg, image/jpeg";
|
|
38
|
-
}
|
|
39
|
-
var _g = reactDropzone.useDropzone(options), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps, isDragActive = _g.isDragActive;
|
|
40
|
-
var _h = getLabels(providedButtonLabel, allowMultiple, allowedTypes), buttonLabel = _h.buttonLabel, hintText = _h.hintText;
|
|
41
|
-
var dropZone = classnames(styles.dropZoneBase, (_b = {},
|
|
42
|
-
_b[styles.dropZone] = variation === "dropzone",
|
|
43
|
-
_b[styles.active] = isDragActive,
|
|
44
|
-
_b));
|
|
45
|
-
return (React__default.createElement("div", __chunk_1.__assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
|
|
46
|
-
React__default.createElement("input", __chunk_1.__assign({}, getInputProps())),
|
|
47
|
-
variation === "dropzone" && (React__default.createElement(index$2$1.Content, { spacing: "small" },
|
|
48
|
-
React__default.createElement(index$5.Button, { label: buttonLabel, size: "small", type: "secondary" }),
|
|
49
|
-
size === "base" && (React__default.createElement(index.Typography, { size: "small", textColor: "greyBlue" }, hintText)))),
|
|
50
|
-
variation === "button" && (React__default.createElement(index$5.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))));
|
|
51
|
-
function handleDrop(acceptedFiles) {
|
|
52
|
-
acceptedFiles.forEach(function (file) {
|
|
53
|
-
uploadFile(file);
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
function uploadFile(file) {
|
|
57
|
-
return __chunk_1.__awaiter(this, void 0, void 0, function () {
|
|
58
|
-
var _a, url, _b, key, _c, fields, _d, httpMethod, fileUpload, handleUploadProgress, handleUploadComplete, axiosConfig;
|
|
59
|
-
return __chunk_1.__generator(this, function (_e) {
|
|
60
|
-
switch (_e.label) {
|
|
61
|
-
case 0: return [4 /*yield*/, getUploadParams(file)];
|
|
62
|
-
case 1:
|
|
63
|
-
_a = _e.sent(), url = _a.url, _b = _a.key, key = _b === void 0 ? uuid.v1() : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c, _d = _a.httpMethod, httpMethod = _d === void 0 ? "POST" : _d;
|
|
64
|
-
fileUpload = getFileUpload(file, key);
|
|
65
|
-
onUploadStart && onUploadStart(__chunk_1.__assign({}, fileUpload));
|
|
66
|
-
handleUploadProgress = function (progressEvent) {
|
|
67
|
-
onUploadProgress &&
|
|
68
|
-
onUploadProgress(__chunk_1.__assign(__chunk_1.__assign({}, fileUpload), { progress: progressEvent.loaded / progressEvent.total }));
|
|
69
|
-
};
|
|
70
|
-
handleUploadComplete = function () {
|
|
71
|
-
onUploadComplete === null || onUploadComplete === void 0 ? void 0 : onUploadComplete(__chunk_1.__assign(__chunk_1.__assign({}, fileUpload), { progress: 1 }));
|
|
72
|
-
};
|
|
73
|
-
axiosConfig = createAxiosConfig({
|
|
74
|
-
url: url,
|
|
75
|
-
httpMethod: httpMethod,
|
|
76
|
-
fields: fields,
|
|
77
|
-
file: file,
|
|
78
|
-
handleUploadProgress: handleUploadProgress,
|
|
79
|
-
});
|
|
80
|
-
axios.request(axiosConfig).then(handleUploadComplete);
|
|
81
|
-
return [2 /*return*/];
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
function createAxiosConfig(_a) {
|
|
88
|
-
var url = _a.url, _b = _a.httpMethod, httpMethod = _b === void 0 ? "POST" : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c, file = _a.file, handleUploadProgress = _a.handleUploadProgress;
|
|
89
|
-
var data;
|
|
90
|
-
var headers;
|
|
91
|
-
if (httpMethod === "POST") {
|
|
92
|
-
var formData_1 = new FormData();
|
|
93
|
-
Object.entries(fields).forEach(function (_a) {
|
|
94
|
-
var _b = __chunk_1.__read(_a, 2), field = _b[0], value = _b[1];
|
|
95
|
-
return formData_1.append(field, value);
|
|
96
|
-
});
|
|
97
|
-
formData_1.append("file", file);
|
|
98
|
-
data = formData_1;
|
|
99
|
-
headers = { "X-Requested-With": "XMLHttpRequest" };
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
data = file;
|
|
103
|
-
headers = fields;
|
|
104
|
-
}
|
|
105
|
-
return {
|
|
106
|
-
method: httpMethod,
|
|
107
|
-
url: url,
|
|
108
|
-
headers: headers,
|
|
109
|
-
data: data,
|
|
110
|
-
onUploadProgress: handleUploadProgress,
|
|
111
|
-
};
|
|
112
|
-
}
|
|
113
|
-
function getLabels(providedButtonLabel, multiple, allowedTypes) {
|
|
114
|
-
var buttonLabel = multiple ? "Upload Files" : "Upload File";
|
|
115
|
-
var hintText = multiple
|
|
116
|
-
? "or drag files here to upload"
|
|
117
|
-
: "or drag a file here to upload";
|
|
118
|
-
if (allowedTypes === "images" || allowedTypes === "basicImages") {
|
|
119
|
-
buttonLabel = multiple ? "Upload Images" : "Upload Image";
|
|
120
|
-
hintText = multiple
|
|
121
|
-
? "or drag images here to upload"
|
|
122
|
-
: "or drag an image here to upload";
|
|
123
|
-
}
|
|
124
|
-
if (providedButtonLabel)
|
|
125
|
-
buttonLabel = providedButtonLabel;
|
|
126
|
-
return { buttonLabel: buttonLabel, hintText: hintText };
|
|
127
|
-
}
|
|
128
|
-
function getFileUpload(file, key) {
|
|
129
|
-
return {
|
|
130
|
-
key: key,
|
|
131
|
-
name: file.name,
|
|
132
|
-
type: file.type,
|
|
133
|
-
size: file.size,
|
|
134
|
-
progress: 0,
|
|
135
|
-
src: getSrc,
|
|
136
|
-
};
|
|
137
|
-
function getSrc() {
|
|
138
|
-
var promise = new Promise(function (resolve, reject) {
|
|
139
|
-
var reader = new FileReader();
|
|
140
|
-
reader.onload = function (event) {
|
|
141
|
-
if (event.target &&
|
|
142
|
-
event.target.result &&
|
|
143
|
-
typeof event.target.result === "string") {
|
|
144
|
-
resolve(event.target.result);
|
|
145
|
-
}
|
|
146
|
-
else {
|
|
147
|
-
reject("Could not generate file data url.");
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
reader.readAsDataURL(file);
|
|
151
|
-
});
|
|
152
|
-
return promise;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
/**
|
|
156
|
-
* Upsert a given `FileUpload` into an array of `FileUpload`s.
|
|
157
|
-
* `key` is used to uniquely identify files.
|
|
158
|
-
*
|
|
159
|
-
* @param updatedFile FileUpload File that was updated.
|
|
160
|
-
* @param files Existing array of FileUploads.
|
|
161
|
-
* @returns FileUpload[] updated set of files.
|
|
162
|
-
*/
|
|
163
|
-
function updateFiles(updatedFile, files) {
|
|
164
|
-
var newFiles = __chunk_1.__spread(files);
|
|
165
|
-
var index = files.findIndex(function (file) { return file.key === updatedFile.key; });
|
|
166
|
-
if (index !== -1) {
|
|
167
|
-
newFiles[index] = updatedFile;
|
|
168
|
-
}
|
|
169
|
-
else {
|
|
170
|
-
newFiles.push(updatedFile);
|
|
171
|
-
}
|
|
172
|
-
return newFiles;
|
|
173
|
-
}
|
|
174
21
|
|
|
175
|
-
exports.InputFile = InputFile;
|
|
176
|
-
exports.updateFiles = updateFiles;
|
|
22
|
+
exports.InputFile = InputFile.InputFile;
|
|
23
|
+
exports.updateFiles = InputFile.updateFiles;
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var classnames = require('classnames');
|
|
6
|
+
var reactDropzone = require('react-dropzone');
|
|
7
|
+
var axios = require('axios');
|
|
8
|
+
var uuid = require('uuid');
|
|
9
|
+
var styleInject_es = require('./style-inject.es-dcee06b6.js');
|
|
10
|
+
var Button = require('./Button-5b2f1636.js');
|
|
11
|
+
var Content = require('./Content-18de5fbb.js');
|
|
12
|
+
var Typography = require('./Typography-7e542a72.js');
|
|
13
|
+
|
|
14
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
|
+
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
|
+
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
18
|
+
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
|
|
19
|
+
|
|
20
|
+
var css = "._2CgKZHQp30gXtQyW8h2Ex_ {\n font-size: 0;\n line-height: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_[focus-within] {\n border-color: var(--color-focus);\n outline: none;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_[focus-within] {\n border-color: var(--color-focus);\n outline: none;\n}\n\n._2CgKZHQp30gXtQyW8h2Ex_:focus,\n._2CgKZHQp30gXtQyW8h2Ex_:focus-within {\n border-color: var(--color-focus);\n outline: none;\n}\n\n._3nre5MPe67v_oDs44x2IDC {\n padding: var(--space-base);\n border: var(--color-border) dashed var(--border-thick);\n border-radius: var(--radius-larger);\n text-align: center;\n}\n\n._3nre5MPe67v_oDs44x2IDC._1wLTm5Es7oqZzzwFiOySeN {\n border-color: var(--color-focus);\n background-color: var(--color-surface--hover);\n}\n";
|
|
21
|
+
var styles = {"dropZoneBase":"_2CgKZHQp30gXtQyW8h2Ex_","dropZone":"_3nre5MPe67v_oDs44x2IDC","active":"_1wLTm5Es7oqZzzwFiOySeN"};
|
|
22
|
+
styleInject_es.styleInject(css);
|
|
23
|
+
|
|
24
|
+
function InputFile(_a) {
|
|
25
|
+
var _b;
|
|
26
|
+
var _c = _a.variation, variation = _c === void 0 ? "dropzone" : _c, _d = _a.size, size = _d === void 0 ? "base" : _d, providedButtonLabel = _a.buttonLabel, _e = _a.allowMultiple, allowMultiple = _e === void 0 ? false : _e, _f = _a.allowedTypes, allowedTypes = _f === void 0 ? "all" : _f, getUploadParams = _a.getUploadParams, onUploadStart = _a.onUploadStart, onUploadProgress = _a.onUploadProgress, onUploadComplete = _a.onUploadComplete;
|
|
27
|
+
var options = {
|
|
28
|
+
multiple: allowMultiple,
|
|
29
|
+
onDrop: React.useCallback(handleDrop, []),
|
|
30
|
+
};
|
|
31
|
+
if (allowedTypes === "images") {
|
|
32
|
+
options.accept = "image/*";
|
|
33
|
+
}
|
|
34
|
+
else if (allowedTypes === "basicImages") {
|
|
35
|
+
options.accept = "image/png, image/jpg, image/jpeg";
|
|
36
|
+
}
|
|
37
|
+
var _g = reactDropzone.useDropzone(options), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps, isDragActive = _g.isDragActive;
|
|
38
|
+
var _h = getLabels(providedButtonLabel, allowMultiple, allowedTypes), buttonLabel = _h.buttonLabel, hintText = _h.hintText;
|
|
39
|
+
var dropZone = classnames__default["default"](styles.dropZoneBase, (_b = {},
|
|
40
|
+
_b[styles.dropZone] = variation === "dropzone",
|
|
41
|
+
_b[styles.active] = isDragActive,
|
|
42
|
+
_b));
|
|
43
|
+
return (React__default["default"].createElement("div", tslib_es6.__assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
|
|
44
|
+
React__default["default"].createElement("input", tslib_es6.__assign({}, getInputProps())),
|
|
45
|
+
variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
|
|
46
|
+
React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
|
|
47
|
+
size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "greyBlue" }, hintText)))),
|
|
48
|
+
variation === "button" && (React__default["default"].createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))));
|
|
49
|
+
function handleDrop(acceptedFiles) {
|
|
50
|
+
acceptedFiles.forEach(function (file) {
|
|
51
|
+
uploadFile(file);
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
function uploadFile(file) {
|
|
55
|
+
return tslib_es6.__awaiter(this, void 0, void 0, function () {
|
|
56
|
+
var _a, url, _b, key, _c, fields, _d, httpMethod, fileUpload, handleUploadProgress, handleUploadComplete, axiosConfig;
|
|
57
|
+
return tslib_es6.__generator(this, function (_e) {
|
|
58
|
+
switch (_e.label) {
|
|
59
|
+
case 0: return [4 /*yield*/, getUploadParams(file)];
|
|
60
|
+
case 1:
|
|
61
|
+
_a = _e.sent(), url = _a.url, _b = _a.key, key = _b === void 0 ? uuid.v1() : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c, _d = _a.httpMethod, httpMethod = _d === void 0 ? "POST" : _d;
|
|
62
|
+
fileUpload = getFileUpload(file, key);
|
|
63
|
+
onUploadStart && onUploadStart(tslib_es6.__assign({}, fileUpload));
|
|
64
|
+
handleUploadProgress = function (progressEvent) {
|
|
65
|
+
onUploadProgress &&
|
|
66
|
+
onUploadProgress(tslib_es6.__assign(tslib_es6.__assign({}, fileUpload), { progress: progressEvent.loaded / progressEvent.total }));
|
|
67
|
+
};
|
|
68
|
+
handleUploadComplete = function () {
|
|
69
|
+
onUploadComplete === null || onUploadComplete === void 0 ? void 0 : onUploadComplete(tslib_es6.__assign(tslib_es6.__assign({}, fileUpload), { progress: 1 }));
|
|
70
|
+
};
|
|
71
|
+
axiosConfig = createAxiosConfig({
|
|
72
|
+
url: url,
|
|
73
|
+
httpMethod: httpMethod,
|
|
74
|
+
fields: fields,
|
|
75
|
+
file: file,
|
|
76
|
+
handleUploadProgress: handleUploadProgress,
|
|
77
|
+
});
|
|
78
|
+
axios__default["default"].request(axiosConfig).then(handleUploadComplete);
|
|
79
|
+
return [2 /*return*/];
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
function createAxiosConfig(_a) {
|
|
86
|
+
var url = _a.url, _b = _a.httpMethod, httpMethod = _b === void 0 ? "POST" : _b, _c = _a.fields, fields = _c === void 0 ? {} : _c, file = _a.file, handleUploadProgress = _a.handleUploadProgress;
|
|
87
|
+
var data;
|
|
88
|
+
var headers;
|
|
89
|
+
if (httpMethod === "POST") {
|
|
90
|
+
var formData_1 = new FormData();
|
|
91
|
+
Object.entries(fields).forEach(function (_a) {
|
|
92
|
+
var _b = tslib_es6.__read(_a, 2), field = _b[0], value = _b[1];
|
|
93
|
+
return formData_1.append(field, value);
|
|
94
|
+
});
|
|
95
|
+
formData_1.append("file", file);
|
|
96
|
+
data = formData_1;
|
|
97
|
+
headers = { "X-Requested-With": "XMLHttpRequest" };
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
data = file;
|
|
101
|
+
headers = fields;
|
|
102
|
+
}
|
|
103
|
+
return {
|
|
104
|
+
method: httpMethod,
|
|
105
|
+
url: url,
|
|
106
|
+
headers: headers,
|
|
107
|
+
data: data,
|
|
108
|
+
onUploadProgress: handleUploadProgress,
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
function getLabels(providedButtonLabel, multiple, allowedTypes) {
|
|
112
|
+
var buttonLabel = multiple ? "Upload Files" : "Upload File";
|
|
113
|
+
var hintText = multiple
|
|
114
|
+
? "or drag files here to upload"
|
|
115
|
+
: "or drag a file here to upload";
|
|
116
|
+
if (allowedTypes === "images" || allowedTypes === "basicImages") {
|
|
117
|
+
buttonLabel = multiple ? "Upload Images" : "Upload Image";
|
|
118
|
+
hintText = multiple
|
|
119
|
+
? "or drag images here to upload"
|
|
120
|
+
: "or drag an image here to upload";
|
|
121
|
+
}
|
|
122
|
+
if (providedButtonLabel)
|
|
123
|
+
buttonLabel = providedButtonLabel;
|
|
124
|
+
return { buttonLabel: buttonLabel, hintText: hintText };
|
|
125
|
+
}
|
|
126
|
+
function getFileUpload(file, key) {
|
|
127
|
+
return {
|
|
128
|
+
key: key,
|
|
129
|
+
name: file.name,
|
|
130
|
+
type: file.type,
|
|
131
|
+
size: file.size,
|
|
132
|
+
progress: 0,
|
|
133
|
+
src: getSrc,
|
|
134
|
+
};
|
|
135
|
+
function getSrc() {
|
|
136
|
+
var promise = new Promise(function (resolve, reject) {
|
|
137
|
+
var reader = new FileReader();
|
|
138
|
+
reader.onload = function (event) {
|
|
139
|
+
if (event.target &&
|
|
140
|
+
event.target.result &&
|
|
141
|
+
typeof event.target.result === "string") {
|
|
142
|
+
resolve(event.target.result);
|
|
143
|
+
}
|
|
144
|
+
else {
|
|
145
|
+
reject("Could not generate file data url.");
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
reader.readAsDataURL(file);
|
|
149
|
+
});
|
|
150
|
+
return promise;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* Upsert a given `FileUpload` into an array of `FileUpload`s.
|
|
155
|
+
* `key` is used to uniquely identify files.
|
|
156
|
+
*
|
|
157
|
+
* @param updatedFile FileUpload File that was updated.
|
|
158
|
+
* @param files Existing array of FileUploads.
|
|
159
|
+
* @returns FileUpload[] updated set of files.
|
|
160
|
+
*/
|
|
161
|
+
function updateFiles(updatedFile, files) {
|
|
162
|
+
var newFiles = tslib_es6.__spread(files);
|
|
163
|
+
var index = files.findIndex(function (file) { return file.key === updatedFile.key; });
|
|
164
|
+
if (index !== -1) {
|
|
165
|
+
newFiles[index] = updatedFile;
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
168
|
+
newFiles.push(updatedFile);
|
|
169
|
+
}
|
|
170
|
+
return newFiles;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
exports.InputFile = InputFile;
|
|
174
|
+
exports.updateFiles = updateFiles;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ReactElement } from "react";
|
|
2
|
-
interface InputGroupProps {
|
|
3
|
-
readonly children: ReactElement | ReactElement[];
|
|
4
|
-
/**
|
|
5
|
-
* Determine the direction the fields are laid out in.
|
|
6
|
-
* @default "vertical"
|
|
7
|
-
*/
|
|
8
|
-
readonly flowDirection?: "horizontal" | "vertical";
|
|
9
|
-
}
|
|
10
|
-
export declare function InputGroup({ children, flowDirection, }: InputGroupProps): JSX.Element;
|
|
11
|
-
export {};
|
|
1
|
+
import { ReactElement } from "react";
|
|
2
|
+
interface InputGroupProps {
|
|
3
|
+
readonly children: ReactElement | ReactElement[];
|
|
4
|
+
/**
|
|
5
|
+
* Determine the direction the fields are laid out in.
|
|
6
|
+
* @default "vertical"
|
|
7
|
+
*/
|
|
8
|
+
readonly flowDirection?: "horizontal" | "vertical";
|
|
9
|
+
}
|
|
10
|
+
export declare function InputGroup({ children, flowDirection, }: InputGroupProps): JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { InputGroup } from "./InputGroup";
|
|
1
|
+
export { InputGroup } from "./InputGroup";
|
package/dist/InputGroup/index.js
CHANGED
|
@@ -2,33 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
-
|
|
7
5
|
var React = require('react');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
6
|
+
var classnames = require('classnames');
|
|
7
|
+
var styleInject_es = require('../style-inject.es-dcee06b6.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
11
13
|
|
|
12
14
|
var css = "._1UKIybTcnyfJQlTx901rF5 > *:not(:last-child) {\n margin-bottom: -1px !important;\n}\n\n._26qQBed5Rzu9i2ZIDEaESr {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n\n._26qQBed5Rzu9i2ZIDEaESr > *:not(:last-child) {\n margin-bottom: auto;\n margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group */\n\n._3kywSyvvwSdmNSTOqX-AQA {\n --public-field--top-left-radius: 0;\n --public-field--top-right-radius: 0;\n --public-field--bottom-left-radius: 0;\n --public-field--bottom-right-radius: 0;\n}\n\n._1UKIybTcnyfJQlTx901rF5 > :first-child:not(._26qQBed5Rzu9i2ZIDEaESr) {\n --public-field--top-left-radius: var(--radius-base);\n --public-field--top-right-radius: var(--radius-base);\n}\n\n._1UKIybTcnyfJQlTx901rF5 > :last-child:not(._26qQBed5Rzu9i2ZIDEaESr) {\n --public-field--bottom-left-radius: var(--radius-base);\n --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n._26qQBed5Rzu9i2ZIDEaESr:first-child > :first-child {\n --public-field--top-left-radius: var(--radius-base);\n}\n\n._26qQBed5Rzu9i2ZIDEaESr:first-child > :last-child {\n --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n._26qQBed5Rzu9i2ZIDEaESr:last-child > :first-child {\n --public-field--bottom-left-radius: var(--radius-base);\n}\n\n._26qQBed5Rzu9i2ZIDEaESr:last-child > :last-child {\n --public-field--bottom-right-radius: var(--radius-base);\n}\n";
|
|
13
15
|
var styles = {"vertical":"_1UKIybTcnyfJQlTx901rF5","horizontal":"_26qQBed5Rzu9i2ZIDEaESr","inputGroup":"_3kywSyvvwSdmNSTOqX-AQA"};
|
|
14
|
-
|
|
16
|
+
styleInject_es.styleInject(css);
|
|
15
17
|
|
|
16
|
-
function InputGroup(_a) {
|
|
17
|
-
var children = _a.children, _b = _a.flowDirection, flowDirection = _b === void 0 ? "vertical" : _b;
|
|
18
|
-
if (isInvalidGroupNesting(children))
|
|
19
|
-
return React__default.createElement(React__default.Fragment, null);
|
|
20
|
-
var className =
|
|
21
|
-
return React__default.createElement("div", { className: className }, children);
|
|
22
|
-
}
|
|
23
|
-
function isInvalidGroupNesting(childs) {
|
|
24
|
-
return React__default.Children.toArray(childs).some(function (child) {
|
|
25
|
-
if (child.type === InputGroup &&
|
|
26
|
-
child.props.flowDirection != "horizontal") {
|
|
27
|
-
console.error("ERROR: InputGroup not rendered: nesting 'flowDirection=\"vertical\"' columns not supported.", "https://atlantis.getjobber.com/components/input-group#nested-example");
|
|
28
|
-
return true;
|
|
29
|
-
}
|
|
30
|
-
return false;
|
|
31
|
-
});
|
|
18
|
+
function InputGroup(_a) {
|
|
19
|
+
var children = _a.children, _b = _a.flowDirection, flowDirection = _b === void 0 ? "vertical" : _b;
|
|
20
|
+
if (isInvalidGroupNesting(children))
|
|
21
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null);
|
|
22
|
+
var className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
|
|
23
|
+
return React__default["default"].createElement("div", { className: className }, children);
|
|
24
|
+
}
|
|
25
|
+
function isInvalidGroupNesting(childs) {
|
|
26
|
+
return React__default["default"].Children.toArray(childs).some(function (child) {
|
|
27
|
+
if (child.type === InputGroup &&
|
|
28
|
+
child.props.flowDirection != "horizontal") {
|
|
29
|
+
console.error("ERROR: InputGroup not rendered: nesting 'flowDirection=\"vertical\"' columns not supported.", "https://atlantis.getjobber.com/components/input-group#nested-example");
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
return false;
|
|
33
|
+
});
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
exports.InputGroup = InputGroup;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
3
|
-
interface InputNumberProps extends CommonFormFieldProps, Pick<FormFieldProps, "maxLength" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "readonly" | "defaultValue"> {
|
|
4
|
-
value?: number;
|
|
5
|
-
}
|
|
6
|
-
export interface InputNumberRef {
|
|
7
|
-
blur(): void;
|
|
8
|
-
focus(): void;
|
|
9
|
-
}
|
|
10
|
-
export declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputNumberRef>>;
|
|
11
|
-
export {};
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
3
|
+
interface InputNumberProps extends CommonFormFieldProps, Pick<FormFieldProps, "maxLength" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "readonly" | "defaultValue"> {
|
|
4
|
+
value?: number;
|
|
5
|
+
}
|
|
6
|
+
export interface InputNumberRef {
|
|
7
|
+
blur(): void;
|
|
8
|
+
focus(): void;
|
|
9
|
+
}
|
|
10
|
+
export declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputNumberRef>>;
|
|
11
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { InputNumber, InputNumberRef } from "./InputNumber";
|
|
1
|
+
export { InputNumber, InputNumberRef } from "./InputNumber";
|
|
@@ -2,63 +2,64 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var __chunk_1 = require('../chunk-b67af3cb.js');
|
|
5
|
+
var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
|
|
8
6
|
var React = require('react');
|
|
9
|
-
var
|
|
10
|
-
require('../chunk-17e02351.js');
|
|
11
|
-
require('classnames');
|
|
12
|
-
require('../Typography/index.js');
|
|
13
|
-
require('../Text/index.js');
|
|
14
|
-
require('@jobber/design');
|
|
15
|
-
require('../Icon/index.js');
|
|
7
|
+
var FormField = require('../FormField-a92c7bac.js');
|
|
16
8
|
require('uuid');
|
|
17
9
|
require('react-hook-form');
|
|
18
|
-
|
|
10
|
+
require('../style-inject.es-dcee06b6.js');
|
|
11
|
+
require('classnames');
|
|
12
|
+
require('../Button-5b2f1636.js');
|
|
19
13
|
require('react-router-dom');
|
|
20
|
-
require('../
|
|
14
|
+
require('../Icon-d5ad1a6d.js');
|
|
15
|
+
require('@jobber/design');
|
|
16
|
+
require('../Typography-7e542a72.js');
|
|
17
|
+
require('../Text-9bc093e9.js');
|
|
18
|
+
require('../InputValidation-24d3621a.js');
|
|
21
19
|
require('framer-motion');
|
|
22
|
-
require('../
|
|
23
|
-
|
|
20
|
+
require('../Spinner-18d3dee6.js');
|
|
21
|
+
|
|
22
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
|
+
|
|
24
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
25
|
|
|
25
|
-
function InputNumberInternal(props, ref) {
|
|
26
|
-
var inputRef = React.createRef();
|
|
27
|
-
React.useImperativeHandle(ref, function () { return ({
|
|
28
|
-
blur: function () {
|
|
29
|
-
var input = inputRef.current;
|
|
30
|
-
if (input) {
|
|
31
|
-
input.blur();
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
focus: function () {
|
|
35
|
-
var input = inputRef.current;
|
|
36
|
-
if (input) {
|
|
37
|
-
input.focus();
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
}); });
|
|
41
|
-
return (React__default.createElement(
|
|
42
|
-
function handleChange(newValue) {
|
|
43
|
-
props.onChange && props.onChange(newValue);
|
|
44
|
-
}
|
|
45
|
-
function getOverLimitMessage(value) {
|
|
46
|
-
var isOverMax = props.max != undefined && value && value > props.max;
|
|
47
|
-
var isUnderMin = props.min != undefined && value && value < props.min;
|
|
48
|
-
if (isOverMax || isUnderMin || (value && value.toString() === "")) {
|
|
49
|
-
if (props.min != undefined && props.max === undefined) {
|
|
50
|
-
return "Enter a number that is greater than or equal to " + props.min;
|
|
51
|
-
}
|
|
52
|
-
else if (props.max != undefined && props.min === undefined) {
|
|
53
|
-
return "Enter a number that is less than or equal to " + props.max;
|
|
54
|
-
}
|
|
55
|
-
else if (props.min != undefined && props.max != undefined) {
|
|
56
|
-
return "Enter a number between " + props.min + " and " + props.max;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
return true;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
26
|
+
function InputNumberInternal(props, ref) {
|
|
27
|
+
var inputRef = React.createRef();
|
|
28
|
+
React.useImperativeHandle(ref, function () { return ({
|
|
29
|
+
blur: function () {
|
|
30
|
+
var input = inputRef.current;
|
|
31
|
+
if (input) {
|
|
32
|
+
input.blur();
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
focus: function () {
|
|
36
|
+
var input = inputRef.current;
|
|
37
|
+
if (input) {
|
|
38
|
+
input.focus();
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
}); });
|
|
42
|
+
return (React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: tslib_es6.__assign(tslib_es6.__assign({}, props.validations), { validate: getOverLimitMessage }) })));
|
|
43
|
+
function handleChange(newValue) {
|
|
44
|
+
props.onChange && props.onChange(newValue);
|
|
45
|
+
}
|
|
46
|
+
function getOverLimitMessage(value) {
|
|
47
|
+
var isOverMax = props.max != undefined && value && value > props.max;
|
|
48
|
+
var isUnderMin = props.min != undefined && value && value < props.min;
|
|
49
|
+
if (isOverMax || isUnderMin || (value && value.toString() === "")) {
|
|
50
|
+
if (props.min != undefined && props.max === undefined) {
|
|
51
|
+
return "Enter a number that is greater than or equal to " + props.min;
|
|
52
|
+
}
|
|
53
|
+
else if (props.max != undefined && props.min === undefined) {
|
|
54
|
+
return "Enter a number that is less than or equal to " + props.max;
|
|
55
|
+
}
|
|
56
|
+
else if (props.min != undefined && props.max != undefined) {
|
|
57
|
+
return "Enter a number between " + props.min + " and " + props.max;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return true;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
62
63
|
var InputNumber = React.forwardRef(InputNumberInternal);
|
|
63
64
|
|
|
64
65
|
exports.InputNumber = InputNumber;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
2
|
-
interface InputPasswordProps extends CommonFormFieldProps, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "defaultValue"> {
|
|
3
|
-
value?: string;
|
|
4
|
-
onChange?(newValue: string): void;
|
|
5
|
-
/**
|
|
6
|
-
* Display toggle to change the visibility of the password input
|
|
7
|
-
* @default false
|
|
8
|
-
*/
|
|
9
|
-
hasVisibility?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export declare function InputPassword(props: InputPasswordProps): JSX.Element;
|
|
12
|
-
export {};
|
|
1
|
+
import { CommonFormFieldProps, FormFieldProps } from "../FormField";
|
|
2
|
+
interface InputPasswordProps extends CommonFormFieldProps, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "defaultValue"> {
|
|
3
|
+
value?: string;
|
|
4
|
+
onChange?(newValue: string): void;
|
|
5
|
+
/**
|
|
6
|
+
* Display toggle to change the visibility of the password input
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
hasVisibility?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare function InputPassword(props: InputPasswordProps): JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { InputPassword } from "./InputPassword";
|
|
1
|
+
export { InputPassword } from "./InputPassword";
|